/* Component styles — pills, cards, confidence indicators, trace cards.
   Class-based, paired with helper functions in js/components.js. */

/* ============================================================================
   Pills — twin name pills (amber), data entity pills (blue).
   ============================================================================ */

.twin-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-amber-100);
  color: var(--color-amber-900);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  font-weight: var(--font-weight-medium);
  font-size: inherit;
  line-height: 1.4;
}

.twin-pill .sparkle-icon {
  width: 13px;
  height: 13px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.data-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-blue-100);
  color: var(--color-blue-900);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius);
  font-size: inherit;
  line-height: 1.4;
}

.data-pill .info-icon {
  width: 11px;
  height: 11px;
  color: var(--color-blue-400);
  flex-shrink: 0;
}

/* ============================================================================
   Status pills — Meeting / At risk / Not meeting.
   ============================================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
}

.status-pill--meeting {
  background: var(--color-green-100);
  color: var(--color-green-800);
}

.status-pill--at-risk {
  background: var(--color-yellow-100);
  color: var(--color-yellow-800);
}

.status-pill--not-meeting {
  background: var(--color-orange-100);
  color: var(--color-orange-800);
}

.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.status-pill--meeting     .status-pill__dot { background: var(--color-green-600); }
.status-pill--at-risk     .status-pill__dot { background: var(--color-yellow-600); }
.status-pill--not-meeting .status-pill__dot { background: var(--color-orange-600); }

/* Verifying state — used while the twin is reasoning against a newly-added
   goal (Pillar 3 Beat 1 → Beat 2). Replaces the actual status pill in the
   same slot until the orchestrator (or the goals.js auto-settle for non-
   orchestrator callers) flips the card out of pending. Amber tint + pulsing
   dot reads as "twin is working" without committing to a status verdict. */
.status-pill--verifying {
  background: var(--color-amber-50);
  color: var(--color-amber-900);
  border-color: var(--color-amber-200);
}

.status-pill--verifying .status-pill__dot {
  background: var(--color-amber-500);
  animation: pulse-investigating var(--pulse-investigating) ease-in-out infinite;
}

/* ============================================================================
   Confidence indicators — three formats. Never mix.
   ============================================================================ */

/* Format A — Amber progress bar (headline confidence). */
.confidence-amber {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.confidence-amber__track {
  width: 130px;
  height: 8px;
  background: var(--color-amber-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.confidence-amber__fill {
  height: 100%;
  background: var(--color-amber-600);
  border-radius: var(--radius-pill);
  transition: width 600ms ease;
}

.confidence-amber__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

/* Format B — Green pill (decision-point confidence). */
.confidence-pill {
  display: inline-flex;
  align-items: center;
  background: var(--color-green-100);
  color: var(--color-green-800);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
}

/* Format C — Segmented bar (Strong / Defensible / Weak). */
.confidence-segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.confidence-segmented__segments {
  display: inline-flex;
  gap: 2px;
}

.confidence-segmented__segment {
  width: 20px;
  height: 7px;
  background: var(--color-amber-100);
  border-radius: var(--radius-sm);
}

.confidence-segmented__segment--filled {
  background: var(--color-amber-600);
}

.confidence-segmented__label {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

/* ============================================================================
   Hypothesis card — surfaced from twin watching on team landings.
   ============================================================================ */

.hypothesis-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-standard) ease,
              background var(--transition-standard) ease;
}

.hypothesis-card:hover {
  border-color: var(--color-blue-200);
  background: var(--color-blue-50);
}

.hypothesis-card--elevated {
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
  border-left: var(--accent-stripe) solid var(--color-amber-500);
  padding-left: calc(1.5rem - var(--accent-stripe) + 0.25rem);
}

.hypothesis-card--elevated:hover {
  background: var(--color-amber-100);
  border-color: var(--color-amber-200);
}

.hypothesis-card__attribution {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-meta);
  color: var(--color-gray-600);
}

.hypothesis-card__headline {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.4;
  margin: 0;
}

.hypothesis-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hypothesis-card__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.6;
}

.hypothesis-card__bullet-dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-gray-400);
  flex-shrink: 0;
  margin-top: 0.55rem;
}

.hypothesis-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.hypothesis-card__footer .cta-button {
  text-decoration: none;
}

.capability-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-blue-600);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--transition-standard) ease;
}

.cta-button:hover {
  background: var(--color-blue-700);
}

.cta-button .sparkle-icon {
  width: 14px;
  height: 14px;
}

/* ============================================================================
   Trace card — first-class chat transcript turn.
   ============================================================================ */

.trace-card {
  display: flex;
  gap: 0.75rem;
}

.trace-card__spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.trace-card__avatar {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trace-card__avatar .sparkle-icon {
  width: 14px;
  height: 14px;
  color: var(--color-amber-500);
}

.trace-card__line {
  width: 1px;
  background: var(--color-gray-200);
  flex: 1;
  margin-top: 0.5rem;
  min-height: 1rem;
}

.trace-card__body {
  flex: 1;
  background: var(--color-blue-50);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}

.trace-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.trace-card__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  font-size: var(--text-small);
}

.trace-card__sep {
  color: var(--color-gray-400);
}

.trace-card__timestamp {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
}

.trace-card__activity-icon {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--color-blue-400);
}

.trace-card__action {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-blue-600);
  margin-bottom: 0.5rem;
}

.trace-card__narrative {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.6;
}

.trace-card__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--text-meta);
  color: var(--color-gray-500);
}

.trace-card__metadata strong {
  color: var(--color-blue-700);
  font-weight: var(--font-weight-medium);
}

/* ============================================================================
   HITL panel — twin pauses Beat 2 to ask the analyst to confirm a cluster
   label. Twin-output container vocabulary (amber-50 + amber-500 left
   accent), card-shaped, sits inline in the beats stack.
   ============================================================================ */

.hitl-panel {
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-200);
  border-left: 4px solid var(--color-amber-500);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.hitl-panel__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-amber-900);
}

.hitl-panel__header .sparkle-icon {
  width: 16px;
  height: 16px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.hitl-panel__asking {
  font-weight: var(--font-weight-semibold);
}

.hitl-panel__sep {
  color: var(--color-amber-700);
}

.hitl-panel__prompt {
  font-size: var(--text-body);
  color: var(--color-gray-800);
  line-height: 1.65;
  margin: 0;
}

.hitl-panel__samples {
  background: var(--color-white);
  border: 1px solid var(--color-amber-200);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.hitl-panel__samples-label {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
}

.hitl-panel__samples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hitl-sample {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  font-size: var(--text-small);
}

.hitl-sample__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--color-gray-700);
  font-size: var(--text-meta);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.hitl-sample__desc {
  flex: 1;
  color: var(--color-gray-700);
  line-height: 1.55;
}

.hitl-sample__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-meta);
  color: var(--color-blue-600);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.hitl-sample__link:hover {
  color: var(--color-blue-700);
}

.hitl-sample__link i {
  width: 12px;
  height: 12px;
}

.hitl-panel__responses {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.hitl-response {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.25s ease, background-color 0.15s ease, border-color 0.15s ease;
  text-align: left;
  line-height: 1.4;
  font-family: inherit;
}

.hitl-response--primary {
  background: var(--color-blue-600);
  color: var(--color-white);
}

.hitl-response--primary:hover {
  background: var(--color-blue-700);
}

.hitl-response--secondary {
  background: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.hitl-response--secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.hitl-panel__responses--disabled .hitl-response {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.hitl-panel__resolved {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-green-700);
  background: var(--color-green-50);
  border: 1px solid var(--color-green-100);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  animation: hitl-resolved-fade 0.4s ease both;
}

.hitl-panel__resolved-icon {
  width: 16px;
  height: 16px;
  color: var(--color-green-600);
  flex-shrink: 0;
}

@keyframes hitl-resolved-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   Summary tiles — five on the org landing.
   ============================================================================ */

.summary-tile {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity var(--transition-standard) ease,
              filter var(--transition-standard) ease;
}

.summary-tile__label {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
}

.summary-tile__value {
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.1;
}

.summary-tile--greyed {
  opacity: 0.4;
  filter: grayscale(0.8);
}

/* ============================================================================
   Trend cards — value left, sparkline right.
   ============================================================================ */

.trend-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 120px;
}

.trend-card__left {
  flex: 0 0 auto;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.trend-card__title {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.trend-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.trend-card__value {
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.1;
}

.trend-card__unit {
  font-size: var(--text-small);
  color: var(--color-gray-500);
}

.trend-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  margin-top: 0.125rem;
}

.trend-card__delta--positive { color: var(--color-green-600); }
.trend-card__delta--negative { color: var(--color-red-600); }

.trend-card__chart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 64px;
}

.sparkline {
  width: 100%;
  max-width: 240px;
  height: 64px;
  display: block;
}

/* ============================================================================
   Discoveries panel — compact list of twin-surfaced findings on the org landing.
   Goal: at least five findings visible at a glance.
   ============================================================================ */

.discovery-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.discovery-panel__header {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.discovery-panel__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.discovery-panel__hint {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  margin: 0;
}

.discovery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Spinner row — mounted at the top of the discovery-list during Pillar 3
   Beat 2 while twins reason against the new goal. Sits above the existing
   muted observational row (which stays visible as prior context). Removed
   when the elevated finding row materializes in its place. */
.discovery-row--spinner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-100);
  animation: spinner-row-fade 280ms ease-out both;
  transition: opacity 220ms ease;
}

.discovery-row--spinner.is-leaving {
  opacity: 0;
}

.discovery-row--spinner svg {
  width: 16px;
  height: 16px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.discovery-row--spinner .twin-pill {
  flex-shrink: 0;
}

.discovery-spinner__label {
  flex: 1;
  min-width: 0;
}

@keyframes spinner-row-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Newly-surfaced row — applied transiently when an elevated row is prepended
   into the discovery list (Pillar 3 Beat 2). Animation removes itself; the
   class can be removed any time after the animation finishes. */
.discovery-row.is-new {
  animation: discovery-row-enter 360ms ease-out both;
}

@keyframes discovery-row-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.discovery-row {
  border-left: 3px solid transparent;
  transition: background var(--transition-standard) ease;
}

.discovery-row + .discovery-row {
  border-top: 1px solid var(--color-gray-100);
}

.discovery-row__link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  color: inherit;
}

.discovery-row:hover {
  background: var(--color-blue-50);
}

.discovery-row__rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.discovery-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Goal eyebrow — names the team-level goal this finding hangs under. Sits
   on top of the row so the audience reads "this goal → this recommendation
   → from this twin / workflow" in narrative order. The goal renders as a
   blue pill with a target icon; the empty/no-goal case is an italic
   gray cue (the visual reason the muted CS row reads quieter). */
.discovery-row__goal-row {
  display: flex;
  align-items: center;
  min-height: 22px;
}

.discovery-row__goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-blue-100);
  color: var(--color-blue-800);
  padding: 0.2rem 0.55rem 0.2rem 0.45rem;
  border-radius: 9999px;
  font-size: var(--text-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.discovery-row__goal-pill-icon {
  width: 12px;
  height: 12px;
  color: var(--color-blue-600);
  flex-shrink: 0;
}

.discovery-row__goal-empty {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  font-style: italic;
}

.discovery-row__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  flex-wrap: wrap;
}

.discovery-row__team {
  color: var(--color-gray-600);
}

.discovery-row__headline {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  line-height: 1.45;
}

.discovery-row__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-gray-400);
  transition: color var(--transition-standard) ease;
}

.discovery-row:hover .discovery-row__arrow {
  color: var(--color-blue-600);
}

/* Variants. */
.discovery-row.is-elevated {
  background: var(--color-amber-50);
  border-left-color: var(--color-amber-500);
}

.discovery-row.is-elevated:hover {
  background: var(--color-amber-100);
}

.discovery-row.is-muted {
  background: var(--color-gray-50);
}

.discovery-row.is-muted .discovery-row__headline {
  color: var(--color-gray-600);
  font-weight: var(--font-weight-normal);
}

/* ============================================================================
   Tabbed team panel — replaces the standalone discovery panel on team
   landings. Holds two tabs (Surfaced interventions + Twin activity); tab
   labels do the heading work so no separate H2 / hint inside.
   Per goal_centric_team_page_change.md §2.A.
   ============================================================================ */

.tabbed-team-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tabbed-team-panel__header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Header-extra hugs the tabs on the left — the parent's flex gap
   handles spacing. Filter pill reads as a chip immediately attached to
   the tabs, not as a trailing element. */
.tabbed-team-panel__header-extra {
  display: flex;
  align-items: center;
}

.tabbed-team-panel__pane {
  display: block;
}

.tabbed-team-panel__pane[hidden] {
  display: none;
}

/* Empty state when a goal filter yields no interventions. */
.discovery-list__empty {
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-gray-500);
}

/* ============================================================================
   Goal filter pill — sits in the tabbed panel header opposite the tabs.
   "All goals" (no filter) reads italic gray; an active filter reads as a
   blue pill with target icon + goal text + × clear button.
   Per goal_centric_team_page_change.md §2.D.
   ============================================================================ */

.goal-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-small);
  border-radius: 9999px;
  white-space: nowrap;
}

.goal-filter-pill--all {
  color: var(--color-gray-500);
  font-style: italic;
}

.goal-filter-pill--active {
  background: var(--color-blue-100);
  color: var(--color-blue-800);
  font-weight: var(--font-weight-medium);
}

.goal-filter-pill__icon {
  width: 13px;
  height: 13px;
}

.goal-filter-pill__clear {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-blue-700);
  padding: 0 0.125rem;
  margin-left: 0.125rem;
}

.goal-filter-pill__clear:hover {
  color: var(--color-blue-900);
}

/* The interventions tab pane wraps a .discovery-list — already has its own
   row layout. The activity tab pane wraps an .activity-feed — defined below. */

/* ============================================================================
   Twin activity feed — chronological per-team event list.
   Each row carries: 8px type-accent dot · twin pill · uppercase type label ·
   description · optional goal pill · relative timestamp.
   Per goal_centric_team_page_change.md §2.C + Appendix A.
   ============================================================================ */

.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Two-row layout: type-dot on the left at top of the row, main column
   to its right with two stacked rows (metadata + description). */
.activity-feed__event {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-100);
  transition: background var(--transition-standard) ease;
}

.activity-feed__event:last-child {
  border-bottom: none;
}

.activity-feed__event:hover {
  background: var(--color-gray-50);
}

.activity-feed__main {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1 1 auto;
  min-width: 0;
}

.activity-feed__metadata {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

/* Rows that cross-link to a hypothesis row (intervention-surfaced events
   carrying interventionId). Click switches to the interventions tab,
   scrolls + pulses the matching row. */
.activity-feed__event[data-intervention-id]:not([data-intervention-id=""]) {
  cursor: pointer;
}

/* Amber-glow pulse used by jumpToInterventionRow on the targeted
   discovery row. ~1.5s ease-in-out, mirrors the bubble-chart finding-
   border pulse (Phase 5 polish #34A) so the visual language stays
   consistent for "this is what just happened". */
.discovery-row.is-pulsing-amber {
  animation: discovery-row-amber-pulse 1.5s ease-in-out;
}

@keyframes discovery-row-amber-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
  35%, 55% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.32);
  }
}

.activity-feed__type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gray-400);
  flex-shrink: 0;
  /* Aligns to the metadata row's vertical center — looks anchored
     to the row's "subject line" rather than floating between rows. */
  margin-top: 0.5rem;
}

.activity-feed__type-dot--change-detected {
  background: var(--color-blue-500);
}

.activity-feed__type-dot--intervention-surfaced {
  background: var(--color-amber-500);
}

.activity-feed__type-label {
  font-size: 0.6875rem;          /* ~text-xs */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
}

.activity-feed__description {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  line-height: 1.45;
}

.activity-feed__goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--color-blue-100);
  color: var(--color-blue-800);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 220px;
  overflow: hidden;
}

.activity-feed__goal-pill-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Truncate long goal text with an ellipsis. The pill caps at max-width;
   text overflow on the inner span produces the …. Hover the row to see
   the full text via the title attribute on the pill. */
.activity-feed__goal-pill > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.activity-feed__timestamp {
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  white-space: nowrap;
  flex-shrink: 0;
}

.activity-feed__empty {
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-gray-500);
}

/* ============================================================================
   Reason with Scout — slide-in surface.
   Right-edge slide-in with backdrop. Replaces the bottom-panel scout card on
   org / team landings. Currently shows the Empty state only; subsequent
   phases append Parsing / Confirming / Routing / Summary state bodies.
   ============================================================================ */

.scout-slide-in {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.scout-slide-in__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: auto;
}

.scout-slide-in.is-open .scout-slide-in__backdrop {
  opacity: 1;
}

.scout-slide-in__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  background: var(--color-white);
  border-left: 1px solid var(--color-gray-200);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
}

.scout-slide-in.is-open .scout-slide-in__panel {
  transform: translateX(0);
}

.scout-slide-in__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

.scout-slide-in__sparkle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-amber-50);
  color: var(--color-amber-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scout-slide-in__sparkle i {
  width: 16px;
  height: 16px;
}

.scout-slide-in__title {
  flex: 1;
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.scout-slide-in__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-gray-500);
  transition: background var(--transition-standard) ease, color var(--transition-standard) ease;
}

.scout-slide-in__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.scout-slide-in__close i {
  width: 18px;
  height: 18px;
}

.scout-slide-in__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

/* Empty state ------------------------------------------------------------- */

.scout-empty {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scout-empty__prompt {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.4;
  margin: 0;
}

.scout-empty__subtitle {
  font-size: var(--text-small);
  color: var(--color-gray-500);
  margin: -0.5rem 0 0.25rem 0;
}

.scout-empty__nudges {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.scout-empty-nudge {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  text-align: left;
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-100);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: background var(--transition-standard) ease, border-color var(--transition-standard) ease;
}

.scout-empty-nudge:hover {
  background: var(--color-blue-100);
  border-color: var(--color-blue-200);
}

.scout-empty-nudge__question {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  line-height: 1.45;
}

.scout-empty-nudge__badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  color: var(--color-blue-700);
  border: 1px solid var(--color-blue-200);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
}

.scout-empty__input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  background: var(--color-white);
  transition: border-color var(--transition-standard) ease;
  margin-top: 0.5rem;
}

.scout-empty__input-row:focus-within {
  border-color: var(--color-blue-500);
}

.scout-empty__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--text-body);
  color: var(--color-gray-900);
  background: transparent;
}

.scout-empty__submit {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-blue-600);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-standard) ease;
}

.scout-empty__submit:hover {
  background: var(--color-blue-700);
}

.scout-empty__submit i {
  width: 16px;
  height: 16px;
}

/* Question-echo block — shared across Parsing / Confirming / Routing /
   Summary. The user's question is mirrored back at the top of each post-Empty
   state so the slide-in feels like a continuous conversation. */

.scout-question-echo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  font-style: italic;
  line-height: 1.5;
}

.scout-question-echo__icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.scout-question-echo__text {
  flex: 1;
}

/* Parsing state ----------------------------------------------------------- */

.scout-parsing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scout-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.scout-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.scout-bullet.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.scout-bullet__sparkle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.scout-bullet__sparkle i {
  width: 14px;
  height: 14px;
}

.scout-bullet__text {
  flex: 1;
  line-height: 1.5;
}

/* Confirming state -------------------------------------------------------- */

.scout-confirming {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scout-confirming__caption {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0;
}

.scout-confirming__slots {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.scout-confirming__slot {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 0.625rem;
}

.scout-confirming__slot-label {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
}

.scout-confirming__slot-value {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  display: inline-flex;
  align-items: center;
}

.scout-confirming__slot-value--empty {
  color: var(--color-gray-400);
}

.scout-confirming__prose {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  margin: 0.25rem 0 0;
}

.scout-confirming__buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.scout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-standard) ease, border-color var(--transition-standard) ease;
}

.scout-btn--primary {
  background: var(--color-blue-600);
  color: var(--color-white);
}

.scout-btn--primary:hover {
  background: var(--color-blue-700);
}

.scout-btn--secondary {
  background: var(--color-white);
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}

.scout-btn--secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

/* Collapsed parse summary — used in Routing + Summary as a continuity
   element ("Order Management — effort reduction per order"). */

.scout-parse-summary {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  margin: 0;
  line-height: 1.4;
}

.scout-parse-summary__sep {
  margin: 0 0.375rem;
  color: var(--color-gray-400);
}

/* Routing state ----------------------------------------------------------- */

.scout-routing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scout-routing-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-200);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}

.scout-routing-card__sparkle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  color: var(--color-amber-600);
}

.scout-routing-card__sparkle i {
  width: 16px;
  height: 16px;
}

.scout-routing-card__lines {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.scout-routing-card__line {
  font-size: var(--text-small);
  color: var(--color-gray-800);
  line-height: 1.5;
  margin: 0;
}

/* Summary state ----------------------------------------------------------- */

.scout-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scout-summary-card {
  position: relative;
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-200);
  border-left: var(--accent-stripe) solid var(--color-amber-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.scout-summary-card__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.scout-summary-card__attribution {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  flex-wrap: wrap;
}

.scout-summary-card__capability {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  color: var(--color-amber-800);
  background: var(--color-white);
  border: 1px solid var(--color-amber-200);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
}

.scout-summary-card__confidence {
  flex-shrink: 0;
}

/* Fresh-run preview pill (V2). Amber framing reads as "twin-voice initial
   read" rather than the green "Strong" decision-point pill V1 uses for a
   completed analysis. */
.scout-summary-card__confidence--initial-read {
  display: inline-flex;
  align-items: center;
  background: var(--color-amber-100);
  color: var(--color-amber-800);
  border: 1px solid var(--color-amber-200);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
}

.scout-summary-card__prose {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  line-height: 1.6;
}

.scout-summary-card__prose strong {
  font-weight: var(--font-weight-semibold);
}

.scout-summary__action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.scout-summary__primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}

.scout-summary__primary i {
  width: 14px;
  height: 14px;
}

.scout-summary__secondary {
  background: transparent;
  border: none;
  color: var(--color-blue-600);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.scout-summary__secondary:hover {
  color: var(--color-blue-700);
}

/* Fallback state --------------------------------------------------------- */

.scout-fallback {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scout-fallback__card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scout-fallback__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.4;
}

.scout-fallback__body {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.55;
  margin: 0;
}

.scout-fallback__dev-marker {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  font-style: italic;
  margin: 0.375rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-gray-300);
}

.scout-fallback__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ============================================================================
   Reason with Scout — V2 fresh-analysis cards (Analyses tab destination
   when contentRef === 'v2-fresh-analysis'). Lighter than Pillar 1/2/3
   spec artifacts: 3 cards, no formal artifact wrapping, amber-themed
   confidence pills to extend the slide-in's "Initial read" identity.
   ============================================================================ */

.v2-fresh {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.v2-fresh__header {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
}

.v2-fresh__lead-label {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
}

.v2-fresh__cards {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.v2-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.v2-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.v2-card__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.4;
}

.v2-card__confidence {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.v2-card__confidence--strong {
  background: var(--color-amber-100);
  color: var(--color-amber-800);
  border: 1px solid var(--color-amber-200);
}

.v2-card__confidence--moderate {
  background: var(--color-amber-50);
  color: var(--color-amber-800);
  border: 1px solid var(--color-amber-200);
}

.v2-card__confidence--weak {
  background: var(--color-gray-50);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
}

.v2-card__body {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  line-height: 1.6;
}

.v2-card__body em {
  font-style: italic;
}

.v2-card__body strong {
  font-weight: var(--font-weight-semibold);
}

.v2-card__evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 0.375rem;
}

/* Non-interactive "encode this" placeholder. Grayed-out + cursor:not-allowed
   signals the future-flow without offering a click destination we haven't
   built. */
.v2-fresh__placeholder {
  background: var(--color-gray-50);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0.7;
  cursor: not-allowed;
}

.v2-fresh__placeholder-title {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin: 0;
}

.v2-fresh__placeholder-note {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  font-style: italic;
  margin: 0;
}

/* ============================================================================
   Reason with Scout — top-right header trigger button.
   Lives in the page-level header (org-header / team header / workflow detail
   header). Sparkle (amber, twin identity) + label + neutral chrome.
   ============================================================================ */

.scout-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background var(--transition-standard) ease, border-color var(--transition-standard) ease;
}

.scout-button:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.scout-button__sparkle {
  color: var(--color-amber-500);
  display: inline-flex;
}

.scout-button__sparkle i {
  width: 14px;
  height: 14px;
}

/* ============================================================================
   Bubble chart — team work status.
   Card-style container with title + legend at top, tabs at top-right, and a
   clustered SVG bubble layout below.
   ============================================================================ */

.bubble-chart {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bubble-chart__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.bubble-chart__title-block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bubble-chart__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.bubble-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: var(--text-small);
  color: var(--color-gray-700);
}

.bubble-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bubble-chart__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
}

.bubble-chart__legend-swatch--size {
  border: 2px solid var(--color-blue-500);
  background: transparent;
}

.bubble-chart__legend-swatch--finding {
  border: 2px solid var(--color-orange-600);
  background: transparent;
}

.bubble-chart__svg-wrap {
  width: 100%;
  overflow: visible;
}

.bubble-chart__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Bubbles — fill is a 5-step blue gradation driven by the active metric:
   darker blue means a higher metric value. Findings (twin insights) override
   only the stroke and add a pulsing animation to draw attention.            */
.bubble-chart__bubble {
  fill-opacity: 0.55;
  stroke-width: 1.75;
  transition: r 400ms ease, fill-opacity 200ms ease, stroke-width 200ms ease;
  cursor: pointer;
}

.bubble-chart__bubble--level-1 { fill: var(--color-blue-200); stroke: var(--color-blue-300); }
.bubble-chart__bubble--level-2 { fill: var(--color-blue-300); stroke: var(--color-blue-400); }
.bubble-chart__bubble--level-3 { fill: var(--color-blue-400); stroke: var(--color-blue-500); }
.bubble-chart__bubble--level-4 { fill: var(--color-blue-500); stroke: var(--color-blue-600); }
.bubble-chart__bubble--level-5 { fill: var(--color-blue-600); stroke: var(--color-blue-700); }

.bubble-chart__group:hover .bubble-chart__bubble {
  fill-opacity: 0.78;
}

/* Twin-insight findings: orange pulsating border. Fill stays on the level
   gradation above so the metric encoding remains legible. */
.bubble-chart__bubble--finding {
  stroke: var(--color-orange-600);
  stroke-width: 1.75;
  animation: bubble-finding-pulse 1.6s ease-in-out infinite;
}

@keyframes bubble-finding-pulse {
  0%, 100% {
    stroke-width: 1.75;
    stroke-opacity: 1;
  }
  50% {
    stroke-width: 2.75;
    stroke-opacity: 0.8;
  }
}

/* Color legend below the SVG — keys the blue gradation to the active metric. */
.bubble-chart__color-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  padding: 0.25rem 0 0.25rem;
}

.bubble-chart__color-legend-metric {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-800);
  margin-right: 0.5rem;
}

.bubble-chart__color-legend-edge {
  color: var(--color-gray-500);
  font-size: var(--text-meta);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bubble-chart__color-legend-gradient {
  display: inline-flex;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

.bubble-chart__color-legend-stop {
  display: inline-block;
  width: 28px;
  height: 12px;
}
.bubble-chart__color-legend-stop--1 { background: var(--color-blue-200); }
.bubble-chart__color-legend-stop--2 { background: var(--color-blue-300); }
.bubble-chart__color-legend-stop--3 { background: var(--color-blue-400); }
.bubble-chart__color-legend-stop--4 { background: var(--color-blue-500); }
.bubble-chart__color-legend-stop--5 { background: var(--color-blue-600); }

/* Multi-line bubble label — name (bold), metric, goals summary. */
.bubble-chart__label {
  pointer-events: none;
  text-anchor: middle;
}

.bubble-chart__label-name {
  font-size: 14px;
  font-weight: 600;
  fill: var(--color-gray-900);
}

.bubble-chart__label-metric {
  font-size: 12px;
  fill: var(--color-gray-700);
}

.bubble-chart__label-goals {
  font-size: 11px;
  fill: var(--color-gray-500);
}

.bubble-chart__label-goals-at-risk {
  fill: var(--color-amber-600);
  font-weight: var(--font-weight-medium);
}

/* ============================================================================
   Tab group — segmented control. Used for both work-scope toggles
   ("All work" / "Human work") and chart tab switchers (Agent adoption %, etc.).
   Selected: white bg, dark blue text. Unselected: gray bg, black text.
   ============================================================================ */

.tab-group {
  display: inline-flex;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.tab-group__button {
  background: transparent;
  border: none;
  padding: 0.375rem 0.875rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background var(--transition-standard) ease,
              color var(--transition-standard) ease,
              box-shadow var(--transition-standard) ease;
  white-space: nowrap;
}

.tab-group__button:hover {
  background: rgba(255, 255, 255, 0.55);
}

.tab-group__button.is-active {
  background: var(--color-white);
  color: var(--color-blue-700);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.tab-group__button.is-active:hover {
  background: var(--color-white);
}

/* ============================================================================
   Goals — primary surface on team landings. Cards in a 3-column grid, with a
   peer "+ Add goal" card at the end. Cards carry status (color-tinted body +
   accent stripe), goal text, operational description, and the twin's current
   read with attribution.

   Replaces the spec'd pill+overlay pattern (pills didn't carry the strategic
   weight goals need). See Changes_to_demo_flow.md #9.
   ============================================================================ */

.goals-row {
  display: block;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .goals-grid {
    grid-template-columns: 1fr;
  }
}

/* Goal card. Click selects + filters the team page below. */
.goal-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem 1.125rem 1.375rem;
  border: 1px solid var(--color-gray-200);
  border-left: var(--accent-stripe) solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--transition-standard) ease,
              border-color var(--transition-standard) ease;
}

.goal-card:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* Selected: stronger border (in status color, set per-status below) +
   increased shadow. The accent stripe stays at the existing 4px width;
   the inward border tightens visually around the card. */
.goal-card.is-selected {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

.goal-card--meeting.is-selected     { border-color: var(--color-green-600); }
.goal-card--at-risk.is-selected     { border-color: var(--color-yellow-600); }
.goal-card--not-meeting.is-selected { border-color: var(--color-orange-600); }

/* When ANY goal is selected (the goals row carries .has-selection),
   non-selected peers fade so attention stays on the active goal. The
   selected card itself bumps slightly to compensate (stays at opacity 1).
   The "+ Add goal" affordance stays at full opacity — leader can still
   add a goal mid-flow without the affordance reading as inactive. */
.goals-row.has-selection .goal-card:not(.is-selected) {
  opacity: 0.45;
  transition: opacity var(--transition-standard) ease;
}

.goals-row.has-selection .goal-card.is-selected {
  opacity: 1;
}

/* Title + status pill share a flex row (title left, pill right). Long
   titles wrap and the pill aligns to the start of the title's first line.
   Per goal_centric_team_page_change.md §2.D — goal status amplified. */
.goal-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.goal-card__top .goal-card__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Amplified status pill on goal cards: text-sm semibold + 8px dot.
   Scoped to .goal-card so other surfaces using .status-pill (trace cards,
   surfacing rows, etc.) keep their existing text-meta size. */
.goal-card .status-pill {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.goal-card .status-pill__dot {
  width: 8px;
  height: 8px;
}

.goal-card__text {
  font-size: 1.125rem;        /* 18px */
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.35;
  margin: 0;
}

.goal-card__description {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  line-height: 1.55;
  margin: 0;
}

.goal-card__evidence {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-gray-100);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.goal-card__evidence-attribution {
  display: inline-flex;
  align-items: center;
}

.goal-card__evidence-body {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.55;
  margin: 0;
}

.goal-card__evidence-body--placeholder {
  color: var(--color-gray-500);
  font-style: italic;
}

/* Status variants — tinted body, accent stripe, and divider color. */
.goal-card--meeting {
  background: var(--color-green-50);
  border-color: rgba(22, 163, 74, 0.18);
  border-left-color: var(--color-green-600);
}
.goal-card--meeting .goal-card__evidence {
  border-top-color: rgba(22, 163, 74, 0.18);
}

.goal-card--at-risk {
  background: var(--color-yellow-50);
  border-color: rgba(202, 138, 4, 0.22);
  border-left-color: var(--color-yellow-600);
}
.goal-card--at-risk .goal-card__evidence {
  border-top-color: rgba(202, 138, 4, 0.22);
}

.goal-card--not-meeting {
  background: var(--color-orange-50);
  border-color: rgba(234, 88, 12, 0.22);
  border-left-color: var(--color-orange-600);
}
.goal-card--not-meeting .goal-card__evidence {
  border-top-color: rgba(234, 88, 12, 0.22);
}

/* Pending state — newly-added goal, before twin reacts.
   Dashed amber border + faint amber tint; animates in, settles to status. */
.goal-card--pending {
  background: var(--color-amber-50);
  border-color: var(--color-amber-500);
  border-style: dashed;
  border-left-color: var(--color-amber-500);
  animation: goal-card-pending-pulse 1.5s ease-out;
}
.goal-card--pending .goal-card__evidence {
  border-top-color: var(--color-amber-200);
}

@keyframes goal-card-pending-pulse {
  0%   { transform: scale(0.97); opacity: 0; }
  20%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* "+ Add goal" peer card. Same dimensions as a goal card; vertically centered
   icon + label. Disappears entirely when at the 3-goal cap. */
.goal-add-host {
  display: flex;
}

.goal-add-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-600);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  min-height: 100%;
  transition: background var(--transition-standard) ease,
              border-color var(--transition-standard) ease,
              color var(--transition-standard) ease;
}

.goal-add-card:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
  color: var(--color-gray-900);
}

.goal-add-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.goal-add-card__icon svg {
  width: 18px;
  height: 18px;
}

.goal-add-card:hover .goal-add-card__icon {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

/* Inline form — replaces the add card content while editing.
   Two-state form (compose / review). Vertical layout: optional synthesized-
   label at top (only shown in review state) → compose bar (sparkle + textarea)
   → actions row (Cancel + Submit/Save).
   Class state on the form root:
     .is-synthesizing — compose-bar dims, sparkle pulses, actions disabled
     .is-review       — synthesized-label revealed, compose-bar reads as the
                        editable synthesized form, Submit relabels to Save */
.goal-add-card-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-blue-400);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
  min-height: 100%;
}

.goal-add-card-form__synthesized-label {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-meta);
  font-style: italic;
  color: var(--color-gray-600);
  line-height: 1.4;
}

.goal-add-card-form.is-review .goal-add-card-form__synthesized-label {
  display: flex;
  animation: synth-label-fade 320ms ease-out both;
}

@keyframes synth-label-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.goal-add-card-form__synthesized-label svg {
  width: 13px;
  height: 13px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.goal-add-card-form__compose-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  transition: opacity 200ms ease;
}

.goal-add-card-form.is-synthesizing .goal-add-card-form__compose-bar {
  opacity: 0.55;
}

.goal-add-card-form__sparkle {
  width: 16px;
  height: 16px;
  color: var(--color-amber-500);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.goal-add-card-form.is-synthesizing .goal-add-card-form__sparkle {
  animation: pulse-investigating var(--pulse-investigating) ease-in-out infinite;
}

.goal-add-card-form__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--text-small);
  color: var(--color-gray-900);
  background: transparent;
  min-width: 0;
  font-family: inherit;
  line-height: 1.45;
  resize: none;
}

.goal-add-card-form__input::placeholder {
  color: var(--color-gray-500);
}

.goal-add-card-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.goal-add-card-form__cancel,
.goal-add-card-form__submit {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-standard) ease,
              border-color var(--transition-standard) ease,
              color var(--transition-standard) ease,
              opacity var(--transition-standard) ease;
}

.goal-add-card-form__cancel {
  background: transparent;
  color: var(--color-gray-600);
  border-color: var(--color-gray-200);
}

.goal-add-card-form__cancel:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.goal-add-card-form__submit {
  background: var(--color-blue-600);
  color: var(--color-white);
  border-color: var(--color-blue-600);
}

.goal-add-card-form__submit:hover {
  background: var(--color-blue-700);
  border-color: var(--color-blue-700);
}

.goal-add-card-form__submit:disabled,
.goal-add-card-form__cancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============================================================================
   Goal-setting overlay — guided category-first journey for "+ Add goal".
   Mounts as a body-level modal (backdrop + centered panel) for Pillar 3's
   CS team landing today; replaces the legacy two-state compose form when
   the new callbacks are wired. See goal_setting_experience_change.md §4
   for the per-stage UX.

   Modal scaffold mirrors mountVerticalFlowOverlay (sub-phase g): translucent
   backdrop preserves page context, panel rises with fade-in. Stage transitions
   replace only the panel's inner content (preserves backdrop + panel chrome
   between stages).
   ============================================================================ */

/* Modal scaffold — full-viewport fixed positioning + backdrop + centered panel. */
.goal-overlay-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: goal-overlay-modal-fade-in 200ms ease-out both;
}

.goal-overlay-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.goal-overlay-modal__panel {
  position: relative;
  width: min(940px, calc(100vw - 2rem));
  /* Reserve vertical room up front so long typed text in the free-text
     card fits without scrolling, and so the modal doesn't visibly grow
     as later turns appear. Whitespace at the bottom on short turns is
     intentional. Capped at viewport so very short viewports still fit. */
  min-height: min(640px, calc(100vh - 4rem));
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25),
              0 0 0 1px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  animation: goal-overlay-modal-rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Persistent close X — top-right of the panel, sits above the conversation. */
.goal-overlay-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-standard) ease,
              color var(--transition-standard) ease;
}

.goal-overlay-modal__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.goal-overlay-modal__close svg {
  width: 16px;
  height: 16px;
}

.goal-overlay-modal__panel-inner {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

@keyframes goal-overlay-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes goal-overlay-modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Inner-content layout — stage-to-stage, lives inside __panel-inner. */
.goal-overlay {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem 1.25rem;
  animation: goal-overlay-fade-in 220ms ease-out both;
}

@keyframes goal-overlay-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sparkle — twin-voice marker, used in conv-turn prompts and reading lines. */
.goal-overlay__sparkle {
  width: 16px;
  height: 16px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.goal-overlay__sparkle--lit {
  animation: pulse-investigating var(--pulse-investigating) ease-in-out infinite;
}

/* Conversation container — vertical stack of dialog turns. Each new turn
   appears below the previous one as the leader's choices accumulate. */
.goal-overlay__conversation {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* One turn = agent prompt + user options. Decided turns keep all options
   visible (chosen highlighted, others greyed). Active turn is the bottom
   one and is interactive. */
.conv-turn {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-100);
}

.conv-turn:first-child {
  padding-top: 0;
  border-top: none;
}

.conv-turn.is-fresh {
  animation: conv-turn-fade-up 320ms ease-out both;
}

@keyframes conv-turn-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.conv-turn__prompt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.conv-turn__sparkle {
  width: 16px;
  height: 16px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.conv-turn__sparkle--lit {
  animation: pulse-investigating var(--pulse-investigating) ease-in-out infinite;
}

.conv-turn__prompt-text {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.4;
}

.conv-turn__subtitle {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin: 0;
  margin-left: 1.5rem;  /* align under sparkle's text content */
}

.conv-turn__match-body {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.55;
  margin: 0;
  margin-left: 1.5rem;
}

.conv-turn__match-prompt {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin: 0;
  margin-left: 1.5rem;
}

.conv-turn__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.conv-turn--match .conv-turn__actions {
  margin-left: 1.5rem;
  justify-content: flex-start;
}

/* Decided buttons — chosen one keeps its color + check; unchosen greyed. */
.goal-overlay__btn.is-chosen {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.goal-overlay__btn.is-chosen svg {
  width: 12px;
  height: 12px;
}

.goal-overlay__btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Checkmark indicator on chosen cards. Top-right corner. */
.goal-card-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--color-blue-600);
  color: var(--color-white);
}

.goal-card-check svg {
  width: 14px;
  height: 14px;
}

.goal-overlay__body {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.55;
  margin: 0;
}

.goal-overlay__body--untrackable {
  padding: 0.625rem 0.75rem;
  background: var(--color-amber-50);
  border-left: 3px solid var(--color-amber-500);
  border-radius: var(--radius-sm);
}

.goal-overlay__compose-line {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.55;
  margin: 0;
}

/* Reading state — sparkle + line + dots. */
.goal-overlay__reading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: var(--text-small);
  color: var(--color-gray-700);
}

.goal-overlay__reading-line {
  flex: 1;
}

/* Animated 3-dot loader — used in match-reading and watch-contract-composing. */
.goal-overlay__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.goal-overlay__dots > span {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-amber-500);
  animation: goal-overlay-dot-bounce 1.4s ease-in-out infinite both;
}
.goal-overlay__dots > span:nth-child(2) { animation-delay: 0.18s; }
.goal-overlay__dots > span:nth-child(3) { animation-delay: 0.36s; }

@keyframes goal-overlay-dot-bounce {
  0%, 60%, 100% { transform: scale(0.65); opacity: 0.55; }
  30%           { transform: scale(1);    opacity: 1; }
}

.goal-overlay__btn {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-standard) ease,
              border-color var(--transition-standard) ease,
              color var(--transition-standard) ease;
}

.goal-overlay__btn--primary {
  background: var(--color-blue-600);
  color: var(--color-white);
  border-color: var(--color-blue-600);
}

.goal-overlay__btn--primary:hover {
  background: var(--color-blue-700);
  border-color: var(--color-blue-700);
}

.goal-overlay__btn--ghost {
  background: transparent;
  color: var(--color-gray-600);
  border-color: var(--color-gray-200);
}

.goal-overlay__btn--ghost:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.goal-overlay__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Lock acknowledgment — final flash before overlay closes. */
.goal-overlay__locked {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 0.5rem;
}

.goal-overlay__locked-line {
  font-size: var(--text-small);
  font-style: italic;
  color: var(--color-gray-700);
  line-height: 1.5;
  margin: 0;
}

/* -- Turn 1: Category select — 4 cards in a single horizontal row -------- */

.goal-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin: 0;
}

.goal-category-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 0.875rem 0.875rem 0.875rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-white);
  text-align: left;
  cursor: pointer;
  min-height: 96px;
  transition: background var(--transition-standard) ease,
              border-color var(--transition-standard) ease,
              transform var(--transition-standard) ease,
              box-shadow var(--transition-standard) ease,
              opacity var(--transition-standard) ease;
}

.goal-category-pill:hover {
  background: var(--color-blue-50);
  border-color: var(--color-blue-300);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.goal-category-pill.is-chosen {
  background: var(--color-blue-50);
  border-color: var(--color-blue-600);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
  cursor: default;
  padding-right: 2rem;
}

.goal-category-pill.is-chosen:hover {
  transform: none;
}

.goal-category-pill.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-gray-50);
}

.goal-category-pill__name {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.35;
}

.goal-category-pill__definition {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  line-height: 1.45;
}

/* -- Turn 2: Use case select — 2 use cases + 1 free-text peer in a row -- */

.goal-use-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  margin: 0;
}

.goal-use-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-standard) ease,
              border-color var(--transition-standard) ease,
              transform var(--transition-standard) ease,
              box-shadow var(--transition-standard) ease,
              opacity var(--transition-standard) ease;
}

.goal-use-case-card:hover {
  background: var(--color-amber-50);
  border-color: var(--color-amber-500);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.goal-use-case-card.is-chosen {
  background: var(--color-amber-50);
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  cursor: default;
  padding-right: 2rem;
}

.goal-use-case-card.is-chosen:hover {
  transform: none;
}

.goal-use-case-card.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-gray-50);
}

.goal-use-case-card__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.35;
}

.goal-use-case-card__sparkle,
.goal-free-text-card__sparkle {
  width: 14px;
  height: 14px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.goal-use-case-card__description {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.5;
  margin: 0;
}

.goal-use-case-card__best-fits {
  font-size: var(--text-meta);
  font-style: italic;
  color: var(--color-gray-500);
  line-height: 1.45;
  margin: 0;
}

.goal-use-case-card__best-fits-label {
  color: var(--color-gray-600);
  font-style: normal;
}

/* Free-text peer card — same density as use-case cards. */
.goal-free-text-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-white);
}

.goal-free-text-card.is-chosen {
  background: var(--color-amber-50);
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  padding-right: 2rem;
}

.goal-free-text-card.is-disabled {
  opacity: 0.5;
  background: var(--color-gray-50);
}

.goal-free-text-card__typed {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  line-height: 1.5;
  margin: 0;
  padding: 0.5rem 0.625rem;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-amber-200);
}

.goal-free-text-card__placeholder {
  font-size: var(--text-meta);
  font-style: italic;
  color: var(--color-gray-500);
  line-height: 1.45;
  margin: 0;
}

.goal-free-text-card--untrackable {
  border-color: var(--color-amber-200);
  background: var(--color-amber-50);
}

.goal-free-text-card__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.35;
}

.goal-free-text-card__input {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  outline: none;
  font-size: var(--text-small);
  color: var(--color-gray-900);
  background: var(--color-white);
  font-family: inherit;
  line-height: 1.45;
  resize: none;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.goal-free-text-card__input::placeholder {
  color: var(--color-gray-500);
}

.goal-free-text-card__input:focus {
  border-color: var(--color-blue-400);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.goal-free-text-card__actions {
  display: flex;
  justify-content: flex-end;
}

/* -- Step 4: Watch contract --------------------------------------------- */

.goal-watch-contract {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.goal-watch-contract__goal {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-amber-50);
  border-left: 3px solid var(--color-amber-500);
  border-radius: var(--radius-sm);
}

.goal-watch-contract__goal-label {
  font-size: 0.6875rem;          /* 11px eyebrow */
  font-weight: var(--font-weight-semibold);
  color: var(--color-amber-800);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.goal-watch-contract__goal-text {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.4;
}

.goal-watch-contract__intro {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.5;
  margin: 0;
}

.goal-watch-contract__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.goal-watch-contract-bullet {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 0.875rem;
  position: relative;
}

.goal-watch-contract-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-amber-500);
}

.goal-watch-contract-bullet__plain {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  line-height: 1.45;
}

.goal-watch-contract-bullet__property {
  font-size: var(--text-meta);
  font-style: italic;
  color: var(--color-gray-500);
  line-height: 1.4;
}

.goal-watch-contract__twins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-gray-100);
}

.goal-watch-contract__twins-label {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
}

.goal-watch-contract__twins-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  font-size: var(--text-meta);
}

/* ============================================================================
   Goal pill — compact alternative to the goal card. Kept as a primitive in
   case other surfaces want pills instead of cards. Not used on OM landing.
   ============================================================================ */

.goal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.goal-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.goal-pill--meeting     { background: var(--color-green-100);  color: var(--color-green-800); }
.goal-pill--meeting     .goal-pill__dot { background: var(--color-green-600); }
.goal-pill--at-risk     { background: var(--color-yellow-100); color: var(--color-yellow-800); }
.goal-pill--at-risk     .goal-pill__dot { background: var(--color-yellow-600); }
.goal-pill--not-meeting { background: var(--color-orange-100); color: var(--color-orange-800); }
.goal-pill--not-meeting .goal-pill__dot { background: var(--color-orange-600); }

/* ============================================================================
   Workflows panel — encloses the workflow card grid on team landings.
   White-bg container with a titled header, body padding so the inset cards
   read as enclosed rather than full-bleed.
   ============================================================================ */

.workflows-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.workflows-panel__header {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.workflows-panel__title-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.workflows-panel__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.workflows-panel__subtitle {
  font-size: var(--text-small);
  color: var(--color-gray-500);
  margin: 0;
}

.workflows-panel__body {
  padding: 1.125rem;
}

/* ============================================================================
   Workflow strip — compact-row replacement for workflow-card on team
   landings (per goal_centric_team_page_change.md §2.E). Workflows demote
   to a strip below the tabbed area; the rich workflow-card primitive
   stays intact for workflow detail pages.
   Each row ~64px tall to match surfaced-interventions row heights — the
   page reads as horizontally banded once strips replace the card grid.
   ============================================================================ */

.workflow-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.workflow-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-gray-100);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-standard) ease;
}

.workflow-strip:last-child {
  border-bottom: none;
}

.workflow-strip:hover {
  background: var(--color-gray-50);
}

.workflow-strip__main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.workflow-strip__name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workflow-strip__name {
  font-size: 1rem;       /* base, between text-small and text-card-title */
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.3;
}

.workflow-strip__subtitle {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
}

.workflow-strip__meta {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
}

/* Inline badge next to the name — used on Claims for the "Hybrid" marker. */
.workflow-strip__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-200);
  border-radius: 9999px;
  color: var(--color-amber-900);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Compact twin-status pill — single line: sparkle + dot + label. Shares the
   amber palette with the .workflow-card__twin-status block but drops the
   "Twin status" microlabel and the twinUpdatedLabel tail (those go in the
   strip's main meta line instead, so the right side stays compact). */
.workflow-strip__twin-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-200);
  border-radius: 9999px;
  font-size: var(--text-meta);
  color: var(--color-amber-900);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.workflow-strip__twin-status .sparkle-icon {
  width: 12px;
  height: 12px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.workflow-strip__twin-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-amber-600);
  flex-shrink: 0;
}

.workflow-strip__twin-state-label {
  color: var(--color-amber-900);
}

/* ============================================================================
   Workflow card — used on team landings.
   Reference: reference_screenshots/workflow-card.png.
   Pale-blue card body, amber-tinted twin status badge top-right, directional
   effort, variants/handoffs, app icon row, unstructured share, observed cases.
   ============================================================================ */

.workflow-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--lane-soft-blue);
  border: 1px solid rgba(191, 219, 254, 0.7);    /* blue-200 at ~70% */
  border-radius: var(--radius-lg);
  padding: 1.125rem 1.25rem 1.125rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-standard) ease,
              transform var(--transition-standard) ease,
              box-shadow var(--transition-standard) ease;
}

.workflow-card:hover {
  border-color: var(--color-blue-400);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.workflow-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 0.25rem;
}

.workflow-card__name-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.workflow-card__name {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
  line-height: 1.2;
}

.workflow-card__team {
  font-size: var(--text-small);
  color: var(--color-gray-600);
}

.workflow-card__twin-status {
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-200);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex-shrink: 0;
}

.workflow-card__twin-status-label {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
}

.workflow-card__twin-state-row {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-meta);
  color: var(--color-amber-900);
  font-weight: var(--font-weight-medium);
}

.workflow-card__twin-state-row .sparkle-icon {
  width: 13px;
  height: 13px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.workflow-card__twin-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-amber-600);
  flex-shrink: 0;
}

.workflow-card__twin-state-label {
  color: var(--color-amber-900);
}

.workflow-card__twin-updated {
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

.workflow-card__effort {
  font-size: var(--text-small);
  color: var(--color-gray-700);
}

.workflow-card__effort strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.workflow-card__variants {
  font-size: var(--text-small);
  color: var(--color-gray-700);
}

.workflow-card__apps {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.workflow-card__app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
}

.workflow-card__app svg {
  width: 14px;
  height: 14px;
}

.workflow-card__app--blue   { background: var(--color-blue-100);   color: var(--color-blue-700); }
.workflow-card__app--amber  { background: var(--color-yellow-100); color: var(--color-yellow-800); }
.workflow-card__app--gray   { background: var(--color-gray-100);   color: var(--color-gray-700); }
.workflow-card__app--green  { background: var(--color-green-100);  color: var(--color-green-700); }
.workflow-card__app--purple { background: var(--color-purple-100); color: var(--color-purple-600); }

.workflow-card__unstructured,
.workflow-card__cases {
  font-size: var(--text-small);
  color: var(--color-gray-700);
}

.workflow-card__cases {
  color: var(--color-gray-600);
}

/* ----------------------------------------------------------------------------
   Wide modifier — used on the bottom card in CS team's sequential-plus-
   exception layout (Returns Exception Handling). Same visual styling as the
   base card; only the body fields flex horizontally instead of stacking.
   Triggered by data-flag `wide: true` on the workflow entry → applies the
   `.workflow-card--wide` class via renderWorkflowCard.
   ---------------------------------------------------------------------------- */

.workflow-card--wide {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: auto auto;
  column-gap: 1.75rem;
  row-gap: 0.75rem;
  align-items: center;
}

.workflow-card--wide .workflow-card__top {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.workflow-card--wide .workflow-card__apps {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .workflow-card--wide {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .workflow-card--wide .workflow-card__top { grid-column: 1 / -1; }
}

/* ============================================================================
   Twin Trace panel — right column on the workflow detail page.
   Header (sparkle + "Twin Trace · {twinName}") plus a scrollable body that
   renders trace entries (newest-first) or an empty placeholder.
   ============================================================================ */

.twin-trace-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.twin-trace-panel__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--text-small);
  flex-shrink: 0;
}

.twin-trace-panel__icon {
  width: 16px;
  height: 16px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.twin-trace-panel__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.twin-trace-panel__sep {
  color: var(--color-gray-400);
}

.twin-trace-panel__twin {
  color: var(--color-amber-700);
  font-weight: var(--font-weight-medium);
}

.twin-trace-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300, #d1d5db) transparent;
}

/* WebKit / Chromium — thin always-visible scrollbar in muted gray. */
.twin-trace-panel__body::-webkit-scrollbar {
  width: 8px;
}

.twin-trace-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

.twin-trace-panel__body::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300, #d1d5db);
  border-radius: 4px;
}

.twin-trace-panel__body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-400);
}

.twin-trace-panel__empty {
  margin: auto;
  font-size: var(--text-small);
  color: var(--color-gray-500);
  font-style: italic;
  text-align: center;
  max-width: 28ch;
  line-height: 1.55;
}

/* Investigating loader — sits between header and body while a beat is
   running. Pulsing sparkle reuses .twin-investigating; animated dots reuse
   .generating-dots from animations.css. Removed when the beat completes.
   Twin-output container pattern (DESIGN_GUIDELINES "Twin-Output Container"):
   amber-100 fill + amber-500 left accent stripe. */
.twin-trace-panel__loader {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-amber-500);
  background: var(--color-amber-100);
  font-size: var(--text-small);
  color: var(--color-amber-900);
  flex-shrink: 0;
}

.twin-trace-panel__loader .sparkle-icon {
  width: 16px;
  height: 16px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.twin-trace-panel__loader-spinner {
  width: 14px;
  height: 14px;
  color: var(--color-amber-700);
  flex-shrink: 0;
  margin-left: auto;
}

.twin-trace-panel__loader-text {
  font-weight: var(--font-weight-semibold);
}

/* Beats-container placeholder — shown in the main column while the run
   warms up (between "Begin investigation" click and the first card
   materializing). Removed when card 1 begins. Spinner reads as "loading"
   at a glance — sits where the user's eyes already are. */
.beats-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 2.5rem 1.5rem;
  margin: 0 0 1rem;
  border: 1px dashed var(--color-amber-300, #fcd34d);
  border-radius: var(--radius-lg);
  background: var(--color-amber-50);
  color: var(--color-amber-900);
  font-size: var(--text-base);
}

.beats-placeholder__spinner {
  width: 22px;
  height: 22px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.beats-placeholder__text {
  font-weight: var(--font-weight-medium);
}

/* Trace chip — small categorical label at the bottom of a trace card. */
.trace-chip {
  display: inline-flex;
  align-items: center;
  margin-top: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  align-self: flex-start;
}

.trace-chip--diagnostic,
.trace-chip--simulation,
.trace-chip--synthesis {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.trace-chip--awaiting {
  background: var(--color-amber-100);
  color: var(--color-amber-800);
}

.trace-chip--verdict {
  background: var(--color-green-100);
  color: var(--color-green-800);
}

/* Pillar 3 chips — cross-twin recognition + plan. Cross-twin uses the
   amber identity color since it announces twin coordination; plan uses
   blue since it's an action/process artifact. */
.trace-chip--cross-twin {
  background: var(--color-amber-100);
  color: var(--color-amber-800);
}

.trace-chip--plan {
  background: var(--color-blue-50);
  color: var(--color-blue-800);
}

/* Tier 2 user-initiated correction (feedback_capability.md Section 4) —
   the refinement arc lands a 3-line trace under this chip. Amber-tinted to
   read as twin-acknowledgment of human input, but distinct from cross-twin. */
.trace-chip--refinement {
  background: var(--color-amber-50);
  color: var(--color-amber-800);
  border: 1px dashed var(--color-amber-200);
}

/* ============================================================================
   Placeholder card — used by Phase 4a tab content stubs and any other
   "to-be-detailed-later" surface. White card, gray border, body + optional CTA.
   ============================================================================ */

.placeholder-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.placeholder-card__heading {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.placeholder-card__body {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0;
  line-height: 1.55;
  max-width: 70ch;
}

.placeholder-card__cta {
  background: var(--color-blue-600);
  color: var(--color-white);
  border: none;
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--transition-standard) ease;
}

.placeholder-card__cta:hover {
  background: var(--color-blue-700);
}

.placeholder-card__cta svg {
  width: 14px;
  height: 14px;
}

/* ============================================================================
   Beats container + card — vertical stack of materializing cards on the
   workflow detail page's Analyses tab. Each card has a stable frame; the
   inner area is what materialize() writes through (reasoning → generating →
   content phases).
   ============================================================================ */

.beats-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================================================
   Spec artifact — Beat 3b's climactic output. Document-shaped container
   with three slots (header / body / action bar). White body, 4px amber-500
   left accent stripe (DESIGN_GUIDELINES_Claude.md "Twin-Output Container"),
   amber-50 fill on header bar only. Action bar at bottom, not sticky.
   ============================================================================ */

.spec-artifact {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-amber-500);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Reasoning + generating phases inside the artifact get padding so the
   bullets/dots sit comfortably while the slot is empty. The final
   content phase brings its own visual treatment. */
.spec-artifact .reasoning-phase,
.spec-artifact .generating-phase {
  padding: 1.5rem 1.75rem;
}

/* Spec header — amber-50 fill, twin attribution prominent. */
.spec-header {
  background: var(--color-amber-50);
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--color-amber-200);
}

.spec-header__attribution {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-amber-900);
  margin-bottom: 0.75rem;
}

.spec-header__sparkle {
  width: 16px;
  height: 16px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.spec-header__attribution-label {
  color: var(--color-amber-800);
}

.spec-header__title {
  font-size: var(--text-section);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.spec-header__meta {
  font-size: var(--text-meta);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  letter-spacing: 0.01em;
}

.spec-header__version {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.spec-header__sep {
  color: var(--color-gray-400);
}

.spec-header__status {
  color: var(--color-gray-700);
}

.spec-header__date {
  color: var(--color-gray-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Summary — prose paragraph block on white. */
.spec-summary {
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.spec-summary__heading {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.875rem;
}

.spec-summary__body p {
  margin: 0 0 0.875rem;
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.65;
}

.spec-summary__body p:last-child {
  margin-bottom: 0;
}

.spec-summary__body strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

/* Section placeholders — slim horizontal stubs. Phase 4e.2-4 transform
   these into materialized sections. */
.spec-section-placeholders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.spec-section-placeholder {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.spec-section-placeholder__index {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.spec-section-placeholder__title {
  flex: 1;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

.spec-section-placeholder__pending {
  width: 14px;
  height: 14px;
  color: var(--color-amber-500);
  opacity: 0.55;
  flex-shrink: 0;
}

/* Action bar — gray-50 strip at the artifact's bottom. */
.spec-action-bar {
  display: flex;
  gap: 0.625rem;
  padding: 1.125rem 1.75rem;
  background: var(--color-gray-50);
}

.spec-action-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.spec-action-bar__btn:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.spec-action-bar__btn--primary {
  background: var(--color-blue-600);
  color: var(--color-white);
  border-color: transparent;
}

.spec-action-bar__btn--primary:hover {
  background: var(--color-blue-700);
  border-color: transparent;
}

.spec-action-bar__btn i {
  width: 14px;
  height: 14px;
}

/* ============================================================================
   Spec sections — Phase 4e.2 transforms each placeholder into its full
   materialized form. The .spec-section-placeholder slim styling is replaced
   by .spec-section--materializing during the materialize arc, then settles
   to .spec-section--materialized.
   ============================================================================ */

.spec-section--materializing,
.spec-section--materialized {
  background: var(--color-white);
  border: 0;
  border-bottom: 1px solid var(--color-gray-200);
  border-radius: 0;
  padding: 0;
  display: block;
}

.spec-section {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.spec-section__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.25rem;
}

.spec-section__body {
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.65;
}

.spec-section__body h3,
.spec-section__body h4 {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 1.25rem 0 0.5rem;
}

.spec-section__body h3:first-child,
.spec-section__body h4:first-child {
  margin-top: 0;
}

.spec-section__body p {
  margin: 0 0 0.875rem;
}

.spec-section__body p:last-child {
  margin-bottom: 0;
}

.spec-section__body strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.spec-section__body ul,
.spec-section__body ol {
  margin: 0 0 0.875rem;
  padding-left: 1.25rem;
}

.spec-section__body li {
  margin-bottom: 0.25rem;
}

.spec-section__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  background: var(--color-gray-100);
  border-radius: var(--radius);
  padding: 0.05rem 0.3rem;
  color: var(--color-gray-800);
}

.spec-section__body pre {
  margin: 0.5rem 0;
}

.spec-section__body pre code {
  background: transparent;
  padding: 0;
  font-size: var(--text-meta);
}

/* Generic code block styling — reused by tool contracts, pseudocode,
   indented blocks rendered through markdown. */
.spec-code {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-meta);
  color: var(--color-gray-800);
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}

/* ============================================================================
   Tool contract — one of six in Section 2. Code-block-styled body with a
   structured header strip (name + status badge). Discovered (not formalized)
   tools get a 3px amber-500 left accent.
   ============================================================================ */

.tool-contract {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}

.tool-contract--discovered {
  border-left: 3px solid var(--color-amber-500);
}

.tool-contract__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.tool-contract__title {
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  flex: 1;
}

.tool-contract__title code {
  background: transparent;
  padding: 0;
  font-size: 1em;
  color: var(--color-gray-900);
}

.tool-contract__status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.tool-contract__status--formalized {
  background: var(--color-green-100);
  color: var(--color-green-700);
}

.tool-contract__status--discovered {
  background: var(--color-amber-100);
  color: var(--color-amber-800);
}

.tool-contract__purpose {
  margin: 0;
  padding: 0.625rem 1rem 0;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.55;
  font-style: italic;
}

.tool-contract__body {
  margin: 0.625rem 1rem 1rem;
  border-top: 0;
}

/* Stack of tool contracts inside Section 2, with breathing room between. */
.spec-tool-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* ============================================================================
   Pseudocode block — Section 3 cluster identification + per-cluster
   execution sequences. Optional small heading above the <pre>.
   ============================================================================ */

.spec-pseudocode {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spec-pseudocode__heading {
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

/* Container for a list of per-cluster sequences. */
.spec-cluster-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ============================================================================
   Mermaid stub — placeholder card where the flow graph will render in
   Phase 4e.3. Sized roughly at the graph's eventual dimensions so 4e.3's
   swap-in doesn't shift other content.
   ============================================================================ */

.spec-mermaid-stub {
  height: 400px;
  background: var(--color-gray-50);
  border: 2px dashed var(--color-gray-300, #d1d5db);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spec-mermaid-stub__inner {
  text-align: center;
  color: var(--color-gray-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 36ch;
}

.spec-mermaid-stub__icon {
  width: 28px;
  height: 28px;
  color: var(--color-gray-400);
}

.spec-mermaid-stub__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.spec-mermaid-stub__hint {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  font-style: italic;
}

/* ============================================================================
   Mermaid render container — Phase 4e.3 replaces the .spec-mermaid-stub
   with this. Loading state is absolutely positioned + visible by default;
   the rendered SVG sits inside .mermaid (opacity 0). On --rendered class:
   loading hides, SVG fades in over 500ms.
   ============================================================================ */

.spec-mermaid-container {
  position: relative;
  margin: 1rem 0;
  padding: 1.25rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  min-height: 420px;
  overflow-x: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spec-mermaid-container__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  font-style: italic;
}

.spec-mermaid-container__loading .sparkle-icon {
  width: 16px;
  height: 16px;
  color: var(--color-amber-500);
  flex-shrink: 0;
}

.spec-mermaid-container__loading-text {
  font-weight: var(--font-weight-medium);
}

.spec-mermaid-graph {
  width: 100%;
  opacity: 0;
  transition: opacity 500ms ease;
}

/* Mermaid emits SVGs with viewBox; max-width: 100% scales them to fit
   the container width on narrow viewports without losing aspect ratio. */
.spec-mermaid-graph svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.spec-mermaid-container--rendered .spec-mermaid-container__loading {
  display: none;
}

.spec-mermaid-container--rendered .spec-mermaid-graph {
  opacity: 1;
}

/* ============================================================================
   Phase panel — collapsible run-phase wrapper. Active state has zero chrome
   so cards stack as if directly in the cards container; completed states
   reveal the panel border + header + chevron.
   ============================================================================ */

.phase-panel {
  display: flex;
  flex-direction: column;
  /* Border + radius always present so the active → completed transition
     can smoothly fade in the chrome without a pop. */
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  transition: background-color 300ms ease, border-color 300ms ease;
}

/* Active — chrome is invisible (transparent bg + border), header hidden. */
.phase-panel--active .phase-panel__header {
  display: none;
}

/* Completed states — chrome appears. */
.phase-panel--expanded-completed,
.phase-panel--collapsed {
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
  overflow: hidden;
}

.phase-panel__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  font-size: var(--text-small);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  animation: phase-header-fade 300ms ease both;
}

.phase-panel--collapsed .phase-panel__header {
  border-bottom: 0;
}

@keyframes phase-header-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.phase-panel__check {
  width: 16px;
  height: 16px;
  color: var(--color-green-600);
  flex-shrink: 0;
}

.phase-panel__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.phase-panel__meta-strip {
  flex: 1;
  color: var(--color-gray-600);
  font-size: var(--text-meta);
  letter-spacing: 0.01em;
}

.phase-panel__meta-strip:not(:empty)::before {
  content: '· ';
  margin-right: 0.125rem;
  color: var(--color-gray-400);
}

.phase-panel__chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-gray-600);
  transition: background-color 150ms ease;
  flex-shrink: 0;
}

.phase-panel__chevron-btn:hover {
  background: var(--color-gray-100);
}

.phase-panel__chevron {
  width: 16px;
  height: 16px;
  transition: transform 350ms ease;
}

.phase-panel--expanded-completed .phase-panel__chevron {
  transform: rotate(180deg);
}

.phase-panel__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.phase-panel--expanded-completed .phase-panel__body,
.phase-panel--collapsed .phase-panel__body {
  padding: 1.25rem 1.125rem;
}

/* Phase placeholder — temporary scaffolding for the next phase's slot.
   Replaced by the real Simulation panel in Phase 4d. */
.phase-placeholder {
  margin-top: 1.5rem;
  padding: 0.5rem 0;
  color: var(--color-gray-500);
  font-size: var(--text-small);
  font-style: italic;
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}

.card__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.875rem;
  line-height: 1.4;
}

.card__content {
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.65;
}

.card__content p {
  margin: 0 0 0.875rem;
}

.card__content p:last-child {
  margin-bottom: 0;
}

.card__content strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.card__visual {
  margin-top: 1.25rem;
}

/* Refined-by annotation — appears on the post-correction state of a card
   that supported Tier 2 user-initiated feedback (feedback_capability.md
   Section 5). Muted gray italic; sparkle icon prefix matches twin-voice
   visuals elsewhere. Lives at the bottom of card__content. */
.card__content .card__refined-by {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-amber-200);
  font-size: var(--text-meta);
  font-style: italic;
  color: var(--color-amber-800);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.card__content .card__refined-by i {
  width: 14px;
  height: 14px;
  color: var(--color-amber-500);
}

/* =============================================================================
   Two-column card body (Pillar 2 Card 2.2 — structural payoff)
   --------------------------------------------------------------------------
   Agent telemetry left / human interaction signature right. Rendered before
   the closing prose paragraph in card.content. Row kinds drive per-row
   visual treatment:
   - stat    : top-of-column summary (bold)
   - tool    : monospace agent tool/LLM call name
   - app     : plain human-readable app name
   - callout : amber-tinted punchline rows at the bottom of each column
   - spacer  : invisible row that holds vertical height so callouts on the
               right align horizontally with callouts on the left
   ========================================================================= */

.card__two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--color-gray-200);
}

.card__two-column-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card__two-column-col-header {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  padding-bottom: 0.45rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.card__two-column-col-rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.card__two-column-row {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--color-gray-800);
  padding: 0.25rem 0;
}

.card__two-column-row--stat {
  font-size: var(--text-small);
  color: var(--color-gray-900);
  margin-bottom: 0.15rem;
}

.card__two-column-row--tool {
  font-size: 0.8rem;
  color: var(--color-gray-700);
}

.card__two-column-row--tool code {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  color: var(--color-gray-800);
}

.card__two-column-row--app {
  color: var(--color-gray-700);
}

.card__two-column-row--callout {
  margin-top: 0.4rem;
  padding: 0.55rem 0.75rem;
  background: var(--color-amber-50);
  border-left: 3px solid var(--color-amber-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-gray-900);
  font-size: var(--text-small);
  line-height: 1.5;
}

.card__two-column-row--spacer {
  visibility: hidden;
  padding: 0.25rem 0;
}

.card__two-column strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.card__footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.card__footer-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

/* Card CTA — primary blue button at the bottom of a beat-closing card.
   Used on Beat 3a's "Synthesize Agent Specification" gate; the orchestrator
   awaits the click via [data-cta-action]. */
.card__cta-row {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-start;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  background: var(--color-blue-600);
  color: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 250ms ease;
}

.card__cta:hover:not(:disabled):not(.card__cta--clicked) {
  background: var(--color-blue-700);
}

.card__cta .sparkle-icon {
  width: 14px;
  height: 14px;
  color: var(--color-white);
}

.card__cta:disabled,
.card__cta--clicked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.card__confidence {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.card__confidence-caveat {
  font-size: var(--text-meta);
  font-style: italic;
  color: var(--color-gray-600);
  line-height: 1.5;
  max-width: 60ch;
}

.card__confidence-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card__confidence-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card__confidence-label {
  color: var(--color-gray-600);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  min-width: 9ch;
}

/* ============================================================================
   Inline visuals — small mini-charts inside cards.
   Visual restraint: they support the prose, never compete with it.
   ============================================================================ */

/* Horizontal bar — Card 1.1 (standard vs promotional sequence-time). */
.visual--hbar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 380px;
}

.hbar-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: var(--text-small);
}

.hbar-row__label {
  flex: 0 0 7rem;
  color: var(--color-gray-700);
}

.hbar-row__track {
  flex: 1;
  height: 8px;
  background: var(--color-gray-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.hbar-row__fill {
  display: block;
  height: 100%;
  background: var(--color-blue-300);
  border-radius: var(--radius-pill);
  transition: width 600ms ease;
}

/* Variant segments — Card 1.2 (three labeled segments showing share split). */
.visual--vseg {
  display: flex;
  gap: 0.25rem;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.vseg {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-100);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.vseg--elevated {
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
  border-left: 3px solid var(--color-amber-500);
}

.vseg__label {
  font-size: var(--text-meta);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vseg__share {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

/* Two-dot indicator — Card 1.3 (judgment moment 1 / judgment moment 2). */
.visual--two-dot {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0.5rem 0.25rem;
}

.vdot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.vdot__circle {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--color-amber-100);
  border: 2px solid var(--color-amber-500);
}

.vdot__label {
  font-size: var(--text-meta);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.vdot-line {
  flex: 0 0 auto;
  width: 96px;
  height: 2px;
  background: var(--color-gray-300);
  margin: 6px 0.5rem 0;
}

/* ============================================================================
   Twin-output container — amber-wrapped frame for synthesized artifacts.
   ============================================================================ */

.twin-output {
  background: var(--color-amber-50);
  border-left: var(--accent-stripe) solid var(--color-amber-500);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}

/* ============================================================================
   Entry context banner — top of workflow-cs-returns.html's Analyses tab.
   Twin-output styled (amber-50 fill, 4px amber-500 left accent), persistent
   through the run. Carries goal + hypothesis + surfacing twin so the leader
   doesn't lose context across the team-landing → workflow-detail transition.
   ============================================================================ */

.entry-context-banner {
  background: var(--color-amber-50);
  border-left: var(--accent-stripe) solid var(--color-amber-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.entry-context-banner__eyebrow {
  font-size: var(--text-meta);
  font-style: italic;
  color: var(--color-gray-500);
  text-transform: none;
  letter-spacing: 0;
}

.entry-context-banner__headline {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.35;
  margin: 0;
}

.entry-context-banner__hypothesis {
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.5;
  margin: 0;
}

.entry-context-banner__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  margin-top: 0.25rem;
  padding-top: 0.625rem;
  border-top: var(--border-thin) solid var(--color-amber-200);
  font-size: var(--text-small);
}

.entry-context-banner__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.entry-context-banner__meta-label {
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-amber-800);
  font-weight: var(--font-weight-semibold);
}

.entry-context-banner__meta-value {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

/* ============================================================================
   Twin Communication Graph — hub-and-spoke SVG. Scout (blue, always lit) at
   center; five returns twins around. Edges + twin nodes flip from "quiet"
   (dashed gray, white nodes) to "engaged" (solid amber, amber-filled nodes)
   as the orchestrator marks twins active during the simulation run.

   Used on workflow-cs-returns.html beside the Beat 4 reasoning plan.
   ============================================================================ */

.twin-comm-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.twin-comm-graph__svg {
  width: 280px;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.twin-comm-graph__edge {
  stroke: var(--color-gray-300);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  fill: none;
  transition: stroke 300ms ease, stroke-width 300ms ease;
}

.twin-comm-graph__edge.is-engaged {
  stroke: var(--color-amber-500);
  stroke-width: 2;
  stroke-dasharray: none;
}

.twin-comm-graph__node-circle {
  fill: var(--color-white);
  stroke: var(--color-gray-300);
  stroke-width: 1.5;
  transition: fill 300ms ease, stroke 300ms ease;
}

.twin-comm-graph__node.is-engaged .twin-comm-graph__node-circle {
  fill: var(--color-amber-500);
  stroke: var(--color-amber-500);
}

.twin-comm-graph__node-label {
  fill: var(--color-gray-700);
  font-size: 12px;
  font-weight: 600;
  user-select: none;
  pointer-events: none;
  transition: fill 300ms ease;
}

.twin-comm-graph__node.is-engaged .twin-comm-graph__node-label {
  fill: var(--color-white);
}

.twin-comm-graph__hub-circle {
  fill: var(--color-blue-600);
  stroke: var(--color-blue-700);
  stroke-width: 1;
}

.twin-comm-graph__hub-label {
  fill: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  user-select: none;
  pointer-events: none;
}

.twin-comm-graph__counter {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
}

.twin-comm-graph__counter strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================================
   Plan-with-graph layout — Beat 4's reasoning plan body. Plan steps on the
   left, twin communication graph on the right. Sits inside the standard
   .card frame (which wraps the materialize() arc).
   ============================================================================ */

.plan-with-graph {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.plan-with-graph__plan {
  flex: 1 1 auto;
  min-width: 0;
}

.plan-with-graph__graph {
  flex: 0 0 280px;
}

.plan-with-graph__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: 1rem;
}

.plan-with-graph__title-icon {
  color: var(--color-blue-600);
  width: 20px;
  height: 20px;
}

.plan-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.plan-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.plan-step:last-child {
  border-bottom: none;
}

.plan-step__indicator {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
  background: var(--color-white);
}

.plan-step__indicator--active {
  border-color: var(--color-blue-500);
  color: var(--color-blue-600);
}

.plan-step__indicator--active svg {
  width: 16px;
  height: 16px;
}

.plan-step__indicator--completed {
  border-color: var(--color-green-600);
  background: var(--color-green-50);
  color: var(--color-green-700);
}

.plan-step__indicator--completed svg {
  width: 14px;
  height: 14px;
}

.plan-step.is-completed .plan-step__text {
  color: var(--color-gray-500);
}

.plan-step.is-active .plan-step__text {
  color: var(--color-gray-900);
}

.plan-step__text {
  flex: 1 1 auto;
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.5;
  padding-top: 4px;
}

@media (max-width: 1100px) {
  .plan-with-graph {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .plan-with-graph__graph {
    align-self: center;
  }
}

/* ============================================================================
   Process Change Specification (PCS) — Pillar 3 Beat 6 climax artifact.
   Reuses .spec-artifact for the outer document frame; PCS-specific styles
   for the cluster-card-based body content.
   ============================================================================ */

/* Header — same amber-50 fill pattern as .spec-header, with a wider
   attribution row that supports both lead and contributing twins. */
.pcs-header {
  background: var(--color-amber-50);
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--color-amber-200);
}

.pcs-header__attribution {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: var(--text-small);
  color: var(--color-amber-900);
  margin-bottom: 0.75rem;
}

.pcs-header__sparkle {
  width: 16px;
  height: 16px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.pcs-header__attribution-label {
  color: var(--color-amber-800);
}

.pcs-header__attribution-sep {
  color: var(--color-amber-200);
}

.pcs-header__contributing {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.pcs-header__title {
  font-size: var(--text-section);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.pcs-header__meta {
  font-size: var(--text-meta);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  letter-spacing: 0.01em;
}

.pcs-header__version {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.pcs-header__sep {
  color: var(--color-gray-400);
}

.pcs-header__status {
  color: var(--color-gray-700);
}

.pcs-header__date {
  color: var(--color-gray-600);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Conversational framing — italic twin-voice intro line above the cluster
   cards. Sparkle prefix, slight amber tint on the sparkle only. */
.pcs-framing {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.pcs-framing__sparkle {
  width: 16px;
  height: 16px;
  color: var(--color-amber-500);
  flex-shrink: 0;
  margin-top: 3px;
}

.pcs-framing__text {
  margin: 0;
  font-size: var(--text-body);
  font-style: italic;
  color: var(--color-gray-700);
  line-height: 1.6;
}

/* Cluster cards — verdict cards with recommendation badge top-right,
   confidence segmented bar below the header, four sections (identifier
   mapping, evidence, optional preconditions, directional effect). */
.pcs-cluster-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pcs-cluster-card--apply {
  border-left: 3px solid var(--color-green-600);
}
.pcs-cluster-card--hold {
  border-left: 3px solid var(--color-gray-400);
}
.pcs-cluster-card--apply-with-preconditions {
  border-left: 3px solid var(--color-amber-500);
}

.pcs-cluster-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.pcs-cluster-card__title-block {
  flex: 1 1 auto;
  min-width: 0;
}

.pcs-cluster-card__name {
  margin: 0;
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.3;
}

.pcs-cluster-card__label {
  margin: 0.25rem 0 0;
  font-size: var(--text-small);
  color: var(--color-gray-600);
  line-height: 1.4;
}

.pcs-recommendation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}

.pcs-recommendation-badge i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pcs-recommendation-badge--apply {
  background: var(--color-green-100);
  color: var(--color-green-800);
}
.pcs-recommendation-badge--hold {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}
.pcs-recommendation-badge--preconditions {
  background: var(--color-amber-100);
  color: var(--color-amber-800);
}

.pcs-cluster-card__confidence {
  /* The segmented bar already brings its own structure — keep the slot quiet. */
}

.pcs-cluster-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pcs-cluster-card__section-heading {
  margin: 0;
  font-size: var(--text-meta);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

.pcs-cluster-card__section p {
  margin: 0 0 0.625rem;
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.6;
}

.pcs-cluster-card__section p:last-child {
  margin-bottom: 0;
}

.pcs-cluster-card__section strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.pcs-cluster-card__preconditions {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pcs-cluster-card__preconditions li {
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.55;
}

.pcs-cluster-card__section--preconditions {
  background: var(--color-amber-50);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  margin: 0 -0.25rem;
}

.pcs-cluster-card__section--preconditions .pcs-cluster-card__section-heading {
  color: var(--color-amber-800);
}

/* Aggregate card — sits below the three cluster cards. Amber-bar headline
   confidence + per-cluster contributions list. */
.pcs-aggregate {
  background: var(--color-amber-50);
  border-left: 4px solid var(--color-amber-500);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pcs-aggregate__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pcs-aggregate__icon {
  width: 18px;
  height: 18px;
  color: var(--color-amber-600);
  flex-shrink: 0;
}

.pcs-aggregate__title {
  margin: 0;
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.pcs-aggregate__headline p {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-gray-700);
  line-height: 1.6;
}

.pcs-aggregate__headline strong {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}

.pcs-aggregate__contributions {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pcs-aggregate__contribution {
  font-size: var(--text-small);
  color: var(--color-gray-700);
  line-height: 1.5;
}

.pcs-aggregate__confidence {
  margin-top: 0.25rem;
}

/* Body wrapper inside the artifact — gives the cluster cards + aggregate
   uniform spacing. */
.pcs-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--color-gray-200);
}

/* ============================================================================
   Info tooltip — small "i" icon with a definition bubble on hover/focus.
   Generic chrome primitive. CSS-only reveal; no JS state.
   ============================================================================ */

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
}

.info-tip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: currentColor;
  opacity: 0.65;
  cursor: pointer;
  border-radius: 9999px;
  transition: opacity 150ms ease, background 150ms ease;
}

.info-tip__trigger:hover,
.info-tip__trigger:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.info-tip__icon {
  width: 14px;
  height: 14px;
}

.info-tip__bubble {
  position: absolute;
  left: 50%;
  z-index: 50;
  width: 280px;
  background: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.12),
    0 2px 4px rgba(15, 23, 42, 0.05);
  padding: 0.75rem 0.875rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.info-tip__bubble--below {
  top: calc(100% + 8px);
  transform: translate(-50%, -4px);
}

.info-tip__bubble--above {
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
}

.info-tip:hover .info-tip__bubble,
.info-tip:focus-within .info-tip__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.info-tip__bubble-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.info-tip__bubble-body {
  color: var(--color-gray-700);
}

/* ---------------------------------------------------------------------------
   Operational metrics strip — top of the workflow detail's Workflow tab.
   Cross-pillar primitive (Pillar 2 first; Pillars 1+3 retrofit in sub-phase h).
   Per pillar_2_detail.md §4 — the single deliberate metric-tile exception
   in the demo, where global-state header tiles do real work prose can't replicate.
   --------------------------------------------------------------------------- */

.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

@media (max-width: 900px) {
  .metrics-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.metrics-strip__tile {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}

.metrics-strip__tile-label {
  font-size: var(--text-small);
  color: var(--color-gray-600);
  margin: 0 0 0.4rem;
}

.metrics-strip__tile-value {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

.metrics-strip__tile-unit {
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-600);
  margin-left: 0.25rem;
}

.metrics-strip__tile-subtext {
  margin-top: 0.4rem;
  font-size: var(--text-meta);
  color: var(--color-gray-500);
}

/* Tone modifiers — directional color cue on the value, calm on everything
   else. Red = above target / amber = warning / green = healthy / neutral
   = no directional read. */
.metrics-strip__tile--red    .metrics-strip__tile-value { color: var(--color-red-600); }
.metrics-strip__tile--amber  .metrics-strip__tile-value { color: var(--color-amber-600); }
.metrics-strip__tile--green  .metrics-strip__tile-value { color: var(--color-green-600); }
.metrics-strip__tile--neutral .metrics-strip__tile-value { color: var(--color-gray-900); }

/* Disabled tile — used for the Agent Adoption tile on Pillars 1+3 (human-only
   workflows). Em-dash value rendered by the JS; gray-50 background + muted
   label/value/subtext signal the absence of the metric. */
.metrics-strip__tile--disabled {
  background: var(--color-gray-50);
}
.metrics-strip__tile--disabled .metrics-strip__tile-label,
.metrics-strip__tile--disabled .metrics-strip__tile-subtext {
  color: var(--color-gray-500);
}
.metrics-strip__tile--disabled .metrics-strip__tile-value {
  color: var(--color-gray-400);
}

/* ---------------------------------------------------------------------------
   Variants panel — left rail on the workflow detail's Workflow tab.
   Wraps the variants list in a panel chrome that matches the workflows-panel
   pattern (header + body, white card on gray-200 border).
   --------------------------------------------------------------------------- */

.variants-panel {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.variants-panel__header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.variants-panel__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.variants-panel__body {
  padding: 0.875rem;
}

/* ---------------------------------------------------------------------------
   Variants list — selectable rows. Elevated row (Var-3 on Pillar 2) carries
   the amber-stripe treatment inheriting the team-landing surfacing-row pattern.
   --------------------------------------------------------------------------- */

.variants-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.variants-list__row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.875rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.variants-list__row:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.variants-list__row.is-selected {
  background: var(--color-blue-50);
  border-color: var(--color-blue-400);
}

.variants-list__row--elevated {
  border-left: 3px solid var(--color-amber-500);
  background: var(--color-amber-50);
}

.variants-list__row--elevated:hover {
  background: var(--color-amber-50);
  border-color: var(--color-amber-500);
  border-left-color: var(--color-amber-500);
}

.variants-list__row--elevated.is-selected {
  background: var(--color-amber-50);
  border-color: var(--color-amber-500);
  border-left-color: var(--color-amber-500);
  box-shadow: 0 0 0 1px var(--color-amber-500) inset;
}

.variants-list__row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.variants-list__row-number {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.variants-list__row-type {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
}

.variants-list__row-name {
  font-size: var(--text-body);
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}

.variants-list__row-share {
  font-size: var(--text-small);
  color: var(--color-gray-600);
}

/* ---------------------------------------------------------------------------
   Workflow tab layout — description + two-column body (variants list +
   main canvas). Cross-pillar primitive.
   --------------------------------------------------------------------------- */

.workflow-tab__description {
  font-size: var(--text-body);
  color: var(--color-gray-700);
  margin: 0 0 1.25rem;
  max-width: 60rem;
  line-height: 1.55;
}

.workflow-tab__body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .workflow-tab__body {
    grid-template-columns: 1fr;
  }
}

.workflow-tab__canvas {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-tab__canvas-empty {
  font-size: var(--text-small);
  color: var(--color-gray-500);
  font-style: italic;
  text-align: center;
  max-width: 28rem;
  line-height: 1.5;
}

/* When the canvas hosts a swimlane (or any filled content), drop the
   center-vertical / center-horizontal flex layout in favor of stretch +
   start so the swimlane fills the canvas naturally and horizontal
   scroll behaves correctly on narrow viewports. */
.workflow-tab__canvas:has(.swimlane) {
  align-items: stretch;
  justify-content: flex-start;
  padding: 1rem 0.75rem;
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   Swimlane — Pillar 2 Workflow tab middle canvas. Renders the selected
   variant's actor lanes + nodes positioned along a horizontal timeline.
   Hybrid Pillar 2 only — Pillars 1+3 retrofit in sub-phase h skips the
   swimlane (single-actor variants render the vertical flow directly).
   --------------------------------------------------------------------------- */

.swimlane {
  display: grid;
  /* Label col (180px) + N node cols. --node-count is set inline by the
     renderer based on the variant's node count. */
  grid-template-columns: 180px repeat(var(--node-count, 5), minmax(140px, 1fr));
  gap: 0.5rem;
  position: relative;
  align-self: stretch;
  width: 100%;
}

/* Lane background strips — one per lane in the variant. Span all columns
   (label + nodes). Subtle tints adapted to demo palette per
   pillar_2_detail.md §4 — agent lane carries amber (twin identity color),
   human gray, intake light blue (upstream), settlement light green
   (downstream). NOT the screenshot's blue/peach/lavender/mint/pink. */
.swimlane__lane-bg {
  grid-column: 1 / -1;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  z-index: 0;
}

.swimlane__lane-bg--upstream {
  background: var(--color-blue-50);
  border-color: var(--color-blue-100);
}

.swimlane__lane-bg--agent {
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
}

.swimlane__lane-bg--human {
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
}

.swimlane__lane-bg--downstream {
  background: var(--color-green-50);
  border-color: var(--color-green-100);
}

/* Lane labels in column 1, vertically centered within their lane row. */
.swimlane__lane-label {
  z-index: 1;
  align-self: center;
  padding: 0 0.875rem;
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.swimlane__lane-label--agent {
  color: var(--color-amber-800);
}

.swimlane__lane-label--upstream {
  color: var(--color-blue-800);
}

.swimlane__lane-label--downstream {
  color: var(--color-green-800);
}

/* Swimlane nodes — one cell per node, positioned by (lane row, node order
   col). Buttons so they're keyboard-focusable; click handler wires up in
   sub-phase g for nodes carrying drilldownKey. */
.swimlane__node {
  z-index: 1;
  align-self: center;
  margin: 0.5rem 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-family: inherit;
  cursor: default;
  transition: border-color 120ms ease, background-color 120ms ease,
              box-shadow 120ms ease;
}

.swimlane__node--clickable {
  cursor: pointer;
}

.swimlane__node--clickable:hover {
  border-color: var(--color-blue-400);
  background: var(--color-blue-50);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
}

.swimlane__node-title {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  line-height: 1.35;
  margin: 0;
}

.swimlane__node-duration {
  margin-top: 0.25rem;
  font-size: var(--text-meta);
  color: var(--color-gray-600);
}

.swimlane__node-drilldown-icon {
  display: inline-flex;
  margin-left: 0.35rem;
  vertical-align: middle;
  color: var(--color-gray-500);
}

.swimlane__node-drilldown-icon svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* "Overridden" annotation badge inside the agent's prior decision node on
   Var-3. Small amber pill, tells the eye the override moment without an
   explicit arrow primitive. */
.swimlane__node-overridden-badge {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-amber-500);
  background: var(--color-amber-100);
  color: var(--color-amber-900);
  border-radius: var(--radius-sm);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

/* =============================================================================
   Vertical flow overlay (Pillar 2 sub-phase g, cross-pillar primitive)
   --------------------------------------------------------------------------
   Modal-style drill-in opened from a swimlane node click. Translucent backdrop
   keeps the swimlane visible underneath. Step list runs vertically with a
   single connector line through the icon column.

   KIND-TAG PALETTE IS SCOPED TO THIS COMPONENT ONLY. Per pillar_2_detail.md
   §4: API (green) / TOOL (amber) / LLM (blue) intentionally collide with the
   global amber/blue/green semantics — the overlay is a self-contained context
   that disambiguates. Outside this component, semantics hold strictly.
   ========================================================================= */

.vertical-flow-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem 2rem;
  pointer-events: none; /* children re-enable */
}

.vertical-flow-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45); /* gray-900 @ 45% — keeps swimlane readable */
  backdrop-filter: blur(1px);
  pointer-events: auto;
  animation: vfo-fade-in 160ms ease-out;
}

.vertical-flow-overlay__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -10px rgba(17, 24, 39, 0.35),
              0 8px 16px -8px rgba(17, 24, 39, 0.18);
  pointer-events: auto;
  animation: vfo-rise 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes vfo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vfo-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vertical-flow-overlay__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.vertical-flow-overlay__header-text {
  flex: 1;
  min-width: 0;
}

.vertical-flow-overlay__header-eyebrow {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vertical-flow-overlay__header-title {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.3;
}

.vertical-flow-overlay__header-meta {
  margin-top: 0.25rem;
  font-size: var(--text-meta);
  color: var(--color-gray-600);
}

.vertical-flow-overlay__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.vertical-flow-overlay__close:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
  border-color: var(--color-gray-200);
}

.vertical-flow-overlay__close svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* Optional context note — short paragraph between header and steps. Used
   on the diagnosis-bearing drilldowns to anchor what the leader is looking
   at without the overlay needing the trace lane. */
.vertical-flow-overlay__context {
  padding: 0.7rem 1.25rem;
  background: var(--color-amber-50);
  border-bottom: 1px solid var(--color-amber-200);
  font-size: var(--text-small);
  color: var(--color-gray-800);
  line-height: 1.45;
}

.vertical-flow-overlay__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
}

/* Vertical connector — one continuous gray line behind the icon column.
   Each step's icon tile has white bg + border so it "punches through". */
.vertical-flow-overlay__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vertical-flow-overlay__steps::before {
  content: '';
  position: absolute;
  left: 1.05rem; /* horizontal center of the 2.1rem-wide icon tile */
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--color-gray-200);
  z-index: 0;
}

/* "Start" anchor — small filled circle at the very top of the connector,
   matching the screenshot reference's flow-graph anchor. */
.vertical-flow-overlay__steps-anchor {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vertical-flow-overlay__steps-anchor::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.65rem; /* aligns with connector at 1.05rem center minus half */
  border-radius: 999px;
  background: var(--color-gray-400);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-gray-300);
}

/* ---- Step row -------------------------------------------------------- */

.vertical-flow-step {
  position: relative;
  z-index: 1;
}

.vertical-flow-step + .vertical-flow-step {
  margin-top: 0.5rem;
}

.vertical-flow-step__row {
  display: grid;
  grid-template-columns: 2.1rem 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.6rem 0.55rem 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.vertical-flow-step__row:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
}

.vertical-flow-step__icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
}

.vertical-flow-step__icon-tile svg {
  width: 1rem;
  height: 1rem;
}

.vertical-flow-step__main {
  min-width: 0;
}

.vertical-flow-step__name {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vertical-flow-step__kind-tag {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  border: 1px solid;
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}

/* ---- Kind-tag palette — SCOPED EXCEPTION ----------------------------- */

.vertical-flow-step__kind-tag--api {
  background: var(--color-green-100);
  border-color: var(--color-green-200);
  color: var(--color-green-800);
}

.vertical-flow-step__kind-tag--tool {
  background: var(--color-amber-100);
  border-color: var(--color-amber-200);
  color: var(--color-amber-800);
}

.vertical-flow-step__kind-tag--llm {
  background: var(--color-blue-100);
  border-color: var(--color-blue-200);
  color: var(--color-blue-700);
}

/* Human kinds — neutral gray base with a subtle differentiator on the
   icon-tile color for at-a-glance distinction. Avoids competing with
   the agent kind-tag colors which are doing the heavy lifting. */
.vertical-flow-step__kind-tag--app,
.vertical-flow-step__kind-tag--edit,
.vertical-flow-step__kind-tag--click {
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}

/* Icon-tile color shift by kind — keeps the row scannable when many steps
   share the same kind. */
.vertical-flow-step[data-kind="API"]   .vertical-flow-step__icon-tile { color: var(--color-green-700); border-color: var(--color-green-200); }
.vertical-flow-step[data-kind="TOOL"]  .vertical-flow-step__icon-tile { color: var(--color-amber-800); border-color: var(--color-amber-200); }
.vertical-flow-step[data-kind="LLM"]   .vertical-flow-step__icon-tile { color: var(--color-blue-700);  border-color: var(--color-blue-200);  }
.vertical-flow-step[data-kind="APP"]   .vertical-flow-step__icon-tile { color: var(--color-gray-700);  }
.vertical-flow-step[data-kind="EDIT"]  .vertical-flow-step__icon-tile { color: var(--color-gray-700);  }
.vertical-flow-step[data-kind="CLICK"] .vertical-flow-step__icon-tile { color: var(--color-gray-700);  }
.vertical-flow-step[data-kind="WAIT"]  .vertical-flow-step__icon-tile { color: var(--color-gray-500); border-style: dashed; }

/* WAIT kind — queue dwell / idle wait. The whole row gets a dashed border
   + muted name to signal "this isn't active interaction time, the case is
   sitting in someone's queue". */
.vertical-flow-step[data-kind="WAIT"] .vertical-flow-step__row {
  border-style: dashed;
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}
.vertical-flow-step[data-kind="WAIT"] .vertical-flow-step__name {
  font-style: italic;
  color: var(--color-gray-700);
}
.vertical-flow-step__kind-tag--wait {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-600);
}

.vertical-flow-step__duration {
  font-size: var(--text-meta);
  color: var(--color-gray-600);
  font-variant-numeric: tabular-nums;
}

.vertical-flow-step__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  transition: transform 160ms ease, color 120ms ease;
}

.vertical-flow-step__chevron svg {
  width: 1rem;
  height: 1rem;
}

.vertical-flow-step.is-expanded .vertical-flow-step__chevron {
  transform: rotate(180deg);
  color: var(--color-gray-700);
}

/* ---- Telemetry detail (revealed on expand) --------------------------- */

.vertical-flow-step__telemetry {
  margin: 0.2rem 0 0 2.85rem; /* indent past icon tile + gap */
  padding: 0.65rem 0.85rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--text-meta);
  color: var(--color-gray-800);
  line-height: 1.5;
}

.vertical-flow-step__telemetry[hidden] {
  display: none;
}

.vertical-flow-step__telemetry-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.vertical-flow-step__telemetry-row + .vertical-flow-step__telemetry-row {
  border-top: 1px dashed var(--color-gray-200);
  margin-top: 0.15rem;
  padding-top: 0.3rem;
}

.vertical-flow-step__telemetry-key {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.65rem;
  align-self: center;
}

.vertical-flow-step__telemetry-value {
  color: var(--color-gray-900);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.7rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.vertical-flow-step__telemetry-value--prose {
  font-family: inherit;
  font-size: var(--text-meta);
  white-space: normal;
}

/* ---- Alternatives row — branching path annotation under a primary step.
   Used on Pillars 1+3 Workflow tab Var-3 steps where the rep can take one
   of two actions (e.g., approve OR escalate). Compact, non-expandable —
   conveys the branch without doubling the step list. */

.vertical-flow-step__alt-divider {
  margin: 0.45rem 0 0.35rem 2.85rem; /* indent past icon tile + gap */
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vertical-flow-step__alt-divider::before,
.vertical-flow-step__alt-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-gray-200);
}

.vertical-flow-step__alt-divider span {
  flex: 0 0 auto;
}

.vertical-flow-step__alt-row {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem 0.4rem 0;
  margin-top: 0.25rem;
}

.vertical-flow-step__alt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
}

.vertical-flow-step__alt-icon svg {
  width: 1rem;
  height: 1rem;
}

.vertical-flow-step__alt-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vertical-flow-step__alt-label {
  font-size: var(--text-small);
  color: var(--color-gray-800);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Vertical flow rendered directly in the canvas — Pillars 1+3 Workflow tab
   retrofit. Reuses .vertical-flow-step per-row styles; introduces parallel
   wrapper classes so the canvas variant is independently styleable from the
   modal-mounted overlay variant.
   --------------------------------------------------------------------------- */

.workflow-tab__canvas:has(.vertical-flow-canvas) {
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1.25rem;
}

.vertical-flow-canvas {
  width: 100%;
  max-width: 720px;
  position: relative;
}

.vertical-flow-canvas__actor {
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  padding-left: 0.65rem;
}

.vertical-flow-canvas__anchor {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.vertical-flow-canvas__anchor::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.65rem;
  border-radius: 999px;
  background: var(--color-gray-400);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-gray-300);
}

.vertical-flow-canvas__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vertical-flow-canvas__steps::before {
  content: '';
  position: absolute;
  left: 1.05rem; /* horizontal center of the 2.1rem-wide icon tile */
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--color-gray-200);
  z-index: 0;
}

/* ============================================================================
   Feedback affordance — universal twin-output card footer (👍 / 👎) + 3-step
   thumbs-down panel + confirmation row. Per feedback_capability.md Section 3.
   Renderers: js/components.js. Wiring: js/feedback.js.
   ============================================================================ */

.feedback-footer {
  margin-top: 1rem;
  padding-top: 0.625rem;
  border-top: 1px dashed var(--color-gray-200);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
}

/* Artifact-level feedback host — used on the PCS (Stage 4). The artifact
   itself has no overall padding (its slots own theirs), so the host
   provides horizontal + bottom padding for the footer + panel. The
   border-top reads as a visual divider from the action bar's gray strip
   above. */
.feedback-host {
  display: block;
}

.feedback-host--artifact {
  padding: 0 1.75rem 1rem;
}

.feedback-host--artifact .feedback-footer {
  margin-top: 0;
  padding-top: 0.875rem;
  border-top: none;
}

.feedback-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.feedback-btn:hover:not(:disabled) {
  color: var(--color-gray-800);
  background: var(--color-gray-100);
}

.feedback-btn:disabled {
  cursor: default;
}

.feedback-btn i {
  width: 16px;
  height: 16px;
}

.feedback-btn.is-active.feedback-btn--up {
  color: var(--color-amber-500);
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
}

.feedback-btn.is-active.feedback-btn--down {
  color: var(--color-amber-500);
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
}

@keyframes feedback-up-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  50%  { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.feedback-btn.is-pulsing {
  animation: feedback-up-pulse 400ms ease-out;
}

/* Panel — appended below the card after thumbs-down click. Quieter chrome
   than the cards above (per brief Section 3): thinner accent stripe, smaller
   padding, smaller header. */
.feedback-panel {
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--color-amber-50);
  border: 1px solid var(--color-amber-200);
  border-left: 2px solid var(--color-amber-500);
  border-radius: var(--radius);
}

.feedback-panel__header {
  font-size: var(--text-small);
  font-style: italic;
  color: var(--color-gray-600);
  margin-bottom: 0.625rem;
}

.feedback-panel__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.feedback-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-gray-700);
  border-radius: 999px;
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.feedback-pill:hover {
  border-color: var(--color-amber-500);
  color: var(--color-amber-900);
  background: var(--color-amber-50);
}

.feedback-panel__category-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  margin-bottom: 0.625rem;
  border: none;
  background: transparent;
  color: var(--color-gray-700);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.feedback-panel__category-link:hover {
  color: var(--color-amber-900);
}

.feedback-panel__category-link i {
  width: 14px;
  height: 14px;
}

.feedback-panel__category-link--locked {
  cursor: default;
  color: var(--color-gray-600);
}

.feedback-panel__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-gray-800);
  font-family: inherit;
  font-size: var(--text-small);
  line-height: 1.5;
  resize: vertical;
}

.feedback-panel__textarea:focus {
  outline: none;
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 2px var(--color-amber-100);
}

.feedback-panel__textarea-readonly {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-gray-700);
  font-size: var(--text-small);
  line-height: 1.5;
  white-space: pre-wrap;
}

.feedback-panel__actions {
  margin-top: 0.625rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
}

.feedback-panel__cancel {
  border: none;
  background: transparent;
  color: var(--color-gray-600);
  font-size: var(--text-small);
  cursor: pointer;
}

.feedback-panel__cancel:hover {
  color: var(--color-gray-900);
  text-decoration: underline;
}

.feedback-panel__submit {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-amber-500);
  background: var(--color-amber-500);
  color: var(--color-white);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.feedback-panel__submit:hover {
  background: var(--color-amber-600, #d97706);
  border-color: var(--color-amber-600, #d97706);
}

/* Confirmation row — green check + tier-specific copy. Lives inside the panel
   after submit; the panel persists in confirmed state for the rest of the
   session (matches Pillar 1 HITL resolved-state pattern). */
.feedback-confirmation {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-amber-200);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--color-gray-700);
  font-size: var(--text-small);
  line-height: 1.5;
}

.feedback-confirmation i {
  width: 16px;
  height: 16px;
  color: var(--color-green-600);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.feedback-confirmation strong {
  color: var(--color-gray-900);
}

.feedback-panel--confirmed .feedback-panel__category-link--locked {
  margin-bottom: 0.5rem;
}

/* ============================================================================
   Analysis dropdown — top-left of every workflow detail page's Analyses tab.
   Switches the rendered analysis on the workflow. Trigger shows the currently-
   open analysis's badges + title + chevron. Panel drops below on click; rows
   carry capability badges, title, summary, recency hint. Selected row gets a
   left accent stripe + bg-blue-50.
   ============================================================================ */
.analysis-dropdown {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.analysis-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  color: var(--color-gray-700);
  cursor: pointer;
  transition:
    border-color var(--transition-standard) ease,
    box-shadow   var(--transition-standard) ease;
  text-align: left;
  max-width: min(640px, 100%);
}

.analysis-dropdown__trigger:hover {
  border-color: var(--color-gray-400);
}

.analysis-dropdown__trigger:focus-visible {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.analysis-dropdown.is-open .analysis-dropdown__trigger {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.analysis-dropdown__trigger-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.analysis-dropdown__trigger-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analysis-dropdown__chevron {
  width: 16px;
  height: 16px;
  color: var(--color-gray-500);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform var(--transition-standard) ease;
}

.analysis-dropdown.is-open .analysis-dropdown__chevron {
  transform: rotate(180deg);
}

.analysis-dropdown__panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: 420px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  z-index: 30;
  padding: 0.25rem;
}

.analysis-dropdown__row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-small);
  color: var(--color-gray-700);
  transition: background var(--transition-standard) ease;
}

.analysis-dropdown__row:hover {
  background: var(--color-gray-50);
}

.analysis-dropdown__row--selected {
  background: var(--color-blue-50);
  border-left-color: var(--color-blue-500);
}

.analysis-dropdown__row--selected:hover {
  background: var(--color-blue-50);
}

/* Phase 4 — non-selected rows go disabled while a run is active in the
   currently-selected analysis. Selected row stays at full opacity (anchor
   for what's playing). */
.analysis-dropdown__row--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.analysis-dropdown__row--disabled:hover {
  background: transparent;
}

.analysis-dropdown__row-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.analysis-dropdown__row-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.analysis-dropdown__row-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analysis-dropdown__row-summary {
  font-size: var(--text-meta);
  color: var(--color-gray-500);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analysis-dropdown__row-recency {
  font-size: var(--text-meta);
  color: var(--color-gray-400);
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

/* ============================================================================
   Analysis empty / unknown state — placeholder for analyses with no
   contentRef (metadata-only seeds). Quiet, low-chrome card. Repeats the
   analysis title + summary so the surface still reads as a real artifact,
   just one the demo doesn't exercise.
   ============================================================================ */
.analysis-empty-state {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.analysis-empty-state__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: var(--text-meta);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.analysis-empty-state--unknown .analysis-empty-state__chip {
  background: var(--color-yellow-100);
  color: var(--color-yellow-800);
}

.analysis-empty-state__title {
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  line-height: 1.4;
}

.analysis-empty-state__summary {
  font-size: var(--text-body);
  color: var(--color-gray-600);
  line-height: 1.5;
}

.analysis-empty-state__note {
  font-size: var(--text-small);
  color: var(--color-gray-500);
  line-height: 1.5;
  font-style: italic;
}