@font-face { font-family: "Inter"; src: url("fonts/Inter.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 13px/18px "Inter", system-ui, sans-serif;
  display: flex; flex-direction: column;
}
button, select, input {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-input); border-radius: 4px; padding: 4px 10px; min-height: 28px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { background: var(--surface-2); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); background: var(--accent); }
button.on { background: var(--accent-soft); border: 2px solid var(--accent); font-weight: 600; }
button.ghost { border: none; background: none; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.muted { color: var(--text-muted); }

.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; }
.tag { font-size: 11px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0 6px; }
.menu, .plc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plc { margin-left: auto; }
.sep { width: 1px; height: 22px; background: var(--border); }
.modes { display: flex; }
.modes button:first-child { border-radius: 4px 0 0 4px; }
.modes button:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.led { width: 12px; height: 12px; border-radius: 50%; background: var(--lamp-off); display: inline-block; }
.led.run { background: var(--energized); }
.led.fault { background: var(--danger); }

.work { flex: 1; display: flex; min-height: 0; }
.sim { width: 400px; flex: none; overflow: auto; padding: 10px; border-right: 1px solid var(--border); background: var(--sim-bg); }
.editor { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.labpane { width: 340px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-left: 1px solid var(--border); overflow: auto; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-io { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.card-io h3 { margin: 0 0 4px; font: 600 12px "JetBrains Mono", monospace; text-align: center; }
.pt { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.pt .addr { font: 10.5px "JetBrains Mono", monospace; color: var(--text-muted); cursor: grab; white-space: nowrap; }
.pt .sym { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt .txt { display: flex; flex-direction: column; min-width: 0; line-height: 13px; }
.sw { width: 34px; height: 20px; min-height: 0; padding: 0; border-radius: 999px; position: relative; flex: none; background: var(--surface-2); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--wire); transition: left .08s; }
.sw.closed { background: var(--energized-fill); border-color: var(--energized); }
.sw.closed::after { left: 16px; background: var(--energized); }
.sw.pb { border-radius: 4px; }
.sw.pb::after { border-radius: 3px; }
.lamp { width: 18px; height: 18px; border-radius: 50%; background: var(--lamp-off); flex: none; border: 1px solid var(--border); }
.lamp.on { background: var(--lamp-generic); box-shadow: 0 0 8px var(--lamp-generic); }
.bcd { margin-top: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.bcd input { width: 44px; font-family: "JetBrains Mono", monospace; }
.digits { display: flex; gap: 4px; }
.seg { font: 700 22px "JetBrains Mono", monospace; color: var(--lamp-red); background: var(--display-bg); padding: 0 6px; border-radius: 3px; }
.hint { color: var(--text-muted); font-size: 12px; }

.families { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding: 0 8px; }
.families button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--text-muted); }
.families button.on { color: var(--text); border-bottom-color: var(--accent); }
.palette { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.palette button { font-family: "JetBrains Mono", monospace; font-size: 12px; padding: 2px 8px; }
.status { padding: 4px 10px; min-height: 24px; font-size: 12px; color: var(--text-muted); }
.status.err { color: var(--danger); }
.ladder { flex: 1; overflow: auto; padding: 0 0 16px; outline: none; }
.ladder svg { display: block; }
.ladder text { font-family: "JetBrains Mono", monospace; font-size: 12px; fill: var(--text); }
.ladder .sym, .ladder .lab { font-family: "Inter", sans-serif; font-size: 11px; fill: var(--text-muted); }
.ladder .comment { font-family: "Inter", sans-serif; font-size: 12px; fill: var(--comment-text); }
.ladder .unset { fill: var(--unset); }
.ladder .live { fill: var(--energized); }
.ladder .title { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; }
.ladder .num { fill: var(--text-muted); }
.ladder .hit { fill: transparent; cursor: pointer; }
.ladder .sel { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.ladder .drop { stroke: var(--drop-target); stroke-width: 3; fill: none; }
.ladder .empty { font-family: "Inter", sans-serif; fill: var(--text-muted); }

.operands { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface); }
.operands label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 2px; }
.operands input { width: 170px; font-family: "JetBrains Mono", monospace; }
.operands .what { align-self: center; font-weight: 600; }

.labhead { display: flex; justify-content: space-between; align-items: center; }
.labbody { font-size: 13px; }
.labbody table { border-collapse: collapse; width: 100%; font-size: 12px; }
.labbody th, .labbody td { border: 1px solid var(--border); padding: 3px 6px; text-align: left; }
.labbody h1 { font-size: 18px; line-height: 24px; }
.labbody h2 { font-size: 15px; }
.labbody code { font-family: "JetBrains Mono", monospace; font-size: 12px; }
.report ul { list-style: none; padding: 0; margin: 0; }
.report li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.report .ok { color: var(--success); }
.report .bad { color: var(--danger); }
.report .detail { display: block; color: var(--text-muted); font-size: 12px; margin-left: 18px; }

.loading { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 10; }
.loading .card { text-align: center; max-width: 340px; padding: 16px; }
.loading.gone { display: none; }

@media (max-width: 900px) {
  .work { flex-direction: column; overflow: auto; }
  .sim { width: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .editor { min-height: 70vh; }
  .labpane { width: auto; border-left: none; border-top: 1px solid var(--border); }
  .plc { margin-left: 0; }
}

.ladder .w { stroke: var(--wire); stroke-width: 2; }
.ladder .w.on { stroke: var(--energized); stroke-width: 3; }
.ladder .rail { stroke: var(--rail); stroke-width: 3; }
.ladder .fill { fill: var(--energized-fill); }
.ladder .nofill { fill: none; }
.ladder .box { fill: var(--bg); }
.ladder .box.lit { fill: var(--energized-fill); }
.ladder .pin { fill: transparent; }
.ladder .pin.on { fill: var(--energized); }
.ladder .pintext { font-size: 10px; fill: var(--text-muted); }
.ladder .pintext.on { fill: var(--bg); }
.ladder .endtag { font-family: "JetBrains Mono", monospace; fill: var(--text-muted); paint-order: stroke; stroke: var(--bg); stroke-width: 8px; }

.machine { display: flex; flex-direction: column; gap: 8px; }
.ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctl label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.group { display: flex; }
.group button { border-radius: 0; margin-left: -1px; }
.group button:first-child { border-radius: 4px 0 0 4px; }
.group button:last-child { border-radius: 0 4px 4px 0; }
.pbtn { font-weight: 600; touch-action: none; user-select: none; }
.pbtn.down { background: var(--accent-soft); border-color: var(--accent); }
.knobs { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.knobs label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.knobs input { grid-column: 1 / -1; padding: 0; min-height: 0; }
.devs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }
.devs h4 { margin: 0 0 2px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.devs ul { list-style: none; margin: 0; padding: 0; }
.devs li { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: center; padding: 2px 0; }
.devs .dname { font-size: 11.5px; line-height: 14px; }
.devs .addr { grid-column: 2; font: 10.5px "JetBrains Mono", monospace; color: var(--text-muted); cursor: grab; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp-off); grid-row: span 2; }
.dot.on { background: var(--energized); box-shadow: 0 0 5px var(--energized); }
.dot.val { width: auto; height: auto; border-radius: 3px; background: none; font: 10px "JetBrains Mono", monospace; color: var(--energized); }
.events { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: 12px; }
.draw { width: 100%; height: auto; display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.draw .steel, .draw .tank { fill: none; stroke: var(--sim-steel); stroke-width: 3; }
.draw .product { fill: var(--sim-product); }
.draw .valve { fill: var(--surface-2); stroke: var(--sim-steel); }
.draw .valve.on { fill: var(--accent); }
.draw .valve2 { fill: var(--surface-2); stroke: var(--sim-steel); stroke-width: 2; }
.draw .sensor { fill: var(--lamp-off); }
.draw .sensor.on { fill: var(--energized); }
.draw .box { fill: var(--bg); stroke: var(--rail); stroke-width: 2; }
.draw .spilled { fill: none; stroke: var(--danger); stroke-width: 3; stroke-dasharray: 6 4; }
.draw .belt { fill: var(--sim-steel); }
.draw .roller { fill: var(--bg); }
.draw .motor { fill: var(--lamp-off); stroke: var(--rail); stroke-width: 2; }
.draw .motor.on { fill: var(--energized); }
.draw .cap { font: 12px "JetBrains Mono", monospace; fill: var(--text-muted); }
.draw .big { font: 700 20px "JetBrains Mono", monospace; fill: var(--text); }
.draw .crash { font: 700 22px "Inter", sans-serif; fill: var(--danger); }
.draw .grass { fill: var(--sim-bg); }
.draw .road { fill: var(--surface-2); }
.draw .lane { stroke: var(--bg); stroke-width: 2; stroke-dasharray: 12 10; }
.draw .stop { stroke: var(--text); stroke-width: 4; }
.draw .zebra { fill: var(--bg); }
.draw .head { fill: var(--rail); }
.draw .lt { fill: #3a3f47; }
.draw .lt.red.on { fill: var(--lamp-red); }
.draw .lt.amber.on { fill: var(--lamp-amber); }
.draw .lt.green.on { fill: var(--lamp-green); }
.draw .walk { fill: #3a3f47; }
.draw .walk.on { fill: var(--lamp-green); }
.draw .car.a { fill: var(--accent); }
.draw .car.b { fill: var(--warning); }
.draw .pipe { fill: none; stroke: var(--sim-steel); stroke-width: 8; }
.draw .pipe.flow { stroke: var(--sim-product); }
.draw .spline { stroke: var(--text); stroke-width: 2; stroke-dasharray: 6 5; }
.draw.trend { margin-top: 6px; }
.draw .grid { stroke: var(--border); }
.draw .t-sp { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 4; }
.draw .t-pv { fill: none; stroke: var(--sim-product); stroke-width: 2; }
.draw .t-cv { fill: none; stroke: var(--lamp-amber); stroke-width: 1.5; }
.draw .t-b { fill: var(--lamp-amber); opacity: .75; }
.draw .heat { stroke: var(--lamp-red); stroke-width: 5; }
.draw .person { fill: var(--warning); }
.draw .door { fill: var(--surface-2); stroke: var(--sim-steel); }
.draw .cap2 { fill: var(--sim-steel); } .draw .badcap { fill: var(--danger); }
.draw .beam { stroke: var(--lamp-red); stroke-dasharray: 3 3; }
.draw .part { fill: var(--lamp-amber); stroke: var(--rail); }
.draw .barrier { stroke: var(--lamp-red); stroke-width: 6; stroke-linecap: round; }
.draw .seg7 { font: 700 26px "JetBrains Mono", monospace; fill: var(--lamp-amber); }
.draw .fullsign { font: 700 12px "Inter", sans-serif; fill: #3a3f47; } .draw .fullsign.on { fill: var(--lamp-red); }
.draw .motor.fault { fill: var(--danger); }
.draw .heater { fill: var(--lamp-red); } .draw .cooler { fill: var(--accent); }
.draw .winopen { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.draw .doorring { fill: none; stroke: var(--rail); stroke-width: 6; } .draw .doorring.open { stroke: var(--warning); stroke-dasharray: 10 8; }
.draw .k-sp { fill: var(--text); } .draw .k-pv { fill: var(--sim-product); } .draw .k-cv { fill: var(--lamp-amber); }

.update { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }

.stwrap { flex: 1; min-height: 0; display: flex; border-top: 1px solid var(--border); }
.code { flex: 1; min-width: 0; overflow: auto; display: flex; align-items: flex-start; background: var(--bg); }
.gutter { flex: none; padding: 8px 8px 8px 4px; text-align: right; color: var(--text-muted); font: 13px/19px "JetBrains Mono", monospace; user-select: none; min-width: 40px; }
.gutter .err { color: var(--danger); font-weight: 700; background: color-mix(in srgb, var(--danger) 14%, transparent); }
.area { position: relative; flex: 1; min-width: 0; }
.area pre, .area textarea { margin: 0; padding: 8px; font: 13px/19px "JetBrains Mono", monospace; white-space: pre; tab-size: 4; border: none; }
.area pre { color: var(--text); pointer-events: none; min-height: 100%; }
.area textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; overflow: hidden; background: transparent;
  color: transparent; caret-color: var(--text); outline: none; border-radius: 0; }
.area textarea::selection { background: var(--accent-soft); color: transparent; }
.hl-k { color: var(--accent); font-weight: 600; }
.hl-f { color: var(--accent); }
.hl-n { color: var(--success); }
.hl-a { font-weight: 600; }
.hl-c { color: var(--comment-text); font-style: italic; }
.stside { width: 300px; flex: none; border-left: 1px solid var(--border); overflow: auto; display: flex; flex-direction: column; }
.stprob { color: var(--danger); font-size: 12px; padding: 6px 8px; white-space: pre-wrap; }
.stprob:empty { display: none; }
.watch { border-collapse: collapse; width: 100%; font: 12px "JetBrains Mono", monospace; }
.watch th { text-align: left; font: 600 11px "Inter", sans-serif; color: var(--text-muted); padding: 4px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
.watch td { padding: 2px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.watch td:last-child { color: var(--energized); }
.tagrow { display: grid; grid-template-columns: 1fr 96px 28px; gap: 4px; margin-bottom: 4px; }
.tagrow input, .tagrow select { min-width: 0; padding: 2px 6px; min-height: 26px; }
.tagrow .tc { grid-column: 1 / 3; font-size: 12px; }
.tagrow button { padding: 0; }
@media (max-width: 900px) { .stwrap { flex-direction: column; } .stside { width: auto; border-left: none; border-top: 1px solid var(--border); } }
.area { flex: 1 0 auto; }
.area pre { width: max-content; min-width: 100%; }
.editor { container-type: inline-size; }
@container (max-width: 760px) {
  .stwrap { flex-direction: column; }
  .stside { width: auto; max-height: 40%; border-left: none; border-top: 1px solid var(--border); }
}

.fbd { touch-action: none; }
.fbd .blk { cursor: grab; }
.fbd .box { stroke: var(--text); stroke-width: 1.5; }
.fbd .box.picked { stroke: var(--accent); stroke-width: 2.5; }
.fbd .box.bad { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 5 3; }
.fbd .title { font-size: 13px; pointer-events: none; }
.fbd .opv { font-size: 11px; }
.fbd .pinhit { fill: transparent; cursor: crosshair; }
.fbd .pinhit:hover, .fbd .pinhit.drop { fill: var(--accent-soft); }
.fbd .wirehit { fill: none; stroke: transparent; stroke-width: 10; cursor: pointer; }
.fbd .w.picked { stroke: var(--accent); stroke-width: 3; }
.fbd .rubber { stroke: var(--drop-target); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.operands .probs { color: var(--danger); font-size: 12px; align-self: center; flex-basis: 100%; }

.routinebar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 0; border-bottom: 1px solid var(--border); background: var(--surface); }
.routines { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; min-width: 0; }
.routines .rt { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; padding: 3px 8px; font-size: 12px; background: var(--bg); color: var(--text-muted); cursor: pointer; }
.routines .rt.on { color: var(--text); border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.routines .rt .k { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-muted); }
.routines .rt button { border: none; background: none; padding: 0 2px; min-height: 0; font-size: 11px; color: var(--text-muted); }
.newroutine { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.newroutine input { width: 140px; }
.iface { border-bottom: 1px solid var(--border); padding: 4px 8px; font-size: 12px; }
.iface summary { cursor: pointer; color: var(--text-muted); }
#ifacelist { max-height: 35vh; overflow: auto; }
.iface .prow { display: grid; grid-template-columns: 70px minmax(0, 160px) minmax(0, 120px) 28px; gap: 4px; margin: 3px 0; align-items: center; }
.iface .prow input, .iface .prow select { min-width: 0; padding: 2px 6px; min-height: 24px; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.iface .sec { color: var(--text-muted); }

/* -- header: menus, machine, PLC ------------------------------------------------------------------ */
.top { flex-wrap: nowrap; }
.menu { flex-wrap: nowrap; }
button.accent { border-color: var(--accent); color: var(--accent); font-weight: 600; }
button.icon, summary.icon { min-width: 30px; padding: 2px 6px; font-size: 16px; }
.field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.field.col { flex-direction: column; align-items: stretch; gap: 4px; }
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; border: 1px solid var(--border-input); border-radius: 4px; padding: 4px 10px;
  min-height: 28px; display: flex; align-items: center; background: var(--surface); user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:not(.icon)::after { content: "▾"; margin-left: 6px; color: var(--text-muted); }
.dd[open] > summary { background: var(--surface-2); }
.ddlist { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 260px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.16); }
.dd.right .ddlist { left: auto; right: 0; min-width: 300px; padding: 8px; gap: 4px; }
.ddlist > button { border: none; background: none; text-align: left; border-radius: 4px; }
.ddlist > button:hover { background: var(--accent-soft); }
.ddlist hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
.ddlink { color: var(--accent); padding: 4px 10px; text-decoration: none; }
.ledbox { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
#b-download { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.18); } }
.linkbtn { border: none; background: none; color: var(--accent); padding: 4px 0; min-height: 0; margin-top: 6px; }
.linkbtn:hover:not(:disabled) { background: none; text-decoration: underline; }
.palette .ic { width: 22px; height: 13px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.status.err { background: color-mix(in srgb, var(--danger) 12%, transparent); border-left: 3px solid var(--danger); color: var(--text); }

/* -- exercise pane ------------------------------------------------------------------------------------ */
.labpane { padding-top: 0; }
.labtop { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 10px 0 8px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; }
.labtop .ctl { justify-content: space-between; }
.labtop .group button { padding: 2px 8px; font-size: 12px; }
.report:empty { display: none; }
.report { max-height: 40vh; overflow: auto; }
.report .passed { color: var(--success); }

/* -- dialogs ------------------------------------------------------------------------------------------ */
dialog { border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; background: var(--bg); color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,.25); max-width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h2 { margin: 0; font-size: 18px; }
dialog h3 { margin: 14px 0 6px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.dhead { display: flex; align-items: center; gap: 12px; }
.dhead button { margin-left: auto; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pick { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; text-align: left; padding: 8px 10px;
  border-radius: 8px; align-items: center; }
.pick:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.pick .num { font: 700 15px "JetBrains Mono", monospace; color: var(--accent); grid-row: span 2; }
.pick .ptitle { font-weight: 600; }
.pick .lvl, .pick .lang { font-size: 11px; color: var(--text-muted); letter-spacing: .1em; }
.pick .lang { letter-spacing: 0; }
.pick.done { border-color: var(--success); }
.pick .tick { position: absolute; top: 6px; right: 8px; color: var(--success); font-weight: 700; }
.welcome { max-width: 520px; }
.welcome .steps { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.welcome .ctl { margin-top: 12px; }
@media (max-width: 1180px) { .top, .menu { flex-wrap: wrap; } }
.labbody > h1:first-child { display: none; }

.operands.float { position: absolute; z-index: 6; max-width: min(620px, calc(100% - 16px)); border: 1px solid var(--accent);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.ladder .badbox { fill: color-mix(in srgb, var(--danger) 10%, transparent); stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 4 3; }

.mgroup { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); align-items: start; }
.mhead h3 { margin: 6px 0 0; }
.draw.thumb { width: 150px; height: 100px; pointer-events: none; }
.pick .lvl ~ .tick, .pick .tick { top: 6px; }
.cardgrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 640px) { .mgroup { grid-template-columns: 1fr; } .mhead { display: flex; align-items: center; gap: 10px; } .draw.thumb { width: 96px; height: 64px; } }
.pick.ex { grid-template-columns: 1fr; }

/* -- phones: one view at a time, chosen in the bar at the bottom ---------------------------------------- */
.phone-only { display: none !important; }
.ladder svg, .fbd svg { zoom: var(--zoom, 1); }
@media (max-width: 760px) {
  .phone-only { display: flex !important; }
  .desk-only, #b-examples, .top .ledbox, .top .modes, #scans, #b-tags, #b-undo, #b-redo, .top .sep { display: none !important; }
  .top { flex-wrap: nowrap; gap: 6px; padding: 6px 8px; }
  .brand { font-size: 0; gap: 0; } .brand .tag { display: none; }
  .plc { margin-left: auto; }
  .top #b-download { display: none !important; }
  button, select, input, .dd > summary { min-height: 40px; font-size: 15px; }
  .ddlist > button { padding: 10px 12px; }
  .work { display: block; overflow: hidden; flex: 1; min-height: 0; }
  .sim, .editor, .labpane { width: 100%; height: 100%; min-height: 0; border: none; }
  body:not([data-tab="machine"]) .sim, body:not([data-tab="program"]) .editor, body:not([data-tab="lab"]) .labpane { display: none !important; }
  .sim { overflow: auto; padding: 10px 10px 16px; }
  .sim .field { margin-bottom: 8px; gap: 8px; } .sim .field select { flex: 1; }
  .labpane { overflow: auto; padding: 0 12px 16px; }
  #tagpane { position: fixed; inset: 0 0 56px 0; width: auto; z-index: 15; background: var(--bg); }
  .phonebar { gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); align-items: center; }
  .phonebar .grow { flex: 1; }
  .families, .palette { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .families button { white-space: nowrap; min-height: 38px; }
  .palette button { white-space: nowrap; flex: none; min-height: 40px; }
  .operands { position: static; max-height: 45vh; overflow: auto; }
  .operands input { width: 140px; }
  .sw { width: 44px; height: 28px; } .sw::after { width: 20px; height: 20px; } .sw.closed::after { left: 20px; }
  .pt { min-height: 40px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .pbtn { min-height: 48px; min-width: 64px; }
  .fbd { touch-action: auto; } .fbd .blk, .fbd .pinhit { touch-action: none; }
  .tabbar { position: sticky; bottom: 0; z-index: 12; align-items: stretch; gap: 0; border-top: 1px solid var(--border);
    background: var(--surface); padding: 0 0 env(safe-area-inset-bottom); flex: none; }
  .tabbar > button { flex: 1; border: none; border-radius: 0; background: none; min-height: 52px; font-weight: 600; color: var(--text-muted);
    border-top: 3px solid transparent; }
  .tabbar > button.on { color: var(--accent); border-top-color: var(--accent); }
  .tabplc { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
  .tabplc button { min-width: 64px; }
  dialog { max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; border-radius: 0; margin: 0; padding: 12px; }
  .stwrap { flex-direction: column; }
}
.small { font-size: 12px; padding: 4px 10px; }