/* RaceSection — Cold-Start Race + Stateful Reliability
   Two ASCII consoles per sub-section, scoreboard timer, comparison strip. */

.rc-block { padding-top: 8px; }
.rc-block + .rc-block { padding-top: 64px; }
.rc-divider {
  margin: 80px 0 0;
  height: 1px;
  background: var(--rule-strong);
  position: relative;
}
.rc-divider::before, .rc-divider::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px; height: 7px;
  background: var(--bg-0);
  border: 1px solid var(--rule-strong);
}
.rc-divider::before { left: 0; }
.rc-divider::after  { right: 0; }

/* Controls row — flush with the grid below; no detached top/bottom rules */
.rc-controls {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  border: 1px solid var(--rule);
  border-bottom: none;
  padding: 10px 14px;
  background: var(--bg-1);
}
.rc-controls__l { display: flex; gap: 10px; }
.rc-controls__r {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.rc-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-1);
  color: var(--fg-1);
  border: 1px solid var(--rule);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.rc-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.rc-btn__kbd { color: var(--fg-3); margin-right: 4px; }

/* Phase timeline (sub-section 03B) — flush, shares borders with rc-controls + rc-grid */
.rc-phases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--rule);
  border-top: none;
  font-family: var(--font-mono);
}
.rc-phase {
  padding: 12px 14px;
  font-size: 11px;
  border-right: 1px solid var(--rule);
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--fg-3);
  transition: background 200ms, color 200ms, border-color 200ms;
  position: relative;
}
.rc-phase:last-child { border-right: none; }
.rc-phase__pip {
  width: 8px; height: 8px;
  background: var(--rule-strong);
  display: inline-block;
  flex-shrink: 0;
}
.rc-phase__id { color: var(--fg-3); letter-spacing: 0.06em; }
.rc-phase__label { color: var(--fg-2); letter-spacing: 0.08em; }
.rc-phase.is-on .rc-phase__label { color: var(--fg-1); }

/* Active state — color tinted by tone (good = blue, bad = red, warn = amber) */
.rc-phase.is-active.is-tone-good {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.rc-phase.is-active.is-tone-good .rc-phase__id,
.rc-phase.is-active.is-tone-good .rc-phase__label { color: var(--accent); }
.rc-phase.is-active.is-tone-good .rc-phase__pip { background: var(--accent); }

.rc-phase.is-active.is-tone-bad {
  background: var(--bad-tint);
  border-color: var(--bad);
}
.rc-phase.is-active.is-tone-bad .rc-phase__id,
.rc-phase.is-active.is-tone-bad .rc-phase__label { color: var(--bad); }
.rc-phase.is-active.is-tone-bad .rc-phase__pip { background: var(--bad); }

.rc-phase.is-active.is-tone-warn {
  background: rgba(180, 83, 9, 0.10);
  border-color: var(--warn);
}
.rc-phase.is-active.is-tone-warn .rc-phase__id,
.rc-phase.is-active.is-tone-warn .rc-phase__label { color: var(--warn); }
.rc-phase.is-active.is-tone-warn .rc-phase__pip { background: var(--warn); }

/* Two-up grid — flush against the controls/phase row above */
.rc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--bg-1);
}
.rc-grid > * + * { border-left: 1px solid var(--rule); }
/* When grid follows controls or phases directly, share the top border */
.rc-controls + .rc-grid,
.rc-phases + .rc-grid { border-top: none; }

.rc-console { display: flex; flex-direction: column; }
.rc-console__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rc-console__label { color: var(--fg-1); font-weight: 500; }
.rc-console__sub   { color: var(--fg-3); }
.rc-console__head-r {
  display: inline-flex; align-items: center; gap: 6px;
}
.rc-console__pip {
  width: 6px; height: 6px; display: inline-block;
}

.rc-console__time {
  display: flex; align-items: baseline;
  gap: 4px;
  padding: 16px 14px 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  position: relative;
}
.rc-console__time-big { font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
.rc-console__time-frac { font-size: 16px; opacity: 0.65; }
.rc-console__time--bad  .rc-console__time-big { color: var(--bad); }
.rc-console__time--bad  .rc-console__time-frac { color: var(--bad); }
.rc-console__time--good .rc-console__time-big { color: var(--accent); }
.rc-console__time--good .rc-console__time-frac { color: var(--accent); }
.rc-console__badge {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.rc-bar {
  margin: 0 14px;
  height: 8px;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  position: relative;
}
.rc-bar__fill {
  height: 100%;
  transition: width 120ms linear;
}
.rc-bar__fill--bad { background: var(--bad); }
.rc-bar__fill--good { background: var(--accent); }

.rc-log {
  margin: 12px 14px 14px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg-2);
  min-height: 200px;
  overflow: hidden;
  flex: 1;
}
.rc-log__line {
  white-space: pre;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 220ms, transform 220ms;
}
.rc-log__line.is-on { opacity: 1; transform: translateY(0); }
.rc-log__line.is-err  { color: var(--bad); }
.rc-log__line.is-warn { color: var(--warn); }
.rc-log__line.is-ready { color: var(--accent); font-weight: 500; }

/* Cell grids */
.rc-cellgrid {
  display: grid;
  grid-template-columns: repeat(8, max-content);
  gap: 8px;
  padding: 14px;
  font-family: var(--font-mono);
}
.rc-cellgrid--7 { grid-template-columns: repeat(7, max-content); }
.rc-cellgrid--8 { grid-template-columns: repeat(8, max-content); }
.rc-cell {
  font-size: 16px;
  width: 18px;
  text-align: center;
  line-height: 1;
  transition: color 200ms;
}
.rc-cell.is-good { color: var(--accent); }
.rc-cell.is-bad  { color: var(--bad); font-weight: 700; }
.rc-cell.is-warn { color: var(--warn); }
.rc-cell.is-empty { color: var(--fg-3); opacity: 0.5; }

/* Comparison strip */
.rc-compare {
  margin-top: 0;
  border: 1px solid var(--rule);
  border-top: none;
  background: var(--bg-1);
  padding: 14px 16px;
  font-family: var(--font-mono);
}
.rc-compare__row {
  display: grid;
  grid-template-columns: 110px 1fr 130px;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
}
.rc-compare__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
.rc-compare__track {
  height: 10px;
  background-color: var(--bg-3);
  background-image:
    repeating-linear-gradient(
      135deg,
      var(--rule) 0,
      var(--rule) 1px,
      transparent 1px,
      transparent 4px
    );
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.rc-compare__fill { height: 100%; transition: width 220ms cubic-bezier(.4,0,.2,1), background 220ms; }
.rc-compare__fill--bad { background: var(--bad); }
.rc-compare__fill--good { background: var(--accent); }
.rc-compare__val {
  font-size: 11px;
  color: var(--fg-1);
  text-align: right;
  letter-spacing: 0.04em;
}
.rc-compare__meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}
.rc-compare__meta b { color: var(--fg-0); font-weight: 500; }

@media (max-width: 920px) {
  .rc-grid { grid-template-columns: 1fr; }
  .rc-grid > * + * { border-left: none; border-top: 1px solid var(--rule); }
  .rc-phases { grid-template-columns: repeat(2, 1fr); }
  .rc-phase { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .rc-compare__row { grid-template-columns: 80px 1fr 100px; }
}