/* ==========================================================================
   Meridian GRC — NextGen vision ("visiontype"). App chrome for the L5 shell.
   Composed from Reasoned; consumes semantic tokens only. Light-on-dark chrome
   values mirror the Meridian example so the two read as one product.
   Three zones — Supervision · Universe · Containers — plus an ambient Command
   palette (⌘K). Command is deliberately NOT a nav item.
   ========================================================================== */

* { box-sizing: border-box; }
body {
  margin: 0;
  /* Matches .vt's own canvas color (not --rsn-surface-page) — .vt only
     covers its own box, which shrinks when the assistant docks, so the
     body needs the same background or a mismatched strip shows through
     to the right of it. */
  background: var(--rsn-surface-sunken);
  color: var(--rsn-text-primary);
  font-family: var(--rsn-font-sans);
  font-size: var(--rsn-text-400);
  line-height: var(--rsn-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[data-theme="light"] body { background: var(--rsn-neutral-150); }

.vt {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "side main";
  column-gap: var(--rsn-space-150);   /* gap between the sidebar's own panel and the main panel */
  height: 100vh;
  width: 100%;
  background: var(--rsn-surface-sunken);   /* app canvas; both panels float on it */
  transition: width var(--rsn-duration-base) var(--rsn-ease-standard);
}
/* Deepen the light-mode canvas a touch so the white panel pops (dark mode keeps
   the theme-aware sunken surface). */
[data-theme="light"] .vt { background: var(--rsn-neutral-150); }

/* Chat launcher — opens the same overlay chat panel as everywhere else. Quiet
   at rest (a ghost pill, no shadow) — it's always present, so it shouldn't
   compete for attention the way an occasional action would. */
.vt-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; padding: 0 var(--rsn-space-150); border-radius: var(--rsn-radius-full);
  background: transparent; color: var(--rsn-text-secondary);
  border: none; box-shadow: none; cursor: pointer;
  font: inherit; font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-medium);
  transition: background var(--rsn-duration-fast) var(--rsn-ease-standard), color var(--rsn-duration-fast) var(--rsn-ease-standard);
}
.vt-fab:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }
.vt-fab .rsn-icon { width: 14px; height: 14px; color: var(--rsn-ai-accent); flex: none; }

/* The repo's review layer injects a fixed "Comments" toggle in the bottom-right
   (review-only chrome) that competes with the Agent button. Hide it on the
   visiontype prototype only — app.css loads solely here, so the review layer is
   untouched on the rest of the docs site. */
#rsn-cmt-toggle { display: none !important; }
/* Docked assistant (sidebar mode) compresses the app rather than overlaying it. */
html.vt-asst-docked .vt { width: calc(100% - 400px); }
@media (max-width: 760px) { html.vt-asst-docked .vt { width: 100%; } }

/* ---------------- Sidebar — its own floating panel, matching .vt-main's
   treatment (border, radius, shadow) instead of blending into the canvas. */
.vt-side {
  grid-area: side;
  min-width: 0;   /* lets the grid track actually collapse to 0 when the nav hides */
  margin: var(--rsn-space-150) 0 var(--rsn-space-150) var(--rsn-space-150);
  border: 1px solid var(--rsn-border-subtle);
  border-radius: var(--rsn-radius-lg);
  background: var(--rsn-surface-raised);
  box-shadow: var(--rsn-shadow-overlay);
  color: var(--rsn-text-secondary);
  display: flex; flex-direction: column;
  /* No top padding — the brand row (see .vt-brand-row) starts flush at the
     panel's own top edge, at the same fixed height as .io-headbar and
     .vt-chat__head, so the logo, page title, and chat title all land on
     the same line. */
  padding: 0 var(--rsn-space-150) var(--rsn-space-150) var(--rsn-space-150);
  overflow-y: auto;
  overflow-x: hidden;
}

.vt-brand-row { display: flex; align-items: center; height: 61px; box-sizing: border-box; margin-bottom: var(--rsn-space-200); flex: none; }
.vt-brand {
  display: flex; align-items: center;
  flex: 1; min-width: 0;
  padding: 0 var(--rsn-space-100);
  color: var(--rsn-text-primary);
  text-decoration: none;   /* it's a link (→ vision overview) but reads as the wordmark */
}
.vt-brand:hover { opacity: 0.82; }
/* Sidebar wordmark — mark + logotype in one SVG, currentColor fill (theme-aware). */
.vt-brand__logo { height: 20px; width: auto; display: block; }

/* Sidebar collapse — a quiet icon beside the brand mark while expanded;
   once collapsed, the same affordance reappears inline in each page's own
   header bar instead (see .io-nav-toggle), since the sidebar that would
   have hosted it is gone. Linear-style: the panel itself, not its
   contents, is what disappears — nothing else in the layout changes
   shape. */
.vt-nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border: none; border-radius: var(--rsn-radius-md);
  background: transparent; color: var(--rsn-text-muted);
  cursor: pointer;
}
.vt-nav-toggle:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-secondary); }
html.vt-nav-collapsed .vt { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
html.vt-nav-collapsed .vt-side { opacity: 0; pointer-events: none; }
/* With the sidebar gone, the main panel would otherwise sit flush against
   the viewport's left edge — give it back a matching inset. */
html.vt-nav-collapsed .vt-main { margin-left: var(--rsn-space-150); }

.vt-nav { display: flex; flex-direction: column; gap: 3px; }
.vt-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--rsn-space-100);
  border-radius: var(--rsn-radius-md);
  font-size: var(--rsn-text-400);
  color: var(--rsn-text-secondary);
  text-decoration: none;
  transition: background var(--rsn-duration-fast) var(--rsn-ease-standard), color var(--rsn-duration-fast) var(--rsn-ease-standard);
}
.vt-nav a:hover { background: var(--rsn-surface-sunken); color: var(--rsn-text-primary); }
.vt-nav a[aria-current="page"] { background: var(--rsn-surface-sunken); color: var(--rsn-text-primary); }
.vt-nav a .rsn-icon { color: var(--rsn-text-muted); flex: none; transition: color var(--rsn-duration-fast) var(--rsn-ease-standard); }
.vt-nav a:hover .rsn-icon, .vt-nav a[aria-current="page"] .rsn-icon { color: var(--rsn-text-secondary); }
.vt-nav__label { font-weight: var(--rsn-weight-medium); min-width: 0; }
.vt-nav__count {
  margin-left: auto; align-self: center;
  font-size: var(--rsn-text-100);
  font-variant-numeric: tabular-nums;
  background: var(--rsn-surface-raised);
  border: 1px solid var(--rsn-border-subtle);
  color: var(--rsn-text-secondary);
  border-radius: var(--rsn-radius-full);
  padding: 1px 7px;
}
/* Pinned to the bottom of the rail, aligned with .vt-main's bottom edge (both
   inset var(--rsn-space-150) from the viewport edge). Quiet on purpose — a
   text link, not a button, so it doesn't compete with the nav above it. */
.vt-side__tour {
  margin-top: auto;
  padding: 9px var(--rsn-space-100);
  font-size: var(--rsn-text-200);
  color: var(--rsn-text-muted);
  text-decoration: none;
}
.vt-side__tour:hover { color: var(--rsn-text-secondary); text-decoration: underline; }

.vt-nav-heading {
  padding: var(--rsn-space-250) var(--rsn-space-100) 4px;
  margin-top: var(--rsn-space-200);
  border-top: 1px solid var(--rsn-border-subtle);
  font-size: var(--rsn-text-100);
  font-weight: var(--rsn-weight-semibold);
  letter-spacing: var(--rsn-tracking-wide);
  text-transform: uppercase;
  color: var(--rsn-text-muted);
}
/* Collapsible section (Linear-style parent label) */
.vt-nav-group, .vt-nav-foot { display: flex; flex-direction: column; gap: 3px;
  margin-top: var(--rsn-space-200); }
.vt-nav-group__items { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.vt-nav-heading--acc {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 3px var(--rsn-space-100);
  font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold);
  letter-spacing: var(--rsn-tracking-wide); text-transform: uppercase; color: var(--rsn-text-muted);
}
.vt-nav-heading--acc:hover { color: var(--rsn-text-secondary); }
.vt-nav-heading__chev { color: var(--rsn-text-muted); transition: transform var(--rsn-duration-fast) var(--rsn-ease-standard); }
.vt-nav-group.is-collapsed .vt-nav-heading__chev { transform: rotate(-90deg); }
.vt-nav-group.is-collapsed .vt-nav-group__items { display: none; }

/* Role switcher — now a sidebar-footer control, under "Take the tour", not a
   top-bar pill. Full width like a nav item so it reads as part of the rail's
   footer rather than a floating pill; personas stay first-class, but the
   collapsed button stays lightweight — full role detail lives in the menu. */
.vt-role { margin-top: var(--rsn-space-100); }
.vt-role__btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px var(--rsn-space-100);
  border: 1px solid transparent;
  border-radius: var(--rsn-radius-md);
  background: transparent;
  color: var(--rsn-text-secondary);
  font-family: inherit; font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium);
  cursor: pointer; text-align: left;
  box-shadow: none;
  transition: background var(--rsn-duration-fast) var(--rsn-ease-standard), color var(--rsn-duration-fast) var(--rsn-ease-standard);
}
.vt-role__btn:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }
.vt-role__who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-role__ava { position: relative; width: 20px; height: 20px; border-radius: var(--rsn-radius-full); flex: none; overflow: hidden;
                background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); font-size: 9px;
                font-weight: var(--rsn-weight-medium); display: inline-flex; align-items: center; justify-content: center; }
.vt-role__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-role__menu { position: fixed; z-index: var(--rsn-layer-overlay); }

/* ---------------- Topbar — Command is the ambient entry point ---------------- */
.vt-top {
  grid-area: top;
  display: flex; align-items: center; gap: var(--rsn-space-200);
  padding: 0 var(--rsn-space-300);
  background: var(--rsn-surface-raised);
  border-bottom: 1px solid var(--rsn-border-subtle);
}
.vt-cmd {
  flex: 0 1 540px;
  display: flex; align-items: center; gap: 10px;
  height: 38px;
  padding: 0 var(--rsn-space-200);
  background: var(--rsn-surface-page);
  border: 1px solid var(--rsn-border-default);
  border-radius: var(--rsn-radius-full);
  color: var(--rsn-text-muted);
  font-family: inherit; font-size: var(--rsn-text-300);
  cursor: text; text-align: left;
}
.vt-cmd:hover { border-color: var(--rsn-border-strong); }
.vt-cmd .rsn-icon { color: var(--rsn-ai-accent); flex: none; }
.vt-cmd kbd {
  margin-left: auto;
  font-family: var(--rsn-font-mono); font-size: 10px;
  border: 1px solid var(--rsn-border-subtle); border-radius: 4px;
  padding: 1px 5px;
  background: var(--rsn-surface-raised);
}
.vt-top__spacer { flex: 1; }

/* ---------------- Main — a floating rounded panel (Linear-style) ----------------
   The whole working area (header + content + rail) lives inside one bordered
   card inset from the app canvas. Full-bleed screens (issue-detail, agent
   canvas) render straight into it; everything else renders into a padded,
   scrolling .vt-scroll inside it. */
.vt-main {
  grid-area: main;
  --vt-col: 1600px;   /* content column — fills the panel like Linear (modest gutter), with a generous cap so ultra-wide displays don't stretch rows absurdly. Long-form prose stays capped separately at a reading measure. */
  margin: var(--rsn-space-150) var(--rsn-space-150) var(--rsn-space-150) 0;   /* fills full height, like .vt-side — the left edge is 0 since .vt's column-gap already provides that space */
  border: 1px solid var(--rsn-border-subtle);
  border-radius: var(--rsn-radius-lg);
  background: var(--rsn-surface-raised);
  box-shadow: var(--rsn-shadow-overlay);   /* soft float above the canvas */
  display: flex; flex-direction: column;
  overflow: hidden;
  outline: none;
}
/* The page area proper — the router clears/rebuilds this on every
   navigation; .vt-main-footer below it is shell chrome and untouched. */
#vt-main-content { flex: 1; min-height: 0; overflow: hidden; }
.vt-main-footer {
  flex: none; display: flex; align-items: center; justify-content: flex-end;
  padding: var(--rsn-space-150) var(--rsn-space-300);
  border-top: 1px solid var(--rsn-border-subtle);
}
.vt-scroll { height: 100%; overflow-y: auto; padding: var(--rsn-space-400) var(--rsn-space-400) var(--rsn-space-800); }
/* The page's content column — capped and centered once, so all children align. */
.vt-colw { max-width: var(--vt-col); margin: 0 auto; }
/* Content containers are flat — the main panel floats over the canvas, but
   cards and tables inside it sit flush (like .dcard), never double-floating. */
.vt-main .rsn-card { box-shadow: none; }
.vt-page-head { max-width: var(--vt-col); margin: 0 auto var(--rsn-space-300); }
.vt-page-head h1 {
  font-size: var(--rsn-text-800);
  font-weight: var(--rsn-weight-semibold);
  letter-spacing: -0.015em;
  margin: var(--rsn-space-50) 0 var(--rsn-space-100);
}
.vt-lede { font-size: var(--rsn-text-500); color: var(--rsn-text-secondary); margin: 0; max-width: 68ch; }

/* ==========================================================================
   How it works — five stacked, self-contained diagram panels the "Page
   hierarchy" tour spotlights in sequence (each panel is one tour step's
   .focus target). Deliberately plain: bordered chips and thin connectors,
   the same flat-card recipe as .io-mod/.dcard rather than a new visual
   system. Iris marks only agent-originated bits (spark icon, assignee
   pill) — the rest of the diagram stays neutral slate.
   ========================================================================== */
.hiw-panel { max-width: var(--vt-col); margin: 0 auto var(--rsn-space-300); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); padding: var(--rsn-space-400); }
.hiw-panel__eyebrow { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-muted); letter-spacing: var(--rsn-tracking-wide); }
.hiw-panel h2 { font-size: var(--rsn-text-600); font-weight: var(--rsn-weight-semibold); letter-spacing: -0.01em; margin: var(--rsn-space-50) 0 var(--rsn-space-100); }
.hiw-panel p { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0 0 var(--rsn-space-300); max-width: 74ch; }
.hiw-panel .hiw-caption { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin: var(--rsn-space-200) 0 0; }

.hiw-diagram { display: flex; align-items: center; gap: var(--rsn-space-200); flex-wrap: wrap; }
.hiw-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-page); padding: 8px 12px; font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.hiw-chip .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.hiw-chip--shared { border-style: dashed; }
.hiw-arrow { color: var(--rsn-text-muted); font-size: var(--rsn-text-400); flex: none; }

.hiw-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hiw-connector { width: 1px; height: var(--rsn-space-200); background: var(--rsn-border-default); }
.hiw-tag { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); border: 1px dashed var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 2px 10px; white-space: nowrap; }

.hiw-diagram--containers { align-items: stretch; }
.hiw-container-box { border: 1px dashed var(--rsn-border-default); border-radius: var(--rsn-radius-lg); padding: var(--rsn-space-200); display: flex; flex-direction: column; gap: var(--rsn-space-150); flex: 1; min-width: 220px; }
.hiw-container-box__label { display: flex; align-items: center; gap: 6px; font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-secondary); }
.hiw-container-box__label .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.hiw-container-box__items { display: flex; gap: var(--rsn-space-100); flex-wrap: wrap; }
.hiw-container-link { width: var(--rsn-space-300); height: 1px; background: var(--rsn-border-default); flex: none; align-self: center; }
@media (max-width: 760px) { .hiw-diagram--containers { flex-direction: column; } .hiw-container-link { width: 1px; height: var(--rsn-space-300); } }

.hiw-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hiw-assignee { display: inline-flex; align-items: center; gap: 5px; font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.hiw-assignee--ai { color: var(--rsn-ai-accent); }
.hiw-assignee--ai .rsn-icon { color: var(--rsn-ai-accent); }
.hiw-assignee--human .rsn-icon { color: var(--rsn-text-muted); }

.hiw-diagram--filter { flex-direction: column; align-items: center; gap: var(--rsn-space-150); }
.hiw-filter-in { display: flex; gap: var(--rsn-space-200); flex-wrap: wrap; justify-content: center; }
.hiw-filter-in .hiw-assignee { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 6px 14px; }
.hiw-filter-funnel { width: 1px; height: var(--rsn-space-300); background: var(--rsn-border-default); }
.hiw-filter-out { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rsn-border-strong); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised); box-shadow: var(--rsn-shadow-raised); padding: 8px 16px; font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); }
.hiw-filter-out .rsn-icon { color: var(--rsn-status-success); flex: none; }

.dm-diagram { max-width: var(--vt-col); margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.dm-tier { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); padding: var(--rsn-space-400); }
.dm-tier__head { margin-bottom: var(--rsn-space-300); }
.dm-tier__label { font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: var(--rsn-space-100); }
.dm-tier__sub { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); max-width: 74ch; }
.dm-connector { display: flex; align-items: center; gap: var(--rsn-space-200); padding: var(--rsn-space-100) var(--rsn-space-400); }
.dm-connector__line { width: 1px; height: 32px; background: var(--rsn-border-default); flex: none; margin-left: 2px; }
.dm-connector__label { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); font-style: italic; }

/* Data model annotated nesting diagram */
.dm-outer { display: flex; justify-content: center; }
.dm-grid { display: grid; grid-template-columns: 110px minmax(0, 720px); align-items: start; }
.dm-lbl { font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-muted); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); padding: var(--rsn-space-300) var(--rsn-space-250) 0 0; text-align: right; line-height: 1.4; }
.dm-box { border-left: 1px solid var(--rsn-border-subtle); border-right: 1px solid var(--rsn-border-subtle); background: var(--rsn-surface-raised); padding: var(--rsn-space-300) var(--rsn-space-400); }
.dm-box--top { border-top: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg) var(--rsn-radius-lg) 0 0; }
.dm-box--bottom { border-bottom: 1px solid var(--rsn-border-subtle); border-radius: 0 0 var(--rsn-radius-lg) var(--rsn-radius-lg); padding: var(--rsn-space-200) var(--rsn-space-400); }
.dm-box--mid { }
.dm-box__name { display: flex; align-items: center; gap: var(--rsn-space-150); font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.dm-box__name .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.dm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rsn-space-300);
  flex-wrap: nowrap;
  padding-bottom: var(--rsn-space-250);
  border-bottom: 1px solid var(--rsn-border-subtle);
}
.dm-box > .dm-head {
  margin: calc(-1 * var(--rsn-space-300)) calc(-1 * var(--rsn-space-400)) 0;
  padding: var(--rsn-space-300) var(--rsn-space-400) var(--rsn-space-250);
}
.dm-head__title {
  display: flex;
  align-items: center;
  gap: var(--rsn-space-150);
  font-size: var(--rsn-text-400);
  font-weight: var(--rsn-weight-semibold);
  color: var(--rsn-text-primary);
  flex: none;
  min-width: 0;
  white-space: nowrap;
}
.dm-obj .dm-head__title { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); }
.dm-head__title .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.dm-head__wf {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--rsn-space-100);
  flex: 1;
  min-width: 0;
}
.dm-wf-row { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--rsn-space-100); }
.dm-step { display: contents; }
.dm-step__chip { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-page); padding: 6px 12px; font-size: var(--rsn-text-200); color: var(--rsn-text-primary); white-space: nowrap; }
.dm-step__arr { color: var(--rsn-text-muted); font-size: var(--rsn-text-300); flex: none; }
.dm-objects-row { display: flex; flex-direction: column; gap: var(--rsn-space-300); }
.dm-obj { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-page); overflow: hidden; width: 100%; }
.dm-obj .dm-head { padding: var(--rsn-space-250) var(--rsn-space-300); margin: 0; }

.vt-card {
  border: 1px solid var(--rsn-border-subtle);
  border-radius: var(--rsn-radius-lg);
  background: var(--rsn-surface-raised);
  padding: var(--rsn-space-300);
  max-width: var(--vt-col);
  margin-bottom: var(--rsn-space-300);
}
.vt-card h2 { font-size: var(--rsn-text-600); font-weight: var(--rsn-weight-semibold); margin: 0; }
.vt-list { margin: var(--rsn-space-200) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--rsn-space-200); }
.vt-list li { display: flex; gap: var(--rsn-space-150); font-size: var(--rsn-text-400); color: var(--rsn-text-secondary); }
.vt-list li .vt-dot { width: 6px; height: 6px; border-radius: var(--rsn-radius-full); background: var(--rsn-text-muted); flex: none; margin-top: 7px; }
.vt-list b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }

/* ---------------- Command — right-hand AI chat panel (⌘K) ---------------- */
/* Docked mode is its own floating panel — same treatment as the sidebar and
   main panel (border, radius, shadow, 12px canvas inset) — sitting in the
   400px .vt-asst-docked compresses for. Only one inset is subtracted from
   the width (not two): the panel's own right:12px already accounts for the
   right-edge gap, so the remaining 12px of slack becomes the gap on its
   left, matching the main panel's own right margin exactly (12px + 12px,
   not 24px) — the same rhythm as the sidebar-to-main gap. */
.vt-chat, .vt-dock {
  position: fixed; top: var(--rsn-space-150); right: var(--rsn-space-150); bottom: var(--rsn-space-150);
  width: calc(400px - var(--rsn-space-150)); max-width: 92vw;
  background: var(--rsn-surface-raised);
  border: 1px solid var(--rsn-border-subtle);
  border-radius: var(--rsn-radius-lg);
  box-shadow: var(--rsn-shadow-overlay);
  z-index: var(--rsn-layer-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* On narrow screens the docked panel overlays (no room to compress) — it
   already carries a shadow, so no extra override needed there anymore. */
.vt-chat__head {
  display: flex; align-items: center; gap: var(--rsn-space-150);
  height: 61px; box-sizing: border-box; flex: none;
  padding: 0 var(--rsn-space-250);
  border-bottom: 1px solid var(--rsn-border-subtle);
}
.vt-chat__title { display: flex; align-items: center; gap: 8px; font-weight: var(--rsn-weight-regular); font-size: var(--rsn-text-400); }
.vt-chat__title .rsn-icon { color: var(--rsn-ai-accent); flex: none; }
.vt-chat__close { margin-left: auto; }
.vt-chat__thread { flex: 1; overflow-y: auto; padding: var(--rsn-space-250); display: flex; flex-direction: column; gap: var(--rsn-space-200); }
.vt-chat__intro { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); }
.vt-chat__intro-text { margin: 0 0 var(--rsn-space-200); }
.vt-chat__chips { display: flex; flex-wrap: wrap; gap: var(--rsn-space-100); }
.vt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rsn-ai-border);
  background: var(--rsn-ai-surface);
  color: var(--rsn-ai-text);
  border-radius: var(--rsn-radius-full);
  font-family: inherit; font-size: var(--rsn-text-200);
  cursor: pointer;
  text-align: left;
}
.vt-chip .rsn-icon { color: var(--rsn-ai-accent); flex: none; }
.vt-chip:hover { border-color: var(--rsn-ai-accent); }
.vt-msg { font-size: var(--rsn-text-300); line-height: var(--rsn-leading-body); max-width: 90%; }
.vt-msg--user { align-self: flex-end; background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle); padding: 8px 12px; border-radius: var(--rsn-radius-lg); }
.vt-msg--agent { align-self: flex-start; display: flex; gap: 8px; color: var(--rsn-text-secondary); }
.vt-msg--agent .rsn-icon { color: var(--rsn-ai-accent); flex: none; margin-top: 2px; }
.vt-chat__composer {
  padding: var(--rsn-space-200);
  border-top: 1px solid var(--rsn-border-subtle);
}
.vt-chat__field {
  border: 1.5px solid var(--rsn-border-default);
  border-radius: var(--rsn-radius-lg);
  padding: var(--rsn-space-200);
  display: flex; flex-direction: column; gap: var(--rsn-space-150);
  cursor: text; transition: border-color 0.15s;
}
.vt-chat__field:focus-within { border-color: var(--rsn-focus-ring); }
.vt-chat__ctx { }
.vt-chat__ctx-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 3px 10px 3px 7px; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-chat__ctx-chip .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.vt-chat__composer input {
  border: none; background: none; outline: none;
  font-family: inherit; font-size: var(--rsn-text-300);
  color: var(--rsn-text-primary); width: 100%; min-height: 24px;
}
.vt-chat__field-foot { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Issue detail (finding) screen — the O2C invoice review record.
   Consolidated from the standalone example; consumes semantic tokens only.
   ========================================================================== */
.io-wrap { max-width: var(--vt-col); margin: 0 auto; width: 100%; min-height: 0; }   /* detail pages track the same content width as list pages */

/* Record head */
/* Issue detail is a flex-column app (like the agent canvas .ag): a full-width
   white header bar on top, then a scrolling body with the workflow rail beside
   it — so the panel sits UNDER the header, not over it. */
.io-page { display: flex; flex-direction: column; height: 100%; }
/* One line: breadcrumb, a separator chevron, then the title row — not
   stacked — so every header (list or detail) is the same fixed height. */
/* Horizontal inset matches the sidebar's own internal padding
   (--rsn-space-150), so text lines up whether it's a nav item or a page
   title — see .vt-side. */
.io-headbar { flex: none; display: flex; align-items: center; gap: var(--rsn-space-150);
              height: 61px; box-sizing: border-box;
              padding: 0 var(--rsn-space-300);
              background: var(--rsn-surface-raised); border-bottom: 1px solid var(--rsn-border-subtle); }
.io-headbar .rsn-breadcrumbs { flex: none; font-size: var(--rsn-text-400); }
.io-head__sep { color: var(--rsn-text-muted); flex: none; opacity: 0.6; }
/* Sidebar-collapse toggle, inline in the header — only rendered/visible
   once the sidebar itself is gone (see html.vt-nav-collapsed below), so it
   naturally aligns and spaces itself via the header's own flex row instead
   of guessed fixed coordinates. */
.io-nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border: none; border-radius: var(--rsn-radius-md);
  background: transparent; color: var(--rsn-text-muted);
  cursor: pointer;
}
.io-nav-toggle .rsn-icon { transform: scaleX(-1); }
.io-nav-toggle:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-secondary); }
html.vt-nav-collapsed .io-nav-toggle { display: inline-flex; }
.io-below { flex: 1; display: flex; min-height: 0; }
/* The below-header area fills remaining height; the two columns each scroll
   on their own (see .io-content / .io-rail) rather than the page scrolling as one. */
.io-scroll { flex: 1; min-width: 0; min-height: 0; display: flex; overflow: hidden; padding: 0 var(--rsn-space-300); }
/* Single-column list pages (register lists): one scrolling area under the
   sticky .io-headbar, instead of .io-scroll's two-column (content + rail)
   assumption. */
.io-list-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--rsn-space-400) var(--rsn-space-300) var(--rsn-space-800); }
/* Title row: H1 on the left; status + actions ride to the right on one line. */
.io-head__title { display: flex; align-items: center; gap: var(--rsn-space-150); flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.io-head__title h1 {
  font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-regular);
  letter-spacing: -0.015em; margin: 0; line-height: var(--rsn-leading-tight);
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Editing needs the full title visible, so drop the truncation in edit mode. */
body[data-mode="edit"] .io-head__title h1 { white-space: normal; overflow: visible; text-overflow: clip; }
.io-head__id { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-400); color: var(--rsn-text-muted); }
.io-head__badges { display: flex; align-items: center; gap: var(--rsn-space-100); flex-wrap: wrap; }

/* AI provenance banner (draft awaiting adoption) */
.io-prov {
  display: flex; gap: var(--rsn-space-150); align-items: flex-start;
  padding: var(--rsn-space-150) var(--rsn-space-200);
  border: 1px solid var(--rsn-ai-border); border-radius: var(--rsn-radius-lg);
  background: var(--rsn-ai-surface);
  margin-bottom: var(--rsn-space-250);
}
.io-prov__body { flex: 1; min-width: 0; }
.io-prov__title { display: flex; align-items: center; gap: var(--rsn-space-100); font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); margin-bottom: 3px; flex-wrap: wrap; }
.io-prov__text { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: 1.5; max-width: 78ch; }
.io-prov__actions { display: flex; gap: var(--rsn-space-100); margin-top: var(--rsn-space-150); flex-wrap: wrap; }

/* Linear-style record layout: single flowing content column + a persistent
   modular rail. The header panel button collapses the whole rail (content
   re-centers); each module head is an accordion. */
.io-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--rsn-space-600); align-items: stretch; height: 100%; min-height: 0; }
.io-cols--collapsed { grid-template-columns: minmax(0, 1fr); }
.io-cols--collapsed .io-rail { display: none; }
@media (max-width: 900px) { .io-cols { grid-template-columns: 1fr; gap: var(--rsn-space-300); } .io-rail { display: none; } }

/* Plain rail workpapers — full-height split column, no accordion modules */
.io-page--plain-rail .io-split {
  display: flex; flex: 1 1 auto; min-height: 0; height: 100%;
}
.io-page--plain-rail .io-split__main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.io-page--plain-rail .io-split__main .io-scroll { flex: 1; padding: 0 var(--rsn-space-300); }
.io-page--plain-rail .io-split__main .io-content {
  transition: max-width var(--rsn-duration-base) var(--rsn-ease-standard),
              margin var(--rsn-duration-base) var(--rsn-ease-standard);
}
.io-split__rail-slot {
  position: relative;
  flex: none;
  width: 408px;
  overflow: hidden;
  border-left: 1px solid var(--rsn-border-subtle);
  transition: width var(--rsn-duration-base) var(--rsn-ease-standard),
              border-color var(--rsn-duration-base) var(--rsn-ease-standard);
}
.io-split--collapsed .io-split__rail-slot {
  width: 0;
  border-left-color: transparent;
}
.io-split__rail-inner {
  position: absolute; inset: 0;
  padding: var(--rsn-space-250) var(--rsn-space-300) var(--rsn-space-400);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.io-split__rail-backdrop {
  display: none;
  position: fixed; z-index: calc(var(--rsn-layer-overlay) - 3);
  top: 61px; right: 0; bottom: 0; left: 0;
  background: color-mix(in srgb, var(--rsn-neutral-950) 28%, transparent);
}
.io-rail--plain {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0; overflow: hidden;
  scrollbar-gutter: stable;
  background: var(--rsn-surface-raised);
  padding: 0 var(--rsn-space-200);
  display: flex; flex-direction: column;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--rsn-duration-base) var(--rsn-ease-standard),
              visibility var(--rsn-duration-base) var(--rsn-ease-standard);
}
.io-rail__close {
  display: none;
  position: absolute; z-index: 2;
  top: var(--rsn-space-100); right: var(--rsn-space-100);
  width: 28px; height: 28px; align-items: center; justify-content: center;
  border: none; border-radius: var(--rsn-radius-md);
  background: var(--rsn-surface-sunken); color: var(--rsn-text-muted);
  cursor: pointer; padding: 0;
}
.io-rail__close:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }
.io-rail--plain .io-rail__pane {
  display: none;
  flex: 1 1 auto; min-height: 0; min-width: 0;
  flex-direction: column;
  overflow: hidden;
  padding: var(--rsn-space-100) 0 0;
}
.io-rail--plain .io-rail__pane.is-active { display: flex; }
.io-split--collapsed .io-rail--plain.is-active {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.io-rail--plain .io-life__note { margin: var(--rsn-space-200) 0 0; }
.io-rail--plain .cm__body { display: flex; flex-direction: column; gap: var(--rsn-space-250); min-height: 0; flex: 1; min-width: 0; }
.io-rail--plain .cm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: var(--rsn-space-50); }
.io-rail--plain .cm-form { margin-top: auto; border-top: 1px solid var(--rsn-border-subtle); padding-top: var(--rsn-space-250); }
.io-rail--plain .cm-item { padding: var(--rsn-space-150) 0; border-bottom: 1px solid var(--rsn-border-subtle); }
.io-rail--plain .hist-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: var(--rsn-space-50); }
.io-split--collapsed .io-split__main .io-content { max-width: 900px; margin: 0 auto; }
@media (min-width: 901px) {
  .io-page--plain-rail .io-split__rail-backdrop { display: none !important; }
}
@media (max-width: 900px) {
  .io-page--plain-rail .io-split__rail-slot {
    position: fixed;
    z-index: calc(var(--rsn-layer-overlay) - 2);
    top: 61px; right: 0; bottom: 0; left: auto;
    width: min(100%, 420px) !important;
    border-left: 1px solid var(--rsn-border-subtle);
    box-shadow: var(--rsn-shadow-modal);
    transform: translateX(100%);
    transition: transform var(--rsn-duration-base) var(--rsn-ease-standard);
    pointer-events: none;
  }
  .io-page--plain-rail .io-split:not(.io-split--collapsed) .io-split__rail-slot {
    transform: translateX(0);
    pointer-events: auto;
  }
  .io-page--plain-rail .io-split:not(.io-split--collapsed) .io-split__rail-backdrop { display: block; }
  .io-page--plain-rail .io-split__rail-inner { padding: var(--rsn-space-200) var(--rsn-space-250) var(--rsn-space-400); }
  .io-rail__close { display: inline-flex; }
  .io-page--plain-rail .io-split__main .io-scroll { padding: 0 var(--rsn-space-200); }
}

/* Workflow timeline + audit ledger (plain rail workpapers) */
.wf-timeline { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: var(--rsn-space-50); }
.wf-panel-head { margin-bottom: var(--rsn-space-200); flex: none; }
.wf-panel-head__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin: 0 0 2px; }
.wf-panel-head__sub { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin: 0; line-height: var(--rsn-leading-body); }
.wf-step { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--rsn-space-150); padding-bottom: var(--rsn-space-200); }
.wf-step--last { padding-bottom: 0; }
.wf-step__track { display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.wf-step__dot {
  width: 8px; height: 8px; border-radius: var(--rsn-radius-full); flex: none;
  border: 2px solid var(--rsn-border-strong); background: var(--rsn-surface-raised);
}
.wf-step--done .wf-step__dot { border-color: var(--rsn-status-success); background: var(--rsn-status-success); }
.wf-step--current .wf-step__dot { border-color: var(--rsn-status-warning); background: var(--rsn-surface-raised); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsn-status-warning) 18%, transparent); }
.wf-step--blocked.wf-step--current .wf-step__dot { border-color: var(--rsn-status-warning); }
.wf-step--future .wf-step__dot { border-color: var(--rsn-border-subtle); background: var(--rsn-surface-sunken); }
.wf-step__line { flex: 1; width: 1px; background: var(--rsn-border-subtle); margin-top: var(--rsn-space-50); min-height: var(--rsn-space-200); }
.wf-step--done .wf-step__line { background: var(--rsn-border-default); }
.wf-step__body { min-width: 0; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); overflow: hidden; }
.wf-step__head {
  display: flex; align-items: center; gap: var(--rsn-space-150); width: 100%;
  border: 0; background: transparent; cursor: pointer; padding: var(--rsn-space-150) var(--rsn-space-200);
  font: inherit; text-align: left;
}
.wf-step__head:hover { background: var(--rsn-surface-hover); }
.wf-step__name { flex: 1; min-width: 0; margin: 0; font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.wf-step__chev { flex: none; color: var(--rsn-text-muted); transition: transform var(--rsn-duration-fast) var(--rsn-ease-standard); }
.wf-step--collapsed .wf-step__chev { transform: rotate(-90deg); }
.wf-step--collapsed .wf-step__detail { display: none; }
.wf-step__detail { padding: 0 var(--rsn-space-200) var(--rsn-space-200); display: flex; flex-direction: column; gap: var(--rsn-space-150); }
.wf-step__note { margin: 0; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.wf-step__cta { align-self: flex-start; }
.wf-step__action { margin-top: var(--rsn-space-100); }
.wf-assign { display: flex; flex-direction: column; gap: 4px; }
.wf-assign__lbl { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); }
.wf-review { padding: var(--rsn-space-200); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised); }
.wf-review__head { font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: var(--rsn-space-150); }
.wf-review__stale { text-decoration: line-through; color: var(--rsn-text-muted); }
.wf-ledger__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-150); }
.wf-ledger__row { padding: var(--rsn-space-150) var(--rsn-space-200); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); }
.wf-ledger__row--agent { border-left: 2px solid var(--rsn-ai-accent); }
.wf-ledger__row--human { border-left: 2px solid var(--rsn-border-strong); }
.wf-ledger__row--system { border-left: 2px solid var(--rsn-border-subtle); }
.wf-ledger__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rsn-space-100); margin-bottom: 4px; }
.wf-ledger__when { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.wf-ledger__evt { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.wf-ledger__actor { font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: 4px; }
.wf-ledger__text { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.cm-head { margin-bottom: var(--rsn-space-200); padding-bottom: var(--rsn-space-150); border-bottom: 1px solid var(--rsn-border-subtle); flex: none; }
.cm-head__row { display: flex; align-items: baseline; gap: var(--rsn-space-100); }
.cm-head__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin: 0; }
.cm-head__scope { margin-top: var(--rsn-space-100); }
.hist-head { margin-bottom: var(--rsn-space-200); padding-bottom: var(--rsn-space-150); border-bottom: 1px solid var(--rsn-border-subtle); flex: none; }
.hist-head__row { display: flex; align-items: baseline; gap: var(--rsn-space-100); }
.hist-head__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin: 0; }
.hist-head__scope { margin-top: var(--rsn-space-100); }
.hist-head__sub { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin: var(--rsn-space-100) 0 0; line-height: var(--rsn-leading-body); }
.hist-count { flex: none; font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }

/* Content — a flowing section (cards flattened into dividers) on the panel. */
/* Structured content (cards, tables, grids) fills the column; prose caps itself
   via .io-prose so reading lines stay comfortable. */
.io-content { min-width: 0; min-height: 0; overflow-y: auto; padding: var(--rsn-space-400) 0 var(--rsn-space-800); }
.io-cols--collapsed .io-content { max-width: 900px; margin: 0 auto; }
.io-content .rsn-card { border: 0; background: transparent; border-radius: 0; box-shadow: none; padding: 0; }
.io-content .rsn-card__header { padding: 0 0 var(--rsn-space-150); }
.io-content .rsn-card__body { padding: var(--rsn-space-200) 0 0; }
.io-content .io-section { margin: 0; padding: var(--rsn-space-300) 0; }
.io-content .io-section:first-of-type { padding-top: 0; }
.io-content .io-section:last-of-type { padding-bottom: 0; }

/* Persistent modular rail */
.io-rail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--rsn-space-100); padding: var(--rsn-space-400) 0 var(--rsn-space-800); }
/* Sections keep their natural height so the rail overflows and scrolls, rather
   than flex-shrinking each one (which would clip its content under io-mod's overflow). */
.io-rail > * { flex: none; }
/* When a rail has only one section (e.g. Workflow-only workpaper), let it fill the height. */
.io-rail > .io-mod:only-child { flex: 1 1 0; display: flex; flex-direction: column; overflow: hidden; }
.io-rail > .io-mod:only-child .io-mod__body { flex: 1 1 0; overflow-y: auto; }
.io-mod { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); overflow: hidden; }
.io-mod__head { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; cursor: pointer;
                background: transparent; font: inherit; font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold);
                text-transform: uppercase; letter-spacing: 0.05em; color: var(--rsn-text-muted);
                padding: var(--rsn-space-200) var(--rsn-space-250); }
.io-mod__head:hover { color: var(--rsn-text-secondary); }
.io-mod__head--static { cursor: default; }
.io-mod__head--static:hover { color: var(--rsn-text-muted); }
.io-mod__head { gap: var(--rsn-space-150); }
.io-mod__title { flex: 1 1 auto; min-width: 0; text-align: left; }
/* An optional right-aligned action in a section header (e.g. "See all"). */
.io-mod__action { flex: none; font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-medium);
                  text-transform: none; letter-spacing: normal; color: var(--rsn-text-secondary); }
.io-mod__head:hover .io-mod__action { color: var(--rsn-text-primary); }

/* Comments panel — an alternate rail view (opt-in via cfg.comments). */
.cm__body { display: flex; flex-direction: column; gap: var(--rsn-space-250); }
.cm-count { flex: none; margin-left: var(--rsn-space-100); font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.cm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-250); }
.cm-item { display: flex; gap: var(--rsn-space-150); }
.cm-item__main { min-width: 0; }
.cm-item__head { display: flex; align-items: baseline; gap: var(--rsn-space-100); font-size: var(--rsn-text-200); }
.cm-item__head b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }
.cm-item__when { color: var(--rsn-text-muted); font-size: var(--rsn-text-100); }
.cm-item__text { margin-top: 2px; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.cm-at { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); background: var(--rsn-surface-sunken);
         padding: 0 3px; border-radius: var(--rsn-radius-sm); }
.cm-form { border-top: 1px solid var(--rsn-border-subtle); padding-top: var(--rsn-space-250); display: flex; flex-direction: column; gap: var(--rsn-space-150); }
.cm-input { width: 100%; resize: vertical; min-height: 56px; font: inherit; font-size: var(--rsn-text-200);
            color: var(--rsn-text-primary); background: var(--rsn-surface-raised); border: 1px solid var(--rsn-border-subtle);
            border-radius: var(--rsn-radius-md); padding: var(--rsn-space-150); }
.cm-input:focus { outline: none; border-color: var(--rsn-border-focus, var(--rsn-interactive)); }
.cm-form__foot { display: flex; align-items: center; justify-content: space-between; }
.cm-hint { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.cm-hint b { color: var(--rsn-text-secondary); }
.io-mod__chev { transition: transform var(--rsn-duration-fast) var(--rsn-ease-standard); color: var(--rsn-text-muted); }
.io-mod--collapsed .io-mod__chev { transform: rotate(-90deg); }
.io-mod__body { padding: 0 var(--rsn-space-250) var(--rsn-space-250); }
.io-mod--collapsed .io-mod__body { display: none; }
/* the properties key/value list sits flush inside its module body */
.io-mod__body .io-kv { margin: 0; }
.io-prose { margin: 0; font-size: var(--rsn-text-400); color: var(--rsn-text-primary); line-height: var(--rsn-leading-body); max-width: 74ch; }
.io-sublabel { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin: var(--rsn-space-200) 0 4px; }

/* Typed reference chip (control) */
.io-ref {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md);
  background: var(--rsn-surface-raised);
  font-size: var(--rsn-text-300); color: var(--rsn-text-primary);
  text-decoration: none; cursor: pointer; max-width: 100%;
}
.io-ref:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.io-ref .rsn-icon--sm { color: var(--rsn-text-muted); flex: none; }
.io-ref__id { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-muted); flex: none; }

/* AI suggestion (proposal) cards for the action plan */
.io-suggs { display: flex; flex-direction: column; gap: var(--rsn-space-150); }
.io-sugg__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin: 0 0 5px; }
.io-sugg__desc { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: 1.5; margin: 0 0 var(--rsn-space-150); }
.io-sugg__meta { display: flex; align-items: center; gap: var(--rsn-space-200); flex-wrap: wrap; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); }
.io-sugg__meta .who { display: inline-flex; align-items: center; gap: 6px; }
.io-sugg__meta .due { display: inline-flex; align-items: center; gap: 5px; }
.io-prov__title .rsn-icon { color: var(--rsn-ai-accent); }

/* Adopted remediation tasks */
.io-tasks { display: flex; flex-direction: column; gap: var(--rsn-space-100); }
.io-task {
  display: flex; align-items: flex-start; gap: var(--rsn-space-150);
  border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md);
  padding: var(--rsn-space-150); background: var(--rsn-surface-raised);
}
.io-task__box { width: 18px; height: 18px; border: 1.5px solid var(--rsn-border-default); border-radius: var(--rsn-radius-sm); flex: none; margin-top: 1px; }
.io-task__body { flex: 1; min-width: 0; }
.io-task__text { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); margin-bottom: 2px; }
.io-task__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.io-empty-note { font-size: var(--rsn-text-300); color: var(--rsn-text-muted); }

/* Readiness list (gated action) */
.io-ready { background: var(--rsn-surface-sunken); border-radius: var(--rsn-radius-md); padding: var(--rsn-space-150); display: flex; flex-direction: column; gap: var(--rsn-space-100); }
.io-ready__item { display: flex; align-items: flex-start; gap: 8px; font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.io-ready__item .rsn-icon--sm { margin-top: 2px; flex: none; }
.io-ready__item--met .rsn-icon--sm { color: var(--rsn-status-success); }
.io-ready__item--unmet .rsn-icon--sm { color: var(--rsn-text-muted); }
.io-ready__item--unmet { color: var(--rsn-text-secondary); }

/* A state row that expands to configure agents — enabling a capability, not
   wiring an orchestration graph. */
.io-ready__toggle { flex: none; border: none; background: none; padding: 2px; cursor: pointer; color: var(--rsn-text-muted); border-radius: var(--rsn-radius-sm); }
.io-ready__toggle:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-secondary); }
.io-ready__panel { display: flex; flex-direction: column; gap: 6px; padding: var(--rsn-space-150) 0 var(--rsn-space-100) 24px; }
.io-agent-toggle {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  height: 30px; padding: 0 var(--rsn-space-150) 0 6px;
  border: 1px solid var(--rsn-border-default); border-radius: var(--rsn-radius-full);
  background: var(--rsn-surface-raised); color: var(--rsn-text-primary);
  font-family: var(--rsn-font-sans); font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-medium);
  cursor: pointer;
}
.io-agent-toggle[aria-pressed="false"] { opacity: 0.6; }
.io-agent-toggle:hover { border-color: var(--rsn-border-strong); }
.io-agent-toggle__state { color: var(--rsn-text-muted); font-size: var(--rsn-text-100); }
.io-agent-toggle[aria-pressed="true"] .io-agent-toggle__state { color: var(--rsn-status-success-text); }
.io-fanout { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: var(--rsn-space-150); background: var(--rsn-ai-surface); border: 1px solid var(--rsn-ai-border); border-radius: var(--rsn-radius-md); font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); max-width: 320px; }
.io-fanout svg { flex: none; margin-top: 2px; }

/* Per-state actor line on a Workflow row — who/what is (or was) responsible for
   this specific state, distinct from the durable accountable roles in
   People & capabilities. */
.io-ready__actor { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.io-ready__actor-note { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }

/* Right-column cards */
.io-side { display: flex; flex-direction: column; gap: var(--rsn-space-200); }
.io-side__label { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); margin-bottom: var(--rsn-space-100); }
.io-kv dd .rsn-status, .io-kv dd .rsn-badge { vertical-align: middle; }
.io-people { display: flex; flex-wrap: wrap; gap: 6px; }
.io-person { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }

/* View / edit mode */
.io-head__actions { display: flex; align-items: center; gap: var(--rsn-space-100); flex: none; }
#view-actions { display: flex; align-items: center; gap: var(--rsn-space-100); }
#edit-actions { display: flex; gap: var(--rsn-space-100); }
body[data-mode="edit"] #view-actions { display: none; }
body:not([data-mode="edit"]) #edit-actions { display: none; }

#edit-banner { display: none; margin-bottom: var(--rsn-space-250); }
body[data-mode="edit"] #edit-banner { display: flex; }

body[data-mode="edit"] .io-editable {
  outline: none;
  border: 1px solid var(--rsn-border-default); border-radius: var(--rsn-radius-md);
  padding: 6px 10px; background: var(--rsn-surface-raised);
  transition: border-color var(--rsn-duration-instant) var(--rsn-ease-standard);
}
body[data-mode="edit"] h1.io-editable { padding: 4px 10px; }
body[data-mode="edit"] .io-editable:focus { border-color: var(--rsn-action-primary); box-shadow: 0 0 0 3px var(--rsn-action-selected-bg); }

body:not([data-mode="edit"]) #detail-edit { display: none; }
body[data-mode="edit"] #detail-view { display: none; }
.io-form { display: flex; flex-direction: column; gap: var(--rsn-space-200); }
.io-form .rsn-field { margin: 0; }
.io-form .rsn-input, .io-form .rsn-select { width: 100%; }
.io-form__ro { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); border-top: 1px solid var(--rsn-border-subtle); padding-top: var(--rsn-space-150); }
.io-form__ro .k { color: var(--rsn-text-muted); }

/* Activity trail */
.io-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-200); }
.io-act { display: flex; gap: var(--rsn-space-150); align-items: flex-start; }
.io-act__marker { padding-top: 4px; flex: none; }
.io-act__text { font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.io-act__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 1px; }

/* Decision radios (confirm modal) */
.io-decision { display: flex; flex-direction: column; gap: var(--rsn-space-100); margin-top: var(--rsn-space-150); }
.io-decision label { display: flex; gap: var(--rsn-space-100); align-items: flex-start; cursor: pointer; font-size: var(--rsn-text-300); }
.io-decision b { font-weight: var(--rsn-weight-medium); }
.io-decision .sub { display: block; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }

/* Display-only workflow status on the record title row (reports; never a control). */
.io-head__status { color: var(--rsn-text-secondary); }

/* Workflow panel (docked right; replaces the assistant) */
/* Workflow panel chrome mirrors the agent canvas Inspector (.ag-inspector):
   a compact header bar + a chevron collapse, and matching body padding. */
.vt-wf__head { display: flex; align-items: center; justify-content: space-between; padding: 6px var(--rsn-space-200) 6px var(--rsn-space-250); border-bottom: 1px solid var(--rsn-border-subtle); }
.vt-wf__title { display: flex; align-items: center; gap: 8px; font-weight: var(--rsn-weight-medium); font-size: var(--rsn-text-400); color: var(--rsn-text-primary); }
.vt-wf__body { flex: 1; overflow-y: auto; padding: var(--rsn-space-250) var(--rsn-space-300); display: flex; flex-direction: column; gap: var(--rsn-space-300); }
.vt-wf__now { display: flex; align-items: center; justify-content: space-between; }
.vt-wf__now-label { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.vt-wf__section h3 { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); margin: 0 0 var(--rsn-space-150); }
.vt-wf__hint { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin: var(--rsn-space-100) 0 0; }

.vt-wf__steps { list-style: none; margin: 0; padding: 0; }
.vt-wf__step { position: relative; display: flex; align-items: center; gap: 11px; min-height: 34px; font-size: var(--rsn-text-300); color: var(--rsn-text-muted); }
.vt-wf__step:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 26px; bottom: -8px; width: 2px; background: var(--rsn-border-subtle); }
.vt-wf__step-dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--rsn-border-default); background: var(--rsn-surface-raised); }
.vt-wf__step-dot .rsn-icon { width: 11px; height: 11px; }
.vt-wf__step--done { color: var(--rsn-text-secondary); }
.vt-wf__step--done .vt-wf__step-dot { background: var(--rsn-status-success); border-color: var(--rsn-status-success); color: #fff; }
.vt-wf__step--done:not(:last-child)::before { background: var(--rsn-status-success); }
.vt-wf__step--current { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }
.vt-wf__step--current .vt-wf__step-dot { border-color: var(--rsn-action-primary); box-shadow: 0 0 0 3px var(--rsn-action-selected-bg); }

.vt-wf__items { display: flex; flex-direction: column; gap: var(--rsn-space-100); }
.vt-wf__item { display: flex; align-items: flex-start; gap: 8px; font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.vt-wf__item .rsn-icon { margin-top: 2px; flex: none; }
.vt-wf__item--met .rsn-icon { color: var(--rsn-status-success); }
.vt-wf__item--todo { color: var(--rsn-text-secondary); }
.vt-wf__item--todo .rsn-icon { color: var(--rsn-text-muted); }

/* ==========================================================================
   Inbox — human-in-the-loop surface: manual tasks + agent work awaiting a
   person's decision. Low-fidelity skeleton; semantic tokens only.
   ========================================================================== */
.vt-inbox { display: flex; flex-direction: column; gap: var(--rsn-space-250); max-width: 900px; }
.vt-inbox-group__count { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); font-variant-numeric: tabular-nums; }
.vt-inbox-item { display: flex; align-items: flex-start; gap: var(--rsn-space-150); padding: var(--rsn-space-200) var(--rsn-space-250); border-bottom: 1px solid var(--rsn-border-subtle); }
.vt-inbox-item:last-child { border-bottom: none; }
.vt-inbox-item__marker { width: 28px; height: 28px; border-radius: var(--rsn-radius-md); display: flex; align-items: center; justify-content: center; flex: none; }
.vt-inbox-item__marker--ai { background: var(--rsn-ai-surface); color: var(--rsn-ai-accent); }
.vt-inbox-item__marker--task { background: var(--rsn-status-info-surface); color: var(--rsn-status-info); }
.vt-inbox-item__body { flex: 1; min-width: 0; }
.vt-inbox-item__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); margin-bottom: 3px; display: flex; align-items: center; gap: var(--rsn-space-100); flex-wrap: wrap; }
.vt-inbox-item__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: 1.45; }
.vt-inbox-item__actions { display: flex; align-items: center; gap: var(--rsn-space-100); flex: none; }

/* Inbox activity feed (following / connected work) */
.vt-feed { padding: 0; }
.vt-feed__row { display: flex; align-items: flex-start; gap: var(--rsn-space-150); padding: var(--rsn-space-200) var(--rsn-space-250); border-bottom: 1px solid var(--rsn-border-subtle); }
.vt-feed__row:last-child { border-bottom: none; }
.vt-feed__marker, .vt-feed__avatar { width: 28px; height: 28px; flex: none; }
.vt-feed__marker { border-radius: var(--rsn-radius-full); display: flex; align-items: center; justify-content: center; }
.vt-feed__marker--ai { background: var(--rsn-ai-surface); color: var(--rsn-ai-accent); }
.vt-feed__body { flex: 1; min-width: 0; }
.vt-feed__text { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); }
.vt-feed__text b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }
.vt-feed__obj { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); text-decoration: none; }
.vt-feed__obj:hover { text-decoration: underline; }
.vt-feed__note { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: 1.45; margin-top: 2px; }
.vt-feed__meta { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin-top: 3px; }

/* Inbox — split-pane master-detail layout */
.inbox-split { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.inbox-pane { display: flex; flex-direction: column; overflow: hidden; }
.inbox-pane--list { flex: 0 0 300px; border-right: 1px solid var(--rsn-border-subtle); }
.inbox-pane--detail { flex: 1; min-width: 0; overflow-y: auto; }
.inbox-list__filters { flex: none; padding: var(--rsn-space-250) var(--rsn-space-300) var(--rsn-space-200); border-bottom: 1px solid var(--rsn-border-subtle); }
.inbox-list__items { flex: 1; min-height: 0; overflow-y: auto; }
.inbox-list-row { display: flex; align-items: flex-start; gap: var(--rsn-space-150); padding: var(--rsn-space-200) var(--rsn-space-300); border-bottom: 1px solid var(--rsn-border-subtle); cursor: pointer; }
.inbox-list-row:last-child { border-bottom: none; }
.inbox-list-row:hover { background: var(--rsn-surface-hover); }
.inbox-list-row[aria-selected="true"] { background: var(--rsn-surface-sunken); }
.inbox-list-row__marker { flex: none; padding-top: 2px; }
.inbox-list-row__content { flex: 1; min-width: 0; }
.inbox-list-row__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rsn-space-100); }
.inbox-list-row__actor { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.inbox-list-row__time { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); flex: none; white-space: nowrap; }
.inbox-list-row__subject { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.inbox-list-row__preview { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* Inbox — detail pane */
.inbox-detail { padding: var(--rsn-space-500); max-width: 640px; }
.inbox-detail__empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--rsn-text-muted); font-size: var(--rsn-text-300); }
.inbox-detail__from { display: flex; align-items: center; gap: var(--rsn-space-200); margin-bottom: var(--rsn-space-400); }
.inbox-detail__from-info { flex: 1; min-width: 0; }
.inbox-detail__actor { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.inbox-detail__when { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 1px; }
.inbox-detail__subject { font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: var(--rsn-space-400); line-height: 1.3; }
.inbox-detail__obj-link { color: var(--rsn-interactive); text-decoration: none; }
.inbox-detail__obj-link:hover { text-decoration: underline; }
.inbox-detail__body { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: 1.65; margin-bottom: var(--rsn-space-400); }
.inbox-detail__body p { margin: 0 0 var(--rsn-space-200); }
.inbox-detail__body p:last-child { margin-bottom: 0; }
.inbox-detail__body strong { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }
.inbox-detail__quote { margin: var(--rsn-space-200) 0; padding: var(--rsn-space-200) var(--rsn-space-300); border-left: 3px solid var(--rsn-border-strong); background: var(--rsn-surface-sunken); border-radius: 0 var(--rsn-radius-md) var(--rsn-radius-md) 0; color: var(--rsn-text-secondary); font-style: italic; }
.inbox-detail__meta-row { display: flex; align-items: baseline; gap: var(--rsn-space-200); padding: var(--rsn-space-100) 0; border-bottom: 1px solid var(--rsn-border-subtle); }
.inbox-detail__meta-row:last-child { border-bottom: none; }
.inbox-detail__meta-label { flex: 0 0 120px; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.inbox-detail__meta-val { flex: 1; font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.inbox-detail__actions { display: flex; gap: var(--rsn-space-150); }

/* Review — three-column kanban board */
.rvw-board { flex: 1; min-height: 0; display: flex; gap: var(--rsn-space-200); padding: var(--rsn-space-200); overflow: hidden; }
.rvw-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--rsn-border-subtle) 25%, transparent); border-radius: var(--rsn-radius-lg); overflow: hidden; }
.rvw-col__head { flex: none; padding: var(--rsn-space-300) var(--rsn-space-300) var(--rsn-space-250); }
.rvw-col__label { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: 3px; }
.rvw-col__sub { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); line-height: 1.45; }
.rvw-col__items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--rsn-space-200) var(--rsn-space-200); display: flex; flex-direction: column; gap: var(--rsn-space-150); }
.rvw-card { background: var(--rsn-surface-raised); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); padding: var(--rsn-space-200) var(--rsn-space-250); display: flex; flex-direction: column; gap: var(--rsn-space-100); height: 150px; flex: none; overflow: hidden; }
.rvw-card__top { display: flex; align-items: center; gap: var(--rsn-space-100); flex: none; }
.rvw-card__title { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.rvw-card__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvw-card__prov { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvw-card--clickable { cursor: pointer; }
.rvw-card--clickable:hover { border-color: var(--rsn-border-default); box-shadow: var(--rsn-shadow-raised); }

/* Side-peek drawer */
.rvw-drawer-backdrop { position: absolute; inset: 0; z-index: 99; background: transparent; }
.rvw-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: 480px; min-width: 320px; background: var(--rsn-surface-raised); border-left: 1px solid var(--rsn-border-subtle); box-shadow: -4px 0 32px rgba(0,0,0,0.08); display: flex; flex-direction: column; z-index: 100; transform: translateX(100%); transition: transform 0.22s ease; }
.rvw-drawer.is-open { transform: translateX(0); }
.rvw-drawer__resize { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; cursor: ew-resize; z-index: 1; border-left: 2px solid transparent; transition: border-color 0.15s; }
.rvw-drawer__resize:hover { border-color: var(--rsn-border-default); }
.rvw-drawer__head { display: flex; align-items: flex-start; gap: var(--rsn-space-200); padding: var(--rsn-space-300) var(--rsn-space-400) var(--rsn-space-300) var(--rsn-space-500); border-bottom: 1px solid var(--rsn-border-subtle); flex: none; }
.rvw-drawer__head-text { flex: 1; min-width: 0; }
.rvw-drawer__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); line-height: 1.35; }
.rvw-drawer__sub { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 3px; }
.rvw-drawer__close { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: var(--rsn-radius-sm); color: var(--rsn-text-muted); cursor: pointer; padding: 0; }
.rvw-drawer__close:hover { background: var(--rsn-surface-sunken); color: var(--rsn-text-primary); }
.rvw-drawer__body { flex: 1; overflow-y: auto; padding: var(--rsn-space-400); display: flex; flex-direction: column; gap: var(--rsn-space-400); }
.rvw-drawer__section-label { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); margin-bottom: var(--rsn-space-200); }
.rvw-drawer__stats { display: flex; gap: var(--rsn-space-200); }
.rvw-drawer__stat { flex: 1; text-align: center; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); padding: var(--rsn-space-300) var(--rsn-space-200); }
.rvw-drawer__stat-num { font-size: var(--rsn-text-700); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); line-height: 1; }
.rvw-drawer__stat-label { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); margin-top: 5px; }
.rvw-drawer__summary { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); background: var(--rsn-surface-sunken); border-radius: var(--rsn-radius-md); padding: var(--rsn-space-300); font-style: italic; }
.rvw-drawer__prov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-100); }
.rvw-drawer__prov-list li { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); display: flex; gap: var(--rsn-space-100); align-items: baseline; }
.rvw-drawer__prov-list li::before { content: "·"; color: var(--rsn-text-muted); flex: none; }
.rvw-drawer__attest { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); padding: var(--rsn-space-300); display: flex; flex-direction: column; gap: var(--rsn-space-250); }
.rvw-drawer__check { display: flex; align-items: flex-start; gap: var(--rsn-space-150); cursor: pointer; }
.rvw-drawer__checkbox { margin-top: 2px; flex: none; }
.rvw-drawer__check-label { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: 1.5; }
.rvw-drawer__sign { width: 100%; }

/* Reviews — left list rows */
.rvw-list__summary { flex: none; padding: var(--rsn-space-250) var(--rsn-space-300) var(--rsn-space-200); font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); border-bottom: 1px solid var(--rsn-border-subtle); }
.rvw-list-row { display: flex; align-items: flex-start; gap: var(--rsn-space-150); padding: var(--rsn-space-200) var(--rsn-space-300); border-bottom: 1px solid var(--rsn-border-subtle); cursor: pointer; }
.rvw-list-row:last-child { border-bottom: none; }
.rvw-list-row:hover { background: var(--rsn-surface-hover); }
.rvw-list-row[aria-selected="true"] { background: var(--rsn-surface-sunken); }
.rvw-list-row--done { opacity: 0.5; }
.rvw-list-row__body { flex: 1; min-width: 0; }
.rvw-list-row__title { font-size: var(--rsn-text-300); color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvw-list-row__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvw-list__cleared { padding: var(--rsn-space-200) var(--rsn-space-300); font-size: var(--rsn-text-200); color: var(--rsn-text-muted); display: flex; align-items: center; gap: var(--rsn-space-100); }
.rvw-list__cleared .rsn-icon { color: var(--rsn-status-success); width: 14px; height: 14px; flex: none; }

/* Reviews — right detail panel */
.rvw-detail { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.rvw-detail__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--rsn-space-250) var(--rsn-space-300); border-bottom: 1px solid var(--rsn-border-subtle); gap: var(--rsn-space-150); }
.rvw-detail__head-title { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvw-detail__close { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: var(--rsn-radius-md); color: var(--rsn-text-muted); cursor: pointer; padding: 0; }
.rvw-detail__close:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }
.rvw-detail__body { flex: 1; overflow-y: auto; padding: var(--rsn-space-400) var(--rsn-space-400); }
.rvw-detail__tier { margin-bottom: var(--rsn-space-200); display: flex; align-items: center; gap: var(--rsn-space-150); flex-wrap: wrap; }
.rvw-detail__title { font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin: 0 0 var(--rsn-space-150); line-height: 1.3; }
.rvw-detail__meta { font-size: var(--rsn-text-300); color: var(--rsn-text-muted); margin: 0 0 var(--rsn-space-300); }
.rvw-detail__prov { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: 1.6; margin: 0 0 var(--rsn-space-400); padding: var(--rsn-space-200) var(--rsn-space-250); background: var(--rsn-surface-sunken); border-radius: var(--rsn-radius-md); border-left: 3px solid var(--rsn-border-strong); }
.rvw-detail__actions { display: flex; gap: var(--rsn-space-150); }
.rvw-detail__done-label { display: flex; align-items: center; gap: var(--rsn-space-150); font-size: var(--rsn-text-400); color: var(--rsn-text-secondary); margin: 0; }

/* Projects — progress bar */
.pj-prog { display: inline-flex; align-items: center; gap: 8px; }
.pj-prog__bar { width: 120px; height: 6px; border-radius: var(--rsn-radius-full); background: var(--rsn-surface-sunken); overflow: hidden; }
/* Progress is quantitative, not a status claim — neutral fill, so green stays
   reserved for the status badge in the same row. */
.pj-prog__fill { display: block; height: 100%; background: var(--rsn-text-secondary); }
.pj-prog__pct { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); font-variant-numeric: tabular-nums; }

/* Automations — deterministic rules */
.au-rules { display: flex; flex-direction: column; gap: var(--rsn-space-100); }
.au-rule { display: flex; align-items: center; gap: var(--rsn-space-150); padding: var(--rsn-space-150);
           border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised); }
.au-rule__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
                 border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); }
.au-rule__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.au-rule__when { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); }
.au-rule__then { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); }
.au-rule__state { flex: none; }

/* ==========================================================================
   Universe — the object constellation. Risks / controls / FSLIs / processes
   as stars connected by relationship lines, drifting gently. Colour here is
   categorical (chart slots), the sanctioned use of hue for object types.
   ========================================================================== */
/* The body flexes to fill whatever's left under the header — the browse
   carousel and toolbar stay a fixed size, and the canvas/table (flex: 1)
   takes the rest, so viewing the map never requires scrolling the page. */
.uni-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--rsn-space-300); overflow: hidden; }
.uni-caption { flex: none; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin: var(--rsn-space-150) 0 0; }
.uni-filters { display: flex; align-items: center; gap: var(--rsn-space-100); flex-wrap: wrap; margin-bottom: var(--rsn-space-200); }
.uni-filters__label { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-right: var(--rsn-space-100); }
.uni-filter {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 var(--rsn-space-150);
  border: 1px solid var(--rsn-border-default); border-radius: var(--rsn-radius-full);
  background: var(--rsn-surface-raised); color: var(--rsn-text-primary);
  font-family: var(--rsn-font-sans); font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-medium);
  cursor: pointer;
}
.uni-filter__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dot, var(--rsn-text-muted)); }
.uni-filter[aria-pressed="false"] { opacity: 0.45; background: var(--rsn-surface-sunken); }
.uni-filter:hover { border-color: var(--rsn-border-strong); }

.uni-canvas {
  position: relative;
  max-width: var(--vt-col);
  width: 100%;
  margin-inline: auto;
  flex: 1; min-height: 0; min-width: 0;   /* fills whatever's left under the browse carousel + toolbar, instead of a viewport-height guess */
  border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 12%, var(--rsn-surface-raised) 0%, var(--rsn-surface-sunken) 55%, var(--rsn-surface-page) 100%);
}
.uni-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.uni-edge { stroke: var(--rsn-border-strong); stroke-width: 1; opacity: 0.28; }
.uni-node { cursor: pointer; }
.uni-node__glow { opacity: 0.18; animation: uni-twinkle 6s ease-in-out infinite; }
.uni-node__core { stroke: var(--rsn-surface-page); stroke-width: 1.5; }
.uni-node__ring { fill: none; stroke: var(--rsn-status-critical); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.9; }
.uni-node__label { font-family: var(--rsn-font-mono); font-size: 10px; fill: var(--rsn-text-muted); opacity: 0; transition: opacity var(--rsn-duration-fast) var(--rsn-ease-standard); }
.uni-node:hover .uni-node__label, .uni-node.is-selected .uni-node__label { opacity: 1; fill: var(--rsn-text-primary); }
.uni-node:hover .uni-node__glow, .uni-node.is-selected .uni-node__glow { opacity: 0.4; }
.uni-node.is-dim { opacity: 0.12; }

@keyframes uni-drift { from { transform: translate(0, 0); } to { transform: translate(-14px, 10px); } }
@keyframes uni-twinkle { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.26; } }
.uni-graph { animation: uni-drift 22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .uni-graph, .uni-node__glow { animation: none; } }

/* Detail overlay */
.uni-detail {
  position: absolute; top: var(--rsn-space-200); right: var(--rsn-space-200); width: 268px;
  background: var(--rsn-surface-overlay); border: 1px solid var(--rsn-border-subtle);
  border-radius: var(--rsn-radius-lg); box-shadow: var(--rsn-shadow-overlay);
  padding: var(--rsn-space-200); display: none;
}
.uni-detail.is-open { display: block; }
.uni-detail__type { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); letter-spacing: var(--rsn-tracking-wide); text-transform: uppercase; color: var(--rsn-text-muted); margin-bottom: 6px; }
.uni-detail__type .uni-filter__dot { width: 8px; height: 8px; }
.uni-detail__id { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.uni-detail__name { font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin: 2px 0 8px; line-height: 1.3; }
.uni-detail__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: 1.5; margin-bottom: var(--rsn-space-150); }
.uni-detail__close { position: absolute; top: 8px; right: 8px; }


/* ---- Universe: premium finish + view switcher + nested table ---- */
.uni-toolbar { flex: none; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--rsn-space-200); flex-wrap: wrap; margin: 0 auto var(--rsn-space-200); max-width: var(--vt-col); width: 100%; }
.uni-toolbar .uni-filters { margin-bottom: 0; }

/* Richer canvas: deep radial field + inner vignette for depth */
.uni-canvas {
  background:
    radial-gradient(130% 100% at 26% 8%, var(--rsn-surface-raised) 0%, var(--rsn-surface-sunken) 48%, var(--rsn-surface-page) 100%);
  box-shadow: inset 0 0 120px 24px rgba(17, 22, 28, 0.06);
}
[data-theme="dark"] .uni-canvas { box-shadow: inset 0 0 160px 30px rgba(0, 0, 0, 0.5); }

/* Background dust — static, so the drifting graph parallaxes over it */
.uni-dust circle { fill: var(--rsn-text-muted); }

/* Edges as soft curved paths, with a focus/neighbourhood highlight */
.uni-edge { fill: none; stroke: var(--rsn-border-strong); stroke-width: 1.2; opacity: 0.22; transition: opacity var(--rsn-duration-base) var(--rsn-ease-standard), stroke var(--rsn-duration-base) var(--rsn-ease-standard); }
.uni-edge.is-lit { stroke: var(--rsn-text-secondary); opacity: 0.7; }
.uni-node { transition: opacity var(--rsn-duration-base) var(--rsn-ease-standard), transform var(--rsn-duration-fast) var(--rsn-ease-standard); transform-box: fill-box; transform-origin: center; }
.uni-node:hover, .uni-node.is-selected { transform: scale(1.16); }
.uni-node__core { filter: drop-shadow(0 1px 2px rgba(17, 22, 28, 0.18)); }

/* Focus a neighbourhood — dim everything else (the map is a neighbourhood) */
.uni-graph.is-focus .uni-node { opacity: 0.13; }
.uni-graph.is-focus .uni-node.is-lit { opacity: 1; }
.uni-graph.is-focus .uni-edge { opacity: 0.05; }
.uni-graph.is-focus .uni-edge.is-lit { opacity: 0.75; }

/* Nested table view */
.uni-table-wrap { max-width: var(--vt-col); width: 100%; min-width: 0; margin-inline: auto; flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); }
table.uni-table { width: 100%; border-collapse: collapse; font-size: var(--rsn-text-300); }
.uni-table th { text-align: left; font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); padding: 10px var(--rsn-space-200); border-bottom: 1px solid var(--rsn-border-subtle); }
.uni-table td { padding: 9px var(--rsn-space-200); border-bottom: 1px solid var(--rsn-border-subtle); vertical-align: middle; color: var(--rsn-text-primary); }
.uni-table tr:last-child td { border-bottom: none; }
.uni-trow--group { cursor: pointer; }
.uni-trow--group > td { background: var(--rsn-surface-sunken); }
.uni-trow--group:hover > td { background: var(--rsn-surface-hover); }
.uni-tgroup { display: flex; align-items: center; gap: var(--rsn-space-100); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.uni-tgroup__count { margin-left: 6px; font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-regular); color: var(--rsn-text-muted); font-variant-numeric: tabular-nums; }
.uni-tcaret { transition: transform var(--rsn-duration-fast) var(--rsn-ease-standard); color: var(--rsn-text-muted); }
.uni-trow--group[aria-expanded="false"] .uni-tcaret { transform: rotate(-90deg); }
.uni-tobj { display: flex; align-items: baseline; gap: var(--rsn-space-100); padding-left: var(--rsn-space-400); }
.uni-tid { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-200); color: var(--rsn-text-muted); flex: none; }
.uni-ttype { display: inline-flex; align-items: center; gap: 6px; color: var(--rsn-text-secondary); font-size: var(--rsn-text-200); }
.uni-conns { display: flex; flex-wrap: wrap; gap: 4px; }
.uni-conn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-secondary); background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-sm); padding: 1px 6px; }
.uni-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dot, var(--rsn-text-muted)); }

/* ==========================================================================
   Chat — full-page conversation with an artifacts panel on the right. The
   conversation is the page; documents the assistant produces open as
   artifacts (not the AI itself). Distinct from the ambient assistant drawer.
   ========================================================================== */
/* fullBleed page: fill #vt-main exactly, no magic-number height */
.chat-page { height: 100%; padding: var(--rsn-space-400); box-sizing: border-box; display: flex; }
.chat { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; overflow: hidden; background: var(--rsn-surface-raised); }
.chat--solo { grid-template-columns: minmax(0, 1fr); }

.chat__conv { display: flex; flex-direction: column; min-width: 0; }
.chat__thread { flex: 1; overflow-y: auto; padding: var(--rsn-space-300) var(--rsn-space-300) var(--rsn-space-200); }
.chat__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--rsn-space-300); }
.chat__msg { display: flex; gap: var(--rsn-space-150); }
.chat__msg--user { flex-direction: row-reverse; }
.chat__av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--rsn-weight-semibold); }
.chat__av--ai { background: var(--rsn-ai-surface); color: var(--rsn-ai-accent); border: 1px solid var(--rsn-ai-border); }
.chat__av--me { background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); border: 1px solid var(--rsn-border-subtle); }
.chat__bubble { font-size: var(--rsn-text-400); line-height: var(--rsn-leading-body); color: var(--rsn-text-primary); min-width: 0; padding-top: 3px; }
.chat__msg--user .chat__bubble { background: var(--rsn-surface-sunken); border-radius: var(--rsn-radius-lg); padding: var(--rsn-space-150) var(--rsn-space-200); max-width: 78%; }

.chat__artref { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--rsn-space-150); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised); padding: 8px 12px; cursor: pointer; font-family: var(--rsn-font-sans); box-shadow: var(--rsn-shadow-raised); }
.chat__artref:hover { border-color: var(--rsn-border-strong); }
.chat__artref__icon { width: 32px; height: 32px; border-radius: var(--rsn-radius-sm); background: var(--rsn-surface-sunken); display: flex; align-items: center; justify-content: center; color: var(--rsn-text-secondary); flex: none; }
.chat__artref__t { display: block; font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); }
.chat__artref__s { display: block; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }

.chat__composer-wrap { border-top: 1px solid var(--rsn-border-subtle); padding: var(--rsn-space-200) var(--rsn-space-300); }
.chat__composer-inner { max-width: 720px; margin: 0 auto; }
.chat__composer { display: flex; flex-direction: column; gap: var(--rsn-space-100); border: 1px solid var(--rsn-border-default); border-radius: var(--rsn-radius-lg); padding: var(--rsn-space-200) var(--rsn-space-200) var(--rsn-space-150); background: var(--rsn-surface-page); }
.chat__composer:focus-within { border-color: var(--rsn-action-primary); box-shadow: 0 0 0 3px var(--rsn-action-selected-bg); }
.chat__input { border: none; outline: none; background: none; resize: none; font-family: var(--rsn-font-sans); font-size: var(--rsn-text-400); color: var(--rsn-text-primary); padding: 0; line-height: 1.5; min-height: 32px; max-height: 140px; }
.chat__input::placeholder { color: var(--rsn-text-muted); }

/* Toolbar row under the text field — attach (decorative), model pill
   (display-only), send. Mirrors a familiar chat-composer layout without
   borrowing its colors/iconography. */
.chat__composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--rsn-space-100); }
.chat__composer-toolbar-left { display: flex; align-items: center; gap: var(--rsn-space-100); }
.chat__composer-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rsn-border-subtle); background: none; color: var(--rsn-text-secondary); cursor: pointer; flex: none; }
.chat__composer-icon-btn:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }
.chat__model-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 5px 10px 5px 8px; font-family: var(--rsn-font-sans); font-size: var(--rsn-text-100); color: var(--rsn-text-secondary); background: none; cursor: pointer; }
.chat__model-pill:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }
.chat__model-pill .rsn-icon--sm:first-child { color: var(--rsn-ai-accent); flex: none; }
.chat__model-pill .rsn-icon--sm:last-child { color: var(--rsn-text-muted); flex: none; }
.chat__disclaimer { text-align: center; font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin-top: 8px; }

/* Artifact panel */
.chat__artifacts { border-left: 1px solid var(--rsn-border-subtle); display: flex; flex-direction: column; min-width: 0; background: var(--rsn-surface-page); }
.chat--solo .chat__artifacts { display: none; }
.chat__art-head { display: flex; align-items: center; justify-content: space-between; gap: var(--rsn-space-100); padding: var(--rsn-space-150) var(--rsn-space-150) var(--rsn-space-150) var(--rsn-space-200); border-bottom: 1px solid var(--rsn-border-subtle); }
.chat__art-title { display: flex; align-items: center; gap: var(--rsn-space-100); font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); min-width: 0; }
.chat__art-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__art-body { flex: 1; overflow-y: auto; padding: var(--rsn-space-250); }
.chat__art-foot { display: flex; gap: var(--rsn-space-100); padding: var(--rsn-space-150) var(--rsn-space-200); border-top: 1px solid var(--rsn-border-subtle); }
.chat__doc h3 { font-size: var(--rsn-text-600); font-weight: var(--rsn-weight-semibold); margin: 0 0 var(--rsn-space-150); }
.chat__doc h4 { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-secondary); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); margin: var(--rsn-space-250) 0 var(--rsn-space-100); }
.chat__doc { overflow-wrap: anywhere; }
.chat__doc p { font-size: var(--rsn-text-300); color: var(--rsn-text-primary); line-height: var(--rsn-leading-body); margin: 0 0 var(--rsn-space-150); }

/* Narrow viewports: stack the artifact panel under the conversation */
@media (max-width: 1024px) {
  .chat { grid-template-columns: 1fr; height: auto; }
  .chat__conv { min-height: 380px; }
  .chat__artifacts { border-left: none; border-top: 1px solid var(--rsn-border-subtle); max-height: 60vh; }
}

/* Three-zone layout: history (left) · conversation · artifacts (right) */
.chat { grid-template-columns: 248px minmax(0, 1fr) 360px; }
.chat.no-hist { grid-template-columns: minmax(0, 1fr) 360px; }
.chat.no-art { grid-template-columns: 248px minmax(0, 1fr); }
.chat.no-hist.no-art { grid-template-columns: minmax(0, 1fr); }
.chat.no-art .chat__artifacts { display: none; }
.chat.no-hist .chat__history { display: none; }

.chat__history { border-right: 1px solid var(--rsn-border-subtle); display: flex; flex-direction: column; min-width: 0; background: var(--rsn-surface-page); }
.chat__history-head { padding: var(--rsn-space-150); border-bottom: 1px solid var(--rsn-border-subtle); }
.chat__new { width: 100%; justify-content: center; }
.chat__hist-list { flex: 1; overflow-y: auto; padding: var(--rsn-space-100); }
.chat__hist-label { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); letter-spacing: var(--rsn-tracking-wide); text-transform: uppercase; color: var(--rsn-text-muted); padding: var(--rsn-space-150) var(--rsn-space-100) 4px; }
.chat__hist-item { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 8px 10px; border-radius: var(--rsn-radius-md); font-family: var(--rsn-font-sans); color: var(--rsn-text-primary); }
.chat__hist-item:hover { background: var(--rsn-surface-hover); }
.chat__hist-item.is-active { background: var(--rsn-action-selected-bg); box-shadow: inset 2px 0 0 var(--rsn-action-selected-border); }
.chat__hist-item__t { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.chat__hist-item__scope { display: inline-flex; align-items: center; gap: 5px; font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.chat__hist-item__scope svg { width: 11px; height: 11px; }

@media (max-width: 1200px) { .chat { grid-template-columns: minmax(0, 1fr) 360px; } .chat__history { display: none; } }
@media (max-width: 1024px) { .chat, .chat.no-hist { grid-template-columns: 1fr; } }

/* ---- Assistant header: title/history dropdown + display-mode switch ---- */
.asst-title { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; cursor: pointer; font-family: var(--rsn-font-sans); font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-regular); color: var(--rsn-text-primary); padding: 4px 8px; border-radius: var(--rsn-radius-md); max-width: 100%; }
.asst-title:hover { background: var(--rsn-surface-hover); }
.asst-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-title .rsn-icon--sm:first-child { color: var(--rsn-ai-accent); flex: none; }
.asst-title .asst-title__caret { color: var(--rsn-text-muted); flex: none; }

.asst-menu { min-width: 288px; max-width: 340px; max-height: 62vh; overflow-y: auto; }
.asst-search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 4px; padding: 6px 10px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); }
.asst-search .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.asst-search__input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--rsn-font-sans); font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.asst-hist__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.asst-hist__scope { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin-left: 8px; flex: none; }

/* Floating display mode for the assistant drawer — opens as a popover just
   above the Chat launcher (bottom-right, under the main panel), not a
   near-full-height drawer. */
.vt-chat--floating { top: auto; bottom: 72px; right: var(--rsn-space-150); height: min(640px, calc(100vh - 100px)); width: 380px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); box-shadow: var(--rsn-shadow-modal); overflow: hidden; }
/* Minimized: collapse to the header bar (floating window shrinks to its title). */
.vt-chat--min .vt-chat__thread, .vt-chat--min .vt-chat__composer { display: none; }
.vt-chat--floating.vt-chat--min { top: auto; height: auto; }

/* Empty / new-chat state — centred greeting + composer + quick actions */
.chat__conv.is-empty .chat__thread,
.chat__conv.is-empty .chat__composer-wrap { display: none; }
.chat__conv:not(.is-empty) .chat__empty { display: none; }
.chat__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rsn-space-250); padding: var(--rsn-space-400) var(--rsn-space-300); text-align: center; }
.chat__empty-mark { display: inline-flex; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--rsn-surface-raised); border: 1px solid var(--rsn-border-subtle); box-shadow: var(--rsn-shadow-raised); align-items: center; justify-content: center; color: var(--rsn-ai-accent); }
.chat__empty-mark .rsn-icon { width: 24px; height: 24px; }
.chat__empty h2 { display: flex; align-items: center; justify-content: center; gap: var(--rsn-space-150); font-size: var(--rsn-text-800); font-weight: var(--rsn-weight-semibold); letter-spacing: -0.015em; margin: 0; color: var(--rsn-text-primary); }
.chat__empty-composer { width: min(760px, 100%); }
.chat__empty-chips { display: flex; flex-wrap: wrap; gap: var(--rsn-space-100); justify-content: center; max-width: 680px; }
.chat__empty-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 7px 14px; background: var(--rsn-surface-raised); font-family: var(--rsn-font-sans); font-size: var(--rsn-text-300); color: var(--rsn-text-primary); cursor: pointer; }
.chat__empty-chip:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.chat__empty-chip .rsn-icon { color: var(--rsn-ai-accent); flex: none; }

/* ==========================================================================
   Files — a modern file explorer (Drive-inspired), on Reasoned tokens.
   File-type colour is categorical (chart slots). Not yet interactive.
   ========================================================================== */
.fx { max-width: var(--vt-col); margin-inline: auto; }
.fx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rsn-space-200); margin-bottom: var(--rsn-space-250); }
.fx-head h1 { font-size: var(--rsn-text-800); font-weight: var(--rsn-weight-semibold); letter-spacing: -0.015em; margin: 0 0 4px; }
.fx-bar { display: flex; align-items: center; gap: var(--rsn-space-150); margin-bottom: var(--rsn-space-300); flex-wrap: wrap; }
.fx-bar__spacer { flex: 1; }
.fx-search { display: flex; align-items: center; gap: 8px; width: min(360px, 100%); border: 1px solid var(--rsn-border-default); border-radius: var(--rsn-radius-md); padding: 6px 12px; background: var(--rsn-surface-raised); }
.fx-search .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.fx-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--rsn-font-sans); font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.fx-search:focus-within { border-color: var(--rsn-focus-ring); }
.fx-label { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); margin: 0 0 var(--rsn-space-150); }

.fx-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--rsn-space-150); margin-bottom: var(--rsn-space-400); }
.fx-folder { display: flex; align-items: center; gap: var(--rsn-space-150); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised); padding: var(--rsn-space-150); cursor: pointer; text-align: left; font-family: var(--rsn-font-sans); }
.fx-folder:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.fx-folder__icon { color: var(--rsn-text-secondary); flex: none; display: flex; }
.fx-folder__body { min-width: 0; display: flex; flex-direction: column; }
.fx-folder__name { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-folder__count { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }

.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--rsn-space-200); }
.fx--list .fx-grid { display: none; }
.fx:not(.fx--list) .fx-list { display: none; }
.fx-file { display: flex; flex-direction: column; align-items: stretch; text-align: left; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); overflow: hidden; cursor: pointer; font-family: var(--rsn-font-sans); padding: 0; }
.fx-file:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.fx-file__thumb { height: 88px; display: flex; align-items: center; justify-content: center; background: var(--rsn-surface-sunken); border-bottom: 1px solid var(--rsn-border-subtle); }
.fx-file__thumb .rsn-icon { width: 30px; height: 30px; color: var(--tint, var(--rsn-text-muted)); }
.fx-file__body { padding: var(--rsn-space-150); min-width: 0; }
.fx-file__name { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-file__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 2px; }

.fx-list { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); overflow: hidden; background: var(--rsn-surface-raised); }
.fx-table { width: 100%; border-collapse: collapse; font-size: var(--rsn-text-300); }
.fx-table th { text-align: left; font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); padding: 10px var(--rsn-space-200); border-bottom: 1px solid var(--rsn-border-subtle); background: var(--rsn-surface-sunken); }
.fx-table td { padding: 9px var(--rsn-space-200); border-bottom: 1px solid var(--rsn-border-subtle); color: var(--rsn-text-primary); vertical-align: middle; }
.fx-table tr:last-child td { border-bottom: none; }
.fx-row { cursor: pointer; }
.fx-row:hover td { background: var(--rsn-surface-hover); }
.fx-row__name { display: flex; align-items: center; gap: 10px; font-weight: var(--rsn-weight-medium); }
.fx-row__icon { display: flex; flex: none; }
.fx-owner { display: inline-flex; align-items: center; gap: 8px; color: var(--rsn-text-secondary); }

/* ============================================================================
   Agents — node canvas (workflow studio)
   Fills the main pane: slim head → toolbar → [palette | canvas] → run console.
   ~95% neutral; iris only on AI-origin nodes/proposals; status colour only on
   run-state dots.
   ========================================================================== */
.ag { display: flex; flex-direction: column; height: 100%; }
/* The canvas reuses the same .io-head record header as the issue-detail page.
   Scoped overrides only adapt it to the full-bleed canvas: flex:none top strip,
   flush margins, a divider from the workspace, and a compact H1. */
.ag-head { flex: none; margin: 0; padding: var(--rsn-space-200) var(--rsn-space-500);
           border-bottom: 1px solid var(--rsn-border-subtle); background: var(--rsn-surface-raised); }
/* Divider before the trailing panel toggle — shared by both detail headers. */
.io-head__div { width: 1px; height: 20px; background: var(--rsn-border-subtle); margin: 0 var(--rsn-space-50); flex: none; }

/* body split — palette | canvas | (inspector when open) */
.ag-body { position: relative; display: grid; grid-template-columns: 232px minmax(0, 1fr); flex: 1; min-height: 0; }
.ag--inspect .ag-body { grid-template-columns: 232px minmax(0, 1fr) 340px; }

/* inspector: right rail, one region, mutually exclusive with the AI dock */
.ag-inspector { display: none; flex-direction: column; min-height: 0;
                border-left: 1px solid var(--rsn-border-subtle); background: var(--rsn-surface-raised); }
.ag--inspect .ag-inspector { display: flex; }
.ag-inspector__head { display: flex; align-items: center; gap: var(--rsn-space-100); flex: none;
                      padding: 6px var(--rsn-space-200) 6px var(--rsn-space-250); border-bottom: 1px solid var(--rsn-border-subtle); }
.ag-tabs { display: flex; gap: 2px; flex: 1; }
.ag-inspector__body { overflow-y: auto; padding: var(--rsn-space-250) var(--rsn-space-300); }
/* Active state for the panel-toggle icon button — shared by the agent
   Inspector toggle and the issue-detail Workflow toggle. */
.rsn-btn--icon.is-on { background: var(--rsn-surface-sunken); color: var(--rsn-text-primary); }
/* narrow: don't run canvas + inspector as two columns — overlay the inspector */
@media (max-width: 1180px) {
  .ag--inspect .ag-body { grid-template-columns: 232px minmax(0, 1fr); }
  .ag--inspect .ag-inspector { position: absolute; right: 0; top: 0; bottom: 0; width: 320px; z-index: 6; box-shadow: var(--rsn-shadow-overlay); }
}

/* copilot context chip — "Using: <selected node>" */
.ag-cop__ctx { padding: 0 var(--rsn-space-300) var(--rsn-space-100); }
.ag-cop__chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary);
                background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 3px 4px 3px 10px; }
.ag-cop__chip b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }
.ag-cop__chip .rsn-icon { color: var(--rsn-text-muted); }
.ag-cop__chip-x { border: 0; background: transparent; color: var(--rsn-text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: var(--rsn-radius-full); }
.ag-cop__chip-x:hover { color: var(--rsn-text-primary); background: var(--rsn-surface-hover); }

/* palette */
.ag-palette { border-right: 1px solid var(--rsn-border-subtle); background: var(--rsn-surface-sunken);
              padding: var(--rsn-space-200); overflow-y: auto; display: flex; flex-direction: column; gap: var(--rsn-space-250); }
.ag-palette__search { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
                      border: 1px solid var(--rsn-border-default); border-radius: var(--rsn-radius-md);
                      background: var(--rsn-surface-page); color: var(--rsn-text-muted); }
.ag-palette__search input { border: 0; background: transparent; font: inherit; font-size: var(--rsn-text-300);
                            color: var(--rsn-text-primary); width: 100%; outline: none; }
.ag-palette__group { display: flex; flex-direction: column; gap: 3px; }
.ag-palette__label { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); letter-spacing: 0.06em;
                     text-transform: uppercase; color: var(--rsn-text-muted); padding: 0 6px 4px; }
.ag-pal { display: flex; align-items: center; gap: var(--rsn-space-150); padding: 7px 8px; border: 0;
          border-radius: var(--rsn-radius-md); background: transparent; color: var(--rsn-text-secondary);
          font: inherit; font-size: var(--rsn-text-300); text-align: left; cursor: pointer; }
.ag-pal:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }
.ag-pal .rsn-icon { color: var(--rsn-text-muted); flex: none; }
.ag-pal--ai .rsn-icon { color: var(--rsn-ai-accent); }

/* canvas */
.ag-canvas { position: relative; overflow: auto; background: var(--rsn-surface-page);
             background-image: radial-gradient(var(--rsn-border-subtle) 1px, transparent 1px);
             background-size: 22px 22px; }
.ag-scene { position: relative; transform-origin: 0 0; transition: transform var(--rsn-duration-fast) var(--rsn-ease-standard); margin: 8px; }
.ag-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ag-edge { stroke: var(--rsn-border-strong); stroke-width: 1.75; }
.ag-edge--stg { stroke: var(--rsn-ai-accent); stroke-width: 1.75; stroke-dasharray: 5 4; }

/* node card */
.ag-node { position: absolute; display: flex; flex-direction: column; gap: 6px; text-align: left;
           padding: 10px 12px; border: 1px solid var(--rsn-border-default); border-left-width: 3px;
           border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised);
           box-shadow: var(--rsn-shadow-raised); cursor: pointer; font: inherit;
           transition: box-shadow var(--rsn-duration-fast) var(--rsn-ease-standard), border-color var(--rsn-duration-fast) var(--rsn-ease-standard); }
.ag-node:hover { border-color: var(--rsn-border-strong); }
.ag-node.is-selected { border-color: var(--rsn-text-link); box-shadow: 0 0 0 2px var(--rsn-iris-200), var(--rsn-shadow-overlay); }
.ag-node--ai { border-left-color: var(--rsn-ai-accent); }
.ag-node--human { border-left-color: var(--rsn-border-strong); }
.ag-node--tool { border-left-color: var(--rsn-border-strong); }
.ag-node--system { border-left-color: var(--rsn-border-default); background: var(--rsn-surface-sunken); }
.ag-node--guard { border-left-color: var(--rsn-ai-accent); border-style: dashed; background: var(--rsn-ai-surface); }
.ag-node.is-preview { border-style: dashed; }
.ag-node__head { display: flex; align-items: center; gap: 8px; }
.ag-node__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
                 border-radius: var(--rsn-radius-sm); background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); }
.ag-node--ai .ag-node__icon, .ag-node__icon--ai { background: var(--rsn-ai-surface); color: var(--rsn-ai-accent); }
.ag-node--guard .ag-node__icon { background: var(--rsn-surface-raised); color: var(--rsn-ai-accent); }
.ag-node__title { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary);
                  line-height: 1.25; flex: 1; }
.ag-node__dot { flex: none; }
.ag-node__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: 1.35; }
.ag-node__foot { display: flex; align-items: center; gap: 6px; }
.ag-node__kind { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ag-node__tag { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-secondary);
                background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle);
                border-radius: var(--rsn-radius-full); padding: 1px 7px; }
.ag-node__port { position: absolute; top: 46px; width: 8px; height: 8px; border-radius: var(--rsn-radius-full);
                 background: var(--rsn-surface-raised); border: 1.5px solid var(--rsn-border-strong); }
.ag-node__port--in { left: -5px; } .ag-node__port--out { right: -5px; }
/* running: iris pulse (machine working) */
.ag-node.is-running { border-left-color: var(--rsn-ai-accent); }
.ag-node.is-running .ag-node__icon { animation: ag-pulse 1.6s var(--rsn-ease-standard) infinite; }
@keyframes ag-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--rsn-iris-200); } 50% { box-shadow: 0 0 0 4px transparent; } }

/* animated run: a wave of machine work flows along the graph (iris) */
.ag--run .ag-node { opacity: .48; transition: opacity .35s var(--rsn-ease-standard), border-color .35s var(--rsn-ease-standard), box-shadow .35s var(--rsn-ease-standard); }
.ag-node--lit { opacity: 1 !important; border-color: var(--rsn-ai-accent); box-shadow: 0 0 0 3px var(--rsn-iris-200), var(--rsn-shadow-overlay); }
.ag-node--lit .ag-node__icon { background: var(--rsn-ai-surface); color: var(--rsn-ai-accent); }
.ag-node--ran { opacity: 1 !important; }
.ag-node--wait { opacity: 1 !important; border-color: var(--rsn-status-warning); box-shadow: 0 0 0 3px var(--rsn-status-warning-surface), var(--rsn-shadow-overlay); animation: ag-wait 1.4s var(--rsn-ease-standard) infinite; }
@keyframes ag-wait { 0%,100% { box-shadow: 0 0 0 2px var(--rsn-status-warning-surface), var(--rsn-shadow-overlay); } 50% { box-shadow: 0 0 0 6px transparent, var(--rsn-shadow-overlay); } }
.ag-edge--flow { stroke: var(--rsn-ai-accent); stroke-width: 2.25; stroke-dasharray: 6 5; animation: ag-flow .6s linear infinite; }
@keyframes ag-flow { to { stroke-dashoffset: -22; } }
.ag-edge--done { stroke: var(--rsn-ai-accent); stroke-width: 2; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .ag-edge--flow, .ag-node--wait { animation: none; } }

/* overlays: legend, minimap, zoom */
.ag-legend { position: absolute; left: 12px; top: 12px; display: flex; gap: var(--rsn-space-250);
             padding: 7px 12px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full);
             background: var(--rsn-surface-overlay); box-shadow: var(--rsn-shadow-raised);
             font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); }
.ag-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ag-swatch { width: 10px; height: 10px; border-radius: 3px; border-left: 3px solid; }
.ag-swatch--ai { border-left-color: var(--rsn-ai-accent); background: var(--rsn-ai-surface); }
.ag-swatch--human { border-left-color: var(--rsn-border-strong); background: var(--rsn-surface-raised); }
.ag-swatch--tool { border-left-color: var(--rsn-border-strong); background: var(--rsn-surface-sunken); }
.ag-minimap { position: absolute; left: 12px; bottom: 12px; width: 180px; padding: 4px;
              border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md);
              background: var(--rsn-surface-overlay); box-shadow: var(--rsn-shadow-raised); }
.ag-mm-node { position: absolute; border-radius: 1.5px; background: var(--rsn-text-muted); opacity: 0.5; }
.ag-mm-node--ai { background: var(--rsn-ai-accent); opacity: 0.7; }
.ag-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column;
           border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); overflow: hidden;
           background: var(--rsn-surface-overlay); box-shadow: var(--rsn-shadow-raised); }
.ag-zoom button { border: 0; background: transparent; color: var(--rsn-text-secondary); padding: 7px 9px;
                  cursor: pointer; font: inherit; font-size: var(--rsn-text-200); border-bottom: 1px solid var(--rsn-border-subtle); }
.ag-zoom button:last-child { border-bottom: 0; }
.ag-zoom button:hover { background: var(--rsn-surface-hover); color: var(--rsn-text-primary); }

/* run console / inspector drawer */
.ag-dock { flex: none; border-top: 1px solid var(--rsn-border-subtle); background: var(--rsn-surface-raised);
           display: flex; flex-direction: column; max-height: 184px; }
.ag-dock.is-collapsed .ag-dock__body { display: none; }
.ag-dock.is-collapsed #ag-dock-toggle { transform: rotate(180deg); }
.ag-dock__tabs { display: flex; align-items: center; gap: 2px; padding: 6px var(--rsn-space-300); flex: none;
                 border-bottom: 1px solid var(--rsn-border-subtle); }
.ag-tab { border: 0; background: transparent; font: inherit; font-size: var(--rsn-text-300);
          font-weight: var(--rsn-weight-medium); color: var(--rsn-text-muted); padding: 5px 10px;
          border-radius: var(--rsn-radius-sm); cursor: pointer; }
.ag-tab:hover { color: var(--rsn-text-primary); background: var(--rsn-surface-hover); }
.ag-tab.is-active { color: var(--rsn-text-primary); background: var(--rsn-surface-sunken); }
.ag-dock__spacer { flex: 1; }
.ag-dock__body { overflow-y: auto; padding: var(--rsn-space-250) var(--rsn-space-300); }
.ag-dock__hint { font-size: var(--rsn-text-300); color: var(--rsn-text-muted); margin: 0; }

/* activity trace */
.ag-trace { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-trace__row { display: flex; align-items: center; gap: var(--rsn-space-150); padding: 6px 4px;
                 font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); border-bottom: 1px solid var(--rsn-border-subtle); }
.ag-trace__row:last-child { border-bottom: 0; }
.ag-trace__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none;
                  border-radius: var(--rsn-radius-sm); background: var(--rsn-surface-sunken); color: var(--rsn-text-muted); }
.ag-trace__icon--ai { background: var(--rsn-ai-surface); color: var(--rsn-ai-accent); }
.ag-trace__txt { flex: 1; }
.ag-trace__txt b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); }
.ag-trace__by { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); flex: none; }
.ag-trace__stamp { color: var(--rsn-status-success-text); font-weight: var(--rsn-weight-semibold); }

/* validate checklist */
.ag-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-150); }
.ag-check li { display: flex; gap: var(--rsn-space-150); font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); align-items: flex-start; }
.ag-check li .rsn-icon { flex: none; margin-top: 1px; }
.ag-check__ok .rsn-icon { color: var(--rsn-status-success); }
.ag-check__warn .rsn-icon { color: var(--rsn-status-warning); }
.ag-check b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }

/* details pane */
.ag-detail__head { display: flex; align-items: center; gap: var(--rsn-space-150); margin-bottom: var(--rsn-space-250); }
.ag-detail__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.ag-detail__sub { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); }
.ag-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rsn-space-200); margin: 0; }
.ag-detail__grid dt { font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rsn-text-muted); margin-bottom: 2px; }
.ag-detail__grid dd { font-size: var(--rsn-text-300); color: var(--rsn-text-primary); margin: 0; }

/* copilot: mode toggle + proposal card */
.ag-cop__mode { display: inline-flex; margin: 0 var(--rsn-space-300) var(--rsn-space-150); padding: 3px;
                background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); }
.ag-cop__opt { border: 0; background: transparent; font: inherit; font-size: var(--rsn-text-300);
               font-weight: var(--rsn-weight-medium); color: var(--rsn-text-secondary); padding: 5px 12px;
               border-radius: var(--rsn-radius-sm); cursor: pointer; }
.ag-cop__opt.is-active { background: var(--rsn-surface-raised); color: var(--rsn-text-primary); box-shadow: var(--rsn-shadow-raised); }
.ag-prop { border: 1px solid var(--rsn-ai-border); border-radius: var(--rsn-radius-md);
           background: var(--rsn-ai-surface); padding: var(--rsn-space-200); margin-top: 6px; }
.ag-prop__head { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); text-transform: uppercase;
                 letter-spacing: 0.05em; color: var(--rsn-ai-text); margin-bottom: 5px; }
.ag-prop__body { font-size: var(--rsn-text-300); color: var(--rsn-text-primary); margin: 0 0 var(--rsn-space-150); line-height: 1.4; }
.ag-prop__diff { display: flex; align-items: center; gap: var(--rsn-space-150); margin-bottom: var(--rsn-space-200); }
.ag-prop__add { font-family: var(--rsn-font-mono, monospace); font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-semibold);
                color: var(--rsn-status-success-text); background: var(--rsn-status-success-surface);
                border-radius: var(--rsn-radius-sm); padding: 2px 8px; }
.ag-prop__note { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.ag-prop__actions { display: flex; justify-content: flex-end; gap: 6px; }
.ag-prop.is-done { opacity: 0.85; }
.ag-prop__resolved { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); }
.vt-chat--canvas .vt-chat__intro-text b { color: var(--rsn-text-primary); }

/* canvas: placeholder for un-built workflows */
.ag-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ============================================================================
   Agents index — governed workflow roster (table-first) + template gallery
   ========================================================================== */
.agx { max-width: var(--vt-col); margin-inline: auto; }
.agx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rsn-space-300); }
.agx-readonly { max-width: none; margin-bottom: var(--rsn-space-300); }

.agx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rsn-space-200); margin-bottom: var(--rsn-space-300); }
@media (max-width: 900px) { .agx-tiles { grid-template-columns: repeat(2, 1fr); } }
.agx-tile { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: var(--rsn-space-250);
            border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg);
            background: var(--rsn-surface-raised); cursor: pointer; font: inherit; }
.agx-tile:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.agx-tile.is-active { border-color: var(--rsn-text-link); box-shadow: inset 0 0 0 1px var(--rsn-text-link); }
.agx-tile__v { display: flex; align-items: center; gap: 8px; font-size: var(--rsn-text-700); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.agx-tile__l { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); }

.agx-bar { display: flex; align-items: center; gap: var(--rsn-space-200); margin-bottom: var(--rsn-space-200); }
.agx-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 360px; padding: 8px 12px;
              border: 1px solid var(--rsn-border-default); border-radius: var(--rsn-radius-md);
              background: var(--rsn-surface-raised); color: var(--rsn-text-muted); }
.agx-search input { border: 0; background: transparent; font: inherit; font-size: var(--rsn-text-400); color: var(--rsn-text-primary); width: 100%; outline: none; }
.agx-bar__spacer { flex: 1; }
.agx-filternote { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); }

.agx-table { width: 100%; max-width: var(--vt-col); margin-inline: auto; border-collapse: collapse; border: 1px solid var(--rsn-border-subtle);
             border-radius: var(--rsn-radius-lg); overflow: hidden; background: var(--rsn-surface-raised); }
/* Lightweight column labels — no grey band, so the table reads as calm as the
   Review/Inbox lists. The label row is just muted uppercase text on a hairline. */
.agx-table thead th { text-align: left; font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: 0.05em;
                      color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold);
                      padding: 10px var(--rsn-space-250); border-bottom: 1px solid var(--rsn-border-subtle); }
.agx-table td { padding: 12px var(--rsn-space-250); border-bottom: 1px solid var(--rsn-border-subtle); vertical-align: middle;
                font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); }
.agx-table tbody tr:last-child td { border-bottom: none; }
.agx-row { cursor: pointer; }
.agx-row:hover td { background: var(--rsn-surface-hover); }
.agx-row:focus-visible { outline: 2px solid var(--rsn-text-link); outline-offset: -2px; }
.agx-name { display: flex; align-items: center; gap: 10px; }
.agx-name__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
                  border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); }
.agx-name__t { display: block; font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.agx-name__d { display: block; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.agx-owner__t { display: block; color: var(--rsn-text-primary); }
.agx-owner__d { display: block; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.agx-auto { display: inline-block; font-family: var(--rsn-font-mono, monospace); font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-semibold);
            color: var(--rsn-text-secondary); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 2px 8px; cursor: help; }
.agx-cov { display: flex; flex-wrap: wrap; gap: 4px; }
.agx-chip { font-size: var(--rsn-text-100); color: var(--rsn-text-secondary); background: var(--rsn-surface-sunken);
            border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 1px 7px; }
.agx-muted { color: var(--rsn-text-muted); }
.agx-empty { color: var(--rsn-text-muted); font-size: var(--rsn-text-300); padding: var(--rsn-space-300); text-align: center; }

.agx-templates { margin-top: var(--rsn-space-400); }
.agx-templates__label { font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); letter-spacing: 0.06em;
                        text-transform: uppercase; color: var(--rsn-text-muted); margin-bottom: var(--rsn-space-200); }
.agx-tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rsn-space-200); }
@media (max-width: 900px) { .agx-tpl-grid { grid-template-columns: repeat(2, 1fr); } }
.agx-tpl { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: var(--rsn-space-250);
           border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); cursor: pointer; font: inherit; }
.agx-tpl:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.agx-tpl__icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center;
                 border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); }
.agx-tpl__t { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.agx-tpl__d { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
a.agx-tpl { text-decoration: none; }

/* Agents landing — three-class chooser cards. */
.agx-choice-grid { max-width: var(--vt-col); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rsn-space-250); }
@media (max-width: 760px) { .agx-choice-grid { grid-template-columns: 1fr; } }
.agx-choice { gap: var(--rsn-space-150); padding: var(--rsn-space-300); }
.agx-choice .agx-tpl__t { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rsn-space-200); font-size: var(--rsn-text-500); }
.agx-choice__n { font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-regular); color: var(--rsn-text-muted); white-space: nowrap; }
.agx-choice .agx-tpl__d { line-height: var(--rsn-leading-body); }

/* Agents landing — two sections (Workiva-defined assurance capabilities vs.
   team-built productivity agents), each its own roster of portrait profile
   cards — taller than wide, like a contact card. The iris mark on the
   avatar is the only color, since every card here is agent-originated. */
.agx-section { margin-bottom: var(--rsn-space-500); }
.agx-section__head { margin-bottom: var(--rsn-space-250); max-width: 72ch; }
.agx-section__title { font-size: var(--rsn-text-600); font-weight: var(--rsn-weight-semibold); letter-spacing: -0.01em; margin: 0 0 4px; color: var(--rsn-text-primary); }
.agx-section__desc { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0; }

/* Flex-wrap, not a 4-column grid — a grid's columns split the full row
   width evenly regardless of the (fixed-width) cards inside them, which
   left big dead gaps between cards instead of packing them to the left. */
.agx-agent-grid { display: flex; flex-wrap: wrap; gap: var(--rsn-space-250); }
.agx-agent-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--rsn-space-150);
  flex: 0 0 200px; height: 280px;   /* fixed, not min — taller than wide, like a profile card */
  overflow: hidden;
  padding: var(--rsn-space-300);
  border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg);
  background: var(--rsn-surface-raised);
  cursor: pointer;
  transition: border-color var(--rsn-duration-fast) var(--rsn-ease-standard), box-shadow var(--rsn-duration-fast) var(--rsn-ease-standard), background var(--rsn-duration-fast) var(--rsn-ease-standard);
}
.agx-agent-card:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); box-shadow: var(--rsn-shadow-raised); }
.agx-agent-card__avatar {
  width: 64px; height: 64px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--rsn-ai-surface); border: 1px solid var(--rsn-ai-border); color: var(--rsn-ai-accent);
}
.agx-agent-card__avatar .rsn-icon { width: 26px; height: 26px; }
.agx-agent-card__name { width: 100%; font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); }
.agx-agent-card__desc { width: 100%; font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }

/* "Add a new agent" — the one non-agent card in the grid: dashed, neutral,
   no description (it's an action, not a roster member). */
.agx-agent-card--add { border-style: dashed; background: none; color: var(--rsn-text-secondary); font: inherit; justify-content: center; }
.agx-agent-card--add:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-sunken); box-shadow: none; }
.agx-agent-card__avatar--add { background: var(--rsn-surface-sunken); border-color: var(--rsn-border-subtle); color: var(--rsn-text-muted); }

/* ---------------- Vision — thesis cold-open (full-bleed) ----------------
   Calm typographic statement over a drifting object-constellation. The one
   accent is iris (machine-originated stars); everything else stays neutral. */
.vis {
  position: relative; height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 6%, var(--rsn-surface-raised) 0%, var(--rsn-surface-sunken) 55%, var(--rsn-surface-page) 100%);
}
.vis__sky { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.vis-star__link { stroke: var(--rsn-border-strong); stroke-width: 1; opacity: .22; }
.vis-star { fill: var(--rsn-text-muted); opacity: .5; }
.vis-star--ai { fill: var(--rsn-ai-accent); opacity: .85; filter: drop-shadow(0 0 5px var(--rsn-ai-accent)); }
.vis-drift { animation: vis-drift 26s ease-in-out infinite alternate; transform-origin: center; }
@keyframes vis-drift { from { transform: translate(-10px, -6px); } to { transform: translate(10px, 6px); } }

.vis__inner { position: relative; z-index: 1; max-width: 760px; padding: var(--rsn-space-500); text-align: center; }
.vis__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-semibold);
  letter-spacing: var(--rsn-tracking-wide); text-transform: uppercase;
  color: var(--rsn-ai-text); background: var(--rsn-ai-surface);
  border: 1px solid var(--rsn-ai-border); border-radius: var(--rsn-radius-full);
  padding: 5px 12px; margin-bottom: var(--rsn-space-400);
}
.vis__eyebrow .rsn-icon { color: var(--rsn-ai-accent); }
.vis__lead { font-size: var(--rsn-text-400); color: var(--rsn-text-muted); margin: 0 auto var(--rsn-space-200); max-width: 56ch; }
.vis__headline {
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08;
  font-weight: var(--rsn-weight-semibold); letter-spacing: -0.02em;
  color: var(--rsn-text-primary); margin: 0 0 var(--rsn-space-300);
}
.vis__sub { font-size: var(--rsn-text-500); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0 auto var(--rsn-space-500); max-width: 60ch; }
.vis__cta { display: flex; align-items: center; justify-content: center; gap: var(--rsn-space-200); margin-bottom: var(--rsn-space-500); }
.vis__cta .rsn-btn { height: 44px; padding: 0 var(--rsn-space-300); font-size: var(--rsn-text-400); }
.vis__cta .rsn-btn .rsn-icon { margin-left: 6px; }
.vis__tours { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: var(--rsn-space-200); justify-content: center; margin-bottom: var(--rsn-space-500); }
@media (max-width: 760px) { .vis__tours { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }
.vis__tour { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: var(--rsn-space-200); text-decoration: none;
             border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); cursor: pointer; font: inherit; }
.vis__tour:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.vis__tour__t { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.vis__tour__d { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); line-height: var(--rsn-leading-body); }
.vis__frame { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); max-width: 62ch; margin: 0 auto; padding-top: var(--rsn-space-300); border-top: 1px solid var(--rsn-border-subtle); line-height: var(--rsn-leading-body); }
.vis__frame b { color: var(--rsn-text-secondary); font-weight: var(--rsn-weight-semibold); }

/* Staged reveal — calm rise, punctuation not spectacle. */
.vis__eyebrow, .vis__lead, .vis__headline, .vis__sub, .vis__cta, .vis__tours, .vis__frame { animation: vis-rise .6s var(--rsn-ease-standard) both; }
.vis__lead { animation-delay: .05s; }
.vis__headline { animation-delay: .12s; }
.vis__sub { animation-delay: .22s; }
.vis__cta, .vis__tours { animation-delay: .32s; }
.vis__frame { animation-delay: .42s; }
@keyframes vis-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .vis-drift, .vis__eyebrow, .vis__lead, .vis__headline, .vis__sub, .vis__cta, .vis__tours, .vis__frame { animation: none; }
}

/* ---------------- Hero thread — exception review + the governed loop ---------------- */
.rev-cols { display: flex; gap: var(--rsn-space-400); align-items: flex-start; max-width: var(--vt-col); }
.rev-main { flex: 1; min-width: 0; }
.rev-rail { width: 300px; flex: none; position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--rsn-space-250); }
.rev-who { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.rev-iris { color: var(--rsn-ai-accent) !important; flex: none; }

/* Run strip — a machine-originated summary (iris mark) */
.rev-run { display: flex; gap: var(--rsn-space-200); align-items: flex-start; padding: var(--rsn-space-250);
  border: 1px solid var(--rsn-border-subtle); border-left: 3px solid var(--rsn-ai-accent);
  border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); margin-bottom: var(--rsn-space-300); }
.rev-run__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
  border-radius: var(--rsn-radius-full); background: var(--rsn-ai-surface); border: 1px solid var(--rsn-ai-border); color: var(--rsn-ai-accent); }
.rev-run__body { flex: 1; min-width: 0; }
.rev-run__line { font-size: var(--rsn-text-400); color: var(--rsn-text-primary); line-height: var(--rsn-leading-body); }
.rev-run__line b { font-weight: var(--rsn-weight-semibold); }
.rev-run__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 4px; }
.rev-std-link { color: var(--rsn-text-link); text-decoration: none; }
.rev-std-link:hover { text-decoration: underline; }
.rev-rerun { margin-top: var(--rsn-space-150); }

/* Exception cards (decision packets) */
.rev-exc { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised);
  padding: var(--rsn-space-250); margin-bottom: var(--rsn-space-250); transition: background var(--rsn-duration-base) var(--rsn-ease-standard), opacity var(--rsn-duration-base) var(--rsn-ease-standard); }
.rev-exc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rsn-space-200); margin-bottom: var(--rsn-space-150); }
.rev-exc__head > div { display: flex; align-items: center; gap: var(--rsn-space-150); min-width: 0; }
.rev-exc__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.rev-exc__score { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); flex: none; }
.rev-exc__concl { font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); margin: 0 0 var(--rsn-space-100); }
.rev-exc__crit { display: flex; align-items: flex-start; gap: 7px; font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); margin-bottom: var(--rsn-space-150); line-height: var(--rsn-leading-body); }
.rev-exc__crit b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }
.rev-exc__why { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0 0 var(--rsn-space-150); }
.rev-exc__unc { display: flex; align-items: flex-start; gap: 7px; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary);
  background: var(--rsn-surface-sunken); border-radius: var(--rsn-radius-md); padding: 8px 10px; line-height: var(--rsn-leading-body); }
.rev-exc__unc .rsn-icon { color: var(--rsn-status-warning); flex: none; margin-top: 1px; }
.rev-exc__unc b { color: var(--rsn-text-primary); }
.rev-inv { list-style: none; margin: 0 0 var(--rsn-space-150); padding: 0; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); overflow: hidden; }
.rev-inv li { display: flex; align-items: center; gap: var(--rsn-space-200); padding: 8px 12px; border-bottom: 1px solid var(--rsn-border-subtle); font-size: var(--rsn-text-300); }
.rev-inv li:last-child { border-bottom: 0; }
.rev-inv__id { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-200); color: var(--rsn-text-primary); }
.rev-inv__v { flex: 1; color: var(--rsn-text-secondary); }
.rev-inv__a { color: var(--rsn-text-secondary); font-variant-numeric: tabular-nums; }
.rev-exc__actions { display: flex; gap: var(--rsn-space-150); flex-wrap: wrap; }
.rev-exc__ro { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.rev-exc--resolved { background: var(--rsn-surface-sunken); }
.rev-exc--resolved .rev-exc__concl { color: var(--rsn-text-secondary); font-weight: var(--rsn-weight-regular); font-size: var(--rsn-text-400); }

/* Teach panel */
.rev-teach { margin-top: var(--rsn-space-200); border-top: 1px dashed var(--rsn-border-default); padding-top: var(--rsn-space-200); }
.rev-teach.is-in { animation: vis-rise .35s var(--rsn-ease-standard) both; }
.rev-teach__head { display: flex; align-items: center; gap: 7px; font-weight: var(--rsn-weight-semibold); font-size: var(--rsn-text-400); color: var(--rsn-text-primary); margin-bottom: var(--rsn-space-100); }
.rev-teach__lead { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); margin: 0 0 var(--rsn-space-150); line-height: var(--rsn-leading-body); }
.rev-teach__label { display: block; font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); margin-bottom: 6px; }
.rev-teach__rule { border: 1px solid var(--rsn-ai-border); background: var(--rsn-ai-surface); border-radius: var(--rsn-radius-md); padding: 10px 12px; font-size: var(--rsn-text-300); color: var(--rsn-text-primary); line-height: var(--rsn-leading-body); outline: none; }
.rev-teach__rule:focus { border-color: var(--rsn-ai-accent); }
.rev-teach__scope { display: flex; align-items: center; gap: var(--rsn-space-150); margin: var(--rsn-space-150) 0; font-size: var(--rsn-text-300); }
.rev-teach__scope .rev-teach__label { display: inline; margin: 0; }
.rev-teach__blast { display: flex; align-items: flex-start; gap: 7px; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary);
  background: var(--rsn-surface-sunken); border-radius: var(--rsn-radius-md); padding: 8px 10px; margin-bottom: var(--rsn-space-150); line-height: var(--rsn-leading-body); }
.rev-teach__blast .rsn-icon { color: var(--rsn-text-muted); flex: none; margin-top: 1px; }
.rev-teach__blast b { color: var(--rsn-text-primary); }
.rev-teach__preview { color: var(--rsn-text-link); }
.rev-teach__actions { display: flex; gap: var(--rsn-space-150); }

/* The pattern the per-item test missed — an independent-check (machine) insight */
.rev-catch { border: 1px solid var(--rsn-ai-border); border-radius: var(--rsn-radius-lg); background: var(--rsn-ai-surface); padding: var(--rsn-space-250); margin-bottom: var(--rsn-space-250); }
.rev-catch__head { display: flex; align-items: center; gap: 7px; font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); color: var(--rsn-ai-text); margin-bottom: var(--rsn-space-100); }
.rev-catch__concl { font-size: var(--rsn-text-400); color: var(--rsn-text-primary); margin: 0 0 var(--rsn-space-100); line-height: var(--rsn-leading-body); }
.rev-catch__concl b { font-weight: var(--rsn-weight-semibold); }
.rev-catch__why { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); margin: 0 0 var(--rsn-space-150); line-height: var(--rsn-leading-body); }
.rev-catch__actions { display: flex; gap: var(--rsn-space-150); flex-wrap: wrap; }

/* Right-rail modules */
.rev-mod { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); overflow: hidden; }
.rev-mod__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rsn-space-150); padding: 10px var(--rsn-space-200);
  border-bottom: 1px solid var(--rsn-border-subtle); font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.rev-mod__body { padding: var(--rsn-space-200); }
.rev-std__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-bottom: var(--rsn-space-150); }
.rev-std__meta b { color: var(--rsn-text-secondary); }
.rev-std__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-100); }
.rev-std__clause { display: flex; gap: 8px; font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.rev-std__no { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-200); color: var(--rsn-text-muted); flex: none; }
.rev-std__clause--new { color: var(--rsn-text-primary); background: var(--rsn-ai-surface); border-left: 2px solid var(--rsn-ai-accent);
  border-radius: var(--rsn-radius-sm); padding: 6px 8px; animation: vis-rise .45s var(--rsn-ease-standard) both; }
.rev-std__from { display: block; font-size: var(--rsn-text-100); color: var(--rsn-ai-text); margin-top: 2px; }
.rev-ver { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--rsn-radius-full);
  background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle); font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-secondary); }
.rev-ver--bump { background: var(--rsn-ai-surface); border-color: var(--rsn-ai-border); color: var(--rsn-ai-text); animation: rev-bump .5s var(--rsn-ease-standard); }
@keyframes rev-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Calibration + attention */
.rev-cal { display: flex; flex-direction: column; gap: 6px; }
.rev-cal__row { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--rsn-text-300); }
.rev-cal__k { color: var(--rsn-text-secondary); }
.rev-cal__v { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); font-variant-numeric: tabular-nums; }
.rev-cal__bar { height: 6px; border-radius: var(--rsn-radius-full); background: var(--rsn-surface-sunken); overflow: hidden; margin: 2px 0 var(--rsn-space-100); }
.rev-cal__fill { display: block; height: 100%; background: var(--rsn-status-success); transition: width .9s var(--rsn-ease-standard); }
.rev-cal__bar--warn .rev-cal__fill { background: var(--rsn-status-warning); }
.rev-cal__note { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 6px; line-height: var(--rsn-leading-body); }
.rev-att__bar { display: flex; height: 26px; border-radius: var(--rsn-radius-full); overflow: hidden; border: 1px solid var(--rsn-border-subtle); font-size: var(--rsn-text-100); margin-bottom: 6px; }
.rev-att__tac, .rev-att__str { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; transition: width .8s var(--rsn-ease-standard); }
.rev-att__tac { background: var(--rsn-surface-sunken); color: var(--rsn-text-muted); }
.rev-att__str { background: var(--rsn-text-secondary); color: var(--rsn-surface-raised); }

@media (max-width: 900px) { .rev-cols { flex-direction: column; } .rev-rail { width: 100%; position: static; } }

/* ---------------- Standard — the "definition of good" object ---------------- */
.std-intent { border-left: 3px solid var(--rsn-border-strong); padding: 2px 0 2px var(--rsn-space-250); margin-bottom: var(--rsn-space-400); }
.std-intent__label { font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); margin-bottom: 6px; }
.std-intent__text { font-size: var(--rsn-text-500); color: var(--rsn-text-primary); line-height: var(--rsn-leading-body); margin: 0; max-width: 64ch; }
.std-section-label { display: flex; align-items: baseline; gap: var(--rsn-space-150); font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); margin: 0 0 var(--rsn-space-200); }
.std-section-label span { text-transform: none; letter-spacing: normal; font-weight: var(--rsn-weight-regular); color: var(--rsn-text-muted); font-size: var(--rsn-text-200); }

.std-crit { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); padding: var(--rsn-space-250); margin-bottom: var(--rsn-space-200); }
.std-crit--new { border-color: var(--rsn-ai-border); }
.std-crit__head { display: flex; align-items: center; gap: var(--rsn-space-150); margin-bottom: var(--rsn-space-100); flex-wrap: wrap; }
.std-crit__no { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.std-crit__name { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.std-crit__new { font-size: var(--rsn-text-100); color: var(--rsn-ai-text); background: var(--rsn-ai-surface); border: 1px solid var(--rsn-ai-border); border-radius: var(--rsn-radius-full); padding: 1px 8px; }
.std-crit__stmt { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0 0 var(--rsn-space-150); }
.std-crit__anchors { display: flex; flex-direction: column; gap: 6px; }
.std-anchor { display: flex; align-items: flex-start; gap: 8px; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.std-anchor .rsn-dot { margin-top: 5px; flex: none; }
.std-anchor__k { font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); flex: none; width: 90px; }
.std-anchor__t { flex: 1; min-width: 0; }

.std-scorer { display: inline-flex; align-items: center; gap: 5px; font-size: var(--rsn-text-100); font-weight: var(--rsn-weight-semibold); border-radius: var(--rsn-radius-full); padding: 2px 8px; }
.std-scorer--det { background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); border: 1px solid var(--rsn-border-subtle); }
.std-scorer--det .rsn-icon { color: var(--rsn-text-muted); }
.std-scorer--judge { background: var(--rsn-ai-surface); color: var(--rsn-ai-text); border: 1px solid var(--rsn-ai-border); }
.std-scorer--judge .rsn-icon { color: var(--rsn-ai-accent); }

.std-gov { display: flex; align-items: center; gap: var(--rsn-space-150); text-decoration: none; }
.std-gov__mark { width: 28px; height: 28px; border-radius: var(--rsn-radius-full); background: var(--rsn-ai-surface); border: 1px solid var(--rsn-ai-border); display: flex; align-items: center; justify-content: center; flex: none; }
.std-gov__t { display: block; font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); }
.std-gov__d { display: block; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.std-gov:hover .std-gov__t { text-decoration: underline; }

.std-golden { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.std-golden__n { font-size: var(--rsn-text-700); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.std-golden__k { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); }

.std-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-150); }
.std-ver { display: flex; gap: var(--rsn-space-150); }
.std-ver__v { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-100); color: var(--rsn-text-secondary); background: var(--rsn-surface-sunken); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 1px 7px; flex: none; height: 20px; display: inline-flex; align-items: center; }
.std-ver--now .std-ver__v { background: var(--rsn-ai-surface); border-color: var(--rsn-ai-border); color: var(--rsn-ai-text); }
.std-ver__body { min-width: 0; }
.std-ver__what { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.std-ver__meta { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin-top: 2px; }

/* ---------------- Mission control — workforce health on the Agents index ---------------- */
.mc { margin-bottom: var(--rsn-space-400); }
.mc__lead { font-size: var(--rsn-text-400); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin-bottom: var(--rsn-space-250); max-width: 72ch; }
.mc__lead a { color: var(--rsn-text-link); text-decoration: none; }
.mc__lead a:hover { text-decoration: underline; }
.mc__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rsn-space-200); margin-bottom: var(--rsn-space-200); }
@media (max-width: 760px) { .mc__metrics { grid-template-columns: 1fr; } }
.mc-metric { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); padding: var(--rsn-space-250); }
.mc-metric__k { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); margin-bottom: 6px; }
.mc-metric__v { font-size: var(--rsn-text-800); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.mc-metric__d { font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-muted); }
.mc-metric__d--good { color: var(--rsn-status-success); }
.mc-metric__sub { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin-top: 8px; line-height: var(--rsn-leading-body); }
.mc-spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 10px; }
.mc-spark span { flex: 1; background: var(--rsn-status-success); border-radius: 2px 2px 0 0; opacity: .85; }
.mc-spark--down span { background: var(--rsn-status-warning); }
.mc-att { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); padding: var(--rsn-space-250); }
.mc-att__head { font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: var(--rsn-space-150); }
.mc-att__head span { font-weight: var(--rsn-weight-regular); color: var(--rsn-text-muted); }
.mc-att__note { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-top: 8px; line-height: var(--rsn-leading-body); }
.mc-label { font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); margin-bottom: var(--rsn-space-150); }

/* ---------------- Guided tour (story mode) ---------------- */
.tour { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tour[hidden] { display: none; }
.tour__card { pointer-events: auto; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: min(560px, 92vw); background: var(--rsn-surface-raised); border: 1px solid var(--rsn-border-default);
  border-radius: var(--rsn-radius-lg); box-shadow: var(--rsn-shadow-overlay); padding: var(--rsn-space-250);
  animation: vis-rise .3s var(--rsn-ease-standard) both; }
.tour__eyebrow { font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); margin-bottom: 8px; }
.tour__title { font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.tour__body { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin-bottom: var(--rsn-space-200); }
.tour__nav { display: flex; align-items: center; gap: var(--rsn-space-150); }
.tour__dots { display: flex; gap: 5px; margin: 0 auto; }
.tour__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rsn-border-strong); opacity: .45; }
.tour__dot.is-on { background: var(--rsn-text-primary); opacity: 1; }
.tour__adv { display: flex; gap: 8px; }
html.vt-tour-on #vt-fab { display: none !important; }
.tour-spot { outline: 2px solid var(--rsn-action-primary); outline-offset: 4px; border-radius: var(--rsn-radius-md); position: relative; z-index: 201; }
@media (prefers-reduced-motion: reduce) { .tour__card { animation: none; } }

/* ---------------- Emerging risk — cross-functional fusion ---------------- */
.er-hero { display: flex; gap: var(--rsn-space-200); align-items: flex-start; padding: var(--rsn-space-300); border: 1px solid var(--rsn-ai-border); background: var(--rsn-ai-surface); border-radius: var(--rsn-radius-lg); margin-bottom: var(--rsn-space-400); }
.er-hero__mark { width: 32px; height: 32px; border-radius: var(--rsn-radius-full); background: var(--rsn-surface-raised); border: 1px solid var(--rsn-ai-border); display: flex; align-items: center; justify-content: center; color: var(--rsn-ai-accent); flex: none; }
.er-hero__title { font-size: var(--rsn-text-500); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.er-hero__body { font-size: var(--rsn-text-400); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0; max-width: 72ch; }

.er-signals { display: flex; flex-direction: column; gap: var(--rsn-space-150); margin-bottom: var(--rsn-space-400); }
.er-signal { display: flex; gap: var(--rsn-space-200); align-items: flex-start; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); padding: var(--rsn-space-250); }
.er-signal__icon { width: 28px; height: 28px; border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); display: flex; align-items: center; justify-content: center; flex: none; }
.er-signal__body { flex: 1; min-width: 0; }
/* Title and its severity tag share one line; the description spans the full
   body width below, so it never wraps into a narrow column. */
.er-signal__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rsn-space-200); margin-bottom: 3px; }
.er-signal__src { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.er-signal__what { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0; }
.er-signal__sev { font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); flex: none; white-space: nowrap; }

.er-reason { border: 1px solid var(--rsn-border-subtle); border-left: 3px solid var(--rsn-ai-accent); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); padding: var(--rsn-space-300); margin-bottom: var(--rsn-space-300); }
.er-reason__head { display: flex; align-items: center; gap: 7px; font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); margin-bottom: var(--rsn-space-150); }
.er-reason__body { font-size: var(--rsn-text-400); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); margin: 0 0 var(--rsn-space-250); max-width: 72ch; }
.er-reason__body b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-semibold); }
.er-escal { display: flex; align-items: stretch; gap: var(--rsn-space-100); flex-wrap: wrap; }
.er-escal__step { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); }
.er-escal__step.is-active { border-color: var(--rsn-status-critical); background: var(--rsn-status-critical-surface); }
.er-escal__k { font-size: var(--rsn-text-200); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-secondary); }
.er-escal__step.is-active .er-escal__k { color: var(--rsn-status-critical-text); }
.er-escal__d { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.er-escal__arw { color: var(--rsn-text-muted); align-self: center; flex: none; }

.er-actions { display: flex; gap: var(--rsn-space-150); flex-wrap: wrap; }
.er-aff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rsn-space-100); }
.er-aff li { display: flex; justify-content: space-between; gap: var(--rsn-space-150); font-size: var(--rsn-text-300); }
.er-aff__k { color: var(--rsn-text-muted); }
.er-aff__v { color: var(--rsn-text-primary); text-align: right; }
.er-aff__v a { color: var(--rsn-text-link); text-decoration: none; }
.er-aff__v a:hover { text-decoration: underline; }

/* Registers — object id in the name cell */
.rg-id { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }

/* Data card — a bounded container for a table/list section (title · count · actions).
   The table inside goes flush (no own border) so containment is single-level. */
.dcard { max-width: var(--vt-col); margin-inline: auto; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-lg); background: var(--rsn-surface-raised); overflow: hidden; }
.dcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rsn-space-200); padding: var(--rsn-space-200) var(--rsn-space-250); border-bottom: 1px solid var(--rsn-border-subtle); }
.dcard__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-semibold); color: var(--rsn-text-primary); }
.dcard__meta { font-size: var(--rsn-text-300); color: var(--rsn-text-muted); }
.dcard .agx-table { border: 0; border-radius: 0; max-width: none; margin: 0; }
.mon { max-width: var(--vt-col); margin-inline: auto; }
.mon .rev-run { max-width: none; }

/* Risk detail — inherent → residual → appetite scoring row */
.rk-score { display: flex; align-items: center; gap: var(--rsn-space-200); flex-wrap: wrap; }
.rk-score__cell { border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); padding: var(--rsn-space-150) var(--rsn-space-200); background: var(--rsn-surface-raised); }
.rk-score__cell--app { margin-left: auto; }
.rk-score__k { font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); margin-bottom: 4px; }
.rk-score__arw { color: var(--rsn-text-muted); flex: none; }

/* Universe — browse governance objects by type (the object hub), as a
   horizontally-scrolling carousel instead of a wrapping grid — nav
   buttons scroll the track; native drag/wheel scroll works too. */
.uni-browse { max-width: var(--vt-col); width: 100%; min-width: 0; margin: 0 auto var(--rsn-space-300); flex: none; }
.uni-browse__label { font-size: var(--rsn-text-100); text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); color: var(--rsn-text-muted); font-weight: var(--rsn-weight-semibold); margin-bottom: var(--rsn-space-150); }
.uni-browse__carousel { display: flex; align-items: center; gap: var(--rsn-space-100); }
.uni-browse__track { flex: 1; min-width: 0; display: flex; gap: var(--rsn-space-150); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.uni-browse__track::-webkit-scrollbar { display: none; }
.uni-browse__nav {
  flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rsn-border-subtle); border-radius: 50%;
  background: var(--rsn-surface-raised); color: var(--rsn-text-secondary); cursor: pointer;
}
.uni-browse__nav:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.uni-obj { flex: 0 0 190px; scroll-snap-align: start; display: flex; align-items: center; gap: var(--rsn-space-150); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised); padding: var(--rsn-space-150); text-decoration: none; }
.uni-obj:hover { border-color: var(--rsn-border-strong); background: var(--rsn-surface-hover); }
.uni-obj__icon { width: 30px; height: 30px; flex: none; border-radius: var(--rsn-radius-md); background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); display: flex; align-items: center; justify-content: center; }
.uni-obj__t { flex: 1; min-width: 0; font-size: var(--rsn-text-300); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); }
.uni-obj__n { font-size: var(--rsn-text-300); color: var(--rsn-text-muted); font-variant-numeric: tabular-nums; }

/* Standards index — agreement mini-bar */
.std-agree { display: flex; align-items: center; gap: 8px; }
.std-agree__v { font-size: var(--rsn-text-300); color: var(--rsn-text-primary); font-variant-numeric: tabular-nums; }
.std-agree__bar { width: 60px; height: 6px; border-radius: var(--rsn-radius-full); background: var(--rsn-surface-sunken); overflow: hidden; }
.std-agree__bar span { display: block; height: 100%; background: var(--rsn-status-success); }

/* ============================================================================
   Three-tier assurance + judgment queue + planning
   Every claim is typed by HOW it's known and HOW sure — never a flat green.
   Tier 1 machine-verified (deterministic) · Tier 2 agent-reasoned (iris + conf)
   · Tier 3 human-represented (attested). Teaching promotes reasoned -> verified.
   ============================================================================ */

/* --- Tier stamp (used in the queue, planning, and on controls) --- */
.tier { display: inline-flex; align-items: center; gap: 5px; font-size: var(--rsn-text-100);
        text-transform: uppercase; letter-spacing: var(--rsn-tracking-wide); font-weight: var(--rsn-weight-semibold); white-space: nowrap; }
.tier .rsn-icon { width: 13px; height: 13px; flex: none; }
.tier--verified    { color: var(--rsn-text-muted); }        /* deterministic fact */
.tier--reasoned    { color: var(--rsn-ai-text); }           /* agent judgement — iris */
.tier--represented { color: var(--rsn-text-secondary); }    /* human attestation */
.tier--blocked     { color: var(--rsn-status-warning-text); }  /* structural stoppage, not a claim */
.tier__dot { width: 6px; height: 6px; border-radius: var(--rsn-radius-full); flex: none; }

/* Confidence pips (reused for the agent-reasoned tier) */
.conf { display: inline-flex; align-items: center; gap: 5px; font-size: var(--rsn-text-100); color: var(--rsn-text-muted);
        text-transform: none; letter-spacing: 0; font-weight: var(--rsn-weight-regular); }
.conf__bars { display: inline-flex; gap: 2px; }
.conf__bars i { width: 3px; height: 9px; border-radius: 1px; background: var(--rsn-border-strong); }
.conf--high i:nth-child(-n+3) { background: var(--rsn-status-success); }
.conf--moderate i:nth-child(-n+2) { background: var(--rsn-status-warning); }
.conf--low i:nth-child(-n+1) { background: var(--rsn-status-critical); }

/* --- The judgment queue --- */
.jq-ratio { max-width: var(--vt-col); margin: 0 auto var(--rsn-space-300); display: flex; align-items: baseline; gap: var(--rsn-space-250); flex-wrap: wrap; }
.jq-ratio__sub { font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.jq-ratio__sub b { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); }

.jq-item { display: flex; align-items: flex-start; gap: var(--rsn-space-200); padding: var(--rsn-space-250);
           border-bottom: 1px solid var(--rsn-border-subtle); }
.jq-item:last-child { border-bottom: none; }
.jq-item__mark { width: 30px; height: 30px; border-radius: var(--rsn-radius-md); flex: none; display: flex; align-items: center; justify-content: center; }
.jq-item__mark .rsn-icon { width: 16px; height: 16px; }
.jq-item__mark--reasoned { background: var(--rsn-ai-surface); color: var(--rsn-ai-accent); }
.jq-item__mark--represented { background: var(--rsn-surface-sunken); color: var(--rsn-text-secondary); }
.jq-item__mark--verified { background: var(--rsn-status-success-surface); color: var(--rsn-status-success); }
.jq-item__mark--blocked { background: var(--rsn-status-warning-surface); color: var(--rsn-status-warning); }
.jq-item__body { flex: 1; min-width: 0; }
.jq-item__title { font-size: var(--rsn-text-400); font-weight: var(--rsn-weight-medium); color: var(--rsn-text-primary); margin-bottom: 3px; }
.jq-item__meta { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); margin-bottom: var(--rsn-space-100); }
.jq-item__prov { display: flex; align-items: center; gap: var(--rsn-space-150); flex-wrap: wrap; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); }
.jq-item__prov-who { color: var(--rsn-text-muted); }
.jq-item__act { flex: none; display: flex; align-items: center; gap: var(--rsn-space-100); padding-top: 2px; }
.jq-item--done { opacity: 0.55; }
.jq-item--done .jq-item__act { display: none; }

/* Inline attest panel (the represented path, kept on the queue surface) */
.jq-attest { margin-top: var(--rsn-space-150); border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md);
             background: var(--rsn-surface-sunken); padding: var(--rsn-space-200); }
.jq-attest__row { display: flex; align-items: baseline; gap: var(--rsn-space-150); padding: 4px 0; font-size: var(--rsn-text-300); }
.jq-attest__k { flex: none; width: 44px; color: var(--rsn-text-muted); font-family: var(--rsn-font-mono); font-size: var(--rsn-text-200); }
.jq-attest__v { color: var(--rsn-text-primary); }
.jq-attest__flag { display: flex; align-items: flex-start; gap: 7px; margin-top: var(--rsn-space-100); padding: var(--rsn-space-150);
                   border-left: 3px solid var(--rsn-ai-accent); background: var(--rsn-ai-surface); border-radius: var(--rsn-radius-sm);
                   font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); }
.jq-attest__flag b { color: var(--rsn-text-primary); }
.jq-attest__actions { display: flex; gap: var(--rsn-space-100); margin-top: var(--rsn-space-200); }

/* The handled backdrop — the many the agents cleared */
.jq-handled { max-width: var(--vt-col); margin: var(--rsn-space-250) auto 0; display: flex; align-items: center; gap: 8px;
              font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.jq-handled .rsn-icon { width: 14px; height: 14px; color: var(--rsn-status-success); }

/* --- Planning: allocate controls across the three tiers --- */
.plan-lane { max-width: var(--vt-col); margin: 0 auto var(--rsn-space-300); }
.plan-lane__head { display: flex; align-items: center; gap: var(--rsn-space-150); margin-bottom: var(--rsn-space-150); }
.plan-lane__count { font-size: var(--rsn-text-200); color: var(--rsn-text-muted); font-variant-numeric: tabular-nums; }
.plan-lane__hint { font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); margin-left: auto; }
.plan-row { display: flex; align-items: center; gap: var(--rsn-space-200); padding: 11px var(--rsn-space-250);
            border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md); background: var(--rsn-surface-raised); margin-bottom: 6px; }
.plan-row__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.plan-row__id { font-family: var(--rsn-font-mono); font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.plan-row__t { font-size: var(--rsn-text-300); color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); }
.plan-row__assignee { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rsn-text-200); color: var(--rsn-text-secondary); flex: none; }
.plan-row__assignee .rsn-avatar { width: 20px; height: 20px; }
.plan-summary { max-width: var(--vt-col); margin: 0 auto; padding: var(--rsn-space-250); border: 1px solid var(--rsn-ai-border);
                background: var(--rsn-ai-surface); border-radius: var(--rsn-radius-lg); display: flex; align-items: center; gap: var(--rsn-space-250); flex-wrap: wrap; }
.plan-summary__text { flex: 1; min-width: 240px; font-size: var(--rsn-text-300); color: var(--rsn-text-secondary); line-height: var(--rsn-leading-body); }
.plan-summary__text b { color: var(--rsn-text-primary); }

/* --- Standards: faceted filter / lens bar --- */
.std-filters { max-width: var(--vt-col); margin: 0 auto var(--rsn-space-200); display: flex; align-items: center;
               flex-wrap: wrap; gap: var(--rsn-space-150); }
.std-search { padding: 6px 10px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md);
              background: var(--rsn-surface-raised); color: var(--rsn-text-primary); font: inherit; font-size: var(--rsn-text-300); min-width: 200px; }
.std-search::placeholder { color: var(--rsn-text-muted); }
.std-filter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); }
.std-filter select { padding: 5px 8px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md);
                     background: var(--rsn-surface-raised); color: var(--rsn-text-primary); font: inherit; font-size: var(--rsn-text-200); }
.std-clear { padding: 5px 10px; border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-md);
             background: transparent; color: var(--rsn-text-secondary); font: inherit; font-size: var(--rsn-text-200); cursor: pointer; }
.std-clear:hover { border-color: var(--rsn-border-strong); color: var(--rsn-text-primary); }
.std-count { margin-left: auto; font-size: var(--rsn-text-200); color: var(--rsn-text-muted); font-variant-numeric: tabular-nums; }
.std-tier { display: inline-flex; align-items: center; gap: 4px; font-size: var(--rsn-text-100); color: var(--rsn-text-muted); }
.std-tier .rsn-icon { width: 13px; height: 13px; }
.std-empty { padding: var(--rsn-space-300); text-align: center; color: var(--rsn-text-muted); font-size: var(--rsn-text-300); }

/* --- Object detail — relationships, capabilities, lifecycle (the new paradigm) --- */
.io-rel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; }
.io-rel__role { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); white-space: nowrap; }
.io-cap { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.io-cap__mark { width: 24px; height: 24px; border-radius: var(--rsn-radius-sm); background: var(--rsn-ai-surface);
                color: var(--rsn-ai-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.io-cap__mark .rsn-icon { width: 14px; height: 14px; }
.io-cap__t { flex: 1; font-size: var(--rsn-text-300); color: var(--rsn-text-primary); }
.io-auto { font-size: var(--rsn-text-100); color: var(--rsn-text-secondary); background: var(--rsn-surface-sunken);
           border: 1px solid var(--rsn-border-subtle); border-radius: var(--rsn-radius-full); padding: 2px 8px; white-space: nowrap; }
.io-ready__item--current { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); }
.io-ready__item--current .rsn-icon { color: var(--rsn-ai-accent); }
.io-ready__item--future { color: var(--rsn-text-muted); }
/* A state an agent can't proceed on — distinct from "current" (agent working)
   and "future" (not reached yet): something structural is stopping it. */
.io-ready__item--blocked { color: var(--rsn-text-primary); font-weight: var(--rsn-weight-medium); }
.io-ready__item--blocked .rsn-icon { color: var(--rsn-status-warning); }
.io-life__note { font-size: var(--rsn-text-100); color: var(--rsn-text-muted); margin: var(--rsn-space-150) 0 0; line-height: var(--rsn-leading-body); }