/* The shared look of the newer labs (interactive/*.html): controls on top, the scene, then the program in compact
   lines, so a projector shows the scene and the running code at the same time (160A). */
@font-face { font-family: "Lexend"; src: url("fonts/Lexend-Variable.ttf") format("truetype"); font-weight: 100 900; }
:root { --ink: #1f2328; --soft: #57606a; --line: #e2e4e0; --paper: #fbfbf9; --accent: #155a6c; --accent-light: #e6f0f2;
        --red: #e8262b; --yellow: #f6c21c; --green: #22b14c; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--paper); font-size: 15px; }
header { background: #fff; border-bottom: 1px solid var(--line); padding: 7px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
header:has(#lab-choices[hidden]) { display: none; }
header h1 { margin: 0; font: 600 20px "Lexend", sans-serif; color: var(--accent); }
main { padding: 10px 14px 12px; max-width: 1180px; margin: 0 auto; }
button { font: inherit; font-size: 14px; padding: 5px 11px; border-radius: 9px; border: 1px solid #c5ccd0; background: #fff; cursor: pointer; }
button:hover { background: var(--accent-light); }
button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* the toolbar above the scene */
.toolbar { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; font-size: 14px; }
.toolbar label { display: inline-flex; gap: 6px; align-items: center; color: var(--soft); }
.toolbar input[type=range] { width: 120px; accent-color: var(--accent); }
.toolbar .value { min-width: 46px; color: var(--ink); }
/* the scene */
.scene { background: #1d2026; border-radius: 10px; position: relative; padding: 6px 10px 4px; }
.scene svg { width: 100%; height: auto; display: block; }
.readout { position: absolute; top: 8px; left: 14px; font: 600 15px "Lexend", sans-serif; color: #9be7a8; z-index: 1; }
.readout.none { color: #f0b45c; }
.corner { position: absolute; top: 8px; right: 14px; font: 600 15px "Lexend", sans-serif; color: #cfd3da; z-index: 1; }
/* the outputs: LEDs, a buzzer, a servo angle, in one compact row under the scene */
.outputs { display: flex; gap: 16px; justify-content: center; align-items: center; padding: 6px 0 2px; font-size: 12.5px; color: var(--soft); background: #fff; }
.out { display: flex; gap: 6px; align-items: center; }
.out .lamp { width: 22px; height: 22px; border-radius: 50%; background: #3a3d44; border: 2px solid #c5ccd0; transition: background .05s, box-shadow .05s; }
.out.unused { opacity: .3; }
.out.on-red .lamp { background: var(--red); box-shadow: 0 0 14px 3px rgba(232,38,43,.55); }
.out.on-yellow .lamp { background: var(--yellow); box-shadow: 0 0 14px 3px rgba(246,194,28,.5); }
.out.on-green .lamp { background: var(--green); box-shadow: 0 0 14px 3px rgba(34,177,76,.5); }
.out.buzzer .lamp { border-radius: 6px; background: #2b2d31; border-color: #555; position: relative; }
.out.buzzer .lamp::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #444; }
.out.buzzer.beeping .lamp { box-shadow: 0 0 14px 3px rgba(255,255,255,.45); background: #6f7278; }
.out.buzzer.beeping .lamp::after { background: #fff; }
.out b { font: 700 15px ui-monospace, Consolas, monospace; color: var(--ink); }
/* the program next to what it does */
.program { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; margin-top: 8px; align-items: start; }
.program h2 { font: 600 14px "Lexend", sans-serif; margin: 0 0 4px; color: var(--soft); }
ol.steps { margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
ol.steps li { padding: 1px 10px; border-left: 3px solid transparent; font: 13px/1.55 ui-monospace, Consolas, monospace; color: #57606a; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
ol.steps li.now { background: var(--accent-light); border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.side { display: flex; flex-direction: column; gap: 8px; }
.monitor { background: #1d2026; color: #9be7a8; border-radius: 10px; padding: 8px 10px; font: 13px/1.45 ui-monospace, Consolas, monospace; min-height: 80px; white-space: pre; }
.monitor[hidden], .zones[hidden], .vars:empty { display: none; }
.monitor .title { color: #cfd3da; font: 600 12px "Lexend", sans-serif; margin-bottom: 2px; white-space: normal; }
.vars { display: flex; gap: 6px 12px; flex-wrap: wrap; font: 13px ui-monospace, Consolas, monospace; color: var(--soft); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.vars b { color: var(--accent); }
.zones { display: flex; gap: 4px; font-size: 12px; color: var(--soft); }
.zones span { flex: 1; text-align: center; padding: 3px 0; border-radius: 6px; background: #eceeea; }
.zones span.now { color: #fff; font-weight: 600; }
.zones .z-green.now { background: var(--green); } .zones .z-yellow.now { background: #d9a400; } .zones .z-red.now, .zones .z-stop.now { background: var(--red); }
.say { font-size: 13.5px; color: var(--soft); margin: 0; line-height: 1.45; }
@media (max-width: 700px) { main { padding: 8px; } .program { grid-template-columns: 1fr; } }