/* atoms.css — atom-disposition workbench, Singer-elegant.
 *
 * Re-uses the design tokens + primitives from style.css. No new fonts,
 * no new accent colors. Atom-page surfaces compose from .tag / .led /
 * .status / .gauge / .readout / .edit / .tab — defined once in style.css,
 * referenced everywhere.
 */

.atoms-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ─── Dashboard ─────────────────────────────────────────────────────── */
.atoms-lede {
  margin: 0 0 18px;
  max-width: 760px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-body);
}

/* Stat row uses the gauge cluster vocabulary */
.atoms-disp-summary {
  display: flex;
  background: var(--bg-instrument);
  border: 1px solid var(--bg-instrument);
  margin: 8px 0 24px;
  flex-wrap: wrap;
}
.atoms-stat {
  flex: 1 1 0;
  min-width: 110px;
  padding: 10px 22px 12px;
  background: var(--bg-instrument);
  border-right: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}
.atoms-stat:last-child { border-right: none; }
/* Semantic stat-card variants — see dashboard.html for usage. The .amber /
   .lime / .muted modifiers re-tint the readout (.atoms-stat-num) so the
   dashboard reads as a status panel: amber = "work to do", lime = "done",
   muted = "for orientation only". P1 design-audit fix. */
.atoms-stat.amber .atoms-stat-num {
  color: #FFB347;
  text-shadow: 0 0 4px rgba(255, 179, 71, 0.35);
}
.atoms-stat.lime .atoms-stat-num {
  color: var(--livery-lime);
  text-shadow: 0 0 4px var(--phosphor-glow);
}
.atoms-stat.muted .atoms-stat-num {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: none;
}
.atoms-stat-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 20px;
  color: var(--livery-lime);
  text-shadow: 0 0 4px var(--phosphor-glow);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.atoms-stat-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
  margin-top: 6px;
}
.atoms-stat-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  margin-left: 6px;
}

/* Orange stat variant — used by the sync-conflicts tile + kanban-stale.
   Pairs the livery-orange readout with a soft glow so it reads as a
   warning channel distinct from amber (work-to-do) and red (block). */
.atoms-stat.orange .atoms-stat-num {
  color: var(--livery-orange);
  text-shadow: 0 0 4px rgba(255, 132, 0, 0.35);
}

/* When a stat tile is itself a link (sync conflicts) it gets a subtle
   hover affordance — the underline default from style.css would read
   wrong inside the dark instrument bar. */
.atoms-stat-link {
  text-decoration: none;
  border-bottom: none;
  cursor: pointer;
  transition: background 100ms linear;
  display: block;
}
.atoms-stat-link:hover {
  background: #1a1a17;
  border-bottom: none;
}

/* ─── 4-column kanban (Findings dashboard) ──────────────────────────
   Replaces the legacy 6-stat row. Each column is a link into
   /atoms/browse/Recommendation?state=<column>. Columns are tinted by
   workflow stage:
     amber  = work to do (Unreviewed, AI-drafted)
     lime   = done       (Human-approved)
     orange = warning    (Stale — propagation flagged re-review) */
.atoms-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bg-instrument);
  border: 1px solid var(--bg-instrument);
  margin: 8px 0 14px;
}
.atoms-kanban-col {
  display: block;
  padding: 16px 22px 18px;
  background: var(--bg-instrument);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-bottom-color 100ms linear, background 100ms linear;
}
.atoms-kanban-col:hover {
  background: #1a1a17;
  border-bottom: 3px solid var(--livery-lime);
}
.atoms-kanban-hd {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 10px;
}
.atoms-kanban-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.atoms-kanban-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
}
.atoms-kanban-col.amber .atoms-kanban-num {
  color: #FFB347;
  text-shadow: 0 0 4px rgba(255, 179, 71, 0.35);
}
.atoms-kanban-col.amber:hover {
  border-bottom-color: #FFB347;
}
.atoms-kanban-col.lime .atoms-kanban-num {
  color: var(--livery-lime);
  text-shadow: 0 0 4px var(--phosphor-glow);
}
.atoms-kanban-col.lime:hover {
  border-bottom-color: var(--livery-lime);
}
.atoms-kanban-col.orange .atoms-kanban-num {
  color: var(--livery-orange);
  text-shadow: 0 0 4px rgba(255, 132, 0, 0.35);
}
.atoms-kanban-col.orange:hover {
  border-bottom-color: var(--livery-orange);
}
.atoms-kanban-col.muted .atoms-kanban-num {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: none;
}
@media (max-width: 900px) {
  .atoms-kanban {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Disposition progress bar ──────────────────────────────────────
   Sits at the very top of /atoms/queue/disposition/.../<id>. Single
   inline bar + caption — subtle, always visible, never dominant. The
   fill is livery-lime over a muted rail. */
.atoms-disp-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--livery-lime);
  margin-bottom: 14px;
}
.atoms-disp-progress-bar {
  flex: 1 1 0;
  height: 6px;
  background: var(--rule-soft);
  border-radius: 0;
  overflow: hidden;
  min-width: 120px;
}
.atoms-disp-progress-fill {
  height: 100%;
  background: var(--livery-lime);
  box-shadow: 0 0 4px var(--phosphor-glow);
  transition: width 200ms linear;
}
.atoms-disp-progress-text {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.atoms-disp-progress-text strong {
  color: var(--ink-primary);
  font-weight: 600;
}
.atoms-disp-progress-sep {
  color: var(--ink-faint);
  margin: 0 6px;
}
@media (max-width: 600px) {
  .atoms-disp-progress {
    flex-wrap: wrap;
  }
  .atoms-disp-progress-text {
    white-space: normal;
  }
}

/* Gauge-as-link variant — used on engagement.html so the Stale /
   Pending review gauges are clickable. Inherits .gauge layout from
   style.css; this just removes the default underline + adds a subtle
   hover affordance so it reads as interactive. */
.gauge-link {
  text-decoration: none;
  border-bottom: none;
  cursor: pointer;
  transition: background 100ms linear;
}
.gauge-link:hover {
  background: rgba(150, 193, 33, 0.06);
  border-bottom: none;
}

/* Sub-distribution panels (6R / Phase / Class breakdowns) */
.atoms-full-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 14px 0 18px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
}
.atoms-full-section {
  padding: 14px 18px;
  border-right: 1px solid var(--rule);
}
.atoms-full-section:last-child { border-right: none; }
.atoms-full-section h3 {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.atoms-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.atoms-mini-table th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-align: left;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
  text-transform: uppercase;
}
.atoms-mini-table td {
  padding: 4px 0;
  color: var(--ink-body);
}
.atoms-mini-table .atoms-mini-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-primary);
}

.atoms-disp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.atoms-disp-btn { font-weight: 500; }
.muted-on-primary {
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
  font-size: 11px;
}

/* Phase 2 — opportunity_kind picker on the Recommendation disposition
   form. Sits above tier as the first classification dimension (answers
   "what kind of opportunity is this?" before tier/effort calls).
   AI = blue, Software = orange, Process = lime, Unknown = neutral. */
.atoms-disp-oppkind {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
  border: 1px solid var(--rule);
  padding: 10px 14px;
  background: var(--bg-panel);
}
.atoms-disp-oppkind legend {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 6px;
}
.atoms-oppkind-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  /* Idle option uses the same panel background as the rest of the form,
   * so the picker doesn't read as a different application. Color identity
   * comes from the per-kind colored top stripe (AI=blue, Software=orange,
   * Process=lime). The dark inverted state is reserved for `:checked`. */
  border-top: 3px solid var(--ink-faint);
  background: var(--bg-panel);
  cursor: pointer;
  transition: border-color 100ms linear, background 100ms linear, color 100ms linear;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.atoms-oppkind-opt:hover {
  border-color: var(--livery-lime);
}
.atoms-oppkind-opt input {
  margin: 0;
  accent-color: var(--livery-lime);
}
.atoms-oppkind-opt:has(input:checked) {
  background: var(--bg-instrument);
  border-color: var(--livery-lime);
  color: var(--livery-lime);
}

/* Per-kind top-stripe colors — visible on idle and selected states. Mirrors
 * the .atoms-oppkind-badge palette: AI=blue, Software=orange, Process=lime,
 * Unknown=neutral grey. Border-top wins via specificity over the generic
 * .atoms-oppkind-opt rule above. */
.atoms-oppkind-ai           { border-top-color: var(--livery-blue); }
.atoms-oppkind-software     { border-top-color: var(--livery-orange); }
.atoms-oppkind-process      { border-top-color: var(--livery-lime); }
.atoms-oppkind-unknown      { border-top-color: var(--ink-faint); }
.atoms-oppkind-ai:has(input:checked)       { border-color: var(--livery-blue); }
.atoms-oppkind-software:has(input:checked) { border-color: var(--livery-orange); }
.atoms-oppkind-process:has(input:checked)  { border-color: var(--livery-lime); }
.atoms-oppkind-unknown:has(input:checked)  { border-color: var(--ink-faint); }

/* Recommendation list / detail badge — color-coded chip surfacing
   opportunity_kind so the user sees AI / Software / Process at a glance. */
.atoms-oppkind-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  color: var(--ink-body);
  background: var(--bg-instrument);
}
.atoms-oppkind-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink-faint);
}
.atoms-oppkind-badge-ai          { border-color: var(--livery-blue); color: var(--livery-blue); }
.atoms-oppkind-badge-ai::before  { background: var(--livery-blue); }
.atoms-oppkind-badge-software    { border-color: var(--livery-orange); color: var(--livery-orange); }
.atoms-oppkind-badge-software::before { background: var(--livery-orange); }
.atoms-oppkind-badge-process     { border-color: var(--livery-lime); color: var(--livery-lime); }
.atoms-oppkind-badge-process::before  { background: var(--livery-lime); }
.atoms-oppkind-badge-unknown     { border-color: var(--ink-faint); color: var(--ink-mute); }
.atoms-oppkind-badge-unknown::before  { background: var(--ink-faint); }

/* Filter row on /atoms/browse/Recommendation — chip-strip that narrows
   the list to a single opportunity_kind. */
.atoms-oppkind-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
}
.atoms-oppkind-filter-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 4px;
}
.atoms-oppkind-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-body);
  text-decoration: none;
  border: 1px solid var(--rule);
  /* Idle state uses the same light panel background as the surrounding card
     so dark text reads clearly. Was reading dark-on-dark before. */
  background: var(--bg-panel);
  transition: border-color 100ms linear, background 100ms linear, color 100ms linear;
}
.atoms-oppkind-chip:hover {
  border-color: var(--livery-lime);
  color: var(--ink-primary);
}
.atoms-oppkind-chip.active {
  background: var(--bg-instrument);
  border-color: var(--livery-lime);
  color: var(--livery-lime);
}
.atoms-oppkind-chip-ai.active       { border-color: var(--livery-blue);   color: var(--livery-blue); }
.atoms-oppkind-chip-software.active { border-color: var(--livery-orange); color: var(--livery-orange); }
.atoms-oppkind-chip-process.active  { border-color: var(--livery-lime);   color: var(--livery-lime); }
.atoms-oppkind-chip-unknown.active  { border-color: var(--ink-faint);     color: var(--ink-mute); }

/* Phase 2 — SystemReference detail page Lifecycle section. */
.atoms-system-lifecycle {
  margin: 18px 0;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
}
.atoms-system-lifecycle h3 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.atoms-system-lifecycle-prefix {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-body);
  font-style: italic;
}
.atoms-system-lifecycle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atoms-system-lifecycle-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
.atoms-system-lifecycle-arrow {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--livery-lime);
  width: 16px;
  text-align: center;
}
.atoms-system-lifecycle-rel {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  min-width: 110px;
}

/* Phase 2 — evidence-only counts (Issue / Decision). Visually paired with
   the disposition CTA but read-only: clicking jumps to the Browse list,
   not to a disposition form. */
.atoms-evidence-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.atoms-evidence-card {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 100ms linear, background 100ms linear;
  min-width: 180px;
}
.atoms-evidence-card:hover {
  background: rgba(150, 193, 33, 0.03);
  border-color: var(--livery-lime);
}
.atoms-evidence-count {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.atoms-evidence-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Browse-by-kind tiles — ghost cards, lime hairline on hover */
.atoms-kind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 14px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
}
@media (max-width: 767px) {
  .atoms-kind-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.atoms-kind-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink-body);
  min-height: 88px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  background: var(--bg-panel);
  transition: background 100ms linear, border-left-color 100ms linear;
}
.atoms-kind-tile:hover {
  background: rgba(150, 193, 33, 0.03);
  border-left-color: var(--livery-lime);
  color: var(--ink-primary);
}
.atoms-kind-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.atoms-kind-count {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
}

/* ─── Title eyebrow + chassis ID treatment ─────────────────────────── *
 * Kind pill becomes the .eyebrow-style mark. Atom ID is a chassis-plate
 * in body color (not the white header version).
 */
.atoms-kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--ink-mute);
  padding: 0;
  border: none;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.atoms-kind-pill::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--livery-lime);
}

.atoms-disp-title,
.atoms-detail-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink-primary);
  line-height: 1.2;
  text-transform: none;
  max-width: 800px;
}

/* Chassis-plate ID — body-color version */
.atoms-disp-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-primary);
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 4px 10px;
  margin-left: 14px;
  letter-spacing: 0.05em;
  text-transform: none;
  border-radius: 0;
  box-shadow: none;
  vertical-align: middle;
  position: relative;
  top: -3px;
}
.atoms-disp-id::before {
  content: "S/N";
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-family: var(--font-sans);
  color: var(--ink-mute);
  border: none;
  padding: 0;
  margin: 0;
}

/* Chassis-plate ID on its own line beneath the title — keeps long
   summary text from being a wall, and gives the ID visual breathing room. */
.atoms-disp-id-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 4px;
}
.atoms-disp-id-row .atoms-disp-id {
  margin-left: 0;
  top: 0;
}

/* ─── Disposition page ─────────────────────────────────────────────── */
.atoms-disposition .card { padding: 28px 32px; }

.atoms-disp-pos {
  text-align: right;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--font-sans);
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.atoms-disp-pos strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.atoms-disp-nav { display: flex; gap: 8px; margin-top: 6px; }
.atoms-disp-nav .btn-small.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.atoms-disp-body {
  margin: 22px 0 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.atoms-prose {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-body);
  margin: 6px 0 14px;
  max-width: 800px;
}
.atoms-rationale {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 800px;
  color: var(--ink-body);
}

/* Service-manual definition list */
.atoms-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 14px 0 18px;
  font-size: 13px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}
.atoms-meta dt {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10px;
  align-self: center;
}
.atoms-meta dd {
  margin: 0;
  color: var(--ink-body);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0;
}

/* Source evidence panel */
.atoms-source {
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--livery-lime);
  padding: 16px 20px;
  margin: 18px 0;
}
.atoms-source h3 {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.atoms-source-item { margin: 10px 0; }
.atoms-source-header {
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 6px;
  color: var(--ink-mute);
  letter-spacing: 0;
}
.atoms-source-excerpt {
  margin: 0;
  padding: 12px 16px;
  background: var(--bg-page);
  border-left: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-body);
  white-space: pre-wrap;
  letter-spacing: 0;
}

/* ── Cut 3.1 — Human touchpoint + AI replacement signal panels ────── *
 * Same chassis-plate look as .atoms-source so the two panels read as a
 * second-class evidence section. Different left-rule color than the
 * source panel so they're visually distinct.
 */
.atoms-touchpoint,
.atoms-ai-replacement {
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  padding: 16px 20px;
  margin: 18px 0;
}
.atoms-touchpoint h3,
.atoms-ai-replacement h3 {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.atoms-touchpoint-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 13px;
}
.atoms-touchpoint-grid dt {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 2px;
}
.atoms-touchpoint-grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-body);
  letter-spacing: 0;
}
.atoms-touchpoint-empty {
  margin: 0;
  font-style: italic;
  font-size: 12px;
}

/* ── Cut 3.1 — Manual-touchpoint roll-up on the process detail page ── *
 * Three top-line stats, two simple HTML bar groups (no chart library),
 * and a top-by-cycle-volume list. Inline div bars match the workbench's
 * flat chassis-plate aesthetic — no SVG, no JS.
 */
.atoms-process-touchpoint-panel { margin-bottom: 24px; }
.atoms-touchpoint-rollup {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--rule);
}
.atoms-touchpoint-stat {
  min-width: 120px;
}
.atoms-touchpoint-stat-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-body);
  line-height: 1;
}
.atoms-touchpoint-stat-lbl {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
.atoms-touchpoint-bars {
  margin: 14px 0 4px;
}
.atoms-touchpoint-bars h4 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.atoms-touchpoint-bar-row {
  display: grid;
  grid-template-columns: 200px 1fr 36px;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  font-size: 12px;
}
.atoms-touchpoint-bar-label {
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--ink-body);
}
.atoms-touchpoint-bar-track {
  display: block;
  height: 10px;
  background: var(--bg-page);
  border: 1px solid var(--rule);
  position: relative;
}
.atoms-touchpoint-bar-fill {
  display: block;
  height: 100%;
  background: var(--livery-lime, #cdd84b);
}
.atoms-touchpoint-bar-num {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--ink-body);
}
.atoms-touchpoint-top {
  margin: 14px 0 4px;
}
.atoms-touchpoint-top h4 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.atoms-touchpoint-top-list {
  margin: 0;
  padding-left: 18px;
  list-style: square;
  font-family: var(--font-mono);
  font-size: 12px;
}
.atoms-touchpoint-top-list li { margin: 3px 0; }
.atoms-touchpoint-top-label {
  display: block;
  margin-left: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-mute);
}

.atoms-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.atoms-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-body);
  border-radius: 0;
}
.atoms-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink-faint);
  margin: 0;
}

/* ─── BP breadcrumb — eyebrow style ─────────────────────────────────── *
 * Anchor sentence with a small lime mark, mono path with wide tracking.
 * Drops the chassis-plate look so it matches the brief's restraint.
 */
.atoms-bp-crumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0;
  text-transform: none;
}
.atoms-bp-crumb::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--livery-lime);
  margin-right: 4px;
}
.atoms-bp-crumb-prefix {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding-right: 8px;
  border-right: 1px solid var(--rule);
  margin-right: 4px;
  background: transparent;
  border-bottom: none;
  border-top: none;
  border-left: none;
}
.atoms-bp-crumb-part {
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-weight: 500;
}
.atoms-bp-crumb-sep {
  color: var(--ink-faint);
  font-weight: 400;
}
.atoms-bp-crumb-warn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--livery-red);
  background: transparent;
  padding: 0;
  margin-left: 8px;
  text-transform: uppercase;
}
.atoms-bp-crumb-warn::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--livery-red);
}
.atoms-bp-crumb-via {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-left: 8px;
  font-style: normal;
}
.atoms-bp-crumb-unresolved .atoms-bp-crumb-part {
  color: var(--ink-faint);
}

/* ─── Disposition form: tier + type + 6R + class + phase ─────────── *
 * Ghost selector cards; active state = black fill + lime underline,
 * matching the .tab vocabulary.
 */
.atoms-disp-form {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.atoms-disp-tier,
.atoms-disp-type,
.atoms-disp-sixr,
.atoms-disp-class,
.atoms-disp-phase {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}
.atoms-disp-tier legend,
.atoms-disp-type legend,
.atoms-disp-sixr legend,
.atoms-disp-class legend,
.atoms-disp-phase legend {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0;
  margin-bottom: 10px;
}

.atoms-disp-tier { display: flex; gap: 0; border: 1px solid var(--rule); }
.atoms-disp-type,
.atoms-disp-sixr,
.atoms-disp-class {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
}
.atoms-disp-phase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--rule);
}

.atoms-tier-opt,
.atoms-type-opt,
.atoms-sixr-opt,
.atoms-class-opt,
.atoms-phase-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-body);
  min-height: 50px;
  margin: 0;
  border-radius: 0;
  position: relative;
}
.atoms-tier-opt:hover,
.atoms-type-opt:hover,
.atoms-sixr-opt:hover,
.atoms-class-opt:hover,
.atoms-phase-opt:hover {
  background: rgba(150, 193, 33, 0.04);
  color: var(--ink-primary);
}

.atoms-tier-opt:has(input:checked),
.atoms-type-opt:has(input:checked),
.atoms-sixr-opt:has(input:checked),
.atoms-class-opt:has(input:checked),
.atoms-phase-opt:has(input:checked) {
  background: var(--bg-instrument);
  color: #FFF;
}
.atoms-tier-opt:has(input:checked)::after,
.atoms-type-opt:has(input:checked)::after,
.atoms-sixr-opt:has(input:checked)::after,
.atoms-class-opt:has(input:checked)::after,
.atoms-phase-opt:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--livery-lime);
}
.atoms-tier-opt:has(input:checked) .atoms-tier-key,
.atoms-type-opt:has(input:checked) .atoms-type-key,
.atoms-sixr-opt:has(input:checked) .atoms-sixr-key,
.atoms-class-opt:has(input:checked) .atoms-class-key,
.atoms-phase-opt:has(input:checked) .atoms-phase-key {
  background: var(--livery-lime);
  color: var(--ink-primary);
  border-color: var(--livery-lime);
}
.atoms-tier-opt input,
.atoms-type-opt input,
.atoms-sixr-opt input,
.atoms-class-opt input,
.atoms-phase-opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.atoms-tier-key,
.atoms-type-key,
.atoms-sixr-key,
.atoms-class-key,
.atoms-phase-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  flex: 0 0 auto;
  letter-spacing: 0;
  text-transform: uppercase;
}
.atoms-tier-label,
.atoms-type-label,
.atoms-sixr-label,
.atoms-class-label,
.atoms-phase-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.atoms-tier-opt {
  flex: 1 1 0;
  justify-content: center;
}

/* Meta row: AI-replaceable + effort + confidence — equal thirds with
 * matching backgrounds, padding, and minimum heights. All three children
 * are flex: 1 1 0 with box-sizing: border-box so the row stays balanced
 * regardless of the input + checkbox content (Defect #3). */
.atoms-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: none;
}
.atoms-meta-row > label {
  flex: 1 1 0;
  min-width: 0;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  gap: 6px;
}
.atoms-airepl {
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-body);
  cursor: pointer;
}
.atoms-airepl:has(input:checked) {
  background: var(--bg-instrument);
  color: #FFF;
  border-color: var(--bg-instrument);
}
.atoms-airepl input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--livery-lime);
  margin: 0;
  flex: 0 0 14px;
}
.atoms-effort, .atoms-confidence {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--ink-mute);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.atoms-effort input[type="number"],
.atoms-confidence input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bg-page);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}
.atoms-effort input[type="number"]:focus,
.atoms-confidence input[type="number"]:focus {
  outline: none;
  border-color: var(--livery-lime);
}

.atoms-existing-full .atoms-tag { margin-right: 8px; }

/* Defect #4 — AI interpretation radio block. Without explicit styling the
 * fieldset's label and radio defaults render with the label flush left and
 * the input flush right of the parent. The rules below pin radio + label
 * tight together (radio first, ~6px gap, then label) and lay the four
 * options out as a compact wrap row. */
.atoms-ai-grade {
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  padding: 12px 16px 14px;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.atoms-ai-grade legend {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 6px;
}
.atoms-ai-grade .atoms-ai-grade-opt {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 10px;
  margin-bottom: 0;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-body);
  transition: border-color 100ms linear, background 100ms linear;
}
.atoms-ai-grade-opt:hover {
  border-color: var(--rule);
  background: rgba(150, 193, 33, 0.04);
}
.atoms-ai-grade-opt input[type="radio"] {
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--livery-lime);
}
.atoms-ai-grade-opt:has(input:checked) {
  border-color: var(--livery-lime);
  background: rgba(150, 193, 33, 0.06);
  color: var(--ink-primary);
}
.atoms-ai-grade-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: inherit;
}

.atoms-disp-validation {
  display: none;
  margin: 0 0 14px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--livery-red);
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--livery-red);
}
.atoms-disp-validation.atoms-disp-validation-show { display: block; }

/* AI-expansion result panel — wraps long generated text so it can't overflow
 * its column or visually overlap surrounding controls. The <pre> inside is
 * the prime offender; the wrapper gets max-width as a belt-and-braces. */
.atoms-expansion {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.atoms-expansion-text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.atoms-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.atoms-note input[type="text"] {
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  background: var(--bg-panel);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}
.atoms-note input[type="text"]:focus {
  outline: none;
  border-color: var(--livery-lime);
}

.atoms-disp-submit {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Action button — three weight tiers so the consultant's eye lands on
 * the dominant action (Approve) without scanning. P0 design-audit fix.
 *
 *   .atoms-action-btn                   — DEFAULT (secondary outline)
 *   .atoms-action-btn.primary           — DOMINANT (filled dark + lime border)
 *   .atoms-action-btn.danger            — DESTRUCTIVE (red outline)
 *   .atoms-action-btn.btn-small         — UTILITY (Skip / Quit — smaller + muted)
 */
.atoms-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 40px;
  padding: 0 18px;
  background: transparent;
  color: var(--ink-body);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear, border-color 100ms linear;
}
.atoms-action-btn:hover {
  background: var(--bg-instrument);
  color: #FFF;
  border-color: var(--bg-instrument);
}
/* Primary — the dominant CTA. Approve uses this when no disposition exists
   yet, so the consultant's eye anchors here first. */
.atoms-action-btn.primary {
  background: var(--bg-instrument);
  color: #FFF;
  border-color: var(--livery-lime);
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(150,193,33,0.15);
}
.atoms-action-btn.primary:hover {
  background: var(--livery-lime);
  color: var(--ink-primary);
  border-color: var(--livery-lime);
}
/* Danger — Reject. Red outline reveals as the consultant moves toward
   declining the AI's draft; deliberate, not accidental. */
.atoms-action-btn.danger {
  border-color: #b00020;
  color: #b00020;
}
.atoms-action-btn.danger:hover {
  background: #b00020;
  color: #FFF;
  border-color: #b00020;
}
/* Utility — Skip, Quit to dashboard. Muted, demoted to the right edge. */
.atoms-action-btn.btn-small {
  min-width: 110px;
  height: 32px;
  font-size: 9px;
  letter-spacing: 0.16em;
  border-color: var(--rule);
  color: var(--ink-mute);
}
.atoms-action-btn.btn-small:hover {
  border-color: var(--rule-strong);
  background: transparent;
  color: var(--ink-body);
}
.atoms-action-btn:disabled,
.atoms-action-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  border-style: dashed;
  color: var(--ink-mute);
}
.atoms-action-btn:disabled:hover,
.atoms-action-btn[disabled]:hover {
  background: transparent;
  color: var(--ink-mute);
  border-color: var(--rule-strong);
  border-style: dashed;
}
/* Defect #5 — disabled buttons surface a "why" hint on hover. The host
 * carries data-disabled-reason="..." (e.g. "Pick a Tier and Type first").
 * pointer-events stays auto on the wrapper-style button so :hover fires.
 * Wrapping the button in a span would change the form semantics, so the
 * pseudo lives on the button itself with pointer-events: none on the
 * callout to keep clicks pass-through. */
.atoms-action-btn[disabled][data-disabled-reason] {
  position: relative;
  pointer-events: auto;
}
.atoms-action-btn[disabled][data-disabled-reason]::after {
  content: attr(data-disabled-reason);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out 80ms;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.atoms-action-btn[disabled][data-disabled-reason]::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1a1a1a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out 80ms;
  z-index: 50;
}
.atoms-action-btn[disabled][data-disabled-reason]:hover::after,
.atoms-action-btn[disabled][data-disabled-reason]:hover::before {
  opacity: 1;
}

/* Browse / list — uses .tab vocabulary */
.atoms-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin: 8px 0 18px;
  border-bottom: 1px solid var(--rule);
}
.atoms-tab {
  padding: 8px 14px;
  text-decoration: none;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
  position: relative;
}
.atoms-tab:hover { color: var(--ink-primary); }
.atoms-tab-active {
  color: var(--ink-primary);
  background: var(--bg-panel);
  border-color: var(--rule);
  border-bottom-color: var(--bg-panel);
}
.atoms-tab-active::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--livery-lime);
}

.atoms-search {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0 22px;
  flex-wrap: wrap;
}
.atoms-search input[type="text"] {
  flex: 1 1 280px;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--bg-panel);
  color: var(--ink-primary);
}
.atoms-search input[type="text"]:focus {
  outline: none;
  border-color: var(--livery-lime);
}
.atoms-search-cta { margin-left: auto; }

.atoms-row-label { max-width: 540px; }
.atoms-row-label a {
  font-family: var(--font-sans);
  font-weight: 500;
  text-decoration: none;
  border: none;
  color: var(--ink-primary);
}
.atoms-row-label a:hover {
  border-bottom: 1px solid var(--livery-lime);
}

.atoms-disp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink-body);
  padding: 0;
  border: none;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.atoms-disp-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--livery-blue);
}

.atoms-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

.atoms-empty {
  background: var(--bg-panel);
  border: 1px dashed var(--rule);
  padding: 28px 32px;
  text-align: center;
  margin-top: 14px;
}
.atoms-empty h3 {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}
.atoms-empty p { margin: 6px 0; color: var(--ink-body); }

/* Detail page */
.atoms-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.atoms-detail-body { margin: 18px 0; }
.atoms-detail-body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 18px 0 8px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
}
.atoms-links { margin: 18px 0; }
.atoms-link-group {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  font-size: 13px;
  margin: 6px 0;
  padding: 8px 0;
  border-top: 1px dotted var(--rule);
}
.atoms-link-group:first-of-type { border-top: 1px solid var(--rule); }
.atoms-link-field {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 2px;
}
.atoms-link-group ul {
  margin: 0;
  padding-left: 18px;
  list-style: square;
  font-family: var(--font-mono);
  font-size: 12px;
}
.atoms-link-group li { margin: 2px 0; }

.atoms-raw {
  margin-top: 22px;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 0;
}
.atoms-raw summary {
  cursor: pointer;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.24em;
}
.atoms-raw[open] summary {
  border-bottom: 1px solid var(--rule);
  background: var(--bg-page);
}
.atoms-raw pre {
  margin: 0;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--bg-panel);
  overflow-x: auto;
  max-height: 460px;
  overflow-y: auto;
  letter-spacing: 0;
}

/* SystemReference state badge */
.atoms-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.atoms-state::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink-faint);
}
.atoms-state-current     { --tag-block: var(--livery-lime); }
.atoms-state-current::before { background: var(--livery-lime); }
.atoms-state-future      { --tag-block: var(--livery-blue); }
.atoms-state-future::before { background: var(--livery-blue); }
.atoms-state-sunsetting  { --tag-block: var(--livery-orange); }
.atoms-state-sunsetting::before { background: var(--livery-orange); }
.atoms-state-retired     { --tag-block: var(--ink-faint); }
.atoms-state-retired::before { background: var(--ink-faint); }

.atoms-cap-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 280px;
}
.atoms-tag-cap {
  font-size: 10px;
}

/* ─── Process index + detail (Cut 5) ───────────────────────────────── */

.atoms-process-ws {
  margin: 28px 0 24px;
}
.atoms-process-ws-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-primary);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.atoms-process-ws-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--livery-lime);
  flex-shrink: 0;
}

.atoms-process-level {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  margin: 6px 0 14px;
  align-items: start;
}
.atoms-process-level-lbl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 8px;
  text-align: right;
}

.atoms-process-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.atoms-process-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: baseline;
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--bg-panel);
  transition: background 100ms linear, box-shadow 100ms linear;
}
.atoms-process-row:hover {
  background: rgba(150, 193, 33, 0.03);
  box-shadow: inset 2px 0 0 var(--livery-lime);
}
.atoms-process-row:last-child {
  border-bottom: none;
}
.atoms-process-link {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  border: none;
  color: var(--ink-primary);
}
.atoms-process-link:hover { border-bottom: none; }
.atoms-process-id {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-primary);
  letter-spacing: 0;
}
.atoms-process-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-body);
  font-weight: 400;
}
.atoms-process-count {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  min-width: 40px;
}

.atoms-process-section {
  margin: 28px 0;
}
.atoms-process-section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.atoms-process-section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--livery-blue);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 720px) {
  .atoms-disp-pos { text-align: left; align-items: flex-start; }
  .atoms-disp-tier { flex-wrap: wrap; }
  .atoms-disp-tier .atoms-tier-opt { flex: 1 1 80px; }
  .atoms-disp-id { display: inline-block; margin: 8px 0 0; top: 0; }
  .atoms-process-row { grid-template-columns: 1fr auto; }
  .atoms-process-level { grid-template-columns: 1fr; }
  .atoms-process-level-lbl { text-align: left; padding-top: 0; }
}

/* ─── Plan 3.3 Cut 2: dense disp-row + .tip primitive ─────────── *
 * Wide viewports show all 5 disposition tile groups (Tier / Type / 6R /
 * Class / Phase) in a single horizontal row so consultants reviewing 200+
 * atoms can keep their eyes still and just type. Reflows to 3 / 1 column
 * on narrower screens. .tip replaces the slow native title= tooltip —
 * same data, ~120 ms reveal, dark callout, accessibility via aria-label
 * on the wrapping element.
 */

/* Dense row: 5 fieldsets across when wide, 3 medium, 1 narrow. */
.disp-row-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
  align-items: start;
}
.disp-row-grid > fieldset {
  margin: 0;
  min-width: 0;
}
.disp-row-grid > fieldset legend {
  margin-bottom: 8px;
}
/* Inside the row, stack each group's tiles vertically. Auto-size to content
 * — no max-height, no scroll bars. The 6R + Classification columns at 6
 * options each are still short enough not to dominate the page, and the
 * tooltip on the first option needs `overflow: visible` ancestors so its
 * absolutely-positioned callout isn't clipped (Defect #2a).
 *
 * Defect #12: the column itself carries no border — the per-option borders
 * already form a visual frame, and the bordered fieldset around them was
 * heavier than the legend it was meant to anchor. The fieldset legend is
 * styled as flat eyebrow text (see legend rule below). */
.disp-row-grid .atoms-disp-tier,
.disp-row-grid .atoms-disp-type,
.disp-row-grid .atoms-disp-sixr,
.disp-row-grid .atoms-disp-class,
.disp-row-grid .atoms-disp-phase {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  overflow: visible;
}
/* Defect #12 — when the disp-row-grid is in play (the dense 5-column
 * layout used on the disposition page), each column wrapper drops the
 * outer border so the column reads as a flat strip of options under a
 * label rather than a boxed-in card. The per-option `border-bottom`
 * already separates the rows visually. */
.disp-row-grid > fieldset.atoms-disp-tier,
.disp-row-grid > fieldset.atoms-disp-type,
.disp-row-grid > fieldset.atoms-disp-sixr,
.disp-row-grid > fieldset.atoms-disp-class,
.disp-row-grid > fieldset.atoms-disp-phase {
  border: none;
}
.disp-row-grid > fieldset.atoms-disp-tier .atoms-tier-opt:first-child,
.disp-row-grid > fieldset.atoms-disp-type .atoms-type-opt:first-child,
.disp-row-grid > fieldset.atoms-disp-sixr .atoms-sixr-opt:first-child,
.disp-row-grid > fieldset.atoms-disp-class .atoms-class-opt:first-child,
.disp-row-grid > fieldset.atoms-disp-phase .atoms-phase-opt:first-child {
  border-top: 1px solid var(--rule);
}
.disp-row-grid .atoms-tier-opt,
.disp-row-grid .atoms-type-opt,
.disp-row-grid .atoms-sixr-opt,
.disp-row-grid .atoms-class-opt,
.disp-row-grid .atoms-phase-opt {
  padding: 8px 10px;
  min-height: 38px;
  font-size: 11px;
  gap: 8px;
  border-right: none;
  border-bottom: 1px solid var(--rule-soft);
  flex: 0 0 auto;
}
.disp-row-grid .atoms-tier-opt:last-child,
.disp-row-grid .atoms-type-opt:last-child,
.disp-row-grid .atoms-sixr-opt:last-child,
.disp-row-grid .atoms-class-opt:last-child,
.disp-row-grid .atoms-phase-opt:last-child {
  border-bottom: none;
}
.disp-row-grid .atoms-tier-key,
.disp-row-grid .atoms-type-key,
.disp-row-grid .atoms-sixr-key,
.disp-row-grid .atoms-class-key,
.disp-row-grid .atoms-phase-key {
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.disp-row-grid .atoms-tier-label,
.disp-row-grid .atoms-type-label,
.disp-row-grid .atoms-sixr-label,
.disp-row-grid .atoms-class-label,
.disp-row-grid .atoms-phase-label {
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 1199px) {
  .disp-row-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .disp-row-grid {
    grid-template-columns: 1fr;
  }
}

/* .tip — CSS-only tooltip primitive. Replaces native title= so reveal is
 * fast (~120 ms vs ~1500 ms) and styling is consistent. Positioned BELOW
 * the source element so the floating callout never collides with the
 * section heading directly above the option. The aria-label on the
 * wrapping element keeps it accessible. */
.tip {
  position: relative;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 7px 11px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 260px;
  width: max-content;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out 80ms;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/* Caret/triangle pointing UP at the source element. Sits flush with the
 * source's bottom edge so the callout reads as anchored to the button. */
.tip::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1a1a1a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out 80ms;
  z-index: 50;
}
.tip:hover::after,
.tip:focus-within::after,
.tip:hover::before,
.tip:focus-within::before {
  opacity: 1;
}
/* Don't render an empty tooltip if data-tip is missing or blank. */
.tip:not([data-tip])::after,
.tip[data-tip=""]::after,
.tip:not([data-tip])::before,
.tip[data-tip=""]::before {
  display: none;
}

/* Per-fieldset tooltip anchors — keep the callout on-screen at viewport
 * edges. Tier (leftmost) anchors to its own start edge, Phase (rightmost)
 * anchors to its end edge. Middle fieldsets keep the centered default.
 * The caret stays centered on the source so it reads as anchored even
 * when the callout body slides off-axis. */
.tip[data-tip-anchor="start"]::after {
  left: 0;
  transform: none;
}
.tip[data-tip-anchor="end"]::after {
  left: auto;
  right: 0;
  transform: none;
}

/* ─── Cut S5: stale-badge ───────────────────────────────────────────
 * Stamped on detail pages when review_stale_since is set on an atom.
 * Amber background, dark text, 10px uppercase letterspace 0.18em to
 * mirror the .eyebrow type treatment. No border-radius — consistent
 * with the workbench's flat chassis-plate style. Composes with .tip
 * so hover shows the review_stale_because reason.
 */
.stale-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding: 4px 8px;
  background: #FFB347;
  color: #1a1a1a;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* ─── Cut E1: atom edit form ────────────────────────────────────────
 * Stack of labeled fields with consistent vertical rhythm. Re-uses the
 * .atoms-page card chassis around it.
 */
.atoms-edit-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 16px;
}
.atoms-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atoms-edit-lbl {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.atoms-edit-field input[type="text"],
.atoms-edit-field textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--bg-panel);
  color: var(--ink-primary);
  border: 1px solid var(--rule);
}
.atoms-edit-field textarea {
  resize: vertical;
  min-height: 60px;
}
.atoms-edit-locator {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}
.atoms-edit-fieldset {
  border: 1px solid var(--rule);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.atoms-edit-fieldset legend {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0 6px;
}
.atoms-edit-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* ─── Defect #9 + #11 — append-only block (Agent Z) ─────────────────────
 *
 * New selectors only. Do not modify earlier rules in this file. Adds:
 *   - .atoms-what-is-this    : structured explainer block on /scenarios + /risks
 *   - .atoms-scenario-members + .atoms-risk-evidence : list-page link previews
 *   - .atoms-empty-examples  : starter-example list inside empty states
 *   - .atoms-changelog       : per-record History section on detail.html
 */

/* What-is-this explainer — used by /scenarios and /risks above the lede.
   Uses the same .card surface the page already lives in, just a tighter
   inner block. */
.atoms-what-is-this {
  border: 1px solid var(--rule);
  background: var(--bg-panel-alt, var(--bg-panel));
  padding: 10px 14px;
  margin: 0 0 18px;
  max-width: 760px;
}
.atoms-what-is-this h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
.atoms-what-is-this ul {
  list-style: disc;
  padding-left: 20px;
  margin: 4px 0 2px;
}
.atoms-what-is-this li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-body);
  margin: 3px 0;
}

/* Empty-state example list — used on the /risks empty state to surface
   concrete starter risks the consultant can paste in. */
.atoms-empty-examples {
  margin: 6px 0 8px 18px;
  padding: 0;
  list-style: disc;
  color: var(--ink-body);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Scenario list — member preview cell. */
.atoms-scenario-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.atoms-scenario-members-count {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-primary);
}
.atoms-scenario-members-preview {
  color: var(--ink-body);
  font-size: 11.5px;
  word-break: break-word;
}
.atoms-scenario-members-preview a {
  color: inherit;
}
.atoms-scenario-members-preview code {
  font-family: var(--font-mono);
  font-size: 11px;
}
.atoms-scenario-member-broken {
  color: var(--accent-warn, #b45309);
  text-decoration: line-through dotted;
}

/* Risk list — evidence preview cell. Same shape as scenarios so the two
   pages read the same. */
.atoms-risk-evidence {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.atoms-risk-evidence-count {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink-primary);
}
.atoms-risk-evidence-preview {
  color: var(--ink-body);
  font-size: 11.5px;
  word-break: break-word;
}
.atoms-risk-evidence-preview a {
  color: inherit;
}
.atoms-risk-evidence-preview code {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ─── Defect #11 — per-record History (change log) ───────────────────── */

.atoms-changelog {
  margin: 22px 0 8px;
  border: 1px solid var(--rule);
  background: var(--bg-panel-alt, var(--bg-panel));
  padding: 0;
}
.atoms-changelog > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  user-select: none;
}
.atoms-changelog > summary::-webkit-details-marker { display: none; }
.atoms-changelog > summary::before {
  content: "▸ ";
  display: inline-block;
  width: 1em;
  color: var(--ink-mute);
}
.atoms-changelog[open] > summary::before { content: "▾ "; }
.atoms-changelog-count {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-body);
  margin-left: 4px;
}
.atoms-changelog-hint {
  margin: 0 14px 10px;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.atoms-changelog-empty {
  margin: 0 14px 14px;
  font-size: 12.5px;
  color: var(--ink-mute);
  font-style: italic;
}
.atoms-changelog ul {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}
.atoms-changelog li {
  display: grid;
  grid-template-columns: minmax(11rem, max-content) minmax(8rem, 14rem) 1fr;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  align-items: start;
}
.atoms-changelog li:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}
.atoms-changelog-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.atoms-changelog-actor {
  color: var(--ink-body);
}
.atoms-changelog-actor strong {
  color: var(--ink-primary);
  font-weight: 600;
}
.atoms-changelog-summary {
  color: var(--ink-body);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.atoms-changelog-op {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  text-transform: uppercase;
}
.atoms-changelog-op-create { color: #2f7d32; border-color: #2f7d3266; }
.atoms-changelog-op-update { color: #4a5fc1; border-color: #4a5fc166; }
.atoms-changelog-fields {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.atoms-changelog-fields code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-instrument, transparent);
  color: #FFF;
  padding: 0 4px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
.atoms-changelog-reason {
  font-style: italic;
  color: var(--ink-mute);
}
.atoms-changelog-raw {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.atoms-changelog-raw > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  user-select: none;
}
.atoms-changelog-raw > summary::-webkit-details-marker { display: none; }
.atoms-changelog-raw > summary::before { content: "▸ "; }
.atoms-changelog-raw[open] > summary::before { content: "▾ "; }
.atoms-changelog-raw pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--bg-instrument, #111);
  color: #E4E5E0;
  border: 1px solid var(--rule-strong);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Chat bubble: rendered markdown (AI responses only) ────────────
 * Applied via the .chat-bubble-md class added by _chat_widget.html when
 * turn.content_html is present. Resets the default <bubble> white-space
 * (which is pre-wrap for plain-text fallback) so block-level markdown
 * lays out normally. */
.chat-bubble-md {
  white-space: normal;
}
.chat-bubble-md > :first-child { margin-top: 0; }
.chat-bubble-md > :last-child  { margin-bottom: 0; }
.chat-bubble-md p {
  margin: 6px 0;
}
.chat-bubble-md h1,
.chat-bubble-md h2,
.chat-bubble-md h3,
.chat-bubble-md h4,
.chat-bubble-md h5,
.chat-bubble-md h6 {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 600;
  line-height: 1.25;
  margin: 10px 0 4px;
  color: var(--ink-primary, #0E0E0C);
}
.chat-bubble-md h1 { font-size: 15px; }
.chat-bubble-md h2 { font-size: 14px; }
.chat-bubble-md h3 { font-size: 13px; }
.chat-bubble-md h4,
.chat-bubble-md h5,
.chat-bubble-md h6 { font-size: 12px; }
.chat-bubble-md ul,
.chat-bubble-md ol {
  margin: 6px 0;
  padding-left: 20px;
}
.chat-bubble-md li { margin: 2px 0; }
.chat-bubble-md table {
  border-collapse: collapse;
  font-size: 0.92em;
  margin: 8px 0;
  width: 100%;
}
.chat-bubble-md th,
.chat-bubble-md td {
  border: 1px solid var(--rule, #E4E5E0);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.chat-bubble-md th {
  background: var(--bg-page, #F6F7F4);
  font-weight: 600;
}
.chat-bubble-md blockquote {
  border-left: 3px solid var(--livery-lime, #96C121);
  padding-left: 12px;
  margin: 8px 0;
  color: var(--ink-mute, #6A6D70);
}
.chat-bubble-md code {
  font-family: var(--font-mono, monospace);
  font-size: 0.92em;
  background: var(--bg-page, #F6F7F4);
  border: 1px solid var(--rule, #E4E5E0);
  padding: 1px 5px;
  border-radius: 0;
}
.chat-bubble-md pre {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  background: var(--bg-instrument, #0E0E0C);
  color: #F6F7F4;
  border: 1px solid var(--rule, #E4E5E0);
  padding: 10px 12px;
  margin: 8px 0;
  overflow-x: auto;
  white-space: pre;
}
.chat-bubble-md pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.chat-bubble-md a {
  color: var(--ink-primary, #0E0E0C);
  text-decoration: underline;
  text-decoration-color: var(--livery-lime, #96C121);
}
.chat-bubble-md hr {
  border: 0;
  border-top: 1px solid var(--rule, #E4E5E0);
  margin: 10px 0;
}
.chat-bubble-md strong { font-weight: 600; }
.chat-bubble-md em { font-style: italic; }

/* ─── Admin namespace + gear icon ─────────────────────────────────────── */

.gear-wrap {
  position: relative;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
.gear-icon {
  background: transparent;
  border: 1px solid var(--rule, #E4E5E0);
  color: inherit;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 0;
}
.gear-icon:hover,
.gear-icon:focus-visible {
  background: rgba(150, 193, 33, 0.12);
  border-color: var(--livery-lime, #96C121);
  outline: none;
}
.gear-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--bg-page, #F6F7F4);
  border: 1px solid var(--rule, #E4E5E0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  z-index: 50;
  padding: 4px 0;
}
.gear-wrap.open .gear-menu {
  display: block;
}
.gear-menu .menu-item {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-primary, #0E0E0C);
  text-decoration: none;
  white-space: nowrap;
}
.gear-menu .menu-item:hover,
.gear-menu .menu-item:focus-visible {
  background: rgba(150, 193, 33, 0.16);
  outline: none;
}

/* Role-gated menu items. The gear-wrap carries the user's role on a
 * data-role attribute. By default hide gated items; the matching role
 * combinator reveals them. */
.gear-menu .menu-item[data-admin-only] { display: none; }
.gear-menu .menu-item[data-consultant-or-admin] { display: none; }
.gear-wrap[data-role="admin"] .gear-menu .menu-item[data-admin-only] { display: block; }
.gear-wrap[data-role="admin"] .gear-menu .menu-item[data-consultant-or-admin] { display: block; }
.gear-wrap[data-role="consultant"] .gear-menu .menu-item[data-consultant-or-admin] { display: block; }
/* `data-view-or-higher` is shown to everyone with a real role — view, consultant, admin */

/* ─── Admin landing cards ─────────────────────────────────────────────── */

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 18px 0 28px;
}
.admin-card {
  display: block;
  background: var(--bg-page, #F6F7F4);
  border: 1px solid var(--rule, #E4E5E0);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}
.admin-card:hover {
  border-color: var(--livery-lime, #96C121);
  transform: translateY(-1px);
}
.admin-card-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.admin-card-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.admin-card-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--ink-mute, #6A6D70);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-card-bd {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-body, #1A1B17);
}
.admin-card-danger {
  border-color: rgba(204, 51, 51, 0.4);
}
.admin-card-danger:hover {
  border-color: #CC3333;
}
.admin-tag-danger {
  color: #CC3333;
}

/* ─── Admin role pills ────────────────────────────────────────────────── */

.admin-role-pill {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--rule, #E4E5E0);
  border-radius: 0;
  background: var(--bg-page, #F6F7F4);
}
.admin-role-view {
  color: var(--ink-mute, #6A6D70);
}
.admin-role-consultant {
  color: var(--livery-lime, #96C121);
  border-color: rgba(150, 193, 33, 0.5);
}
.admin-role-admin {
  color: #CC3333;
  border-color: rgba(204, 51, 51, 0.5);
}

/* ─── Admin users table ───────────────────────────────────────────────── */

.admin-users {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}
.admin-users th,
.admin-users td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule, #E4E5E0);
  vertical-align: top;
}
.admin-users th {
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-mute, #6A6D70);
  background: var(--bg-page, #F6F7F4);
}
.admin-inline-form {
  display: inline-flex;
  gap: 4px;
  margin-right: 6px;
  margin-bottom: 4px;
  vertical-align: middle;
}
.admin-confirm-form label {
  display: block;
  font-size: 12px;
  margin: 10px 0 6px;
}
.admin-confirm-form input[type="text"] {
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-system-op {
  cursor: default;
}
.admin-system-op:hover {
  transform: none;
}
.admin-danger-text {
  color: #CC3333;
}
.btn.danger {
  background: #CC3333;
  color: white;
  border: 1px solid #CC3333;
}
.btn.danger:hover {
  background: #A22929;
  border-color: #A22929;
}

/* ─── Admin sync surfaces (status, conflicts queue, detail) ──────────
 * Singer-Elegant theme (light panel, dark ink). The original CSS in
 * this block was lifted from a dark-theme prototype and used
 * `rgba(255,255,255,...)` for "muted" text + `var(--accent)` for
 * primaries — both broken here. QA-12 fix: route every muted label
 * through `--ink-mute`/`--ink-faint` and every accent through
 * `--livery-lime` so the labels are actually readable on the white
 * panel background.
 */

.atoms-sync-panel {
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  padding: 18px 22px;
  margin: 18px 0;
}
.atoms-sync-panel-h {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin: 0 0 12px;
}
.atoms-sync-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 22px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.atoms-sync-meta dt {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--ink-mute);
  align-self: center;
}
.atoms-sync-meta dd {
  margin: 0;
  color: var(--ink-body);
}
.atoms-sync-errors {
  margin-top: 14px;
}
.atoms-sync-errors summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-body);
}
.atoms-sync-errors ul {
  margin: 8px 0 0 18px;
  padding: 0;
  font-size: 12px;
}

.atoms-sync-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}
.atoms-sync-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.atoms-sync-hint {
  font-size: 12px;
  line-height: 1.5;
  max-width: 580px;
}
.atoms-sync-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  background: var(--bg-panel);
  color: var(--ink-body);
  border: 1px solid var(--rule-strong);
  padding: 8px 16px;
  cursor: pointer;
}
.atoms-sync-btn:hover {
  border-color: var(--livery-lime);
  color: var(--ink-primary);
}
.atoms-sync-btn.primary {
  background: var(--livery-lime);
  color: var(--ink-primary);
  border-color: var(--livery-lime);
}
.atoms-sync-btn.primary:hover {
  background: var(--livery-lime);
  filter: brightness(1.05);
}
.atoms-sync-links {
  display: flex;
  gap: 18px;
}
.atoms-sync-link {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.atoms-sync-link:hover {
  border-bottom-color: var(--livery-lime);
}
.atoms-sync-link.muted {
  color: var(--ink-mute);
  border-bottom-color: transparent;
}

.atoms-sync-kind-breakdown {
  margin: 18px 0;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
}
.atoms-sync-kind-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
}
.atoms-sync-kind-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.atoms-sync-kind-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.atoms-sync-kind-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-primary);
}

.atoms-sync-conflict-list {
  margin: 18px 0;
}
.atoms-sync-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
}
.atoms-sync-table thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}
.atoms-sync-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.atoms-sync-table tbody tr:last-child td {
  border-bottom: none;
}
.atoms-sync-kind-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-body);
}
.atoms-sync-field {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-primary);
}
.atoms-sync-ts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

.atoms-sync-pagination {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 10px 0;
  justify-content: center;
}

.atoms-sync-empty {
  padding: 24px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  text-align: center;
}

/* ── Detail / diff view ─────────────────────────────────────────────── */

.atoms-sync-conflict-detail {
  margin: 18px 0;
}
.atoms-sync-conflict-card {
  border: 1px solid var(--rule);
  background: var(--bg-panel);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.atoms-sync-field-h {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  margin: 0 0 4px;
}
.atoms-sync-reason {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
}
.atoms-sync-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.atoms-sync-diff-cell {
  border: 1px solid var(--rule);
  background: var(--rule-soft);
  padding: 10px 14px;
}
.atoms-sync-diff-h {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
.atoms-sync-diff-val {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-body);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.atoms-sync-resolve-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--rule);
  background: var(--bg-panel);
}
.atoms-sync-resolve-note {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.atoms-sync-raw {
  margin: 18px 0;
}
.atoms-sync-raw summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 6px 0;
}
.atoms-sync-raw[open] summary {
  color: var(--ink-primary);
}

/* Atom edit — inline error styling for the locator JSON parse failure.
 * Banner sits above the form; the locator textarea picks up a red border
 * and the inline error renders directly under it for clear scannability. */
.atoms-edit-error {
  margin-bottom: 0.75rem;
}
.atoms-edit-locator-error {
  border-color: #b00020;
  box-shadow: 0 0 0 1px #b00020;
}
.atoms-edit-inline-error {
  display: block;
  color: #b00020;
  margin-top: 4px;
  font-size: 12px;
}

/* ─── Vault ↔ JSON divergence banner ─────────────────────────────────
   Renders at the top of the atom detail page when an atom is listed
   in chicken-soup-perdue/vault-json-divergence.md. Color-coded by
   category. WCAG AA contrast on text vs background. */
.divergence-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  border-left: 4px solid #b8860b;
  background: #fff8e1;
  color: #4a3a08;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 2px;
}
.divergence-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #b8860b;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}
.divergence-banner-text {
  flex: 1;
}
.divergence-banner-link {
  color: #4a3a08;
  text-decoration: underline;
  margin-left: 6px;
}
.divergence-banner-link:hover { color: #1f1903; }

.divergence-banner-body-divergent {
  border-left-color: #b8860b;
  background: #fff8e1;
  color: #4a3a08;
}
.divergence-banner-field-set-mismatch {
  border-left-color: #1565c0;
  background: #e3f2fd;
  color: #0d3a6e;
}
.divergence-banner-field-set-mismatch .divergence-banner-icon { background: #1565c0; }
.divergence-banner-field-set-mismatch .divergence-banner-link { color: #0d3a6e; }

.divergence-banner-minor-divergent {
  border-left-color: #6a737d;
  background: #f3f4f6;
  color: #2a2f36;
}
.divergence-banner-minor-divergent .divergence-banner-icon { background: #6a737d; }
.divergence-banner-minor-divergent .divergence-banner-link { color: #2a2f36; }

.divergence-banner-vault-only {
  border-left-color: #b00020;
  background: #fdecea;
  color: #5d0011;
}
.divergence-banner-vault-only .divergence-banner-icon { background: #b00020; }
.divergence-banner-vault-only .divergence-banner-link { color: #5d0011; }

/* ── Process-anchor admin page ──────────────────────────────────────────
 * /admin/jobs/process-anchors renders 5 groups (consensus, dispute,
 * sonnet_only, opus_only, both_no_match). Each group gets a colored band
 * header for at-a-glance scanning and a tight table layout with explicit
 * widths so PROC IDs (long strings like PROC-FTP-DEMAND-PERFORMANCE-011)
 * wrap cleanly instead of squishing other columns. Confidence renders as
 * a colored pill, not inline parentheses.
 */
.anchor-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 24px 0 8px;
  padding: 8px 12px;
  border-left: 4px solid var(--rule-strong);
  background: var(--rule-soft);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.anchor-group-label { font-weight: 600; }
.anchor-group-count {
  display: inline-block;
  padding: 2px 9px;
  background: var(--ink-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  border-radius: 999px;
}
/* Per-classification colored band — left border + tinted bg. Badge
 * backgrounds darkened to pass WCAG AA on the inline white text
 * (consensus/dispute pills previously failed contrast). */
.anchor-group-header-consensus     { border-left-color: #3e7a18; background: #eaf6dc; }
.anchor-group-header-dispute       { border-left-color: #876c00; background: #fff5d5; }
.anchor-group-header-opus_only     { border-left-color: #985311; background: #fde6d3; }
.anchor-group-header-sonnet_only   { border-left-color: #8a2828; background: #f9dcd6; }
.anchor-group-header-both_no_match { border-left-color: var(--rule-strong); background: var(--rule-soft); }
.anchor-group-header-consensus     .anchor-group-count { background: #3e7a18; }
.anchor-group-header-dispute       .anchor-group-count { background: #876c00; }
.anchor-group-header-opus_only     .anchor-group-count { background: #985311; }
.anchor-group-header-sonnet_only   .anchor-group-count { background: #8a2828; }

.anchor-audit-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 12px;
}
.anchor-audit-table th,
.anchor-audit-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.anchor-audit-table th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  background: var(--rule-soft);
}
.anchor-audit-table td.numeric,
.anchor-audit-table th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.anchor-audit-table tbody tr:hover { background: rgba(150, 193, 33, 0.06); }

.anchor-id,
.anchor-pick {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  word-break: break-all;
}
.anchor-pick { background: #fff; }

.anchor-conf {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  color: #fff;
}
/* Confidence pill backgrounds tuned for AA contrast on inline white. */
.anchor-conf-high { background: #3e7a18; }   /* >= 0.8 */
.anchor-conf-med  { background: #876c00; }   /* 0.5 - 0.8 */
.anchor-conf-low  { background: #8a2828; }   /* < 0.5 */

.anchor-status {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 2px;
  background: var(--rule-soft);
  color: var(--ink-mute);
}
.anchor-status-human-confirmed { background: #dff0d0; color: #2e5e0d; }
.anchor-status-proposed-staged { background: #fff5d5; color: #6e5400; }
.anchor-status-no-tag          { background: var(--rule-soft); color: var(--ink-mute); }

/* Per-row subtle tint by classification — keeps the row visually anchored
 * to its section even when the table is long. */
.anchor-row-class-consensus     td:first-child { box-shadow: inset 3px 0 0 #4f9b1f; }
.anchor-row-class-dispute       td:first-child { box-shadow: inset 3px 0 0 #c79f00; }
.anchor-row-class-opus_only     td:first-child { box-shadow: inset 3px 0 0 #c46b1d; }
.anchor-row-class-sonnet_only   td:first-child { box-shadow: inset 3px 0 0 #b04545; }
.anchor-row-class-both_no_match td:first-child { box-shadow: inset 3px 0 0 var(--rule-strong); }

/* Action buttons in dispute rows stack horizontally with breathing room. */
.anchor-promote-form { display: inline-block; margin: 0; }
.anchor-promote-form.inline { margin-right: 4px; }
.anchor-promote-form .btn.small,
.anchor-promote-form button {
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* The no-match table is intentionally narrower — only 4 columns. */
.anchor-audit-table--nomatch td:last-child { font-size: 11px; }