/* oscillator.css — Level 2 · The Oscillator chapter layout. Tokens from styles.css. */

.osc-stage {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px;
}
.osc-scene { min-width: 0; }
.osc-controls { display: flex; flex-direction: column; gap: 16px; }
.osc-controls .osc-ctrl-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}

.t555-wrap {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px;
}
.t555-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dotted var(--rule);
}

@media (max-width: 900px) {
  .osc-stage { grid-template-columns: 1fr; }
  .t555-grid { grid-template-columns: 1fr !important; }
  .t555-controls { grid-template-columns: 1fr; }
}

/* ── hands-on 555 wiring bench ─────────────────────────────────────────── */
.osc-bench {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px;
}
.osc-bench-board { min-width: 0; }
.osc-board-svg {
  display: block; width: 100%;
  background: var(--bg-deeper);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.osc-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.osc-chip {
  appearance: none; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg-card); color: var(--ink);
  border: 1.5px solid var(--rule-strong);
  transition: all 130ms ease;
}
.osc-chip:hover:not(:disabled) { border-color: var(--ink-soft); }
.osc-chip.sel { background: var(--current); color: var(--bg-card); border-color: var(--current); }
.osc-chip.used { opacity: 0.55; color: var(--current); border-color: var(--current); cursor: default; }
.osc-chip:disabled { cursor: default; }

.osc-bench-hint {
  margin-top: 12px; font-size: 14px; color: var(--ink-soft);
  min-height: 20px; line-height: 1.45;
}
.osc-bench-hint b { color: var(--current); }
.osc-hint-live { color: var(--current); font-weight: 600; }

.osc-bench-actions { display: flex; gap: 10px; margin-top: 14px; }
.osc-btn {
  flex: 1; appearance: none; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.03em;
  padding: 10px 12px; border-radius: 9px;
  background: var(--bg-card); color: var(--ink);
  border: 1px solid var(--rule-strong);
  transition: all 130ms ease;
}
.osc-btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.osc-btn.power { background: var(--current); color: var(--bg-card); border-color: var(--current); }
.osc-btn.power.on { background: var(--ink); border-color: var(--ink); }
.osc-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.osc-bench-side {
  background: var(--bg-deeper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  position: sticky; top: 86px;
}
.osc-check-title {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 12px;
}
.osc-check { list-style: none; margin: 0 0 16px; padding: 0; }
.osc-check li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 13.5px; color: var(--ink-soft);
  padding: 5px 0; transition: color 130ms ease;
}
.osc-check li.ok { color: var(--ink); }
.osc-check-mark { color: var(--rule-strong); font-weight: 700; width: 14px; flex: none; }
.osc-check li.ok .osc-check-mark { color: var(--current); }

.osc-scope-slot {
  border-top: 1px dotted var(--rule); padding-top: 14px;
  min-height: 220px;
}
.osc-scope-idle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; height: 200px;
  color: var(--ink-faint); font-size: 13.5px; padding: 0 12px;
}
.osc-scope-idle-mark { font-size: 40px; color: var(--rule-strong); }

@media (max-width: 900px) {
  .osc-bench { grid-template-columns: 1fr; }
  .osc-bench-side { position: static; }
}