/* Tabs across the top, then the program and its verdict beside the spiral, both
   columns running to the same height. */
.scene-recursion-spiral .spiral-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.scene-recursion-spiral .spiral-body {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 8px;
}

.scene-recursion-spiral .spiral-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scene-recursion-spiral .spiral-program {
  display: grid;
  align-content: start;
  gap: 10px;
}

.scene-recursion-spiral .spiral-programs[hidden] {
  display: none;
}

/* The two programs differ by two lines and the verdict grows a timer line when a run is
   killed, so both are reserved at their tallest and the figure keeps its height. */
.scene-recursion-spiral .spiral-side .spiral-code {
  flex: 1;
  min-height: 250px;
}

.scene-recursion-spiral .spiral-code {
  margin: 0;
  padding: 12px 16px;
  background: var(--surface-muted);
  border-radius: var(--radius);
  font-size: 0.84rem;
  line-height: 1.5;
}

.scene-recursion-spiral .spiral-controls {
  display: grid;
  align-content: start;
  gap: 12px;
}

.scene-recursion-spiral .spiral-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scene-recursion-spiral .spiral-k {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 0.9rem var(--mono);
}

.scene-recursion-spiral .spiral-k[hidden] {
  display: none;
}

.scene-recursion-spiral .spiral-k button {
  width: 34px;
  height: 30px;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 700 0.9rem var(--mono);
  cursor: pointer;
}

.scene-recursion-spiral .spiral-k button[aria-pressed="true"] {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
}

.scene-recursion-spiral .spiral-verdict {
  min-height: 92px;
  padding: 10px 14px;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.scene-recursion-spiral .spiral-result {
  margin: 0;
}

.scene-recursion-spiral .spiral-result code {
  padding: 0;
  background: none;
  border: 0;
  font-weight: 700;
}

.scene-recursion-spiral .spiral-timer {
  margin: 6px 0 0;
  color: var(--danger);
  font: 600 0.8rem var(--mono);
}

/* Drawn at 900 wide; capped below that so a wide window does not scale it up. */
.scene-recursion-spiral .spiral-svg {
  max-width: 700px;
  align-self: center;
}

.scene-recursion-spiral .turn-back {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
  stroke-dasharray: 5 6;
}

.scene-recursion-spiral .turn-front {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 5;
  stroke-linecap: round;
}

.scene-recursion-spiral .fading {
  opacity: 0.35;
}

.scene-recursion-spiral .call circle {
  fill: var(--surface);
  stroke: var(--primary);
  stroke-width: 2;
}

.scene-recursion-spiral .call text {
  fill: var(--primary);
  font: 700 10.5px var(--mono);
  text-anchor: middle;
}

.scene-recursion-spiral .spiral-more {
  fill: var(--text-faint);
  font: 700 13px var(--mono);
  text-anchor: middle;
}

.scene-recursion-spiral .band {
  stroke-width: 2;
}

.scene-recursion-spiral .band.own {
  fill: rgb(40 115 75 / 0.12);
  stroke: var(--success);
}

.scene-recursion-spiral .band.shared {
  fill: rgb(215 102 66 / 0.12);
  stroke: var(--accent);
}

.scene-recursion-spiral .chip rect {
  fill: var(--surface);
  stroke-width: 1.5;
}

.scene-recursion-spiral .chip.own rect {
  stroke: var(--success);
}
.scene-recursion-spiral .chip.shared rect {
  stroke: var(--accent);
}

.scene-recursion-spiral .chip line {
  stroke: var(--border-strong);
  stroke-dasharray: 3 3;
}

.scene-recursion-spiral .chip text {
  fill: var(--text);
  font: 700 12px var(--mono);
}

.scene-recursion-spiral .spiral-bridge path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-dasharray: 10 6;
}

.scene-recursion-spiral .spiral-bridge text {
  fill: var(--accent);
  font: 800 14px var(--mono);
  writing-mode: vertical-rl;
  text-anchor: middle;
}

.scene-recursion-spiral .spiral-caption {
  min-height: 4.8em;
}

.scene-recursion-spiral .spiral-table-title {
  margin-top: 16px;
}

.scene-recursion-spiral .spiral-table {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.scene-recursion-spiral .spiral-table th,
.scene-recursion-spiral .spiral-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.scene-recursion-spiral .spiral-table code {
  padding: 0;
  background: none;
  border: 0;
}

.scene-recursion-spiral .spiral-table td.none {
  color: var(--warning);
  font-weight: 700;
}

@media (max-width: 900px) {
  .scene-recursion-spiral .spiral-body {
    grid-template-columns: minmax(0, 1fr);
  }
}