/* Engine bench: utilitarian panels, dense tables, monospace numbers. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fs-md)/1.4 var(--font-ui);
}
.mono, code, textarea, table.table td.num { font-family: var(--font-mono); }
.dim { color: var(--c-text-dim); }
h2 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: var(--c-text-dim); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-panel); border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 2;
}
.brand { font-weight: 600; font-size: var(--fs-lg); }
.source { display: flex; align-items: center; gap: var(--sp-3); }
.status { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-dim); min-width: 12ch; }
.status.busy { color: var(--c-warn); }
.status.err { color: var(--c-err); }

.layout {
  display: grid; grid-template-columns: minmax(360px, 34%) 1fr; gap: var(--sp-3);
  padding: var(--sp-3);
}
.col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.panel {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--radius-md);
  padding: var(--sp-3); min-width: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--c-panel-3); color: var(--c-text); border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm); padding: 5px 10px; font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.btn:hover { border-color: var(--c-text-faint); }
.btn.small { padding: 2px 8px; }
.field { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-dim); }
select, input[type=number] {
  background: var(--c-panel-2); color: var(--c-text); border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm); padding: 3px 6px; font: inherit; font-size: var(--fs-sm);
}
input[type=number] { width: 7ch; font-family: var(--font-mono); }

textarea#netlist {
  width: 100%; height: 280px; resize: vertical;
  background: var(--c-panel-2); color: var(--c-text); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: var(--sp-2); font-size: var(--fs-sm); line-height: 1.45; tab-size: 4;
}
.companions { font-size: var(--fs-xs); color: var(--c-text-dim); margin-top: var(--sp-1); font-family: var(--font-mono); }

.controls { display: grid; gap: var(--sp-2); }
.ctl { display: grid; grid-template-columns: 9ch 1fr 16ch; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.ctl .label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl .val { font-family: var(--font-mono); color: var(--c-text-dim); text-align: right; font-size: var(--fs-xs); }
.ctl input[type=range] { width: 100%; accent-color: var(--c-accent); }

.diagnostics { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; font-size: var(--fs-sm); }
.diagnostics li { display: grid; grid-template-columns: 7ch 5ch 1fr; gap: var(--sp-2); padding: 3px 0; border-bottom: 1px solid var(--c-line); }
.diagnostics .lvl { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; }
.diagnostics .error .lvl { color: var(--c-err); }
.diagnostics .warning .lvl { color: var(--c-warn); }
.diagnostics .info .lvl { color: var(--c-info); }
.diagnostics .ln { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-faint); }

.help ul { margin: var(--sp-2) 0 0; padding-left: 18px; color: var(--c-text-dim); font-size: var(--fs-sm); }
.help li { margin-bottom: var(--sp-1); }
.help summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
code { background: var(--c-panel-3); padding: 0 4px; border-radius: 3px; font-size: 0.95em; color: var(--c-text); }

.op-grid { display: grid; grid-template-columns: minmax(180px, 0.6fr) 1.4fr; gap: var(--sp-3); align-items: start; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 500; color: var(--c-text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--c-line-strong); padding: 3px 6px; }
.table td { padding: 2px 6px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table td.num { text-align: right; white-space: nowrap; }
.table td.kv { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-dim); }
.table td.kv b { color: var(--c-text); font-weight: 500; }
.tag { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 0 5px; border-radius: 3px; background: var(--c-panel-3); color: var(--c-text-dim); }
.tag.active, .tag.saturation-fet, .tag.linear { color: var(--c-ok); }
.tag.cutoff, .tag.clipping { color: var(--c-warn); }
.tag.saturation { color: var(--c-err); }

.plots { display: grid; gap: var(--sp-3); }
.plots.two { grid-template-columns: 1fr 1fr; }
figure { margin: 0; }
figcaption { font-size: var(--fs-xs); color: var(--c-text-dim); margin-top: var(--sp-1); }
canvas { display: block; width: 100%; height: 260px; border-radius: var(--radius-sm); }
canvas.wide { height: 240px; }
.tran-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
.stats { font-size: var(--fs-xs); color: var(--c-text-dim); }
.stats b { color: var(--c-text); font-weight: 500; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .plots.two, .op-grid { grid-template-columns: 1fr; }
}