/* The Circuit Bench's look: used by bench.html and by the campus (the Workshop's bench). Every rule is
   scoped to .bench, which also carries its own colours, so it looks the same wherever it sits. */
.bench { --ink: #1a1420; --paper: #fbf8ef; --read: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif; color: var(--ink); font-family: var(--read); }
.bench button, .bench select, .bench input { font-family: inherit; font-size: 15px; }
.bench button { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 4px 10px; font-weight: 700; cursor: pointer; }
.bench button:hover, .bench button:focus { background: #fff3cf; outline: none; }
.bench { display: grid; grid-template-columns: 170px 1fr 290px; gap: 12px; padding: 12px; align-items: start; }
.bench .tray, .bench .side > div, .bench .board { background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.bench .tray { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.bench .trayh { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b5f86; margin: 4px 0 2px; }
.bench .tool { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 4px; font-weight: 700; font-size: 14px; }
.bench .tool svg { overflow: visible; }
.bench .chk { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.bench .tool.on { background: var(--ink); color: var(--paper); } .bench .tool.on svg .sym, .bench .tool.on svg line { stroke: var(--paper); } .bench .tool.on svg .body, .bench .tool.on svg .dot { fill: var(--ink); stroke: var(--paper); }
.bench button.plain { box-shadow: none; border-width: 2px; font-weight: 400; font-size: 14px; }
.bench .board { position: relative; }
.bench .sheet { width: 100%; display: block; touch-action: none; user-select: none; }
.bench .hint { position: absolute; left: 10px; bottom: 6px; font-size: 14px; color: #6b5f86; pointer-events: none; }
.bench .side { display: flex; flex-direction: column; gap: 12px; }
.bench .side > div { padding: 10px 12px; }
.bench .mread { font-family: 'Courier New', monospace; font-size: 34px; font-weight: 700; background: #c9d6b8; color: #10140c; border: 3px solid var(--ink); text-align: right; padding: 4px 10px; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.bench .mmodes, .bench .mprobes, .bench .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bench .mmodes button.on { background: var(--ink); color: var(--paper); }
.bench .mnote { font-size: 14px; line-height: 1.45; margin: 8px 0 0; color: #3d3550; }
.bench .props label { display: block; margin: 6px 0; font-size: 15px; } .bench .props select, .bench .props input[type=range] { display: block; width: 100%; margin-top: 3px; }
.bench .props p { font-size: 15px; line-height: 1.5; }
.bench .muted { color: #6b5f86; font-size: 14px; }
.bench .notes p { margin: 4px 0; font-size: 15px; line-height: 1.4; } .bench .notes .warn { font-weight: 700; color: #7d1f1f; } .bench .notes .ok { color: #2e5a2b; }
.bench .notes:empty { display: none; }
/* the drawing */ }
.bench .grid circle { fill: #c9c2d8; }
.bench .sym { stroke: var(--ink); stroke-width: 2.5; fill: none; stroke-linecap: round; } .bench .sym.thick { stroke-width: 4; } .bench .sym.thin { stroke-width: 1.6; }
.bench .body { fill: #fff; stroke: var(--ink); stroke-width: 2.5; } .bench .body.lit { fill: #ffe066; }
.bench .glow { fill: #ffd84a; }
.bench .dot { fill: #fff; stroke: var(--ink); stroke-width: 2; } .bench .end { fill: var(--ink); }
.bench .sign { font: 700 16px var(--read); fill: var(--ink); }
.bench .wire { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; } .bench .wire.sel { stroke: #2d5bd6; stroke-width: 4; }
.bench .joint { fill: var(--ink); }
.bench .part .hit { fill: transparent; cursor: grab; } .bench .part.sel .hit { fill: rgba(45, 91, 214, 0.12); stroke: #2d5bd6; stroke-width: 2; stroke-dasharray: 5 4; }
.bench .part.ghost { opacity: 0.55; pointer-events: none; }
.bench .plabel { font: 700 13px var(--read); fill: var(--ink); } .bench .pval { font: 12px var(--read); fill: #3d3550; }
.bench .probe circle { fill: var(--ink); } .bench .probe .lead { stroke: var(--ink); stroke-width: 3; } .bench .probe rect { fill: #fff; stroke: var(--ink); stroke-width: 2.5; } .bench .probe text { font: 700 13px var(--read); fill: var(--ink); }
@media (max-width: 900px) { .bench { grid-template-columns: 1fr; } .bench .tray { flex-direction: row; flex-wrap: wrap; } }
.bench .lbg { fill: var(--paper); }   /* behind each label, so the grid dots do not show between its words */