/* ============================================================================
   Synapse v2 · views.css
   Apple-language styling for every v2 surface: the view-switcher chrome
   (segmented control + New pill + settings + token popover), the .view
   show/hide + per-view scroll containers, the Missions kanban, the Memory
   two-pane, the read-only Dashboard, and the Builder modal.

   Single owner of the v2 view class names (CONTRACT-v2 §2). Consumes ONLY the
   tokens in css/tokens.css — no inline hex, no gradients. ONE soft elevation
   (--shadow-product), used on cards/sheets/the modal, sparingly. Status &
   priority tints stay restrained (color-mix over the entity palette). Active
   press scale(.96) inherits from the tokens reset. Mobile-first; ≤900 / ≤480
   collapse to stacks / sheets with 44px touch targets.

   Pairs with: app.css (v1 header/stage/sidebar/graph/profile + .btn-*/.status-*),
   missions.js, memory.js, dashboard.js, builder.js (exact class names matched).
   All demo content is synthetic (Areta), ISO-8601 dates.
   ============================================================================ */

/* ============================================================================
   0 · Views — stacked surfaces inside main.stage; one shown at a time
   app.css makes main.stage a flex row (the GRAPH view keeps that internal
   layout: sidebar | graph | profile). The other three views are full-width
   scroll containers. setView() flips data-active; CSS hides the rest.
   ============================================================================ */
.view {
  display: none;
  min-width: 0;
}
.view[data-active="true"] {
  display: block;
}

/* The graph view is the v1 flex row (sidebar + graph + profile) — restore the
   row layout app.css expects, and let its children own scrolling. */
#view-graph[data-active="true"] {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

/* Missions / Memory / Dashboard: each becomes the scroll container, full width,
   with a centered max-width inner wrap and generous Apple whitespace. */
#view-missions,
#view-memory,
#view-dashboard {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--canvas);
}
#view-missions[data-active="true"],
#view-dashboard[data-active="true"] {
  display: block;
}
/* Memory is a two-pane flex surface — it manages its own panes' scroll. */
#view-memory[data-active="true"] {
  display: block;
  overflow: hidden;        /* the inner .mem-shell owns scrolling */
}

/* Shared centered wrap (used by missions + dashboard inner shells). */
.missions-wrap,
.dash-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-xl) var(--s-lg) var(--s-xxl);
}

/* Scrollbar polish, matching app.css's two scroll regions. */
#view-missions::-webkit-scrollbar,
#view-dashboard::-webkit-scrollbar,
.mem-scope-list::-webkit-scrollbar,
.mem-list::-webkit-scrollbar,
.builder-body::-webkit-scrollbar,
.builder-lib-list::-webkit-scrollbar {
  width: 8px;
}
#view-missions::-webkit-scrollbar-thumb,
#view-dashboard::-webkit-scrollbar-thumb,
.mem-scope-list::-webkit-scrollbar-thumb,
.mem-list::-webkit-scrollbar-thumb,
.builder-body::-webkit-scrollbar-thumb,
.builder-lib-list::-webkit-scrollbar-thumb {
  background: var(--chip);
  border-radius: var(--r-pill);
  border: 2px solid var(--canvas);
}

/* ============================================================================
   1 · View-switcher — .view-switch segmented control (centered in header.top)
   Pill track on parchment; the active tab is a white card (Apple segmented).
   ============================================================================ */
.view-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: var(--glass-border);
  box-shadow: var(--glass-edge);
}
.view-switch-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-48);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.view-switch-btn:hover {
  color: var(--ink-80);
}
/* premium leading icon (window.FabIcon) on each tab; label sits beside it */
.view-switch-btn { gap: 7px; }
.view-switch-btn .vs-icon { display: inline-flex; flex: 0 0 auto; }
.view-switch-btn .vs-icon .fab-icon { width: 16px; height: 16px; }
.view-switch-btn[aria-selected="true"],
.view-switch-btn[aria-pressed="true"] {
  color: var(--ink);
  background: var(--canvas);
  border-color: var(--divider);
  box-shadow: var(--glass-edge), var(--shadow-sm);   /* lit edge + tiny seat shadow */
}
.view-switch-btn[aria-selected="true"] .vs-icon { color: var(--blue); }
.view-switch-btn:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
}

/* ============================================================================
   2 · Header actions owned here — #new-btn (blue pill) + #settings-btn (icon)
   app.css owns .legend-toggle; these two are v2 additions.
   ============================================================================ */
.new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xxs);
  height: 40px;
  min-width: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--canvas);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  transition: background .16s ease, border-color .16s ease;
}
.new-btn:hover {
  background: var(--blue-focus);
  border-color: var(--blue-focus);
}
.new-btn .new-glyph {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.new-btn .new-label {
  white-space: nowrap;
}

.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: var(--glass-border);
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  color: var(--ink-80);
  box-shadow: var(--glass-edge);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.settings-btn:hover {
  background: var(--parchment);
  border-color: var(--chip);
}
.settings-btn[aria-expanded="true"] {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--hairline));
}
.settings-btn .settings-glyph {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.new-btn:focus-visible,
.settings-btn:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
}

/* ============================================================================
   3 · Token popover — anchored under #settings-btn (built in app.js)
   ============================================================================ */
.token-popover {
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: var(--s-md);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-edge), var(--shadow-lg);   /* lit edge + popover elevation */
  z-index: 60;
}
.token-popover-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.token-popover-hint {
  margin-top: var(--s-xxs);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-48);
}
.token-popover-input {
  width: 100%;
  height: 40px;
  margin-top: var(--s-sm);
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--pearl);
  color: var(--ink);
  font-size: var(--fs-caption);
}
.token-popover-input:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
  background: var(--canvas);
}
.token-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-xs);
  margin-top: var(--s-md);
}
.token-popover-save,
.token-popover-clear {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.token-popover-save {
  background: var(--blue);
  color: var(--canvas);
  border: 1px solid var(--blue);
}
.token-popover-save:hover {
  background: var(--blue-focus);
  border-color: var(--blue-focus);
}
.token-popover-clear {
  background: transparent;
  color: var(--ink-80);
  border: 1px solid var(--hairline);
}
.token-popover-clear:hover {
  background: var(--parchment);
  border-color: var(--chip);
}

/* fabius provider key-vault — inside the settings popover. A configured-dot + a
   per-provider key field. Keys are localStorage-only (sent per-request, never
   persisted server-side). The dot lights for env-wired OR locally-saved keys. */
.provider-vault {
  margin-top: var(--s-md);
  padding-top: var(--s-md);
  border-top: 1px solid var(--hairline);
}
.provider-vault-head {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: var(--ls-caption);
}
.provider-vault-hint {
  margin: 4px 0 var(--s-sm);
  font-size: var(--fs-fine);
  line-height: 1.4;
  color: var(--ink-48);
}
.provider-row {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin-bottom: 6px;
}
.provider-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--chip);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.provider-dot.is-on {
  background: var(--live);
  box-shadow: 0 0 6px color-mix(in srgb, var(--live) 50%, transparent);
}
.provider-label {
  flex: 0 0 92px;
  font-size: var(--fs-fine);
  color: var(--ink-80);
}
.provider-key-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  font-size: var(--fs-fine);
  color: var(--ink);
}
.provider-key-input:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
}

/* ============================================================================
   4 · Missions — header, toolbar, board (Kanban), list/table, edit sheet
   ============================================================================ */

/* --- 4.1 head + view toggle (Board / List segmented) --------------------- */
.missions-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-md);
  margin-bottom: var(--s-lg);
}
.missions-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-semibold);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.missions-sub {
  margin-top: 4px;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
}

.missions-viewtoggle {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--parchment);
  border: 1px solid var(--hairline);
}
.missions-viewbtn {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-48);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  transition: color .16s ease, background .16s ease;
}
.missions-viewbtn:hover { color: var(--ink-80); }
.missions-viewbtn[data-active="true"] {
  color: var(--ink);
  background: var(--canvas);
  border-color: var(--divider);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* --- 4.2 toolbar: filter selects + New-mission trigger ------------------- */
.missions-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-bottom: var(--s-lg);
}
.missions-toolbar-spacer { flex: 1 1 auto; }

.missions-filter { display: inline-flex; }
.missions-select {
  height: 38px;
  padding: 0 34px 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink-80);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  cursor: pointer;
  /* hand-drawn chevron via a token-tinted SVG (no extra asset) */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.missions-select:hover { border-color: var(--chip); }
.missions-select:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
}

.missions-newbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--canvas);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  transition: background .16s ease, border-color .16s ease;
}
.missions-newbtn:hover { background: var(--blue-focus); border-color: var(--blue-focus); }
.missions-newicon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* --- 4.3 inline "+ New mission" form host -------------------------------- */
.missions-formhost {
  margin-bottom: var(--s-lg);
}
.missions-formhost[hidden] { display: none; }

/* --- 4.4 board (Kanban) -------------------------------------------------- */
.missions-board {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-md);
  align-items: start;
}
.missions-board[data-active="true"] { display: grid; }

.mcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-lg);
  background: var(--parchment);
  border: 1px solid var(--hairline);
  padding: var(--s-sm);
}
.mcol-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px var(--s-xs) var(--s-sm);
}
.mcol-title {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.mcol-count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  border: 1px solid var(--divider);
  color: var(--ink-48);
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  text-align: center;
}
.mcol-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  min-height: 60px;
  padding: 2px;
  border-radius: var(--r-md);
  transition: background .16s ease, box-shadow .16s ease;
}
/* drag-over drop target */
.mcol-body[data-dropactive="true"] {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 38%, transparent);
}
.mcol-empty {
  padding: var(--s-md) var(--s-xs);
  text-align: center;
  font-size: var(--fs-caption);
}

/* --- 4.5 mission card ---------------------------------------------------- */
.mcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-sm);
  border-radius: var(--r-md);
  /* Translucent glass tint + lit border, but NO per-card backdrop-filter: the board
     is high-cardinality + draggable + scrolling, and the blur reads as ~nothing over
     the solid card bg — pure GPU cost / jank risk. Frost stays on the chrome. */
  background: var(--glass-bg-soft);
  border: var(--glass-border);
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
.mcard:hover {
  box-shadow: var(--shadow-product);     /* the one soft shadow, on hover */
  border-color: var(--divider);
}
.mcard:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
}
.mcard[data-dragging="true"] {
  opacity: .5;
  box-shadow: var(--shadow-product);
}
.mcard-top {
  display: flex;
  align-items: flex-start;
  gap: var(--s-xs);
}
/* priority dot — restrained tints over the palette */
.mcard-prio {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--chip);
}
.mcard-prio[data-priority="urgent"]  { background: var(--t-agent); }
.mcard-prio[data-priority="high"]    { background: var(--t-project); }
.mcard-prio[data-priority="medium"]  { background: var(--t-person); }
.mcard-prio[data-priority="low"]     { background: var(--chip); }
.mcard-title {
  flex: 1 1 auto;
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  line-height: 1.3;
  letter-spacing: var(--ls-caption);
  color: var(--ink);
}

.mcard-project {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--pearl);
  border: 1px solid var(--divider);
  color: var(--ink-48);
  font-size: var(--fs-fine);
  letter-spacing: 0;
}
.mcard-project > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcard-projecticon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* progress bar */
.mcard-progress {
  position: relative;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--divider);
  overflow: hidden;
}
.mcard-progress--sm { height: 4px; min-width: 64px; }
.mcard-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--blue);
  transition: width .3s cubic-bezier(.32, .72, 0, 1);
}

.mcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs);
}
.mcard-pct {
  flex: 0 0 auto;
  font-size: var(--fs-fine);
  letter-spacing: 0;
}
/* Conduct button — opens the Conductor with this mission (CONTRACT-v5 link). */
.mcard-conduct {
  flex: 0 0 auto;
  margin-left: auto;
  height: 28px;
  padding: 0 12px;
  font-family: var(--font-text);
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.mcard-conduct:hover { background: color-mix(in srgb, var(--blue) 16%, var(--canvas)); }
.mcard-conduct:active { transform: scale(.96); }
.mcard-conduct:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }

/* assignee chip (clickable → graph select) */
.mcard-assignee {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  max-width: 70%;
  padding: 2px 8px 2px 2px;
  border-radius: var(--r-pill);
  background: var(--pearl);
  border: 1px solid var(--divider);
  color: var(--ink-80);
  font-size: var(--fs-fine);
  letter-spacing: 0;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.mcard-assignee:hover {
  background: var(--parchment);
  border-color: var(--chip);
}
.mcard-assignee--none {
  cursor: default;
  color: var(--ink-48);
}
.mcard-assignee--none:hover { background: var(--pearl); border-color: var(--divider); }
.mcard-avatar {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--parchment);
}
.mcard-avatar--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-48);
  border: 1px solid var(--divider);
}
.mcard-assignee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 4.6 list / table view ----------------------------------------------- */
.missions-listview {
  display: none;
}
.missions-listview[data-active="true"] { display: block; }

.missions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.missions-table thead th {
  text-align: left;
  padding: 0 var(--s-sm) var(--s-xs);
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-48);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.missions-row {
  cursor: pointer;
  transition: background .14s ease;
}
.missions-row:hover { background: var(--parchment); }
.missions-row:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: -2px;
}
.missions-table tbody td {
  padding: var(--s-sm);
  border-bottom: 1px solid var(--divider);
  color: var(--ink-80);
  vertical-align: middle;
}
.missions-cell-title {
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.missions-cell-project { color: var(--ink-48); }

/* status badge — same family as app.css status pills, scoped to the table */
.missions-statusbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  height: 24px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  background: var(--pearl);
  border: 1px solid var(--divider);
  color: var(--ink-80);
}
.missions-statusbadge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.missions-statusbadge[data-status="backlog"] {
  color: var(--ink-48);
}
.missions-statusbadge[data-status="in_progress"] {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--canvas));
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}
.missions-statusbadge[data-status="review"] {
  color: var(--t-agent);
  background: color-mix(in srgb, var(--t-agent) 9%, var(--canvas));
  border-color: color-mix(in srgb, var(--t-agent) 20%, transparent);
}
.missions-statusbadge[data-status="done"] {
  color: var(--t-workflow);
  background: color-mix(in srgb, var(--t-workflow) 9%, var(--canvas));
  border-color: color-mix(in srgb, var(--t-workflow) 20%, transparent);
}

/* priority label cell (reuses .mcard-prio dot) */
.missions-priolabel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  color: var(--ink-80);
}
.missions-priolabel .mcard-prio { margin-top: 0; }

.missions-empty {
  padding: var(--s-xl);
  text-align: center;
  font-size: var(--fs-caption);
}

/* --- 4.7 mission form (inline + edit panel) ------------------------------ */
.missions-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-lg);
  border-radius: var(--r-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-product);
}
.missions-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-md);
}
.missions-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.missions-field-label {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.missions-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--pearl);
  color: var(--ink);
  font-size: var(--fs-caption);
}
select.missions-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.missions-input:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
  background: var(--canvas);
}
.missions-range {
  width: 100%;
  accent-color: var(--blue);
}
.missions-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-xs);
}
.missions-form-actions--edit {
  justify-content: space-between;
}
.missions-form-actions-right {
  display: flex;
  gap: var(--s-xs);
}
.missions-form-save {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--canvas);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  transition: background .16s ease, border-color .16s ease;
}
.missions-form-save:hover:not([disabled]) { background: var(--blue-focus); border-color: var(--blue-focus); }
.missions-form-save[disabled] { opacity: .55; cursor: default; }
.missions-form-cancel {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-80);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  transition: background .16s ease, border-color .16s ease;
}
.missions-form-cancel:hover { background: var(--parchment); border-color: var(--chip); }
.missions-form-delete {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--t-agent) 40%, var(--hairline));
  color: var(--t-agent);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  transition: background .16s ease;
}
.missions-form-delete:hover { background: color-mix(in srgb, var(--t-agent) 8%, transparent); }

/* --- 4.8 edit panel (slide-over sheet) ----------------------------------- */
.missions-panelhost[hidden] { display: none; }
.missions-panel-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--black) 28%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 44;
}
.missions-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 92vw;
  z-index: 45;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);   /* slide-over sheet → top elevation */
  animation: panel-in .26s var(--ease-out);
}
@keyframes panel-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.missions-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-lg) var(--s-lg) var(--s-md);
  border-bottom: 1px solid var(--divider);
}
.missions-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-tagline);
  font-weight: var(--w-semibold);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.missions-panel-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  color: var(--ink-80);
  transition: background .14s ease;
}
.missions-panel-close:hover { background: var(--chip); }
.missions-panel-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* the form inside the panel scrolls, sheds its own card chrome */
.missions-form--panel {
  flex: 1 1 auto;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--canvas);
}

/* ============================================================================
   5 · Memory — two-pane (scope list + entries), kind chips, remember form
   ============================================================================ */
.mem-shell {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* --- 5.1 left pane: scope selector --------------------------------------- */
.mem-scopes {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--s-lg);
  background: var(--canvas);
  border-right: 1px solid var(--hairline);
}
.mem-scopes-title {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-48);
  margin-bottom: var(--s-sm);
}
.mem-scope-search {
  position: relative;
  margin-bottom: var(--s-sm);
}
.mem-scope-search-icon,
.mem-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-48);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  pointer-events: none;
}
.mem-scope-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--pearl);
  color: var(--ink);
  font-size: var(--fs-caption);
}
.mem-scope-input:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
  background: var(--canvas);
}
.mem-scope-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 calc(-1 * var(--s-xs));
  padding: 0 var(--s-xs);
}
.mem-scope-section {
  padding: var(--s-sm) var(--s-xs) 4px;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mem-scope-noresult { padding: var(--s-md) var(--s-xs); }

.mem-scope-row {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  width: 100%;
  padding: var(--s-xs);
  border-radius: var(--r-sm);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: background .14s ease;
}
.mem-scope-row:hover { background: var(--parchment); }
.mem-scope-row.is-active {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.mem-scope-row.is-active .mem-scope-name { color: var(--blue); }
.mem-scope-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--swatch, var(--chip));
}
.mem-scope-emoji {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--canvas);
  background: var(--tile, var(--t-agent));
}
.mem-scope-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mem-scope-name {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-scope-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-scope-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--pearl);
  border: 1px solid var(--divider);
  color: var(--ink-48);
  font-weight: var(--w-semibold);
  text-align: center;
}

/* --- 5.2 right pane: header + search + entries + form -------------------- */
.mem-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-xl) var(--s-xl) var(--s-xxl);
}
.mem-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-md);
  flex-wrap: wrap;
  margin-bottom: var(--s-lg);
}
.mem-head-title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--w-semibold);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.mem-head-sub {
  margin-top: 2px;
}
.mem-head-tools {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}
.mem-search {
  position: relative;
}
.mem-search-input {
  width: 240px;
  max-width: 46vw;
  height: 38px;
  padding: 0 12px 0 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--fs-caption);
}
.mem-search-input:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
}
.mem-add-btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--canvas);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  transition: background .16s ease, border-color .16s ease;
}
.mem-add-btn:hover { background: var(--blue-focus); border-color: var(--blue-focus); }
.mem-add-btn[aria-expanded="true"] {
  background: transparent;
  color: var(--blue);
}

/* --- 5.3 remember form --------------------------------------------------- */
.mem-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  margin-bottom: var(--s-lg);
  padding: var(--s-lg);
  border-radius: var(--r-lg);
  background: var(--pearl);
  border: 1px solid var(--hairline);
}
.mem-form[hidden] { display: none; }
.mem-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-md);
}
.mem-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mem-field-label {
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mem-input {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.mem-input-area {
  resize: vertical;
  min-height: 72px;
  font-family: var(--font-text);
}
.mem-input-select {
  -webkit-appearance: none;
  appearance: none;
  height: 40px;
  padding: 0 34px 0 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.mem-input:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
}
.mem-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-xs);
}
.mem-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.mem-btn-primary {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--canvas);
}
.mem-btn-primary:hover:not([disabled]) { background: var(--blue-focus); border-color: var(--blue-focus); }
.mem-btn-primary[disabled] { opacity: .55; cursor: default; }
.mem-btn-ghost {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-80);
}
.mem-btn-ghost:hover { background: var(--canvas); border-color: var(--chip); }
.mem-form-error {
  color: var(--t-agent);
  font-size: var(--fs-caption);
}
.mem-form-error[hidden] { display: none; }

/* --- 5.4 entries list ---------------------------------------------------- */
.mem-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  transition: opacity .16s ease;
}
.mem-list.is-loading { opacity: .5; }

.mem-entry {
  padding: var(--s-md);
  border-radius: var(--r-md);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  transition: box-shadow .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.mem-entry:hover {
  box-shadow: var(--shadow-product);
  border-color: var(--divider);
}
.mem-entry.is-removing {
  opacity: 0;
  transform: scale(.98);
}
.mem-entry-top {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin-bottom: var(--s-xs);
}
/* kind chip — JS sets --kind to an entity-palette token */
.mem-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: 0;
  color: var(--kind, var(--t-tool));
  background: color-mix(in srgb, var(--kind, var(--t-tool)) 10%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--kind, var(--t-tool)) 22%, transparent);
}
.mem-kind::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.mem-entry-date {
  margin-left: auto;
}
.mem-entry-del {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-48);
  transition: background .14s ease, color .14s ease;
}
.mem-entry-del:hover {
  background: color-mix(in srgb, var(--t-agent) 8%, transparent);
  color: var(--t-agent);
}
.mem-del-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mem-entry-title {
  color: var(--ink);
  margin-bottom: 4px;
}
.mem-entry-body {
  color: var(--ink-80);
  line-height: var(--lh-caption);
}
.mem-entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-sm);
}
.mem-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mem-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--pearl);
  border: 1px solid var(--divider);
  color: var(--ink-48);
  letter-spacing: 0;
}
.mem-entry-source { letter-spacing: 0; }

/* --- 5.5 empty state (incl. TurboVec RAG note) --------------------------- */
.mem-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-xxl) var(--s-lg);
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-lg);
  background: var(--pearl);
}
.mem-empty-icon {
  width: 28px;
  height: 28px;
  color: var(--chip);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mem-empty-msg { max-width: 360px; }
.mem-empty-rag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  margin-top: var(--s-xs);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--t-workflow) 8%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--t-workflow) 18%, transparent);
  color: var(--t-workflow);
  letter-spacing: 0;
}
.mem-rag-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* ============================================================================
   6 · Dashboard — stat cards, rollup bars, activity feed w/ hairline rail
   ============================================================================ */
.dash-head {
  margin-bottom: var(--s-xl);
}

/* 6a · The measured edge — fabius's benchmark band (data-ink bars, one accent) */
.dash-bench { margin-bottom: var(--s-lg); }
.bench-lead { margin: var(--s-xs) 0 var(--s-md); font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-48); max-width: 70ch; }
.bench-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-lg); }
.bench-row { display: flex; flex-direction: column; gap: 6px; }
.bench-row-head { display: flex; align-items: baseline; justify-content: space-between; }
.bench-model { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink); }
.bench-cut { font-size: var(--fs-fine); color: var(--live); font-weight: var(--w-semibold); }
.bench-bar { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: var(--s-xs); }
.bench-bar-label { font-size: var(--fs-fine); color: var(--ink-48); }
.bench-track { height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 6%, var(--canvas)); overflow: hidden; }
.bench-fill { height: 100%; border-radius: var(--r-pill); background: var(--chip); }
.bench-bar.is-fab .bench-fill { background: var(--blue); box-shadow: var(--glow-soft); }
.bench-bar.is-fab .bench-bar-label { color: var(--blue); font-weight: var(--w-semibold); }
.bench-bar-val { font-size: var(--fs-fine); font-variant-numeric: tabular-nums; color: var(--ink-80); text-align: right; }
.bench-bar.is-fab .bench-bar-val { color: var(--ink); font-weight: var(--w-semibold); }
.bench-cats-label { margin: var(--s-lg) 0 var(--s-sm); font-size: var(--fs-fine); color: var(--ink-48); }
.bench-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-md); }
.bench-cat { display: flex; flex-direction: column; gap: 4px; }
.bench-cat-head { display: flex; align-items: baseline; justify-content: space-between; }
.bench-cat-name { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink); }
.bench-cat-margin { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--blue); font-variant-numeric: tabular-nums; }
.bench-cat-track { height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 6%, var(--canvas)); overflow: hidden; }
.bench-cat-fill { height: 100%; border-radius: var(--r-pill); background: color-mix(in srgb, var(--blue) 70%, var(--canvas)); }
.bench-cat-note { font-size: var(--fs-fine); color: var(--ink-48); }

/* 6b · Providers band — the LLMs the router spends, by tier */
.dash-providers { margin-bottom: var(--s-lg); }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-sm); }
.prov-card { padding: var(--s-sm) var(--s-md); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--canvas); }
.prov-card.is-on { border-color: color-mix(in srgb, var(--live) 40%, var(--hairline)); box-shadow: var(--glow-soft); }
.prov-top { display: flex; align-items: center; gap: var(--s-xs); margin-bottom: 6px; }
.prov-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--chip); flex: 0 0 auto; }
.prov-card.is-on .prov-dot { background: var(--live); box-shadow: 0 0 6px color-mix(in srgb, var(--live) 50%, transparent); }
.prov-name { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink); flex: 1 1 auto; min-width: 0; }
.prov-status { font-size: var(--fs-fine); color: var(--ink-48); }
.prov-card.is-on .prov-status { color: var(--live); }
.prov-tiers { display: flex; flex-direction: column; gap: 2px; }
.prov-tier { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-xs); }
.prov-tier-k { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .4px; color: var(--ink-48); }
.prov-tier-v { font-size: var(--fs-fine); color: var(--ink-80); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dash-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-semibold);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.dash-sub {
  margin-top: var(--s-xs);
  font-size: var(--fs-body);
  color: var(--ink-48);
  letter-spacing: var(--ls-body);
}

/* --- 6.1 stat cards ------------------------------------------------------ */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}
.stat-card {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-md);
  border-radius: var(--r-lg);
  background: var(--glass-bg-soft);
  border: var(--glass-border);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.stat-card:hover {
  box-shadow: var(--shadow-product);
  border-color: var(--divider);
}
/* Mission KPI cards route into the Missions board (dashboard.js adds is-clickable). */
.stat-card.is-clickable { cursor: pointer; }
.stat-card.is-clickable:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
}
/* icon tile tinted by the card accent (JS sets --accent) */
.stat-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, var(--ink));
  background: color-mix(in srgb, var(--accent, var(--ink)) 16%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--accent, var(--ink)) 28%, transparent);
  box-shadow: var(--glass-edge);
}
/* Coherent inline-SVG line-icon set (replaces the emoji stat-glyphs). Tinted by
   the card's --accent via currentColor; matches the 24px stroke glyphs in the header. */
.stat-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-body { min-width: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--w-semibold);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.stat-label {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--ink-48);
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 6.2 rollups grid + panels ------------------------------------------- */
.dash-rollups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}
.dash-panel {
  border-radius: var(--r-lg);
  background: var(--glass-bg-soft);
  border: var(--glass-border);
  padding: var(--s-lg);
}
.dash-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-xs);
  margin-bottom: var(--s-md);
}
.dash-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.dash-panel-note {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
  text-align: right;
}
.rollup-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.rollup-empty {
  font-size: var(--fs-caption);
  color: var(--ink-48);
  padding: var(--s-sm) 0;
}

/* labelled CSS bar (no chart lib) */
.bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--r-sm);
}
.bar-row.is-clickable {
  cursor: pointer;
  margin: -4px -6px;
  padding: 4px 6px;
  transition: background .14s ease;
}
.bar-row.is-clickable:hover { background: var(--parchment); }
.bar-row.is-clickable:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
}
.bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-xs);
}
.bar-label {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-value {
  flex: 0 0 auto;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--ink-48);
  letter-spacing: 0;
}
.bar-meta {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}
.bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--divider);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--blue);     /* JS overrides per-rollup via inline accent */
  transition: width .4s cubic-bezier(.32, .72, 0, 1);
}

/* --- 6.3 activity feed (hairline rail) ----------------------------------- */
.dash-feed-panel { padding-bottom: var(--s-md); }
.feed {
  position: relative;
  padding-left: var(--s-lg);
}
.feed::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline);
}
.feed-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-radius: var(--r-sm);
}
.feed-item.is-clickable {
  cursor: pointer;
  margin: 0 -8px;
  padding: var(--s-sm) 8px;
  transition: background .14s ease;
}
.feed-item.is-clickable:hover { background: var(--parchment); }
.feed-item.is-clickable:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: -2px;
}
.feed-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: calc(-1 * var(--s-lg) + 11px - 12px);  /* center the dot on the rail */
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  z-index: 1;
  color: var(--ink-48);
}
.feed-icon .fab-icon { width: 13px; height: 13px; }
.feed-item[data-verb="completed"] .feed-icon, .feed-item[data-verb="approved"] .feed-icon { color: var(--live, #1d8a4e); border-color: color-mix(in srgb, var(--live, #1d8a4e) 35%, var(--hairline)); }
.feed-item[data-verb="remembered"] .feed-icon { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 30%, var(--hairline)); }
.feed-item[data-verb="deleted"] .feed-icon { color: var(--t-agent, #d70015); }
/* The newest activity reads as live — the first feed item's icon breathes in the
   alive-green (paintFeed builds newest-first, so :first-child is the newest). */
.dash-feed-panel .feed-item:first-child .feed-icon {
  color: var(--live);
  border-color: color-mix(in srgb, var(--live) 45%, var(--hairline));
  animation: synapse-breathe var(--pulse-mid) var(--pulse-ease) infinite;
}
.feed-body {
  flex: 1 1 auto;
  min-width: 0;
}
.feed-text {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-80);
}
.feed-actor {
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.feed-meta {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  margin-top: 3px;
}
.feed-tag {
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-48);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--pearl);
  border: 1px solid var(--divider);
}
.feed-time {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}
.feed-empty .feed-text { color: var(--ink-48); }

/* ============================================================================
   7 · Builder — modal (backdrop blur, centered card), tabs, library, forms
   ============================================================================ */
/* lock page scroll while open (app.css already sets body overflow:hidden, but
   this guards the html element the builder toggles) */
.builder-open { overflow: hidden; }

.builder-backdrop {
  position: fixed;
  inset: 0;
  display: none;                 /* JS flips to flex on open */
  align-items: center;
  justify-content: center;
  padding: var(--s-lg);
  background: color-mix(in srgb, var(--black) 34%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  z-index: 70;
}
.builder-modal {
  width: 720px;
  max-width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  /* No own backdrop-filter: .builder-backdrop already blurs the whole viewport
     behind it, and --glass-bg is 72%-opaque, so a second blur is near-invisible
     yet re-rasterizes every frame of the GSAP scale-open tween. */
  border: var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge), var(--shadow-lg);   /* lit edge + modal elevation */
  overflow: hidden;
}
.builder-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-lg) var(--s-lg) var(--s-md);
  border-bottom: 1px solid var(--divider);
}
.builder-title {
  font-family: var(--font-display);
  font-size: var(--fs-tagline);
  font-weight: var(--w-semibold);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.builder-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  color: var(--ink-80);
  font-size: 15px;
  line-height: 1;
  transition: background .14s ease;
}
.builder-close:hover { background: var(--chip); }
.builder-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-lg);
}

/* --- 7.1 tabs ------------------------------------------------------------ */
.builder-tabs {
  display: flex;
  gap: var(--s-md);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--s-lg);
}
.builder-tab {
  position: relative;
  padding: 0 0 var(--s-sm);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--ink-48);
  transition: color .16s ease;
}
.builder-tab:hover { color: var(--ink-80); }
.builder-tab[aria-selected="true"] { color: var(--ink); }
.builder-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink);
}

/* --- 7.2 new-entity tab: type picker + form ------------------------------ */
.builder-label {
  display: block;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-48);
  margin-bottom: 6px;
}
.builder-typepick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-xs);
  margin-bottom: var(--s-lg);
}
.builder-typechip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-sm) var(--s-xs);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink-80);
  min-height: 64px;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.builder-typechip:hover { background: var(--parchment); border-color: var(--chip); }
.builder-typechip[aria-checked="true"] {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--canvas));
  box-shadow: 0 0 0 1px var(--blue);
}
.builder-typechip-emoji { font-size: 22px; line-height: 1; }
.builder-typechip-label {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: 0;
}

/* --- 7.3 form grid + fields ---------------------------------------------- */
.builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
}
.builder-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* full-width fields: name + summary + every textarea field */
.builder-field[data-field="name"],
.builder-field[data-field="summary"],
.builder-field[data-field="about"],
.builder-field[data-field="mandate"],
.builder-field[data-field="mission"],
.builder-field[data-field="summaryLong"],
.builder-field[data-field="steps"] {
  grid-column: 1 / -1;
}
.builder-field .builder-label { margin-bottom: 0; }
.builder-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--pearl);
  color: var(--ink);
  font-size: var(--fs-caption);
}
.builder-textarea {
  height: auto;
  min-height: 72px;
  padding: 10px 12px;
  line-height: var(--lh-caption);
  resize: vertical;
  font-family: var(--font-text);
}
.builder-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237a7a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.builder-input:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-focus) 16%, transparent);
  background: var(--canvas);
}
.builder-hint {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}

/* --- 7.4 footer + buttons ------------------------------------------------ */
.builder-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
  padding-top: var(--s-md);
  border-top: 1px solid var(--divider);
}
.builder-footer-edit { justify-content: space-between; }
.builder-foot-note {
  flex: 1 1 auto;
  font-size: var(--fs-caption);
  color: var(--ink-48);
  letter-spacing: var(--ls-caption);
}
.builder-foot-note.is-error { color: var(--t-agent); }
.builder-btn {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.builder-btn[disabled] { opacity: .5; cursor: default; }
.builder-btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--canvas);
}
.builder-btn-primary:hover:not([disabled]) { background: var(--blue-focus); border-color: var(--blue-focus); }
.builder-btn-danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--t-agent) 40%, var(--hairline));
  color: var(--t-agent);
}
.builder-btn-danger:hover:not([disabled]) { background: color-mix(in srgb, var(--t-agent) 8%, transparent); }

/* --- 7.5 library tab ----------------------------------------------------- */
.builder-lib-controls {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-md);
  margin-bottom: var(--s-md);
}
.builder-lib-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.builder-lib-count {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
  padding: 2px 2px var(--s-xxs);
}
.builder-empty {
  padding: var(--s-lg);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--ink-48);
}
.lib-item {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  width: 100%;
  flex: 0 0 auto;          /* never shrink below content in the scrolling flex column */
  padding: var(--s-sm);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.lib-item:hover { background: var(--parchment); border-color: var(--chip); }
.lib-item[aria-selected="true"] {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--canvas));
  box-shadow: 0 0 0 1px var(--blue);
}
.lib-item-emoji {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--canvas);
  background: var(--t-agent);    /* JS overrides via inline a.color */
}
.lib-item-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lib-item-name {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: var(--ls-caption);
}
.lib-item-div {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}
.lib-item-desc {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============================================================================
   8 · Responsive — mobile-first; ≤900 collapse, ≤480 tighten. 44px targets.
   ============================================================================ */
@media (max-width: 900px) {
  /* The 7-button switcher must SHRINK and scroll inside the header instead of
     forcing the whole page wider than the viewport (was clipping nav buttons +
     adding a phantom horizontal scroll on every view). flex:1 1 0 + min-width:0 is
     what lets a flex child shrink below its content width so overflow-x can scroll;
     header.top clips so nothing bleeds past the viewport edge. */
  header.top { overflow: hidden; min-width: 0; }
  /* flex-basis MUST be auto (not 0): a 0-basis item has zero shrink weight, so the
     nav would keep its full 7-button content width and overflow. With auto basis it
     shrinks, and min-width:0 + overflow-x:auto turn it into a scrollable strip so
     all 7 view buttons stay reachable by swipe. */
  .view-switch {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .view-switch::-webkit-scrollbar { display: none; }
  .view-switch-btn { padding: 0 13px; }
  .new-btn .new-label { display: none; }    /* icon-only New button */
  .new-btn { width: 44px; min-width: 44px; padding: 0; }
  .settings-btn { width: 44px; height: 44px; }

  /* inner wraps tighten */
  .missions-wrap,
  .dash-wrap {
    padding: var(--s-lg) var(--s-md) var(--s-xl);
  }

  /* missions head stacks; kanban becomes a horizontal scroller of fixed columns */
  .missions-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-md);
  }
  .missions-board[data-active="true"] {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--s-sm);
    padding-bottom: var(--s-sm);
    scroll-snap-type: x proximity;
  }
  .mcol {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: start;
  }
  .missions-form-row { grid-template-columns: 1fr; }

  /* missions edit panel becomes a full-width bottom sheet */
  .missions-panel {
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-left: none;
    border-top: 1px solid var(--hairline);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: sheet-up .28s cubic-bezier(.32, .72, 0, 1);
  }
  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* memory: stack the two panes (scope list on top, scrollable) */
  #view-memory[data-active="true"] { overflow-y: auto; }
  .mem-shell { flex-direction: column; height: auto; min-height: 100%; }
  .mem-scopes {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .mem-scope-list { max-height: 220px; }
  .mem-main { overflow: visible; padding: var(--s-lg) var(--s-md) var(--s-xl); }
  .mem-head { align-items: stretch; }
  .mem-head-tools { width: 100%; }
  .mem-search { flex: 1 1 auto; }
  .mem-search-input { width: 100%; max-width: none; }

  /* dashboard: stat cards → 2-up, rollups → 1-col */
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-rollups { grid-template-columns: 1fr; }

  /* builder becomes a full-screen sheet */
  .builder-backdrop { padding: 0; align-items: flex-end; }
  .builder-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }
  .builder-lib-controls { grid-template-columns: 1fr; }
  .builder-lib-list { max-height: none; }
}

@media (max-width: 480px) {
  .missions-wrap,
  .dash-wrap {
    padding: var(--s-md) var(--s-sm) var(--s-lg);
  }
  .missions-title,
  .dash-title { font-size: var(--fs-tagline); }

  /* one stat card per row on the tightest screens */
  .dash-stats { grid-template-columns: 1fr; }

  /* full-width toolbar selects, stacked */
  .missions-toolbar { gap: var(--s-xs); }
  .missions-filter,
  .missions-select { width: 100%; }
  .missions-toolbar-spacer { display: none; }
  .missions-newbtn { width: 100%; justify-content: center; }

  .builder-typepick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .builder-grid { grid-template-columns: 1fr; }

  /* keep every interactive row at a comfortable touch height */
  .view-switch-btn,
  .missions-viewbtn,
  .mem-scope-row,
  .lib-item,
  .feed-item.is-clickable,
  .bar-row.is-clickable { min-height: 44px; }
  .builder-footer { flex-wrap: wrap; }
  .builder-btn { flex: 1 1 auto; }
  .builder-foot-note { flex-basis: 100%; }
}

/* ============================================================================
   9 · Motion & a11y preferences — calm; honor reduced-motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mcard-progress-fill,
  .bar-fill {
    transition: none;
  }
  .missions-panel { animation: none; }
  /* live-run + flow animations collapse to a static, legible state */
  .fab-phase, .fab-phase-ring, .fab-tail, .fab-ticker-spin,
  .fab-layers .fab-layer-chip,
  .flow-step[data-status="running"]::after,
  .flow-step[data-status="running"] .flow-step-idx,
  .flow-step[data-status="running"] .flow-step-status::before { animation: none !important; }
  .fab-phase-ring { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .fab-phase-ring { display: none; }
  .fab-phase, .fab-tail, .fab-layers .fab-layer-chip { animation: none !important; }
}

/* ============================================================================
   10 · Layout passthrough containers — explicit rules for the wrapper classes
   the view modules emit but whose children carry the actual styling. These are
   block-flow shells (builder mode panels, header title stacks, the rollup panel
   identity hook, the dashboard root). Declared so the class cross-check is clean
   and the containers never inherit a surprising display from a future reset.
   ============================================================================ */
.builder-new,
.builder-edit,
.builder-lib,
.builder-tabpanels,
.builder-formhost {
  display: block;
  min-width: 0;
}
/* The dashboard root section already sizes via #view-dashboard; this is a
   no-surprise identity hook for the .dashboard class app.js adds to it. */
.dashboard { min-width: 0; }
/* Header title stacks: name + sub line, left-aligned inside their flex header. */
.missions-titlebox,
.mem-head-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Rollup panel identity hook (styling comes from .dash-panel; grid from
   .dash-rollups). Kept explicit so the panel is a self-contained column. */
.rollup { min-width: 0; }

/* Defensive: guarantee inactive views stay hidden. A base `.view{display:none}`
   rule was being dropped during parse; this end-of-file rule is authoritative. */
.view:not([data-active="true"]) { display: none !important; }

/* ============================================================================
   11 · v3 — Real Agency (CONTRACT-v3). Areta synthetic demo data,
   ISO-8601 dates. This section owns ONLY the v3 class names that the view
   modules emit but that are not yet styled by their existing owners — so the
   cascade has exactly one declaration per selector, no gradients, the single
   --shadow-product elevation, tokens only, 44px touch targets on mobile.

   Already owned elsewhere (referenced, NOT re-declared here, to avoid clobber):
     · Run console drawer — self-injected by js/run.js (#run-host, .run-drawer,
       .run-head/.run-tile/.run-chip, .run-input, .run-go/.run-orch reusing the
       blue/parchment button grammar, .run-out{white-space:pre-wrap}, the
       Simulated/Refused/Error pills .run-sim/.run-refused/.run-error, the
       collapsible .run-item history, and the orchestrate .run-plan-chip +
       sub-run .run-item + Synthesis blocks; bottom-sheet @≤900 also there).
     · .graph-controls overlay (Focus toggle + depth segmented) — css/app.css.
     · profile .profile-connections / .conn-* grouped chip rows, .wikilink
       spans, and the header .run-open Run button — css/app.css.
     · builder Playbook <select> (.builder-input.builder-select) + the
       "Orchestration (ruflo)" division in the filter <select> — already styled
       via .builder-select; only the per-item ruflo treatment is added below.
   ============================================================================ */

/* --- 11.1 memory.js — [[wikilink]] chips in memory entry bodies -------------
   memory.js renders resolved [[Name]] tokens as <button class="mem-wikilink">.
   A subtle inline link in --blue with a soft underline; clickable; the
   surrounding prose stays plain textContent. Distinct from the profile
   .wikilink only in that it sits in caption-sized body copy. */
.mem-wikilink {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 32%, transparent);
  transition: border-color .14s ease, color .14s ease;
}
.mem-wikilink:hover { border-bottom-color: var(--blue); }
.mem-wikilink:active { color: var(--blue-focus); }
.mem-wikilink:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --- 11.2 builder.js — "Orchestration (ruflo)" library group item ----------
   The library picker mixes 216 agents (.lib-item) with the 6 ruflo roles, which
   builder.js tags .lib-item-ruflo (emoji 🔀, color var(--t-team)). A quiet
   left accent in the team token marks them as the orchestration group without
   a second shadow or a gradient — the base .lib-item already carries layout,
   selection ring, and the 44px min-height. */
.lib-item-ruflo {
  border-color: color-mix(in srgb, var(--t-team) 40%, var(--hairline));
  box-shadow: inset 3px 0 0 var(--t-team);
}
.lib-item-ruflo:hover {
  border-color: color-mix(in srgb, var(--t-team) 55%, var(--hairline));
}
/* The ruflo division line reads in the team tone so the group is legible at a
   glance in the flat list (the orchestration "library group header" cue). */
.lib-item-ruflo .lib-item-div {
  color: var(--t-team);
  font-weight: var(--w-semibold);
}
/* Selection ring stays the action blue (consistent with .lib-item) but keeps
   the team accent bar so the orchestration origin is never lost. */
.lib-item-ruflo[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--t-team), 0 0 0 1px var(--blue);
}

/* --- 11.3 Responsive ≤900 — keep v3 view-scope additions reachable ---------
   The run drawer becomes a bottom sheet via run.js's own @≤900 block, and the
   graph-controls stay pinned top-right via app.css. Here we only ensure the
   in-views-scope v3 atoms stay comfortable on a narrow column: the ruflo
   accent bar and the memory wikilink keep full legibility and tap area. */
@media (max-width: 900px) {
  .lib-item-ruflo { box-shadow: inset 4px 0 0 var(--t-team); }
  /* wikilink chips inside memory bodies get a touch more vertical room so the
     underline never crowds the line below on a phone-width column. */
  .mem-wikilink { line-height: 1.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 — Org-Chart Tree (Conducting AI). CONTRACT-v4 §1/§4. Apple tokens only;
   one soft shadow, no gradients, calm motion. Owner of all .org-* classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* #view-org is a full-width scroll container, like #view-missions/#view-dashboard
   (the §0 generic .view rule only flips display). The org tree is tall, so the
   section owns vertical scrolling inside main.stage; .org-wrap centers within. */
#view-org {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--canvas);
}
#view-org[data-active="true"] { display: block; }
#view-org::-webkit-scrollbar { width: 8px; }
#view-org::-webkit-scrollbar-thumb {
  background: var(--chip);
  border-radius: var(--r-pill);
  border: 2px solid var(--canvas);
}

.org-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-xl) var(--s-lg) var(--s-xxl);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Header + phase tabs ───────────────────────────────────────────────────── */
.org-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}
.org-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0;
}
.org-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}
.org-subtitle {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--ink-48);
  margin: 4px 0 0;
  max-width: 60ch;
}

/* Segmented phase tabs, styled like the header .view-switch. */
.org-phases {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
.org-phase-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-48);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 32px;
  transition: color .15s ease, background .15s ease;
}
.org-phase-tab:hover { color: var(--ink-80); }
.org-phase-tab.is-active {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: var(--shadow-product);
}
.org-phase-tab:active { transform: scale(.96); }
.org-phase-tab:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }

/* ── Root card ─────────────────────────────────────────────────────────────── */
.org-root {
  display: inline-flex;
  align-items: center;
  gap: var(--s-md);
  background: var(--ink);
  color: var(--canvas);
  border-radius: var(--r-lg);
  padding: var(--s-md) var(--s-lg);
  box-shadow: var(--shadow-product);
  cursor: pointer;
  max-width: 520px;
  transition: transform .15s ease;
}
.org-root:hover { transform: translateY(-1px); }
.org-root:active { transform: scale(.99); }
.org-root:focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: 3px; }
.org-root-mark { font-size: 26px; line-height: 1; opacity: .9; flex: none; }
.org-root-body { min-width: 0; }
.org-root-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.org-root-sub {
  font-family: var(--font-text);
  font-size: 13px;
  opacity: .72;
  margin-top: 2px;
}

/* ── Connector hairlines between tree levels ───────────────────────────────── */
.org-connector {
  width: 1px;
  height: var(--s-lg);
  background: var(--hairline);
  flex: none;
}

/* ── Department columns row ────────────────────────────────────────────────── */
.org-cols {
  display: flex;
  gap: var(--s-lg);
  width: 100%;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px var(--s-xs) var(--s-md);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.org-col {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
}

/* Department header card. */
.org-dept {
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--t-department);
  border-radius: var(--r-md);
  padding: var(--s-md);
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.org-dept:hover { transform: translateY(-1px); box-shadow: var(--shadow-product); }
.org-dept:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }
.org-dept-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.org-dept-summary {
  font-family: var(--font-text);
  font-size: 12.5px;
  color: var(--ink-48);
  margin-top: 4px;
  line-height: 1.4;
}
.org-dept-stat {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-48);
  margin-top: var(--s-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Persona (AI head) card ────────────────────────────────────────────────── */
.org-persona {
  --persona-color: var(--t-agent);
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-md);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.org-persona::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--persona-color);
}
.org-persona:hover { transform: translateY(-1px); box-shadow: var(--shadow-product); }
.org-persona:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }
.org-persona-empty { cursor: default; opacity: .7; }
.org-persona-empty:hover { transform: none; box-shadow: none; }
.org-persona-empty-text {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--ink-48);
  text-align: center;
  padding: var(--s-xs) 0;
}

.org-persona-head { display: flex; align-items: center; gap: var(--s-sm); }
.persona-orb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: none;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .14));
  background-color: var(--persona-color);
  box-shadow: var(--shadow-product), var(--glass-edge);
}
.org-persona-id { flex: 1 1 auto; min-width: 0; }
.org-persona-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.org-persona-role {
  font-family: var(--font-text);
  font-size: 12.5px;
  color: var(--ink-48);
  margin-top: 1px;
}

/* Run button = primary pill. */
.org-run {
  appearance: none;
  border: 0;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  min-height: 34px;
  border-radius: var(--r-pill);
  cursor: pointer;
  flex: none;
  transition: background .15s ease, transform .12s ease;
}
.org-run:hover { background: var(--blue-focus); }
.org-run:active { transform: scale(.96); }
.org-run:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }

/* Human head chip. */
.org-persona-meta { margin-top: var(--s-sm); }
.org-head-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  cursor: pointer;
  font-family: var(--font-text);
  min-height: 30px;
  transition: background .15s ease;
}
.org-head-chip:hover { background: var(--divider); }
.org-head-chip:active { transform: scale(.96); }
.org-head-chip:disabled { cursor: default; opacity: .6; }
.org-head-dot {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--t-person); flex: none;
}
.org-head-name { font-size: 13px; font-weight: 500; color: var(--ink-80); }
.org-head-tag {
  font-size: 10.5px; color: var(--ink-48);
  text-transform: uppercase; letter-spacing: 0.4px;
}

/* Example-prompt chips. */
.persona-prompts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s-sm);
}
.persona-prompt {
  appearance: none;
  text-align: left;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-family: var(--font-text);
  font-size: 12.5px;
  color: var(--ink-80);
  cursor: pointer;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.persona-prompt:hover { background: var(--canvas); border-color: var(--chip); }
.persona-prompt:active { transform: scale(.96); }
.persona-prompt:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 1px; }

/* ── Individual-agent cards ────────────────────────────────────────────────── */
.org-agents {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin-top: var(--s-md);
}
.org-agents-empty {
  font-family: var(--font-text);
  font-size: 12.5px;
  color: var(--ink-48);
  text-align: center;
  padding: var(--s-sm) 0;
}
.org-agent {
  --agent-color: var(--t-agent);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.org-agent:hover { transform: translateY(-1px); box-shadow: var(--shadow-product); }
.org-agent:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }
.org-agent-head { display: flex; align-items: center; gap: var(--s-xs); }
.org-agent-orb {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12));
  background-color: var(--agent-color);
  box-shadow: var(--glass-edge);
}
.org-agent-id { flex: 1 1 auto; min-width: 0; }
.org-agent-name {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-agent-role {
  font-family: var(--font-text);
  font-size: 11.5px;
  color: var(--ink-48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-agent .org-run { padding: 6px 13px; min-height: 30px; font-size: 12px; }
.org-agent-summary {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--ink-48);
  margin-top: 7px;
  line-height: 1.4;
}
.org-agent-prompts { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.org-agent-prompt {
  appearance: none;
  text-align: left;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  padding: 5px 9px;
  font-family: var(--font-text);
  font-size: 11.5px;
  color: var(--ink-80);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease;
}
.org-agent-prompt:hover { background: var(--canvas); border-color: var(--chip); }
.org-agent-prompt:active { transform: scale(.96); }

.org-empty {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--ink-48);
  padding: var(--s-xl);
}

/* ── Mobile: stack the department columns into one vertical tree ───────────── */
@media (max-width: 900px) {
  .org-wrap { padding: var(--s-lg) var(--s-md) var(--s-xl); }
  .org-header { flex-direction: column; align-items: stretch; gap: var(--s-md); }
  .org-phases { align-self: flex-start; overflow-x: auto; max-width: 100%; }
  .org-cols {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    gap: var(--s-md);
  }
  .org-col { flex: 1 1 auto; width: 100%; }
  .org-root { max-width: 100%; }
}
@media (max-width: 480px) {
  .org-wrap { padding: var(--s-md) var(--s-sm) var(--s-lg); }
  .org-title { font-size: 23px; }
  .persona-orb { width: 36px; height: 36px; font-size: 18px; }
  .org-persona, .org-dept { padding: var(--s-sm); }
}

/* ============================================================================
   7 · Conductor cockpit (CONTRACT-v5 §2) — flow engine + org health + cost
   ============================================================================ */
#view-cockpit {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--canvas);
}
#view-cockpit[data-active="true"] { display: block; }
#view-cockpit::-webkit-scrollbar { width: 8px; }
#view-cockpit::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--r-pill);
}
/* centered wrap for every cockpit section */
.cockpit-conduct,
.cockpit-board,
.cockpit-approvals,
.cockpit-flows,
.cockpit-grid,
.cockpit-activity {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.cockpit-conduct {
  padding: var(--s-xl) var(--s-lg) 0;
}
.cockpit-eyebrow {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* Conductor cockpit vitality — a breathing "live" dot on the eyebrow, and the board
   lighting up while a flow is actually running. Keyed off data-attrs cockpit.js
   already sets (data-running / data-status / data-alert / data-mode) — no JS change. */
.cockpit-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--live);
  animation: synapse-breathe var(--breath-dur) var(--pulse-ease) infinite;
}
.cockpit-board[data-running="true"] .flow-status-pill {
  animation: synapse-pulse-soft var(--pulse-fast) var(--pulse-ease) infinite;
}
.cockpit-board[data-running="true"] .flow-step[data-status="running"] {
  box-shadow: var(--glow-alive);
  animation: synapse-pulse-soft var(--pulse-fast) var(--pulse-ease) infinite;
}
.cockpit-stat[data-alert="true"] {
  animation: synapse-pulse-soft var(--pulse-mid) var(--pulse-ease) infinite;
}
.cockpit-mode-pill[data-mode="live"] {
  animation: synapse-pulse-soft var(--breath-dur) var(--pulse-ease) infinite;
}
.cockpit-title {
  margin-top: var(--s-xs);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-semibold);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.cockpit-sub {
  margin-top: var(--s-xs);
  max-width: 60ch;
  font-size: var(--fs-body);
  color: var(--ink-48);
  letter-spacing: var(--ls-body);
}
.cockpit-prompt {
  display: block;
  width: 100%;
  margin-top: var(--s-lg);
  padding: var(--s-md);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--pearl, #fff);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  resize: vertical;
  min-height: 84px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cockpit-prompt:focus {
  outline: none;
  border-color: var(--blue-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.cockpit-conduct-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-md);
  margin-top: var(--s-md);
  flex-wrap: wrap;
}
.cockpit-lead-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 260px;
}
.cockpit-lead-label {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}
.cockpit-lead {
  width: 100%;
  padding: 10px var(--s-sm);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  min-height: 44px;
}
.cockpit-lead:focus { outline: none; border-color: var(--blue-focus); }
.cockpit-plan-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--s-lg);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.cockpit-plan-btn:hover { filter: brightness(1.06); }
.cockpit-plan-btn:active { transform: scale(.97); }
.cockpit-plan-btn:disabled { opacity: .5; cursor: default; }

/* fabius runtime — Route (ghost) + Run fabius (primary, lit) ───────────────── */
.cockpit-fab-actions { display: inline-flex; align-items: center; gap: var(--s-xs); }
.cockpit-route-btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--s-md);
  font-size: var(--fs-caption); font-weight: var(--w-semibold);
  color: var(--blue); background: var(--canvas);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--hairline));
  border-radius: var(--r-pill); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.cockpit-route-btn:hover { background: color-mix(in srgb, var(--blue) 6%, var(--canvas)); border-color: var(--blue); }
.cockpit-route-btn:active { transform: scale(.97); }
.cockpit-route-btn:disabled { opacity: .5; cursor: default; }
.cockpit-fabrun-btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--s-lg);
  font-size: var(--fs-caption); font-weight: var(--w-semibold);
  color: #fff; background: var(--blue); border: none; border-radius: var(--r-pill);
  cursor: pointer; box-shadow: var(--glow-soft);
  transition: filter .15s ease, transform .1s ease;
}
.cockpit-fabrun-btn:hover { filter: brightness(1.06); }
.cockpit-fabrun-btn:active { transform: scale(.97); }
.cockpit-fabrun-btn:disabled { opacity: .5; cursor: default; }
.cockpit-row-sep { width: 1px; height: 24px; background: var(--hairline); margin: 0 var(--s-xs); flex: 0 0 auto; }

/* fabius result panel — the route + the Scout→Prove transcript */
.cockpit-fabius:empty { display: none; }
.fab-head { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.fab-eyebrow { font-size: var(--fs-fine); font-weight: var(--w-semibold); letter-spacing: .6px; text-transform: uppercase; color: var(--blue); }
.fab-badge { font-size: var(--fs-fine); font-weight: var(--w-semibold); padding: 2px 8px; border-radius: var(--r-pill); }
.fab-sim { color: var(--t-agent); background: color-mix(in srgb, var(--t-agent) 12%, var(--canvas)); }
.fab-live { color: var(--live); background: color-mix(in srgb, var(--live) 12%, var(--canvas)); }
.fab-empty { font-size: var(--fs-caption); color: var(--ink-48); padding: var(--s-sm) 0; line-height: 1.5; }
.fab-route { padding: var(--s-sm) 0 var(--s-md); border-bottom: 1px solid var(--hairline); }
.fab-axes { display: flex; gap: var(--s-xs); margin-bottom: var(--s-sm); flex-wrap: wrap; }
.fab-axis { font-size: var(--fs-fine); font-weight: var(--w-semibold); padding: 3px 10px; border-radius: var(--r-pill); color: var(--ink-48); background: color-mix(in srgb, var(--ink) 5%, var(--canvas)); border: 1px solid var(--hairline); }
.fab-axis.is-on { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--canvas)); border-color: color-mix(in srgb, var(--blue) 30%, var(--hairline)); }
.fab-layers { display: flex; gap: var(--s-2xs, 4px); flex-wrap: wrap; margin-bottom: var(--s-sm); }
.fab-layer-chip { font-size: var(--fs-fine); font-weight: var(--w-semibold); padding: 2px 9px; border-radius: var(--r-pill); color: var(--brand, var(--blue)); background: color-mix(in srgb, var(--blue) 8%, var(--canvas)); border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--hairline)); }
.fab-layer-chip::before { content: "→ "; opacity: .5; }
.fab-route-grid { display: flex; gap: var(--s-lg); flex-wrap: wrap; margin-bottom: var(--s-sm); }
.fab-rl { display: flex; flex-direction: column; gap: 1px; }
.fab-rl-k { font-size: var(--fs-fine); color: var(--ink-48); text-transform: uppercase; letter-spacing: .4px; }
.fab-rl-v { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink); }
.fab-rationale { display: flex; flex-direction: column; gap: 3px; }
.fab-rat { font-size: var(--fs-fine); color: var(--ink-48); line-height: 1.4; }
.fab-section-label { margin: var(--s-md) 0 var(--s-xs); font-size: var(--fs-fine); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: .4px; color: var(--ink-48); }
.fab-transcript { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; list-style: none; }
/* one row = a premium phase marker (icon + status ring) + body. The staged reveal
   toggles .is-running (blue, pulsing) → .is-done (green, settled) so it reads live. */
.fab-phase { display: flex; gap: var(--s-md); align-items: flex-start; padding: 7px 0; position: relative; }
.fab-phase-marker { flex: 0 0 auto; position: relative; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 4%, var(--canvas)); border: 1px solid var(--hairline); color: var(--ink-48);
  transition: background var(--t-med, .28s) var(--ease, ease), border-color var(--t-med, .28s) var(--ease, ease), color var(--t-med, .28s) var(--ease, ease); }
.fab-phase-marker .fab-icon { width: 17px; height: 17px; }
/* connector line linking the markers down the column */
.fab-phase:not(:last-child) .fab-phase-marker::before { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(14px + var(--s-sm, 8px)); transform: translateX(-50%);
  background: var(--hairline); transition: background var(--t-med, .28s) var(--ease, ease); }
/* the pulsing ring shown while a phase is running */
.fab-phase-ring { position: absolute; inset: -4px; border-radius: 14px; border: 2px solid transparent; pointer-events: none; }
.fab-phase.is-running .fab-phase-marker { background: color-mix(in srgb, var(--blue) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--blue) 50%, var(--hairline)); color: var(--blue); }
.fab-phase.is-running .fab-phase-ring { border-color: color-mix(in srgb, var(--blue) 55%, transparent); animation: fab-ring 1.15s var(--ease-bio, ease-out) infinite; }
.fab-phase.is-running .fab-phase-name { color: var(--blue); }
.fab-phase.is-done .fab-phase-marker { background: color-mix(in srgb, var(--live, #1d8a4e) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--live, #1d8a4e) 45%, var(--hairline)); color: var(--live, #1d8a4e); }
.fab-phase.is-done:not(:last-child) .fab-phase-marker::before { background: color-mix(in srgb, var(--live, #1d8a4e) 40%, var(--hairline)); }
.fab-phase.is-running, .fab-phase.is-done { animation: fab-phase-in .42s var(--ease-bio, cubic-bezier(.32,.72,0,1)) both; }
@keyframes fab-ring { 0% { transform: scale(.86); opacity: .9; } 70% { transform: scale(1.12); opacity: 0; } 100% { opacity: 0; } }
@keyframes fab-phase-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fab-phase-body { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.fab-phase-head { display: flex; align-items: baseline; gap: var(--s-sm); }
.fab-phase-name { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink); }
.fab-phase-meta { font-size: var(--fs-fine); color: var(--ink-48); }
.fab-phase-out { margin-top: 3px; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-80); white-space: pre-wrap; }
.fab-phase-out.fab-dim { color: var(--ink-48); }
.fab-verdict { margin-top: 3px; font-size: var(--fs-fine); font-weight: var(--w-semibold); }
.fab-verdict.is-pass { color: var(--t-workflow); }
.fab-verdict.is-fail { color: var(--t-agent); }
.fab-record { margin-top: 3px; font-size: var(--fs-fine); color: var(--t-sop); }
.fab-output { margin: var(--s-xs) 0; padding: var(--s-md); border-radius: var(--r-md); background: var(--parchment); border: 1px solid var(--hairline); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-fine); line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-x: auto; max-height: 420px; }
.fab-usage { margin-top: var(--s-xs); font-size: var(--fs-fine); color: var(--ink-48); }

/* live-run chrome — the "it's executing" affordances */
.fab-live-ticker, .fab-booting { display: flex; align-items: center; gap: var(--s-sm); margin: var(--s-xs) 0 var(--s-sm);
  font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--blue); }
.fab-booting { color: var(--ink-48); font-weight: var(--w-regular, 400); line-height: 1.5; }
.fab-ticker-spin { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-top-color: var(--blue); animation: fab-spin .7s linear infinite; }
@keyframes fab-spin { to { transform: rotate(360deg); } }
.fab-tail { opacity: 1; }
.fab-tail.is-in { animation: fab-phase-in .5s var(--ease-bio, cubic-bezier(.32,.72,0,1)) both; }
/* the routed layer chips ripple in as the dispatch resolves */
.fab-layers .fab-layer-chip { animation: fab-chip-in .5s var(--ease-bio, cubic-bezier(.32,.72,0,1)) both; }
.fab-layers .fab-layer-chip:nth-child(2) { animation-delay: .07s; }
.fab-layers .fab-layer-chip:nth-child(3) { animation-delay: .14s; }
.fab-layers .fab-layer-chip:nth-child(n+4) { animation-delay: .2s; }
@keyframes fab-chip-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* runtime-readiness strip — fabius is a real agent runtime: LLM gateway · memory · tools · loop */
.cockpit-runtime { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-xs); margin: var(--s-sm) 0 var(--s-md); }
.cockpit-runtime .rt-label { font-size: var(--fs-fine); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: .5px; color: var(--ink-48); margin-right: 2px; }
.rt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 4%, var(--canvas)); border: 1px solid var(--hairline); }
.rt-pill .rt-pill-ic { display: inline-flex; color: var(--ink-48); }
.rt-pill .rt-pill-ic .fab-icon { width: 14px; height: 14px; }
.rt-pill .rt-pill-k { font-size: var(--fs-fine); font-weight: var(--w-semibold); color: var(--ink-80); }
.rt-pill .rt-pill-v { font-size: var(--fs-fine); color: var(--ink-80); }
.rt-pill.is-on { background: color-mix(in srgb, var(--live, #1d8a4e) 9%, var(--canvas)); border-color: color-mix(in srgb, var(--live, #1d8a4e) 26%, var(--hairline)); }
.rt-pill.is-on .rt-pill-ic { color: var(--live, #1d8a4e); }
.rt-ready { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-fine); font-weight: var(--w-semibold); color: var(--ink-80); margin-left: 2px; }
.rt-ready::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-48); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
.rt-ready.is-live { color: var(--live, #1d8a4e); }
.rt-ready.is-live::before { background: var(--live, #1d8a4e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live, #1d8a4e) 18%, transparent); animation: synapse-pulse-soft var(--breath-dur, 4.2s) var(--pulse-ease, ease-in-out) infinite; }

/* Recent fabius runs — the agent's run history */
.fabruns-list { display: flex; flex-direction: column; gap: 2px; }
.fabrun { border-radius: var(--r-sm); }
.fabrun + .fabrun { border-top: 1px solid var(--divider); }
.fabrun-sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); padding: var(--s-xs) var(--s-sm); cursor: pointer; list-style: none; border-radius: var(--r-sm); }
.fabrun-sum::-webkit-details-marker { display: none; }
.fabrun-sum:hover { background: color-mix(in srgb, var(--blue) 4%, var(--canvas)); }
.fabrun-sum::before { content: "▸"; color: var(--ink-48); font-size: 10px; margin-right: 2px; }
.fabrun[open] .fabrun-sum::before { content: "▾"; }
.fabrun-task { flex: 1 1 auto; min-width: 0; font-size: var(--fs-caption); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fabrun-meta { flex: 0 0 auto; font-size: var(--fs-fine); color: var(--ink-48); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fabrun-out { margin: 0 var(--s-sm) var(--s-sm); padding: var(--s-sm) var(--s-md); border-radius: var(--r-sm); background: var(--parchment); border: 1px solid var(--hairline); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-fine); line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-x: auto; max-height: 320px; }

.cockpit-msg {
  min-height: 18px;
  margin-top: var(--s-sm);
  font-size: var(--fs-caption);
  color: var(--ink-48);
}
.cockpit-msg[data-kind="warn"] { color: #d70015; }
.cockpit-msg[data-kind="ok"] { color: #1d8a4e; }
.cockpit-msg[data-kind="work"] { color: var(--blue); }

/* --- 7.1 flow board ----------------------------------------------------- */
.cockpit-board { padding: var(--s-lg) var(--s-lg) 0; }
.cockpit-board:empty { padding: 0; }
.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  flex-wrap: wrap;
  margin-bottom: var(--s-md);
}
.flow-head-main { display: flex; align-items: center; gap: var(--s-sm); min-width: 0; }
.flow-title {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--w-semibold);
  letter-spacing: -0.4px;
  color: var(--ink);
  min-width: 0;
}
.flow-head-side { display: flex; align-items: center; gap: var(--s-md); }
.flow-progress { font-size: var(--fs-caption); color: var(--ink-48); white-space: nowrap; }
.cockpit-run-btn {
  min-height: 40px;
  padding: 0 var(--s-lg);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: #fff;
  background: var(--ink);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.cockpit-run-btn:hover { filter: brightness(1.12); }
.cockpit-run-btn:active { transform: scale(.97); }
.cockpit-run-btn:disabled { opacity: .55; cursor: default; }

.flow-board { display: flex; flex-direction: column; gap: var(--s-sm); }
.flow-step {
  --st: var(--ink-48);
  position: relative;
  padding: var(--s-md);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--st);
  border-radius: var(--r-lg);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.flow-step:hover { box-shadow: var(--shadow-product); }
.flow-step[data-status="running"] { --st: var(--blue); }
.flow-step[data-status="done"] { --st: #1d8a4e; }
.flow-step[data-status="review"] { --st: #a86400; }
.flow-step[data-status="rejected"] { --st: #d70015; }
/* a running subtask reads as EXECUTING — sweeping accent edge + a pulsing index */
.flow-step[data-status="running"] { overflow: hidden; }
.flow-step[data-status="running"]::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--blue), transparent); background-size: 100% 220%;
  animation: flow-sweep 1.3s var(--ease-bio, ease-in-out) infinite; }
.flow-step[data-status="running"] .flow-step-idx { animation: synapse-pulse-soft var(--pulse-fast, 1.4s) var(--pulse-ease, ease-in-out) infinite; }
.flow-step[data-status="running"] .flow-step-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%;
  background: var(--blue); vertical-align: middle; animation: synapse-pulse-soft 1s var(--pulse-ease, ease-in-out) infinite; }
@keyframes flow-sweep { 0% { background-position: 0 -120%; } 100% { background-position: 0 120%; } }
.flow-step-top { display: flex; align-items: center; gap: var(--s-sm); }
.flow-step-idx {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-fine); font-weight: var(--w-semibold);
  color: var(--ink-80);
  background: color-mix(in srgb, var(--st) 14%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--st) 30%, transparent);
  border-radius: var(--r-pill);
}
.flow-step-status,
.flow-status-pill {
  flex: 0 0 auto;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: 0.3px;
  text-transform: capitalize;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  color: var(--st);
  background: color-mix(in srgb, var(--st) 12%, var(--canvas));
}
.flow-status-pill { --st: var(--ink-48); }
.flow-status-pill[data-status="running"] { --st: var(--blue); }
.flow-status-pill[data-status="done"] { --st: #1d8a4e; }
.flow-status-pill[data-status="blocked"] { --st: #a86400; }
.flow-status-pill[data-status="review"] { --st: #a86400; }
.flow-status-pill[data-status="error"] { --st: #d70015; }
.flow-step-title {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
  min-width: 0;
}
.flow-step-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-xs); margin-top: var(--s-sm);
}
.flow-agent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 3px;
  background: var(--chip, color-mix(in srgb, var(--ink) 5%, var(--canvas)));
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: var(--fs-fine);
  color: var(--ink-80);
  transition: border-color .15s ease;
}
.flow-agent-chip:hover { border-color: var(--blue-focus); }
.flow-agent-orb {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 10%, var(--canvas));
}
.flow-agent-name { white-space: nowrap; }
.flow-handoff, .flow-gate-tag {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 5%, var(--canvas));
}
.flow-gate-tag { color: #a86400; background: color-mix(in srgb, #a86400 12%, var(--canvas)); }
.flow-verify {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.flow-verify[data-pass="true"] { color: #1d8a4e; background: color-mix(in srgb, #1d8a4e 12%, var(--canvas)); }
.flow-verify[data-pass="false"] { color: #d70015; background: color-mix(in srgb, #d70015 12%, var(--canvas)); }
.flow-step-details { margin-top: var(--s-sm); }
.flow-step-summary {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--blue);
  cursor: pointer;
  list-style: none;
}
.flow-step-summary::-webkit-details-marker { display: none; }
.flow-step-summary::before { content: "▸ "; }
.flow-step-details[open] .flow-step-summary::before { content: "▾ "; }
.flow-step-output {
  margin-top: var(--s-sm);
  padding: var(--s-sm);
  font-family: var(--font-text);
  font-size: var(--fs-fine);
  line-height: var(--lh-caption);
  color: var(--ink-80);
  white-space: pre-wrap;
  word-break: break-word;
  background: color-mix(in srgb, var(--ink) 4%, var(--canvas));
  border-radius: var(--r-md);
  max-height: 320px;
  overflow-y: auto;
}
.flow-gate-row { display: flex; gap: var(--s-sm); margin-top: var(--s-md); }
.flow-approve, .flow-reject, .flow-retry {
  min-height: 40px; padding: 0 var(--s-lg);
  font-size: var(--fs-fine); font-weight: var(--w-semibold);
  border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--hairline);
  transition: filter .15s ease, transform .1s ease;
}
.flow-approve { color: #fff; background: #1d8a4e; border-color: transparent; }
.flow-reject { color: #d70015; background: var(--canvas); border-color: color-mix(in srgb, #d70015 40%, transparent); }
.flow-retry { color: var(--blue); background: var(--canvas); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.flow-approve:active, .flow-reject:active, .flow-retry:active { transform: scale(.97); }

/* --- 7.2 ambient panels (health · usage · activity) --------------------- */
.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
  padding: var(--s-xl) var(--s-lg) 0;
}
.cockpit-activity { padding: var(--s-md) var(--s-lg) var(--s-xxl); }
.cockpit-panel {
  padding: var(--s-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.cockpit-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: var(--s-md);
}
.cockpit-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-sm);
}
.cockpit-stat {
  padding: var(--s-sm) var(--s-md);
  background: color-mix(in srgb, var(--ink) 3%, var(--canvas));
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.cockpit-stat[data-alert="true"] {
  background: color-mix(in srgb, #a86400 10%, var(--canvas));
  border-color: color-mix(in srgb, #a86400 28%, transparent);
}
.cockpit-stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--w-semibold);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.cockpit-stat-label {
  margin-top: 2px;
  font-size: var(--fs-fine);
  color: var(--ink-48);
}
.cockpit-health-line {
  display: flex; flex-wrap: wrap; gap: var(--s-xs);
  margin-top: var(--s-md);
}
.cockpit-health-chip {
  font-size: var(--fs-fine);
  color: var(--ink-80);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 6%, var(--canvas));
}
.cockpit-health-chip[data-alert="true"] {
  color: #a86400; background: color-mix(in srgb, #a86400 12%, var(--canvas));
}
.cockpit-mode-pill {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.cockpit-mode-pill[data-mode="live"] { color: #1d8a4e; background: color-mix(in srgb, #1d8a4e 12%, var(--canvas)); }
.cockpit-mode-pill[data-mode="simulated"] { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--canvas)); }
.cockpit-mode-pill[data-mode="idle"] { color: var(--ink-48); background: color-mix(in srgb, var(--ink) 6%, var(--canvas)); }

.cockpit-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cockpit-feed-item {
  display: flex; align-items: baseline; gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-top: 1px solid var(--hairline);
}
.cockpit-feed-item:first-child { border-top: none; }
.cockpit-feed-verb {
  flex: 0 0 auto;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  text-transform: capitalize;
  color: var(--blue);
  min-width: 76px;
}
.cockpit-feed-verb[data-verb="ran"], .cockpit-feed-verb[data-verb="orchestrated"] { color: #1d8a4e; }
.cockpit-feed-verb[data-verb="planned"] { color: #a86400; }
.cockpit-feed-verb[data-verb="rejected"], .cockpit-feed-verb[data-verb="deleted"] { color: #d70015; }
.cockpit-feed-text { flex: 1 1 auto; font-size: var(--fs-caption); color: var(--ink-80); min-width: 0; }
.cockpit-feed-time { flex: 0 0 auto; font-size: var(--fs-fine); color: var(--ink-48); white-space: nowrap; }
.cockpit-empty { font-size: var(--fs-caption); color: var(--ink-48); }

/* recent flows (persistent history) */
.cockpit-flows:empty { display: none; }
.cockpit-flow-list { display: flex; flex-direction: column; }
.cockpit-flow-row {
  display: flex; align-items: center; gap: var(--s-sm);
  width: 100%;
  padding: var(--s-sm) var(--s-xs);
  background: none; border: none;
  border-top: 1px solid var(--hairline);
  text-align: left; cursor: pointer;
  transition: background .14s ease;
}
.cockpit-flow-row:first-of-type { border-top: none; }
.cockpit-flow-row:hover { background: color-mix(in srgb, var(--ink) 4%, var(--canvas)); }
.cockpit-flow-title {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-caption); color: var(--ink-80);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-flow-time { flex: 0 0 auto; font-size: var(--fs-fine); color: var(--ink-48); }

/* mission-card flow badge (resume) */
.mcard-flow {
  flex: 0 0 auto;
  border: none; cursor: pointer; font: inherit;
  text-transform: capitalize;
  transition: transform .1s ease;
}
.mcard-flow:active { transform: scale(.95); }
.mcard-flow:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }

/* profile-drawer memory block */
.pmem-body { display: flex; flex-direction: column; gap: var(--s-sm); }
.pmem-item {
  padding: var(--s-sm);
  background: color-mix(in srgb, var(--ink) 3%, var(--canvas));
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.pmem-top { display: flex; align-items: baseline; gap: var(--s-xs); flex-wrap: wrap; }
.pmem-kind { font-size: var(--fs-fine); font-weight: var(--w-semibold); color: var(--blue); text-transform: capitalize; }
.pmem-title { font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink); }
.pmem-text { margin-top: 4px; color: var(--ink-80); }
.pmem-empty { padding: var(--s-xs) 0; }

/* cockpit Lint control */
.cockpit-lint-row { display: flex; align-items: center; gap: var(--s-sm); margin-top: var(--s-md); flex-wrap: wrap; }
.cockpit-lint-btn {
  flex: 0 0 auto; min-height: 32px; padding: 0 var(--s-md);
  font-size: var(--fs-fine); font-weight: var(--w-semibold);
  color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent);
  border-radius: var(--r-pill); cursor: pointer;
  transition: background .15s ease;
}
.cockpit-lint-btn:hover { background: color-mix(in srgb, var(--blue) 16%, var(--canvas)); }
.cockpit-lint-btn:disabled { opacity: .6; cursor: default; }
.cockpit-lint-out { font-size: var(--fs-fine); color: var(--ink-48); }

/* approvals inbox (decisions across all flows) */
.cockpit-approvals { border-color: color-mix(in srgb, var(--blue) 28%, var(--hairline)); }
.cockpit-appr-list { display: flex; flex-direction: column; }
.cockpit-appr-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
  padding: var(--s-sm) 0; border-top: 1px solid var(--hairline); flex-wrap: wrap;
}
.cockpit-appr-row:first-of-type { border-top: none; }
.cockpit-appr-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.cockpit-appr-step {
  font-size: var(--fs-caption); font-weight: var(--w-semibold); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cockpit-appr-flow {
  font-size: var(--fs-fine); color: var(--ink-48);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cockpit-appr-btns { display: flex; gap: var(--s-xs); flex: 0 0 auto; }
.cockpit-appr-btns .flow-approve, .cockpit-appr-btns .flow-reject { min-height: 32px; padding: 0 var(--s-md); }

/* capacity / load bars */
.cockpit-cap-bars { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-sm); }
.cockpit-cap-row { display: flex; align-items: center; gap: var(--s-sm); }
.cockpit-cap-name {
  flex: 0 0 40%; min-width: 0; font-size: var(--fs-fine); color: var(--ink-80);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cockpit-cap-track {
  flex: 1 1 auto; height: 7px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 8%, var(--canvas)); overflow: hidden;
}
.cockpit-cap-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--t-agent); }
.cockpit-cap-num {
  flex: 0 0 auto; font-size: var(--fs-fine); font-weight: var(--w-semibold);
  color: var(--ink-48); min-width: 16px; text-align: right;
}

/* memory "Promote to memory" bar (file recall answers back) */
.mem-promote {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md); margin-bottom: var(--s-sm); flex-wrap: wrap;
  background: color-mix(in srgb, var(--blue) 6%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: var(--r-md);
}
.mem-promote-btn {
  flex: 0 0 auto; min-height: 32px; padding: 0 var(--s-md);
  font-size: var(--fs-fine); font-weight: var(--w-semibold);
  color: #fff; background: var(--blue); border: none; border-radius: var(--r-pill); cursor: pointer;
  transition: filter .15s ease;
}
.mem-promote-btn:hover { filter: brightness(1.06); }
.mem-promote-btn:disabled { opacity: .7; cursor: default; }

@media (max-width: 900px) {
  .cockpit-grid { grid-template-columns: 1fr; }
  .cockpit-conduct, .cockpit-board, .cockpit-approvals, .cockpit-flows, .cockpit-grid, .cockpit-activity { padding-left: var(--s-md); padding-right: var(--s-md); }
}
@media (max-width: 480px) {
  .cockpit-title { font-size: 24px; }
  .cockpit-stat-grid { grid-template-columns: 1fr; }
  .flow-head-side { width: 100%; justify-content: space-between; }
}

/* ============================================================================
   8 · System Map (CONTRACT-v5 §8) — interactive live architecture diagram
   ============================================================================ */
#view-system {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--canvas);
}
#view-system[data-active="true"] { display: block; }
#view-system::-webkit-scrollbar { width: 8px; }
#view-system::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--r-pill);
}
.arch-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-xl) var(--s-lg) var(--s-xxl);
}
.arch-eyebrow {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--blue);
}
.arch-title {
  margin-top: var(--s-xs);
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-semibold);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ink);
}
.arch-sub {
  margin-top: var(--s-xs);
  max-width: 60ch;
  font-size: var(--fs-body);
  color: var(--ink-48);
  letter-spacing: var(--ls-body);
}
.arch-card {
  margin-top: var(--s-lg);
  padding: var(--s-lg);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow-x: auto;        /* horizontal scroll on narrow screens, keeps text legible */
}
.arch-svg { width: 100%; min-width: 560px; height: auto; display: block; }
.arch-loop-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.arch-loop-title {
  margin-top: var(--s-xxl);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--w-semibold);
  letter-spacing: -0.4px;
  color: var(--ink);
}
.arch-loop-sub {
  margin-top: var(--s-xs);
  max-width: 64ch;
  font-size: var(--fs-caption);
  color: var(--ink-48);
}
.arch-loop-card { padding: var(--s-md) var(--s-lg); }

/* SVG nodes */
.arch-svg text, .arch-loop-svg text { font-family: var(--font-text); }
.arch-node { cursor: pointer; }
.arch-node:focus-visible { outline: none; }
.arch-box {
  fill: var(--canvas);
  stroke: color-mix(in srgb, var(--accent) 42%, var(--hairline));
  stroke-width: 1.5;
  transition: fill .18s ease, stroke .18s ease;
}
.arch-node:hover .arch-box,
.arch-node:focus-visible .arch-box {
  fill: color-mix(in srgb, var(--accent) 9%, var(--canvas));
  stroke: var(--accent);
  animation: none;          /* freeze the breath lit while interacting */
  stroke-opacity: 1;
}
.arch-node:active .arch-box { fill: color-mix(in srgb, var(--accent) 15%, var(--canvas)); }
.arch-box-title {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.arch-box-sub { fill: var(--ink-48); font-size: 11.5px; }

/* System-map nodes breathe with the shared organism rhythm — stroke-opacity + a
   faint lit edge only (no layout; compositor-friendly). Staggered per node so the
   map reads as a living organism, not a strobe. */
.arch-box { animation: arch-breathe var(--breath-dur) var(--pulse-ease) infinite; }
.arch-node:nth-of-type(2) .arch-box { animation-delay: .4s; }
.arch-node:nth-of-type(3) .arch-box { animation-delay: .8s; }
.arch-node:nth-of-type(4) .arch-box { animation-delay: 1.2s; }
.arch-node:nth-of-type(5) .arch-box { animation-delay: 1.6s; }
.arch-node:nth-of-type(6) .arch-box { animation-delay: 2s; }
.arch-node:nth-of-type(7) .arch-box { animation-delay: 2.4s; }
.arch-node:nth-of-type(8) .arch-box { animation-delay: 2.8s; }
.arch-node:nth-of-type(9) .arch-box { animation-delay: 3.2s; }
@keyframes arch-breathe {
  0%, 100% { stroke-opacity: .55; filter: none; }
  50%      { stroke-opacity: 1; filter: drop-shadow(0 0 4px var(--node-pulse-edge)); }
}

/* SVG edges + labels */
.arch-edge { fill: none; stroke: color-mix(in srgb, var(--ink) 26%, transparent); stroke-width: 1.6; }
.arch-edge.is-recall { stroke: var(--t-agent); stroke-dasharray: 5 5; }
.arch-arrowhead { fill: color-mix(in srgb, var(--ink) 40%, transparent); }
.arch-arrowhead.is-recall { fill: var(--t-agent); }
.arch-edge-label {
  fill: var(--ink-48);
  font-size: 11px;
  paint-order: stroke;
  stroke: var(--canvas);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.arch-edge-label.is-recall { fill: var(--t-agent); }

/* SMIL flow particles travelling the edges — the nervous system visibly pumping. */
.arch-flow-dot { fill: var(--flow-particle); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--blue) 55%, transparent)); }
.arch-flow-dot.is-recall { fill: var(--flow-particle-recall); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--t-agent) 55%, transparent)); }

/* compounding-loop dots */
.arch-loop-dot {
  fill: color-mix(in srgb, var(--blue) 12%, var(--canvas));
  stroke: color-mix(in srgb, var(--blue) 36%, transparent);
  stroke-width: 1.5;
}
.arch-loop-num { fill: var(--blue); font-size: 15px; font-weight: 700; }
.arch-loop-label { fill: var(--ink-80); font-size: 12px; font-weight: 600; }

/* router pipeline strip — reuses .arch-loop-dot; smaller nodes carrying a rule id */
.arch-pipe-svg { min-width: 640px; }
.arch-pipe-dot { fill: color-mix(in srgb, var(--blue) 10%, var(--canvas)); }
.arch-pipe-rule { fill: var(--blue); font-size: 11px; font-weight: 700; }
.arch-pipe-floor {
  fill: var(--ink-48); font-size: 11px; font-weight: var(--w-semibold);
  letter-spacing: 0.3px; text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   8a · Research figures (System view) — the seven illustrative shapes behind the
   routing rules. A responsive grid of self-contained SVG <img> cards with a
   one-line principle takeaway. Light/Apple, tokenized; static imagery (no motion).
   ---------------------------------------------------------------------------- */
.arch-figs {
  margin-top: var(--s-lg);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-md);
}
.arch-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.arch-fig:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--hairline));
  box-shadow: var(--shadow-sm);
}
.arch-fig-media {
  padding: var(--s-md);
  background: color-mix(in srgb, var(--ink) 2%, var(--canvas));
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}
.arch-fig-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.arch-fig-cap {
  padding: var(--s-sm) var(--s-md) var(--s-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arch-fig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
}
.arch-fig-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: -0.2px;
}
.arch-fig-rule {
  flex: 0 0 auto;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--canvas));
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.arch-fig-take {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-48);
}
@media (max-width: 480px) {
  .arch-figs { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .arch-wrap { padding-left: var(--s-md); padding-right: var(--s-md); }
}
@media (max-width: 480px) {
  .arch-title { font-size: 24px; }
  .arch-card { padding: var(--s-sm); }
}

/* knowledge index (System view) */
.arch-index { display: flex; flex-direction: column; gap: var(--s-sm); }
.arch-index-head { display: flex; align-items: baseline; gap: var(--s-sm); }
.arch-index-total {
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--w-semibold);
  color: var(--ink); letter-spacing: -0.4px;
}
.arch-index-sub { font-size: var(--fs-caption); color: var(--ink-48); }
.arch-index-kinds { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.arch-kind-chip {
  font-size: var(--fs-fine); font-weight: var(--w-semibold); color: var(--ink-80);
  padding: 3px 10px; border-radius: var(--r-pill); text-transform: capitalize;
  background: color-mix(in srgb, var(--ink) 6%, var(--canvas));
}
.arch-kind-chip[data-kind="fact"] { color: var(--t-department); background: color-mix(in srgb, var(--t-department) 10%, var(--canvas)); }
.arch-kind-chip[data-kind="decision"] { color: var(--t-sop); background: color-mix(in srgb, var(--t-sop) 10%, var(--canvas)); }
.arch-kind-chip[data-kind="learning"] { color: var(--t-workflow); background: color-mix(in srgb, var(--t-workflow) 10%, var(--canvas)); }
.arch-kind-chip[data-kind="synthesis"] { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--canvas)); }
.arch-log-title {
  margin-top: var(--s-sm); font-size: var(--fs-fine); font-weight: var(--w-semibold);
  color: var(--ink-48); text-transform: uppercase; letter-spacing: 0.5px;
}
.arch-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.arch-log-item {
  display: flex; align-items: baseline; gap: var(--s-sm);
  padding: var(--s-xs) 0; border-top: 1px solid var(--hairline);
}
.arch-log-item:first-child { border-top: none; }
.arch-log-verb {
  flex: 0 0 auto; min-width: 84px; font-size: var(--fs-fine); font-weight: var(--w-semibold);
  text-transform: capitalize; color: var(--blue);
}
.arch-log-verb[data-verb="ran"], .arch-log-verb[data-verb="orchestrated"] { color: var(--t-workflow); }
.arch-log-verb[data-verb="linted"] { color: var(--t-sop); }
.arch-log-text {
  flex: 1 1 auto; min-width: 0; font-size: var(--fs-caption); color: var(--ink-80);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-log-time { flex: 0 0 auto; font-size: var(--fs-fine); color: var(--ink-48); white-space: nowrap; }

/* ============================================================================
   8b · Brain & Connections (System view) — insight cards inferred from real
   activity. Suggested links (hero, one-click → real graph edge), centrality
   ranking, bottlenecks, communities, and brain-health. Tokens only, the one
   --shadow-sm/md elevation grammar, no gradients, calm motion.
   ============================================================================ */
.arch-insights {
  margin-top: var(--s-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-md);
  align-items: start;
}
/* the hero (suggested connections) spans the full row */
.arch-ins-hero { grid-column: 1 / -1; }

/* async-state notices */
.arch-ins-loading {
  grid-column: 1 / -1;
  font-size: var(--fs-caption);
  color: var(--ink-48);
  padding: var(--s-md) 0;
}
.arch-ins-error {
  grid-column: 1 / -1;
  font-size: var(--fs-caption);
  color: var(--t-agent);
  padding: var(--s-md) 0;
}

/* card shell — reuses the .arch-card surface; resting --shadow-sm, hover lift */
.arch-ins-card {
  margin-top: 0;
  overflow: visible;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s var(--ease-out), border-color .2s ease;
}
.arch-ins-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--divider);
}
.arch-ins-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-xs);
  margin-bottom: var(--s-md);
}
.arch-ins-title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.arch-ins-note {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
  text-align: right;
}
.arch-ins-empty {
  font-size: var(--fs-caption);
  color: var(--ink-48);
  padding: var(--s-xs) 0;
}

/* --- suggested connections (hero) ---------------------------------------- */
.arch-suggest-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}
.arch-suggest-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink) 3%, var(--canvas));
  border: 1px solid var(--hairline);
  transition: opacity .2s ease, background .16s ease, border-color .16s ease;
}
.arch-suggest-row.is-connected {
  opacity: .72;
  background: color-mix(in srgb, var(--t-workflow) 7%, var(--canvas));
  border-color: color-mix(in srgb, var(--t-workflow) 26%, transparent);
}
.arch-suggest-main { flex: 1 1 auto; min-width: 0; }
.arch-suggest-pair {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: var(--ls-caption);
}
.arch-suggest-hint {
  margin-top: 2px;
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}
.arch-suggest-weight {
  flex: 0 0 auto;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--blue);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--blue) 10%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  white-space: nowrap;
}
.arch-suggest-act {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
}
.arch-connect-btn {
  appearance: none;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--canvas);
  font-family: var(--font-text);
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caption);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, transform .12s var(--spring);
}
.arch-connect-btn:hover:not([disabled]) { background: var(--blue-focus); border-color: var(--blue-focus); }
.arch-connect-btn:active:not([disabled]) { transform: scale(.96); }
.arch-connect-btn[disabled] { opacity: .6; cursor: default; }
.arch-connect-btn:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }
.arch-connect-msg {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--t-workflow);
  white-space: nowrap;
}
.arch-connect-msg.is-error { color: var(--t-agent); }

/* --- most central agents (ranked) ---------------------------------------- */
.arch-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.arch-rank-item {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-xs) 0;
  border-top: 1px solid var(--hairline);
}
.arch-rank-item:first-child { border-top: none; }
.arch-rank-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--canvas));
  border-radius: var(--r-pill);
}
.arch-rank-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.arch-rank-name {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arch-rank-meta {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arch-rank-score {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink-80);
  font-variant-numeric: tabular-nums;
}

/* --- bottlenecks --------------------------------------------------------- */
.arch-bottle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.arch-bottle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: var(--s-xs) 0;
  border-top: 1px solid var(--hairline);
}
.arch-bottle-item:first-child { border-top: none; }
.arch-bottle-body { min-width: 0; display: flex; flex-direction: column; }
.arch-bottle-name {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arch-bottle-div {
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}
.arch-bottle-count {
  flex: 0 0 auto;
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--t-agent);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--t-agent) 10%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--t-agent) 22%, transparent);
  white-space: nowrap;
}

/* --- communities (division chips) ---------------------------------------- */
.arch-comm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
}
.arch-comm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  padding: 4px 5px 4px 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--t-team) 8%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--t-team) 22%, transparent);
}
.arch-comm-name {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--t-team);
  letter-spacing: var(--ls-fine);
}
.arch-comm-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  border: 1px solid color-mix(in srgb, var(--t-team) 24%, transparent);
  color: var(--ink-80);
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  text-align: center;
}

/* --- brain health -------------------------------------------------------- */
.arch-brain-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-sm);
}
.arch-brain-stat {
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink) 3%, var(--canvas));
  border: 1px solid var(--hairline);
}
.arch-brain-stat.is-alert {
  background: color-mix(in srgb, var(--t-agent) 8%, var(--canvas));
  border-color: color-mix(in srgb, var(--t-agent) 24%, transparent);
}
.arch-brain-val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--w-semibold);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.arch-brain-stat.is-alert .arch-brain-val { color: var(--t-agent); }
.arch-brain-label {
  margin-top: 2px;
  font-size: var(--fs-fine);
  color: var(--ink-48);
  letter-spacing: var(--ls-fine);
}
.arch-brain-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-top: var(--s-md);
}
.arch-brain-kind {
  font-size: var(--fs-fine);
  font-weight: var(--w-semibold);
  color: var(--ink-80);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  text-transform: capitalize;
  background: color-mix(in srgb, var(--ink) 6%, var(--canvas));
}
.arch-brain-kind[data-kind="fact"] { color: var(--t-department); background: color-mix(in srgb, var(--t-department) 10%, var(--canvas)); }
.arch-brain-kind[data-kind="decision"] { color: var(--t-sop); background: color-mix(in srgb, var(--t-sop) 10%, var(--canvas)); }
.arch-brain-kind[data-kind="draft"] { color: var(--ink-48); background: color-mix(in srgb, var(--ink) 6%, var(--canvas)); }
.arch-brain-kind[data-kind="superseded"] { color: var(--ink-48); background: color-mix(in srgb, var(--ink) 6%, var(--canvas)); }
.arch-brain-kind[data-kind="gap"] { color: var(--t-agent); background: color-mix(in srgb, var(--t-agent) 10%, var(--canvas)); }

/* --- responsive: collapse the 2-up grid + suggest rows on narrow columns -- */
@media (max-width: 900px) {
  .arch-insights { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .arch-suggest-row { flex-wrap: wrap; }
  .arch-suggest-act { width: 100%; justify-content: flex-end; }
  .arch-brain-stats { grid-template-columns: 1fr; }
  .arch-connect-btn { min-height: 44px; }
}

/* ============================================================================
   11 · Elevation layer (CONTRACT-v5.6 §V) — depth, purposeful motion, and
   composed empty states layered ON TOP of the Apple base. Loaded last so its
   rules win on equal specificity. Every motion is gated behind
   prefers-reduced-motion and scoped away from the graph view + scroll roots,
   so the .app{height:100dvh} scroll architecture is never touched.
   ============================================================================ */

/* --- Elevation on the primary cards: flat at rest (the hairline border
   already separates them from the canvas), lift only on hover. A single
   resting shadow doubled up looked muddy — hover-only matches the
   --shadow-product intent. --------------------------------------------------- */
.mcard,
.stat-card,
.dash-panel {
  box-shadow: var(--shadow-sm);   /* resting cards → base elevation */
  transition: box-shadow .22s var(--ease-out),
              border-color .2s ease,
              transform .18s var(--ease-out);
}
.mcard:hover,
.stat-card:hover,
.dash-panel:hover {
  /* card hover → mid elevation, with a faint blue cast for the brand glow */
  box-shadow: 0 1px 3px rgba(0, 102, 204, .10), var(--shadow-md);
  border-color: var(--divider);
}
/* spring press on the clickable mission card */
.mcard:active {
  transform: scale(.98);
  transition: transform .12s var(--spring);
}

/* Stat callouts align on the decimal — premium data feel. */
.stat-value { font-variant-numeric: tabular-nums; }

/* --- Empty states: composed badge + tinted frame ------------------------- */
.mem-empty {
  border-color: color-mix(in srgb, var(--blue) 20%, var(--hairline));
}
.mem-empty-icon {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 13px;
  border-radius: var(--r-lg);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  stroke-width: 1.6;
}
.mcol-empty {
  border-radius: var(--r-md);
  border: 1px dashed color-mix(in srgb, var(--blue) 16%, var(--hairline));
  background: color-mix(in srgb, var(--pearl) 60%, transparent);
  color: var(--ink-80);   /* was --ink-48: too low contrast on the pearl tint */
}

/* --- Purposeful motion. view-enter is OPACITY-ONLY (no transform) so it can
   never fight a scroll root's restore on the internally-scrolling views; the
   graph view is excluded entirely. hover-lift is gated to true-hover devices
   so a tapped card never sticks raised on touch. ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .view[data-active="true"]:not(#view-graph) {
    animation: view-in .3s ease both;
  }
  @keyframes view-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .mcard:hover,
  .stat-card:hover,
  .dash-panel:hover {
    transform: translateY(-2px) scale(1.01);
  }
}

/* --- Agent built-in capabilities (profile) — each a tinted skill pill ------ */
.agent-caps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
}
.agent-cap {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  line-height: 1.2;
  letter-spacing: var(--ls-caption);
  color: var(--ink-80);
  background: color-mix(in srgb, var(--t-agent) 8%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--t-agent) 22%, transparent);
}

/* ============================================================================
   13 · Empty-state component — a shared onboarding cue, not a dead end.
   Markup the views emit:
     <div class="empty-state">
       <div class="empty-state-icon">◈</div>
       <h3 class="empty-state-title">…</h3>
       <p class="empty-state-sub">…</p>
     </div>
   Centered column · a 60px softly-tinted rounded icon tile holding the glyph ·
   full-ink title · looser muted subtitle.
   ============================================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-sm);
  max-width: 420px;
  margin: 0 auto;
  padding: var(--s-xxl) var(--s-lg);
}
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--s-xs);
  border-radius: var(--r-lg);
  font-size: 26px;
  line-height: 1;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--canvas));
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
}
.empty-state-icon svg { width: 28px; height: 28px; }
.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--fs-tagline);
  font-weight: var(--w-semibold);
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.empty-state-sub {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--ink-48);
  letter-spacing: var(--ls-caption);
}

/* ============================================================================
   Living-Brain · element-level reduced-motion kill. The tokens.css block calms
   the GLOW (sets --energy:0); keyframed animations must additionally be hard-
   stopped here and land on their lit/legible static state. One place per file.
   ============================================================================ */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .arch-box,
  .cockpit-eyebrow::before,
  .dash-feed-panel .feed-item:first-child .feed-icon,
  .cockpit-board[data-running="true"] .flow-status-pill,
  .cockpit-board[data-running="true"] .flow-step[data-status="running"],
  .cockpit-stat[data-alert="true"],
  .cockpit-mode-pill[data-mode="live"],
  .rt-ready.is-live::before {
    animation: none !important;
    box-shadow: none;
    transform: none;
  }
  .arch-box { stroke-opacity: 1; filter: none; }
  /* SMIL ignores animation:none — hide the flow particles outright so a mid-session
     preference toggle (before the next System-map re-render) still removes them. */
  .arch-flow-dot { display: none; }
}

/* ── Operator-mode toggle + badge (Phase-1 acting tools) ─────────────────────
   The advisor→operator switch in the cockpit. iOS-style switch in fabius violet
   (the --blue token), matching the console's design language. */
.cockpit-act-wrap { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; font-size: 12.5px; color: var(--ink-48); padding: 4px 8px; border-radius: var(--r-pill); transition: color .15s var(--ease-out); }
.cockpit-act-wrap:hover { color: var(--ink-80); }
.cockpit-act { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cockpit-act-dot { position: relative; width: 30px; height: 17px; border-radius: var(--r-pill); background: var(--chip); transition: background .18s var(--ease-out); flex: 0 0 auto; }
.cockpit-act-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s var(--spring); }
.cockpit-act:checked + .cockpit-act-dot { background: var(--blue); }
.cockpit-act:checked + .cockpit-act-dot::after { transform: translateX(13px); }
.cockpit-act:focus-visible + .cockpit-act-dot { outline: 2px solid var(--blue-focus); outline-offset: 2px; }
.cockpit-act:checked ~ .cockpit-act-label { color: var(--blue); font-weight: 600; }
.fab-badge.fab-op { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue-focus); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .cockpit-act-dot, .cockpit-act-dot::after { transition: none; } }

/* ── Tier-0 voice: mic button + listening state (Web Speech API) ─────────────
   fabius speaks/listens, free + in-browser. The Voice toggle reuses .cockpit-act-wrap. */
.cockpit-mic-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; font-size: 16px; line-height: 1; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--canvas); cursor: pointer; transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .12s var(--spring); }
.cockpit-mic-btn:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--canvas)); }
.cockpit-mic-btn:active { transform: scale(.94); }
.cockpit-mic-btn.is-listening { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, var(--canvas)); animation: mic-pulse 1.2s var(--pulse-ease) infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--blue) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cockpit-mic-btn.is-listening { animation: none; } }