/* GPIO module workbench. Scoped so editor and board retain independent layouts. */
.ml-panel { --ml-ink:#172c39; --ml-dim:var(--ui-muted); --ml-rule:var(--ui-line); --ml-accent:var(--ui-accent); padding:0!important; color:var(--ml-ink); background:var(--ui-wash); border:1px solid var(--ml-rule); border-radius:10px; overflow:hidden; }
.ml-panel[hidden] { display:none!important; }
.ml-panel h2,.ml-panel h3,.ml-panel p { margin:0; }
.ml-head,.ml-cat-head,.ml-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ml-head { padding:23px clamp(16px,2.4vw,32px); background:#fff; }
.ml-head h2 { font-size:clamp(19px,2vw,25px); line-height:1.2; letter-spacing:-.035em; }
.ml-head p { color:var(--ml-dim); margin-top:5px; font-size:13px; }
.ml-panel .ml-view-board { color:#fff; border:1px solid var(--ui-navy); background:var(--ui-navy); white-space:nowrap; border-radius:6px; padding:9px 15px; }
.ml-panel .ml-view-board:hover { background:var(--ui-accent); }
.ml-config,.ml-preset { padding:5px 10px; border:1px solid var(--ui-line); border-radius:5px; color:var(--ml-ink); background:#fff; font-size:12px; }
.ml-notice { padding:8px clamp(16px,2.4vw,32px); color:var(--ui-navy); background:var(--ui-tint); }
.ml-notice:empty { display:none; }
.ml-catalog,.ml-connected { padding:20px clamp(16px,2.4vw,32px) 24px; }
.ml-catalog + .ml-connected { padding-top:0; }
.ml-catalog h3 { text-transform:none; font-size:16px; letter-spacing:-.02em; }
.ml-cat-head { flex-wrap:wrap; }
.ml-catalog-grid,.ml-connected { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.ml-catalog-grid { margin-top:14px; }
.ml-tile { display:grid; grid-template-columns:58px minmax(0,1fr) 14px; align-items:center; text-align:left; gap:12px; padding:10px; background:#fff; color:var(--ml-ink); border:1px solid var(--ml-rule); border-radius:8px; box-shadow:0 1px 2px #132b2b08; }
.ml-tile:hover { border-color:#8da7bb; background:#f8fbfd; }
.ml-tile-text { display:grid; gap:2px; }
.ml-tile-text strong { font-size:13px; }
.ml-tile-text>span { font-size:11px; font-weight:400; line-height:1.35; color:var(--ml-dim); }
.ml-tile-plus { color:var(--ml-accent); font-size:17px; }
.ml-connected { align-items:start; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.ml-card { background:#fff; border:1px solid var(--ml-rule); box-shadow:0 2px 4px #132b2b07; border-radius:9px; min-width:0; overflow:hidden; }
.ml-card-head { padding:13px 15px 11px; }
.ml-direction { color:#516970; font-size:9px; font-weight:650; letter-spacing:.09em; }
.ml-card-head h3 { font-size:16px; font-weight:650; text-transform:none; letter-spacing:-.025em; overflow-wrap:anywhere; }
.ml-card-head .ml-config { font-size:11px; }
.ml-instrument { color:#d8e7e3; display:flex; flex-direction:column; align-items:center; justify-content:center; width:calc(100% - 28px); margin:0 14px; height:144px; border-radius:6px; background-color:#14292c; background-image:radial-gradient(#62787766 .85px,transparent .85px); background-size:9px 9px; }
.ml-live-value { padding:3px 8px; background:#14292c; color:#d1e2db; font:600 11px/1.4 var(--mono,monospace); border-radius:3px; }
.ml-pin-summary { display:flex; flex-wrap:wrap; gap:4px; padding:12px 14px 4px; }
.ml-pin-summary>span { display:flex; align-items:center; gap:5px; border:1px solid #ccd8d7; background:#f2f5f4; color:#536568; border-radius:4px; padding:2px 5px; font:10px/1.4 var(--mono,monospace); }
.ml-pin-summary>span.high { background:#dbf3e7; border-color:#8ac5a9; color:#145e40; }
.ml-pin-summary>span.offline { border-style:dashed; }
.ml-pin-summary em { font-style:normal; }
.ml-pin-summary b { font-weight:650; }
.ml-mode { color:#22644b; padding:4px 14px 12px; font-size:11px; }
.ml-mode.warning { color:#855719; }
.ml-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin:8px 10px 0; }
.ml-actuator { user-select:none; touch-action:none; font-size:12px; padding:4px 10px; min-height:30px; }
.ml-actuator[aria-checked=true],.ml-actuator[aria-pressed=true] { color:#064f47; border-color:#8dbcb0; background:#d6eee4; }
.ml-editor { border-top:1px solid var(--ml-rule); padding:12px 14px; display:grid; gap:9px; background:var(--ui-wash); }
.ml-field { display:flex; flex-direction:column; gap:3px; }
.ml-field>span { font-size:11px; font-weight:600; color:#455b62; }
.ml-field input,.ml-field select { width:100%; min-width:0; padding:4px 6px; border-color:var(--ui-line); color:var(--ml-ink); background:#fff; }
.ml-pin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(60px,1fr)); gap:6px; }
.ml-hint { font-size:11px; color:var(--ml-dim); line-height:1.5; }
.ml-remove { justify-self:start; padding:4px 0; border:0; border-radius:0; background:transparent; color:#8a3c35; font-size:12px; }
.ml-remove:hover { background:transparent; text-decoration:underline; }
.ml-art { position:relative; display:grid; place-items:center; width:100%; height:93px; flex:none; }
.ml-art * { box-sizing:border-box; }
.ml-tile .ml-art { --lamp:#74ef99; height:53px; width:58px; overflow:hidden; border:1px solid #cddbd8; border-radius:5px; background:#edf3ef; }
.ml-art i { display:block; }
.ml-diode { position:relative; width:39px; height:68px; }
.ml-dome,.ml-rim,.ml-stems { position:absolute; }
.ml-dome { width:31px; height:40px; border-radius:18px 18px 4px 4px; top:3px; left:4px; background:radial-gradient(ellipse at 31% 26%,#859c92 0 7%,#234839 13% 50%,#192c27 89%); border:1px solid #7a9483; z-index:2; }
.ml-rim { left:0; top:39px; width:39px; height:7px; border-radius:3px; background:#385844; z-index:3; border:1px solid #6a8b74; }
.ml-stems { width:14px; height:24px; left:13px; top:44px; border-inline:3px solid #bec8c9; transform:skew(-2deg); }
.ml-art.lit .ml-dome { background:radial-gradient(ellipse at 30% 25%,#fff 2%,var(--lamp) 38%,color-mix(in srgb,var(--lamp),#152423 58%) 100%); box-shadow:0 0 19px color-mix(in srgb,var(--lamp),transparent 50%); }
.ml-art.lit .ml-rim { background:color-mix(in srgb,var(--lamp),#273d35 40%); }
.ml-tile .ml-art-rgb { --lamp:#f19bc2; }
.ml-tile .ml-diode { transform:scale(.58); }
.ml-bar-leds,.ml-dip { display:flex; align-items:center; gap:6px; position:relative; padding:11px 9px; border:2px solid #73817f; border-radius:5px; background:#253231; box-shadow:0 2px 5px #0005; }
.ml-bar-leds::before,.ml-dip::before { content:""; position:absolute; inset:-6px 9px; background:repeating-linear-gradient(90deg,#b0bcb7 0 3px,transparent 3px 17px); z-index:0; pointer-events:none; clip-path:polygon(0 0,100% 0,100% 4px,0 4px,0 calc(100% - 4px),100% calc(100% - 4px),100% 100%,0 100%); }
.ml-bar-leds i { width:15px; height:31px; border-radius:3px; box-shadow:inset 0 0 3px #0007; border:1px solid #466050; background:#364b3b; }
.ml-bar-leds i.on { background:var(--lamp); box-shadow:0 0 8px color-mix(in srgb,var(--lamp),transparent 60%); }
.ml-tile .ml-bar-leds,.ml-tile .ml-dip { transform:scale(.51); }
.ml-slide { background:#65716f; border:2px solid #b9c0b9; padding:6px; border-radius:3px; width:78px; box-shadow:0 3px 3px #0004; }
.ml-slide i { height:21px; background:linear-gradient(90deg,#404949,#1f2727); position:relative; border-radius:2px; }
.ml-slide i::after { content:""; display:block; height:21px; width:28px; transition:transform .12s; background:repeating-linear-gradient(90deg,#a8b5b0 0 2px,#5d6b67 2px 4px); border:1px solid #d4ddd5; }
.ml-slide i.on::after { transform:translateX(32px); }
.ml-tile .ml-slide { transform:scale(.55); }
.ml-dip { gap:5px; padding:10px 8px; background:#a23c35; border-color:#bf8171; border-width:1px; }
.ml-dip i { height:29px; width:12px; padding:2px; border-radius:2px; background:#651f1c; }
.ml-dip i::before { content:""; display:block; background:#e2decb; border-block:2px solid #aaa797; width:8px; height:11px; margin-top:13px; }
.ml-dip i.on::before { margin-top:1px; }
.ml-tactile { position:relative; width:51px; height:48px; background:linear-gradient(135deg,#d6d6cd,#6d7671); border:4px solid #4b5551; border-radius:6px; box-shadow:inset 0 0 0 1px #e0e3dc,0 3px 4px #0005; display:grid; place-items:center; }
.ml-tactile::before,.ml-tactile::after { content:""; position:absolute; width:5px; height:6px; background:#b0b7ad; left:4px; box-shadow:28px 0 #a4aba2; }
.ml-tactile::before { top:-9px; } .ml-tactile::after { bottom:-9px; }
.ml-tactile i { width:28px; height:28px; border-radius:100%; background:#3f4646; border:4px solid #2c3434; box-shadow:inset 0 1px 3px #a0aeac,0 2px #232a29; }
.ml-tactile i.on { background:#5d6863; box-shadow:inset 0 1px 3px #1e2724; }
.ml-tile .ml-tactile { transform:scale(.65); }
.ml-digit { position:relative; height:82px; width:64px; border-radius:5px; background:#1d2525; border:1px solid #71807c; box-shadow:0 2px 3px #0005; }
.ml-digit .seg { position:absolute; background:#364439; }
.ml-digit .seg.on { background:var(--lamp); filter:drop-shadow(0 0 2px var(--lamp)); }
.ml-digit .seg-0,.ml-digit .seg-3,.ml-digit .seg-6 { width:29px; height:6px; left:14px; clip-path:polygon(0 50%,11% 0,89% 0,100% 50%,89% 100%,11% 100%); }
.ml-digit .seg-0 { top:8px; } .ml-digit .seg-6 { top:36px; } .ml-digit .seg-3 { top:64px; }
.ml-digit .seg-1,.ml-digit .seg-2,.ml-digit .seg-4,.ml-digit .seg-5 { width:6px; height:26px; clip-path:polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%); }
.ml-digit .seg-1 { top:12px; left:41px; } .ml-digit .seg-2 { top:40px; left:41px; } .ml-digit .seg-4 { top:40px; left:10px; } .ml-digit .seg-5 { top:12px; left:10px; }
.ml-digit .seg-7 { left:51px; top:63px; width:6px; height:6px; border-radius:50%; }
.ml-tile .ml-digit { --lamp:#eea755; transform:scale(.53); }
.ml-lcd-pcb { width:min(91%,234px); padding:10px 11px; border:1px solid #728f75; border-radius:4px; background:radial-gradient(circle at 4px 4px,#b8b192 0 1.5px,transparent 2px),#365a43; }
.ml-lcd-glass { background:#b7ce78; color:#2a3630; border:5px solid #283733; border-radius:3px; box-shadow:inset 0 1px 3px #161d1733; display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); padding:3px 4px; font:700 clamp(11px,1.2vw,15px)/1.25 Consolas,monospace; white-space:pre; }
.ml-cell { height:1.25em; text-align:center; }
.ml-cell.cursor { box-shadow:inset 0 -2px #444f36; }
.ml-cell.custom { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(8,1fr); height:.92em; align-self:center; }
.ml-cell.custom i.on { background:#2a3630; }
.ml-tile .ml-lcd-pcb { width:49px; padding:4px 2px; }
.ml-tile .ml-lcd-glass { display:block; padding:3px 1px; border-width:2px; font:600 5px/1.2 var(--mono,monospace); text-align:center; }
@media(max-width:640px) {
  .ml-head { align-items:flex-start; flex-wrap:wrap; gap:10px; padding:14px; }
  .ml-catalog,.ml-connected { padding:14px; }
  .ml-tile { grid-template-columns:48px minmax(0,1fr) 12px; }
  .ml-tile .ml-art { width:48px; }
}
@media(prefers-reduced-motion:reduce) { .ml-slide i::after { transition:none; } }

.ml-head {border-bottom:1px solid var(--ml-rule)}
.ml-head-actions,.ml-card-foot {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ml-head-actions {justify-content:flex-end}
.ml-panel .ml-heading {min-width:min(315px,100%);flex:1 1 315px}
.ml-add {border:1px solid #becfc8;padding:9px 12px;white-space:nowrap}
.ml-card-foot {justify-content:space-between;padding:3px 14px 10px;gap:3px 8px}
.ml-card-foot .ml-mode {padding:0;flex:1;font-size:10px}
.ml-locate {border:0;background:transparent;color:#176a59;padding:4px 0;font-size:11px;white-space:nowrap}
.ml-locate:hover {color:#0a5445;text-decoration:underline;background:transparent}
.ml-board-face .ml-instrument {height:69px;width:100%;margin:0;border-radius:4px;background:#162a2c}
.ml-board-face .ml-art {height:42px}
.ml-board-face .ml-art>div:not(.ml-lcd-pcb) {transform:scale(.46)}
.ml-board-face .ml-art>div {grid-column:1;grid-row:1}
.ml-board-face .ml-art {grid-template-rows:42px;grid-template-columns:100%}
.ml-board-face .ml-live-value {font-size:10px;line-height:1.25}
.ml-board-face .ml-controls {margin:3px 0 0;gap:3px;flex-wrap:nowrap}
.ml-board-face .ml-actuator {font-size:10px;line-height:1.2;padding:3px 5px;min-height:21px;min-width:0;touch-action:manipulation}
.ml-board-face .ml-lcd-pcb {width:97%;padding:4px}
.ml-board-face .ml-lcd-glass {font-size:10px;border-width:3px;padding:2px;line-height:1}
.ml-board-face .ml-cell {height:1em}
@media(max-width:640px) {.ml-head-actions{justify-content:flex-start}}

/* BlackPill SPI display and I²C inclinometer, shared by the two workspaces. */
.ml-bus .ml-art { height:auto; }
.ml-instrument.ml-bus-st7789 {height:220px;gap:5px;}
.ml-tft-pcb {width:166px;max-width:100%;aspect-ratio:1;display:grid;place-items:center;padding:4px;background:#234e59;border:1px solid #537d84;border-radius:5px;}
.ml-tft-screen,.ml-tft-preview {display:block;width:100%;aspect-ratio:1;background:#080f16;image-rendering:pixelated;}
.ml-tile .ml-tft-pcb {width:38px;padding:2px;}
.ml-tile .ml-tft-preview {background:linear-gradient(145deg,#132d32,#365f68);}
.ml-tilt-pad {position:relative;width:80px;aspect-ratio:1;border:1px solid #65868b;border-radius:50%;background:
  linear-gradient(90deg,transparent 49.45%,#67868c 49.5% 50.5%,transparent 50.55%),
  linear-gradient(transparent 49.45%,#67868c 49.5% 50.5%,transparent 50.55%),
  radial-gradient(circle at center,#2c454d 40%,#1a333e 41%);touch-action:none;cursor:crosshair;}
.ml-tilt-pad:focus-visible {outline:2px solid #bae493;outline-offset:3px;}
.ml-tilt-dot {position:absolute;left:50%;top:50%;height:12%;width:12%;border-radius:50%;background:#c4ec92;box-shadow:0 0 6px #87b079;transform:translate(-50%,-50%);pointer-events:none;}
.ml-tile .ml-tilt-pad {width:38px;pointer-events:none;}
.ml-tile .ml-tilt-dot {left:65%;top:33%;}
.ml-bus .ml-live-value {white-space:pre;line-height:1.3;}
.ml-bus-mpu6050 {gap:8px;}
.ml-screen-dialog {width:max-content;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:0;border:1px solid #516862;border-radius:10px;background:#f7faf6;color:#233b32;}
.ml-screen-dialog::backdrop {background:#0b171ac2;}
.ml-screen-head {position:sticky;top:0;z-index:1;background:#f7faf6;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 16px;border-bottom:1px solid #cfdad3;}
.ml-screen-head h2 {margin:0;font-size:18px;}
.ml-screen-layout {display:flex;align-items:center;gap:18px;padding:15px;}
.ml-screen-layout .ml-instrument {width:auto;height:auto;margin:0;background:none;}
.ml-screen-layout .ml-art {width:auto;height:auto;}
.ml-screen-layout .ml-tft-pcb {
  /* Space for the heading, outer margin, padding and optional controls. */
  width: min(calc(100dvh - 116px), calc(100vw - 64px));
  max-width: none;
}
.ml-screen-layout:has(.ml-game-tilt) .ml-tft-pcb {
  width: min(calc(100dvh - 116px), calc(100vw - 224px));
}
.ml-screen-layout .ml-bus-st7789 .ml-live-value {display:none;}
.ml-game-tilt {display:grid;gap:10px;justify-items:center;max-width:150px;text-align:center;font-size:13px;}
.ml-game-tilt .ml-tilt-pad {width:112px;}
.ml-game-tilt small {color:#587261;}
.ml-tilt-directions {display:grid;grid-template-columns:repeat(3,36px);gap:3px;justify-content:center;}
.ml-tilt-directions button {min-height:32px;font:600 18px/1 system-ui;padding:2px;touch-action:manipulation;}
.ml-tilt-directions button:first-child {grid-column:2;}
.ml-tilt-directions button:nth-child(2) {grid-column:1;}
.ml-game-tilt .ml-controls {margin:0;}
@media(max-width:550px) {
  .ml-screen-layout {flex-direction:column;gap:10px;}
  .ml-screen-layout .ml-tft-pcb {width:min(calc(100vw - 52px), calc(100dvh - 112px));}
  .ml-screen-layout:has(.ml-game-tilt) .ml-tft-pcb {width:min(calc(100vw - 52px), max(200px,calc(100dvh - 275px)));}
  .ml-game-tilt {display:grid;grid-template-columns:1fr 1fr;max-width:80vw;align-items:center;}
  .ml-game-tilt .ml-instrument {grid-column:2;grid-row:1/4;}
  .ml-game-tilt .ml-tilt-pad {width:75px;}
}

.ml-controls:has(.ml-tilt-axes) { flex-wrap:wrap; }
.ml-tilt-axes { display:grid; flex-basis:100%; justify-items:center; gap:3px; }
.ml-tilt-axis { display:grid; grid-template-columns:1em minmax(45px,1fr) 3.3em; width:min(100%,210px); align-items:center; gap:6px; font:500 12px/1.2 var(--mono,monospace); }
.ml-tilt-axis span { text-align:right; font-variant-numeric:tabular-nums; }
.ml-tilt-axis input[type=range] { display:block; width:100%; min-width:0; margin:0; padding:0; cursor:pointer; accent-color:#528bbe; }
.bm-card .ml-board-face .ml-controls:has(.ml-tilt-axes) { flex-wrap:wrap; padding-inline:8px; }
.bm-card .ml-tilt-axis { color:#dcebf6; }
.ml-bus .ml-live-value[hidden] { display:none; }