/*
 * imit8 forensics frontend — styles (F3A).
 * Reuses design tokens from index.html where applicable.
 */

:root {
  /* ─── v1.0 tokens (Phase A plumbing) per docs/design/DESIGN.md ───
     Editorial-mechanical type pair (Fraunces / Inter Tight / JetBrains Mono);
     terracotta accent-emphasis for editorial chrome; signature easing curve. */
  --color-surface-canvas:           #06090f;
  --color-surface-card:             #0e131c;
  --color-surface-card-elevated:    #141b27;
  --color-text-primary:             #e8edf5;
  --color-text-soft:                #c7d0dd;
  --color-text-muted:               #8a96a8;
  --color-action-primary:           #7dd3fc;
  --color-action-primary-strong:    #38bdf8;
  --color-action-primary-soft:      rgba(125, 211, 252, 0.10);
  --color-accent-emphasis:          #c47a6e;
  --color-accent-emphasis-soft:     rgba(196, 122, 110, 0.14);
  --color-border-subtle:            rgba(125, 211, 252, 0.16);
  --color-border-strong:            rgba(125, 211, 252, 0.30);
  --color-border-emphasis:          rgba(196, 122, 110, 0.28);
  --color-status-success:           #34d399;
  --color-status-error:             #f87171;
  --color-glow-elevated:            rgba(56, 189, 248, 0.18);
  --ease-signature: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-snap:      cubic-bezier(0.5, 1.4, 0.5, 1);
  --duration-quick:   180ms;
  --duration-medium:  340ms;
  --rounded-sharp: 2px;
  --rounded-md:    6px;
  --rounded-lg:    10px;
  --rounded-xl:    14px;

  /* v0.x compat aliases — existing CSS rules below render unchanged. */
  --color-bg: var(--color-surface-canvas);
  --color-bg-card: var(--color-surface-card);
  --color-bg-pillar: #0f1521;
  --color-fg: var(--color-text-primary);
  --color-fg-muted: var(--color-text-muted);
  --color-accent: var(--color-action-primary);
  --color-accent-strong: var(--color-action-primary-strong);
  --color-accent-magenta: #f472b6;
  --color-border: rgba(125, 211, 252, 0.16);
  --color-code: var(--color-surface-card-elevated);
  --color-success: var(--color-status-success);
  --color-warn: #fbbf24;
  --color-error: var(--color-status-error);

  /* Typography — v1.0 single-family discipline (Geist + Geist Mono). */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    'JetBrains Mono', 'JetBrains Mono', "SF Mono", Monaco, Menlo, Consolas, monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 32px;

  /* Layout */
  --header-height: auto;
  --footer-height: auto;
  --timeline-width: minmax(260px, 340px);
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

/* v1.0 editorial-mechanical handoff: Fraunces on h1/h2/h3, Inter Tight body,
   JetBrains Mono for code/build-IDs/numerics. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
}
code, pre, .build-id, .numeric, .step-cost {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}
a, button { transition-timing-function: var(--ease-signature); }

body {
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

code, pre, .mono {
  font-family: var(--font-mono);
  background: var(--color-code);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
}
pre {
  padding: var(--space-3);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -40px;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--space-2);
}

/* ---------- Header (build meta strip) ---------- */

.build-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4);
  background: var(--color-bg-card);
}
.build-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.build-header .logo {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.build-header .logo span.dot { color: var(--color-accent); }
.product-tag {
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 1px;
}
.back-link {
  font-size: 0.9rem;
  color: var(--color-fg-muted);
}

.build-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 720px) {
  .build-meta { grid-template-columns: 2fr 2fr 1fr 1fr; }
}
.meta-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.meta-cell dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-fg-muted);
  margin: 0;
}
.meta-cell dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* ---------- Build axes cluster (S67 webui-B-028) ----------
   DESIGN.md-compliant data surface: sharp radius (rounded.sharp = 2px,
   "data surfaces are sharp by rule"), eyebrow typography on the axis name,
   mono on the value (numeric/data convention), border-subtle + transparent
   ground (no glow, no shadow per "borders only on cards" rule), no new
   color vocabulary. Treated as secondary metadata (smaller than .build-meta).
   Cluster hidden via `hidden` attribute until JS populates it. */
.build-axes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.build-axes[hidden] { display: none; }
.axis-cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 4px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--rounded-sharp);
  background: transparent;
  cursor: help; /* title-attribute tooltip surfaces on hover/focus */
  min-width: 0;
}
.axis-cell dt {
  margin: 0;
  font-family: var(--typography-eyebrow-fontfamily);
  font-size: 0.66rem;
  font-weight: var(--typography-eyebrow-fontweight);
  letter-spacing: var(--typography-eyebrow-letterspacing);
  text-transform: var(--typography-eyebrow-texttransform);
  font-feature-settings: var(--typography-eyebrow-fontfeaturesettings);
  color: var(--color-fg-muted);
  white-space: nowrap;
}
.axis-cell dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-feature-settings: "tnum", "zero";
  color: var(--color-text-soft, var(--color-fg));
  white-space: nowrap;
}
@media (max-width: 520px) {
  .build-axes { gap: var(--space-1); }
  .axis-cell { padding: 3px 8px; }
  .axis-cell dt { font-size: 0.62rem; }
  .axis-cell dd { font-size: 0.80rem; }
}

/* ---------- Main grid ---------- */

.forensics-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 0;
}
@media (min-width: 720px) {
  .forensics-grid {
    grid-template-columns: var(--timeline-width) 1fr;
  }
}

.pane-title {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-fg-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-pillar);
}

/* ---------- Timeline (left column) ---------- */

.timeline {
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 200px);
}
@media (max-width: 719px) {
  .timeline {
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.event {
  border-bottom: 1px solid var(--color-border);
}
.event-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--color-fg);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.event-btn:hover {
  background: var(--color-bg-pillar);
}
.event-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.event[aria-selected="true"] .event-btn,
.event-btn.is-selected {
  background: var(--color-bg-pillar);
  border-left-color: var(--color-accent);
}
.event-agent {
  font-weight: 600;
  color: var(--color-accent);
}
.event-verdict {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.event-verdict.pass { background: rgba(52, 211, 153, 0.15); color: var(--color-success); }
.event-verdict.warn { background: rgba(251, 191, 36, 0.15); color: var(--color-warn); }
.event-verdict.fail { background: rgba(248, 113, 113, 0.15); color: var(--color-error); }

.event-meta {
  margin-top: var(--space-1);
  font-size: 0.78rem;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
}

/* ---------- Step detail (right pane) ---------- */

.step-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.step-detail-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
  max-height: calc(100vh - 200px);
}
@media (max-width: 719px) {
  .step-detail-body {
    max-height: none;
  }
}
.step-detail-body h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
  color: var(--color-accent);
}
.step-detail-body dl {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}
.step-detail-body dt {
  color: var(--color-fg-muted);
  font-size: 0.85rem;
}
.step-detail-body dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* ---------- Footer (cost roll-up) ---------- */

.cost-rollup {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-card);
  padding: var(--space-3) var(--space-4);
}
.cost-rollup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
}
@media (min-width: 720px) {
  .cost-rollup-grid { grid-template-columns: repeat(3, 1fr); }
}
.cost-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cost-cell dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-fg-muted);
  margin: 0;
}
.cost-cell dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-fg);
}

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

.empty-state {
  color: var(--color-fg-muted);
  font-style: italic;
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

/* ---------- Demo mode banner (S53 follow-up) ---------- */

.demo-banner {
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.18) 0%, rgba(244, 114, 182, 0.12) 100%);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg);
  text-align: center;
  padding: 8px 16px;
  font-size: 0.88rem;
  letter-spacing: 0.2px;
}

/* ---------- Build picker (S53 follow-up #3 — dropdown to switch builds) ---------- */

.build-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.build-picker-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-fg-muted);
}
.build-picker-select {
  background: var(--color-bg-pillar);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 28px 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-fg-muted) 50%),
                    linear-gradient(135deg, var(--color-fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  max-width: 380px;
  text-overflow: ellipsis;
}
.build-picker-select:hover,
.build-picker-select:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-fg);
  outline: none;
}
/* S69 — searchable filter input. Mirrors .build-picker-select styling
   so the two controls sit side-by-side as a single visual group. */
.build-picker-filter {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-elev);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  color: var(--color-fg-muted);
  font-family: inherit;
  font-size: 0.85rem;
  width: 140px;
  transition: border-color 120ms ease;
}
.build-picker-filter:hover,
.build-picker-filter:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-fg);
  outline: none;
}
@media (max-width: 719px) {
  .build-picker { width: 100%; margin-top: var(--space-2); }
  .build-picker-select { flex: 1; max-width: none; }
  .build-header-row { flex-wrap: wrap; gap: var(--space-2); }
}

/* ---------- Step-detail rich rendering (S53 follow-up #3 — input/output chain) ---------- */

.step-summary {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-pillar);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-fg);
  font-size: 0.95rem;
  line-height: 1.55;
}

.step-section {
  margin-top: var(--space-4);
}
.step-section h4 {
  margin: 0 0 var(--space-2);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-fg-muted);
  font-weight: 700;
}

.artifact {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: 0.88rem;
}
.artifact-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.artifact-name {
  font-family: var(--font-mono);
  color: var(--color-accent);
  font-weight: 600;
}
.artifact-kind {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(125, 211, 252, 0.1);
  color: var(--color-accent);
  padding: 2px 8px;
  border-radius: 999px;
}
.artifact-from {
  font-size: 0.78rem;
  color: var(--color-fg-muted);
  font-style: italic;
}
.artifact-from .from-agent {
  font-style: normal;
  color: var(--color-warn);
  font-weight: 600;
  font-family: var(--font-mono);
}
.artifact-from .from-user {
  font-style: normal;
  color: var(--color-success);
  font-weight: 600;
}
.artifact-preview {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-fg);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  line-height: 1.5;
}
.artifact-preview.empty {
  color: var(--color-fg-muted);
  font-style: italic;
}

.scorer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.scorer-cell {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.scorer-cell dt {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-fg-muted);
}
.scorer-cell dd {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--color-fg);
}

.verdict-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.verdict-pill.passed { background: rgba(52, 211, 153, 0.15); color: var(--color-success); }
.verdict-pill.failed { background: rgba(248, 113, 113, 0.15); color: var(--color-error); }
.verdict-pill.skipped { background: rgba(139, 149, 163, 0.15); color: var(--color-fg-muted); }

.step-meta-grid {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
}

/* ---------- Concept 4 logo (digit 8 ↔ ∞ rotating with pause) ---------- */
/* Default logo across all init8.ai pages. The .dot span carries the
   rotating-8 glyph; gradient via background-clip:text, animation pivots
   around the glyph's optical center via transform-box: fill-box. */
@keyframes spin-pause {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
.logo .dot {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  animation: spin-pause 5.5s linear infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  margin-left: 0.12em;
}
@media (prefers-reduced-motion: reduce) {
  .logo .dot { animation: none; }
}

/* ===== Mobile breakpoint (≤520px, Session 55) =====
   Touch targets ≥44px (WCAG 2.5.5 enhanced); tightened paddings; dropdown
   stretches full width; back-link wraps below the build picker on narrow
   screens. Generic — adding a new header control inherits flex-wrap. */
@media (max-width: 520px) {
  .build-header { padding: var(--space-3); }
  .build-header-row { flex-direction: column; align-items: stretch; }
  .logo { font-size: 1.4rem; }
  .build-picker { width: 100%; }
  .build-picker-select { min-height: 44px; padding: 10px 12px; font-size: 0.95rem; }
  .back-link { min-height: 44px; padding: 10px 0; }
  .build-meta { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .forensics-grid { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-3); }
  .pane-title { font-size: 1.05rem; }
  .timeline-list .event-btn { min-height: 48px; padding: 10px 12px; }
  .step-detail-body { padding: var(--space-3); font-size: 0.9rem; }
  .cost-rollup-grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ===== Auth pill (S64 Phase 1.6) ===== */
.auth-pill { display: inline-flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--color-text-muted); margin-left: auto; }
.auth-pill .auth-pill-action { background: transparent; border: 1px solid var(--color-border-subtle); border-radius: 999px; padding: 4px 12px; color: var(--color-text-primary); cursor: pointer; font-size: 0.85rem; font-family: var(--font-body); }
.auth-pill .auth-pill-action:hover { background: var(--color-action-primary-soft); border-color: var(--color-action-primary); }
.auth-pill .auth-pill-primary { background: var(--color-action-primary); color: var(--color-surface-canvas); border-color: var(--color-action-primary); font-weight: 600; }
.auth-pill .auth-pill-user { font-weight: 600; color: var(--color-text-primary); }
.auth-pill .auth-pill-demo { color: var(--color-accent-emphasis); font-style: italic; font-size: 0.78rem; }
.auth-pill .auth-pill-sep { opacity: 0.4; }

/* ===== Tenant overview header (S66 work-item 7α) ============================
 * Per-tenant aggregate over GET /v1/dashboard/summary. Token-bound — never
 * hex literals, never hardcoded sizes (uses the --space-* and --color-*
 * tokens declared above). Skeleton placeholders are visible while
 * data-state="loading"; the JS flips data-state="ready" / "empty" / "error"
 * to swap visibility. */
.tenant-overview {
  margin: var(--space-3) var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--rounded-md);
}
.tenant-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}
.tenant-overview-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.tenant-overview-cell dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tenant-overview-cell dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-feature-settings: "tnum", "zero";
}
.tenant-overview-value { display: inline-block; min-width: 1.5em; }
.tenant-overview-features dd { font-size: 0.9rem; font-weight: 500; }
.top-features-list {
  list-style: decimal inside;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-soft);
}
.top-features-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 0;
}
.top-features-list li .feature-count {
  color: var(--color-text-muted);
  margin-left: var(--space-1);
  font-size: 0.78rem;
}

/* Sparkline — pure CSS bars, no SVG dependency. The JS appends one
 * <span class="sparkline-bar"> per weekly bucket; height is set via
 * inline style (data-driven) but the *color* + radius + transition
 * stay in tokens. */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  width: 100%;
  min-width: 80px;
}
.sparkline-bar {
  flex: 1 1 0;
  min-width: 6px;
  background: var(--color-action-primary);
  border-radius: var(--rounded-sharp);
  opacity: 0.75;
  transition: opacity var(--duration-quick) var(--ease-signature);
}
.sparkline-bar:hover { opacity: 1; }
.sparkline-bar.is-empty {
  background: var(--color-border-subtle);
  opacity: 0.5;
}

/* Skeleton placeholders — token-based shimmer. Hidden when data-state="ready". */
.skeleton-block {
  display: inline-block;
  height: 1.35rem;
  width: 4ch;
  background: linear-gradient(90deg,
    var(--color-border-subtle) 0%,
    var(--color-border-strong) 50%,
    var(--color-border-subtle) 100%);
  background-size: 200% 100%;
  border-radius: var(--rounded-sharp);
  animation: tenant-overview-shimmer 1.4s linear infinite;
}
.skeleton-block.sparkline-skeleton { width: 100%; height: 36px; }
.skeleton-block.top-features-skeleton { width: 100%; height: 4rem; }
@keyframes tenant-overview-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; }
}

/* State-machine: show skeletons while loading, hide them once ready/empty. */
.tenant-overview[data-state="loading"] .tenant-overview-value,
.tenant-overview[data-state="loading"] .sparkline,
.tenant-overview[data-state="loading"] .top-features-list { display: none; }
.tenant-overview[data-state="ready"] .skeleton-block,
.tenant-overview[data-state="empty"] .skeleton-block,
.tenant-overview[data-state="empty"] .tenant-overview-grid { display: none; }

.tenant-overview-empty {
  margin: var(--space-2) 0 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.tenant-overview-empty a {
  color: var(--color-action-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
}
.tenant-overview-empty a:hover { border-bottom-color: var(--color-action-primary); }

@media (max-width: 720px) {
  .tenant-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .tenant-overview-sparkline,
  .tenant-overview-features { grid-column: span 2; }
}
@media (max-width: 520px) {
  .tenant-overview { margin: var(--space-2) var(--space-3); padding: var(--space-3); }
  .tenant-overview-grid { grid-template-columns: 1fr; }
  .tenant-overview-sparkline,
  .tenant-overview-features { grid-column: span 1; }
}

/* S71 (ADR-199 Phase A) — discrete "limited view" banner shown only when
   the payload was redacted server-side (_redacted === true). Visual tone:
   informational, not alarming — softer than the failed banner. */
.build-redacted-banner {
  margin: var(--space-3) 0 0;
  padding: var(--space-2, 10px) var(--space-3, 14px);
  border-left: 2px solid var(--color-border-subtle);
  background: var(--color-action-primary-soft);
  border-radius: var(--rounded-sm, 4px);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* S78 F3 — Hide the Limited-view banner when the build-header is in the
   "full" tier (admin / build-owner view, no `_redacted` flag on payload).
   Attribute-driven so the banner can NEVER flash during auth resolution —
   the data attribute is set once at render time alongside the banner
   mount. Generic — no per-role client branching; the payload sidecar
   IS the signal. */
[data-forensics-tier="full"] .forensics-limited-view-banner,
[data-forensics-tier="full"] #build-redacted-banner {
  display: none;
}

/* S70 — build-failed banner (BuildForensics.is_terminal_failed). Mounted
   under #build-header for failed builds so the user immediately sees the
   final-state regardless of how the rollup verdicts shook out. */
.build-failed-banner {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-error);
  background: rgba(179, 38, 30, 0.06);
  border-radius: 4px;
  color: var(--color-text-default);
}
.build-failed-banner-head {
  font-weight: 600;
  color: var(--color-error);
  margin-bottom: var(--space-1, 6px);
}
.build-failed-banner-meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2, 10px);
}
.build-failed-banner-message {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.04);
  padding: var(--space-2, 10px) var(--space-3, 14px);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  max-height: 12em;
  overflow: auto;
  margin: 0;
}

/* S70 — per-call detail (BuildForensics.recent_calls). Collapsible
   <details> blocks under each agent's step-detail panel so real builds
   show prompt/response text as richly as the demo fixtures used to. */
.step-recent-calls .recent-call {
  margin: var(--space-2, 10px) 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: var(--space-2, 10px) var(--space-3, 14px);
  background: var(--color-surface-raised, transparent);
}
.step-recent-calls .recent-call > summary {
  cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.step-recent-calls .recent-call > summary:hover {
  color: var(--color-text-default);
}
.step-recent-calls .recent-call h5 {
  margin: var(--space-2, 10px) 0 var(--space-1, 6px);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.recent-call-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.04);
  padding: var(--space-2, 10px) var(--space-3, 14px);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  max-height: 24em;
  overflow: auto;
  margin: 0;
}
.recent-call-error {
  margin: var(--space-2, 10px) 0;
  color: var(--color-error);
}
.recent-call-error-text {
  border-left: 3px solid var(--color-error);
}

/* S74 — demo / real toggle button next to the build picker. Token-bound;
   no hex literals. Mirrors the .build-picker-filter visual weight. */
.forensics-demo-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1, 6px) var(--space-3, 12px);
  background: transparent;
  border: 1px solid var(--color-border-subtle, var(--color-border-hairline));
  border-radius: var(--rounded-md, 6px);
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: var(--space-2, 8px);
}
.forensics-demo-toggle:hover {
  color: var(--color-action-primary);
  background-color: var(--color-action-primary-soft);
}
.forensics-demo-toggle[aria-pressed="true"] {
  color: var(--color-action-primary);
  background-color: var(--color-action-primary-soft);
  border-color: var(--color-action-primary);
}

/* S74 — mobile build_id overflow fix. On narrow screens, long build
   ids previously overflowed the viewport. These rules let the id wrap
   inside the meta cell and constrain the picker dropdown to its
   container width. */
@media (max-width: 720px) {
  .build-meta dd,
  #build-id,
  #feature-id {
    overflow-wrap: anywhere;
    word-break: break-all;
    max-width: 100%;
  }
  .build-picker {
    max-width: 100%;
    flex-shrink: 1;
  }
  .build-picker-select {
    max-width: 100%;
    flex-shrink: 1;
  }
}

/* ----------------------------------------------------------------
   S75-77 BUG-3 — Progress summary + artifact-kinds chips.
   Renders under #build-header for external (non-admin) views.
   Without these styles the elements degrade to default browser
   styling (no padding, no separator) — user-reported "still looks
   basic" symptom. Token-driven (no hex literals) per DESIGN.md.
   ---------------------------------------------------------------- */

.build-progress-summary {
  display: inline-block;
  margin: 12px 0 4px 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-action-primary-soft, rgba(125, 211, 252, 0.10));
  border: 1px solid var(--color-action-primary, rgba(125, 211, 252, 0.40));
  color: var(--fg, inherit);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.build-artifact-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px 0 12px 0;
  font-size: 0.88rem;
  color: var(--fg-muted, inherit);
}

.build-artifact-kinds .label {
  font-weight: 500;
  margin-right: 4px;
  color: var(--fg, inherit);
}

.build-artifact-kinds .chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-elev, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.10));
  color: var(--fg-muted, inherit);
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* Per-agent tier_used chip rendered in the timeline row meta line. */
.agent-tier-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-elev, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--fg-muted, inherit);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Per-step progress label (Done / Failed / Not run) in the planned-
   pipeline list — distinct color signals per state. */
.step-progress-label {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.step-progress-label.done    { color: var(--color-success); }
.step-progress-label.failed  { color: var(--color-danger); }
.step-progress-label.not-run { color: var(--fg-muted); }
.step-progress-label.running { color: var(--color-action-primary); }