/* Arduino uses the same chunky controls, colors and sheets as the lesson engine. */
.path-tabs, .hw-tabs { display: flex; gap: 6px; padding: 6px; margin: 10px 16px; background: var(--card); border-radius: 18px; }
.path-tabs button, .hw-tabs button { flex: 1; min-height: 48px; padding: 8px; border-radius: 13px; font-weight: 700; }
.path-tabs [aria-selected="true"], .hw-tabs [aria-selected="true"] { background: var(--cyan); color: var(--bg); box-shadow: 0 4px 0 #157383; }
.kit-chip { min-height: 44px; padding: 7px 12px; border-radius: 99px; background: var(--card2); color: var(--cyan); font-size: 13px; font-weight: 700; }
/* Lesson header has no room for words: icon + status dot; the sheet explains. */
.l-top .kit-chip { position: relative; flex-shrink: 0; width: 44px; padding: 0; }
.l-top .kit-chip span { display: none; }
.l-top .kit-chip::after { content: ''; position: absolute; inset-block-start: 8px; inset-inline-end: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 2px var(--card2); }
.l-top .kit-chip[data-state="connected"]::after { background: var(--green); }
.l-top .kit-chip:is([data-state="timeout"], [data-state="disconnected"], [data-state="busy"], [data-state="incompatible"])::after { background: var(--yellow); }
.map-kit { margin-bottom: 16px; }
.kit-chip[data-state="connected"] { color: var(--green); }
.kit-chip:is([data-state="timeout"], [data-state="disconnected"], [data-state="busy"], [data-state="incompatible"]) { color: var(--yellow); }
.kit-sheet { z-index: 100; }
.kit-sheet .app-sheet-in { max-height: 85dvh; overflow-y: auto; }
.kit-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.kit-state { color: var(--yellow); }
.kit-slot { margin-block: 12px; }
.uno { width: 100%; height: auto; display: block; margin: 12px auto; overflow: visible; filter: drop-shadow(0 9px 12px #0005); }
.uno text { font-family: var(--mono); font-size: 16px; fill: #e3fff1; pointer-events: none; }
.uno .hit { fill: transparent; }
.uno [data-part] { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.uno [data-part]:focus-visible { outline: 3px solid var(--yellow); }
.uno .part-correct { filter: drop-shadow(0 0 8px #a6ff4d); animation: part-pop .4s ease; }
.uno .power-led { filter: drop-shadow(0 0 4px #a6ff4d); }
.led-on .led-l { fill: #fff4a1; filter: drop-shadow(0 0 5px #fff4a1) drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 24px #ff8a3d); }
.wire { fill: none; stroke-width: 5; stroke-linecap: round; }
.is-running .wire { stroke-dasharray: 14 5; animation: wire-flow .9s linear infinite; }
.pressed .switch-cap { fill: var(--orange); transform: translateY(2px); }
.sim-controls { display: flex; justify-content: center; padding-block: 8px; }
.sim-controls label { display: flex; align-items: center; gap: 10px; width: 100%; }
.sim-controls input { flex: 1; width: 0; min-height: 44px; accent-color: var(--yellow); }
.sim-controls output { min-width: 4ch; font-family: var(--mono); color: var(--yellow); }
.sim-button { touch-action: none; user-select: none; }
.sim-button[aria-pressed="true"] { transform: translateY(5px); box-shadow: 0 1px 0 var(--c-dark); --c: var(--yellow); }
.divider { width: 100%; font: 17px var(--mono); background: var(--card); border-radius: 20px; padding: 12px; }
.hw-target { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px; }
.hw-target [aria-pressed="true"], .thresholds [aria-pressed="true"] { background: var(--cyan); color: var(--bg); }
.hw-live, .hw-progress { font-size: 14px; color: var(--muted); }
.hw-tabs { margin: 14px 0; }
.hw-editor > p { font-size: 13px; color: var(--muted); }
.hw-body { border: 2px solid var(--line); border-radius: 15px; padding: 8px; margin-block: 5px; min-width: 0; }
.hw-body.active { border-color: var(--cyan); background: #35e0ff0b; }
.hw-body .hw-body { margin-inline-start: 8px; }
.hw-block { padding: 10px 12px; min-height: 48px; border-radius: 12px; background: var(--card2); box-shadow: 0 4px 0 #100e2b; margin: 4px 0 8px; font-weight: 700; text-align: start; max-width: 100%; }
.hw-block.executing { background: var(--yellow); color: var(--bg); box-shadow: 0 0 18px #ffd23f60; }
.hw-cursor { display: block; width: 100%; min-height: 44px; border-radius: 10px; border: 1px dashed var(--muted); color: var(--muted); font-size: 14px; }
.hw-cursor[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); }
.hw-else { display: block; padding-inline: 12px; color: var(--pink); }
.hw-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 0; }
.hw-palette .chip { min-height: 54px; white-space: normal; font-size: 14px; }
.thresholds { display: flex; gap: 8px; }
.hw-stop { width: 100%; margin: 16px 0 8px; }
.hw-code { font-size: 13px; }
.step-hardwareLab { max-width: 100%; }
@keyframes part-pop { 50% { transform: scale(1.09); } }
@keyframes wire-flow { to { stroke-dashoffset: -38; } }
@media (max-width: 380px) { .l-top { gap: 7px; padding-inline: 10px; }  .hw-body { padding: 5px; } }
@media (prefers-reduced-motion: reduce) { .uno *, .is-running .wire { animation: none !important; } }
/* Keep the path switcher reachable while the map scrolls to the current lesson. */
.map > .path-tabs { position: sticky; top: calc(65px + var(--safe-t)); z-index: 19; box-shadow: 0 8px 20px rgba(5, 3, 20, 0.5); }