/* Digital logic — breadboard styles. Shared chassis in ../../css/shared.css. */

.workbench {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(480px, 1fr) minmax(230px, 300px);
  gap: 0.9rem;
  padding: 0.9rem 1.2rem 1.2rem;
  align-items: start;
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
}

.workbench > section { min-width: 0; }

.toolbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* ---------- palette ---------- */

.palette-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  min-height: 2.2em;
}

.palette { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.pal-item { font-family: var(--mono); font-size: 0.72rem; padding: 0.3rem 0.6rem; }

.pal-empty { font-size: 0.72rem; color: var(--ink-soft); font-style: italic; }

/* ---------- the board (display inset) ---------- */

.board-host {
  background: var(--screen);
  border: 2px solid var(--screen-edge);
  border-radius: 8px;
  box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.55);
  overflow: hidden;
}

svg.board { display: block; width: 100%; height: auto; touch-action: none; }

svg.board:focus { outline: none; }

svg.board.has-cycle { filter: drop-shadow(0 0 6px rgb(178 58 44 / 0.8)); }

.grid-dot { fill: rgb(147 232 187 / 0.13); }

/* wires */
.wire {
  fill: none;
  stroke: var(--phosphor-dim);
  stroke-width: 2.5;
  cursor: pointer;
}

.wire.on {
  stroke: var(--phosphor);
  filter: drop-shadow(0 0 3px rgb(147 232 187 / 0.7));
}

.wire.selected { stroke: var(--amber); stroke-dasharray: 6 3; }

.wire-draft {
  stroke: var(--amber);
  stroke-dasharray: 5 4;
  pointer-events: none;
}

/* gates */
.comp { cursor: grab; }
.comp:active { cursor: grabbing; }

.stub { stroke: var(--phosphor-dim); stroke-width: 2; }

.gate-body {
  fill: #253023;
  stroke: var(--phosphor-soft);
  stroke-width: 2;
}

.comp.selected .gate-body,
.comp.selected .chip-body { stroke: var(--amber); }

.gate-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  fill: var(--phosphor);
  text-anchor: middle;
  pointer-events: none;
}

/* chips (ICs) */
.chip-body {
  fill: #1a211a;
  stroke: var(--phosphor-dim);
  stroke-width: 2;
}

.chip-notch { fill: none; stroke: var(--phosphor-dim); stroke-width: 2; }

.chip-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--phosphor);
  text-anchor: middle;
  pointer-events: none;
}

.pin-label {
  font-family: var(--mono);
  font-size: 8px;
  fill: var(--phosphor-dim);
  pointer-events: none;
}

.pin-label-out { text-anchor: end; }

/* pins */
.pin {
  fill: var(--screen);
  stroke: var(--phosphor-dim);
  stroke-width: 1.6;
  cursor: crosshair;
}

.pin:hover { stroke: var(--amber); fill: rgb(228 176 74 / 0.35); r: 7; }

/* switches (IN) */
.comp-in { cursor: pointer; }

.switch-body {
  fill: #1a211a;
  stroke: var(--phosphor-dim);
  stroke-width: 2;
}

.comp-in.on .switch-body { stroke: var(--phosphor); }

.switch-knob { fill: var(--phosphor-dim); }

.comp-in.on .switch-knob {
  fill: var(--phosphor);
  filter: drop-shadow(0 0 4px rgb(147 232 187 / 0.8));
}

.switch-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  fill: var(--phosphor);
  pointer-events: none;
}

.io-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  fill: var(--phosphor-dim);
  text-anchor: middle;
}

/* LEDs (OUT) */
.led-ring { fill: none; stroke: var(--phosphor-dim); stroke-width: 2; }

.led { fill: #3a3428; }

.comp-out.on .led {
  fill: var(--amber);
  filter: drop-shadow(0 0 6px rgb(228 176 74 / 0.9));
}

.comp-out.on .led-ring { stroke: var(--amber); }

/* board footer */
.board-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.4rem;
}

.status-line { font-size: 0.78rem; color: var(--ink-soft); min-height: 1.3em; }
.status-line[data-kind="err"] { color: var(--fail); font-weight: 600; }
.status-line[data-kind="ok"] { color: var(--pass); font-weight: 600; }
.status-line[data-kind="run"] { color: var(--ink); }

.hint-line { font-size: 0.66rem; color: var(--ink-soft); text-align: right; }

/* ---------- truth table ---------- */

.truth-host { overflow: auto; max-height: 70vh; }

.truth {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.78rem;
  width: 100%;
}

.truth th, .truth td {
  text-align: center;
  padding: 0.22rem 0.4rem;
  border-bottom: 1px solid rgb(60 50 20 / 0.1);
}

.truth thead th { font-size: 0.7rem; color: var(--ink-soft); }

.truth .subhead th {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--panel-edge);
}

.truth .sep { border-bottom: none; width: 0.5rem; }

.truth .td-exp { color: var(--olivetti-dark); font-weight: 700; }

.truth .td-got.bad { color: var(--fail); font-weight: 700; }

.truth tr.row-ok td { background: rgb(61 122 79 / 0.09); }
.truth tr.row-bad td { background: rgb(178 58 44 / 0.1); }
.truth tr.live td { box-shadow: inset 0 -2px 0 var(--amber); }

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .workbench { grid-template-columns: minmax(240px, 300px) 1fr; }
  .col-truth { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .workbench { grid-template-columns: 1fr; padding: 0.7rem; }
}