/* ────────────────────────────────────────────────────────────
   File Streaming Tutorial · Extra styles
   Builds on tutorial.css. Only adds streaming-specific bits.
   ──────────────────────────────────────────────────────────── */

/* ── History timeline (§2) ── reuses .timeline-block from job-tutorial.css ── */

/* ── Storage hierarchy bar chart (§3) ── */
.storage-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
  font-family: var(--mono);
  font-size: 0.88rem;
}
.storage-table th, .storage-table td {
  padding: 0.55rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--tut-border-soft);
  color: var(--tut-soft);
}
.storage-table th {
  color: var(--tut-text);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--tut-surface);
}
.storage-table tr:last-child td { border-bottom: 0; }
.storage-table td.bar {
  position: relative;
  width: 40%;
  padding: 0.55rem 0.8rem;
}
.storage-table td.bar > span.bar-fill {
  display: inline-block;
  height: 14px;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--tut-accent) 0%, var(--tut-info) 100%);
  border-radius: 3px;
}

/* ── DAG / pipeline SVG diagrams ── */
.pipe-diagram {
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
}

/* ── Playground layout (§14) ── mirrors job tutorial ── */
#widget-stream-playground .playground-body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.75rem;
}
.playground-right-stream {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.6rem;
  height: 100%;
  min-width: 0;
}
.playground-right-stream canvas {
  background: #07070d;
  border-radius: 6px;
  border: 1px solid var(--tut-border-soft);
  width: 100%;
  display: block;
}
@media (max-width: 760px) {
  #widget-stream-playground .playground-body { grid-template-columns: 1fr; }
  .playground-right-stream canvas { aspect-ratio: 2 / 1; }
}

/* ── Toggle button active states (per-widget colors match job tutorial pattern) ── */
#widget-sync-vs-async .toggle-group button.active,
#widget-decomp .toggle-group button.active,
#widget-cache .toggle-group button.active,
#widget-svt .toggle-group button.active {
  color: var(--tut-accent);
  border-color: var(--tut-accent);
}

/* The decomp widget has many codec toggles; let them wrap on narrow widths. */
#widget-decomp .toggle-group {
  flex-wrap: wrap;
  max-width: 100%;
}

/* ── Stat-grid override so storage-latency and decomp widgets show three+ wide ── */
#widget-latency .stat-grid,
#widget-decomp .stat-grid,
#widget-cache .stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* ── DAG widget canvas backgrounds match the job tutorial look ── */
#widget-svt canvas,
#widget-cluster canvas,
#widget-priority canvas,
#widget-cache canvas,
#widget-latency canvas,
#widget-iouring canvas,
#widget-decomp canvas,
#widget-sync-vs-async canvas,
#widget-hitch canvas {
  background: #07070d;
}

/* ── Tutorial card background for the index page ── */
.tut-card-visual.stream-bg {
  background: linear-gradient(135deg, #0e2e3f 0%, #145560 35%, #1a7a6a 70%, #0d5a4a 100%);
  position: relative;
  overflow: hidden;
}
.tut-card-visual.stream-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 75%, rgba(52, 211, 153, 0.30), transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(96, 165, 250, 0.22), transparent 45%);
  pointer-events: none;
}
.tut-card-visual.stream-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}