/*
 * 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;
}

/* ---------- 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;
}
@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; }
}