/* v12 — board picker, migration dialog, board diagram */
.board-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line, #d1d5db); background: var(--panel, #fff); color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.board-btn:hover { border-color: #F37A33; }
.board-btn small { opacity: .6; }
.bdlg-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.bdlg { background: var(--panel, #fff); color: var(--ink, #111827); width: min(720px, 94vw); max-height: 86vh; display: flex; flex-direction: column; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.bdlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line, #e5e7eb); font-size: 15px; }
.bdlg-body { padding: 14px 18px; overflow: auto; font-size: 13px; }
.bdlg-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line, #e5e7eb); }
.bpick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.bpick-card { text-align: left; padding: 12px; border: 2px solid var(--line, #e5e7eb); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; }
.bpick-card.on { border-color: #F37A33; background: #F37A3312; }
.bpick-card small { opacity: .75; }
.bpick-caps { font-size: 11px; color: #0f766e; }
.bpick-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.bpick-row > span { width: 120px; font-weight: 600; }
.bpick-note { margin: 6px 0; line-height: 1.45; }
.bpick-note.muted { opacity: .65; font-size: 12px; }
.bmig-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bmig-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; border-left: 4px solid #dc2626; background: #fef2f2; color: #111827; }
.bmig-row.caps { border-left-color: #6b7280; background: #f3f4f6; }
.bmig-row.confirm { border-left-color: #f59e0b; background: #fffbeb; }
.bmig-what { display: flex; flex-direction: column; min-width: 0; }
.bmig-what small { opacity: .8; }
.bmig-to { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bmig-tag { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #e5e7eb; }
.bmig-ack { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
/* board diagram (Pin Map board panel + 2D simulator for non-Pico boards) */
.bd-svg { width: 100%; height: auto; max-height: 100%; }
.bd-board { fill: #1e293b; }
[data-board="pico"] .bd-board { fill: #166534; }
.bd-module { fill: #94a3b8; stroke: #475569; }
.bd-chip, .bd-small, .bd-phys { fill: #e2e8f0; font: 600 9px system-ui, sans-serif; }
.bd-chip { font-size: 10px; }
.bd-title { font: 700 14px system-ui, sans-serif; fill: currentColor; }
.bd-lbl { font: 600 10.5px system-ui, sans-serif; fill: currentColor; }
.bd-use { font: 500 9.5px system-ui, sans-serif; fill: #0369a1; }
.bd-usb { fill: #cbd5e1; stroke: #475569; }
.bd-pad { fill: #d4a017; stroke: #7c5d0b; }
.bd-pin { cursor: pointer; }
.bd-pin.gnd .bd-pad { fill: #111827; }
.bd-pin.pwr .bd-pad { fill: #dc2626; }
.bd-pin.blocked .bd-pad { fill: #6b7280; stroke: #374151; }
.bd-pin.blocked { cursor: not-allowed; }
.bd-pin.strap .bd-pad, .bd-pin.warn .bd-pad { fill: #f59e0b; stroke: #92400e; }
.bd-pin.use .bd-pad { fill: #38bdf8; stroke: #0369a1; }
.bd-pin.bad .bd-pad, .bd-pin.conflict .bd-pad { fill: #ef4444; stroke: #7f1d1d; }
.bd-pin.on .bd-pad { fill: #22c55e; filter: drop-shadow(0 0 4px #22c55e); }
.bd-pin.hi .bd-pad, .bd-pin:hover .bd-pad, .bd-pin:focus .bd-pad { stroke: #F37A33; stroke-width: 3; }
.bd-pin.fault .bd-pad { fill: #dc2626; filter: drop-shadow(0 0 5px #dc2626); }
.bd-led { stroke: #0f172a; stroke-width: 1.5; }
.pp.on .bd-led, .bd-rgb.on .bd-led { filter: drop-shadow(0 0 6px currentColor); }
.sim-label-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #fef3c7; color: #92400e; margin-left: 8px; }
.bd-sub { font: 700 10px system-ui, sans-serif; fill: #b45309; }
.board-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; display: inline-block; }

/* Pin Map: board pinout */
.pm2-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-2); margin: 4px 0 10px; }
.pm2-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--border); }
.pm2-legend .free::before { background: var(--surface-3); border: 1px solid var(--border); }
.pm2-legend .used::before { background: #2A8A50; }
.pm2-legend .care::before { background: #D69E2E; }
.pm2-legend .blocked::before { background: #6B7280; }
.pm2-board-wrap { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; align-items: start; }
.pm2-board-svg svg { width: 100%; height: auto; }
.pm2-gp.care { border-color: #D69E2E; }
.pm2-gp.blocked { opacity: .5; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(107,114,128,.12) 6px 12px); }
@media (max-width: 1100px) { .pm2-board-wrap { grid-template-columns: 1fr; } }
/* wireless card + pop-up dialogs */
.rx-wifi-card { margin: 6px 10px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12.5px; background: var(--surface); }
.rx-wifi-card ul { margin: 4px 0 4px 16px; padding: 0; }
.rx-wifi-note { color: var(--muted, #667); font-size: 11.5px; margin-top: 4px; }
.rx-wifi-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rx-wifi-h [hidden], .rx-wifi-card [hidden] { display: none !important; }   /* Block Studio: ESP-only buttons hide on the BASE */
.rx-wifi-h [data-partest] { padding: 2px 8px; font-size: 11.5px; }
.rx-sim-badge { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 9px; background: #fff3cd; color: #7a5b00; border: 1px solid #e8d48a; }
.rx-pop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.rx-pop[hidden] { display: none; }
.rx-pop-box { width: min(1280px, 96vw); height: 92vh; background: var(--surface, #fff); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.rx-pop-bar { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.rx-pop-bar [data-close] { margin-left: auto; }
.rx-pop iframe { flex: 1; border: 0; width: 100%; }
/* v12.1 wireless card: link sliders, peer board, traffic inspector */
.rx-wl-more { margin-top: 6px; } .rx-wl-more summary { cursor: pointer; font-weight: 600; }
.rx-wl-more label { display: inline-flex; align-items: center; gap: 4px; margin: 3px 8px 3px 0; }
.rx-wl-sl input { width: 110px; } .rx-wl-sl output { min-width: 48px; font-variant-numeric: tabular-nums; }
.rx-wl-col { display: flex !important; flex-direction: column; align-items: stretch !important; } .rx-wl-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rx-wl-more input.bad { outline: 2px solid #c33; }
.rx-traffic { width: min(980px, 94vw); } .rx-tf-list { overflow: auto; flex: 1; padding: 6px 10px; font-size: 12px; }
.rx-tf-row { display: grid; grid-template-columns: 60px 56px 16px 1fr 1.2fr; gap: 6px; border-bottom: 1px solid var(--border); padding: 3px 0; }
.rx-tf-row pre { grid-column: 1 / -1; margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--muted, #667); max-height: 120px; overflow: auto; }
.rx-tf-row.lost { opacity: .55; text-decoration: line-through; }
/* v12.1 phone, GATT editor, mesh, web server */
.rx-phone-box { width: min(420px, 94vw); }
.rx-phone { padding: 10px; } .rx-ph-screen { border: 8px solid #222; border-radius: 22px; padding: 10px; min-height: 380px; background: #fafafa; font-size: 12px; }
.rx-ph-st { padding: 4px 0; } .rx-ph-st.ok { color: #1c7c3a; }
.rx-ph-dev { display: flex; gap: 6px; align-items: center; padding: 4px; border: 1px solid #ddd; border-radius: 6px; margin: 4px 0; } .rx-ph-dev small { color: #777; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-ph-widgets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .rx-w { position: relative; padding: 6px 18px 6px 6px; border: 1px solid #e3e3e8; border-radius: 8px; background: #fff; }
.rx-w-log { flex-basis: 100%; max-height: 90px; overflow: auto; font-family: monospace; }
.rx-ph-x { position: absolute; top: 0; right: 2px; border: 0; background: none; color: #999; cursor: pointer; }
.rx-ph-led { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #ccc; vertical-align: middle; } .rx-ph-led.on { background: #2BA84A; box-shadow: 0 0 8px #2BA84A; }
.rx-ph-gatt td { padding: 2px 4px; border-bottom: 1px solid #eee; vertical-align: top; } .rx-ph-gatt .v { font-family: monospace; }
.rx-ph-log { font-family: monospace; color: #555; max-height: 120px; overflow: auto; }
.rx-gatt-box { width: min(860px, 94vw); } .rx-w3-body { padding: 10px; overflow: auto; max-height: 76vh; }
.rx-gatt-svc { border: 1px solid #ddd; border-radius: 6px; margin: 8px 0; } .rx-gatt-err { color: #b3261e; font-size: 12px; }
.rx-mesh-box { width: min(760px, 94vw); } .rx-mesh { width: 100%; max-height: 320px; }
.rx-mesh line.ok { stroke: #2D7FF9; } .rx-mesh line.bad { stroke: #c0392b; stroke-dasharray: 4 4; }
.rx-mesh text { font: 10px sans-serif; text-anchor: middle; } .rx-mesh .lbl { fill: #555; } .rx-mesh .mac { fill: #777; font-size: 9px; }
.rx-mesh .peer circle { fill: #fff3e9; stroke: #F37A33; stroke-width: 2; } .rx-mesh .peer.off circle { fill: #eee; stroke: #aaa; } .rx-mesh .me rect { fill: #F37A33; } .rx-mesh .me text { fill: #fff; }
.rx-mesh-t { font-size: 12px; border-collapse: collapse; } .rx-mesh-t td, .rx-mesh-t th { padding: 3px 6px; border-bottom: 1px solid #eee; }
.rx-wb-page { min-height: 24px; max-height: 120px; overflow: auto; border: 1px solid #ddd; background: #fff; padding: 4px; font-family: monospace; font-size: 11px; white-space: pre-wrap; margin: 4px 0; }

/* board picker (3 boards) + board info tabs */
.bpick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.bpick-grid .bpick-card { position: relative; min-height: 128px; }
.bpick-card.sel { border-color: #F37A33; background: #F37A3314; box-shadow: 0 0 0 3px #F37A3333; }
.bpick-card b { font-size: 15px; }
.bpick-tag { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 99px; background: #e0f2fe; color: #075985; }
.bpick-blurb { font-size: 11.5px; opacity: .85; line-height: 1.35; }
.bpick-now { position: absolute; top: 8px; right: 10px; font-size: 10.5px; font-weight: 700; color: #15803d; }
.board-info-btn { margin-left: 4px; padding: 5px 8px; }
.binfo-dlg { width: min(960px, 96vw); }
.binfo-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #e5e7eb); margin-bottom: 10px; flex-wrap: wrap; }
.binfo-tabs button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 7px 12px; border-bottom: 2px solid transparent; cursor: pointer; opacity: .75; }
.binfo-tabs button.on { border-bottom-color: #F37A33; opacity: 1; }
.binfo-svg svg { width: 100%; height: auto; display: block; }
.binfo-pins { margin-top: 10px; font-size: 12px; }
.binfo-pins td:first-child { width: 36px; text-align: right; opacity: .7; }
.pm2-gp-port { display: block; font-size: 10px; color: #0f766e; margin-top: 2px; }
.pm2-carrier { margin-top: 14px; }
.pm2-carrier h4 { margin: 0 0 6px; font-size: 13px; }
.pm2-carrier svg { width: 100%; max-width: 900px; height: auto; }
/* ROBO card (simulator) */
.robo-card .robo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.robo-k { font-weight: 700; font-size: 11.5px; min-width: 22px; }
.robo-motor { display: grid; grid-template-columns: 26px 110px 64px auto; align-items: center; gap: 6px; }
.robo-motor small { opacity: .6; font-size: 10.5px; }
.robo-bar { position: relative; height: 10px; border-radius: 5px; background: var(--surface-3, #e5e7eb); overflow: hidden; }
.robo-bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #64748b; }
.robo-bar i { position: absolute; top: 0; bottom: 0; width: 0; background: #64748b; transition: width .12s, left .12s; }
.robo-bar i.fwd { background: #16a34a; } .robo-bar i.back { background: #dc2626; }
.robo-servo { display: inline-flex; flex-direction: column; align-items: center; width: 52px; font-size: 11px; }
.robo-servo svg { width: 40px; height: 24px; color: var(--ink, #111827); }
.robo-rgb { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #475569; background: #1f2937; display: inline-block; }
.robo-rgb.lit { box-shadow: 0 0 10px currentColor; border-color: #f8fafc; }
.robo-btn.down { background: #F37A33; color: #fff; }
.robo-vbat { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.robo-vbat input { width: 90px; }
.robo-led { width: 9px; height: 9px; border-radius: 50%; background: #334155; display: inline-block; }
.robo-led.lit { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.robo-mute { font-size: 11.5px; }
.binfo-header svg { max-width: 460px; margin: 0 auto; }
.dev-check summary b { color: var(--accent, #F37A33); }
.dev-wifi-row { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-weight: 600; font-size: 12.5px; }
.dev-wifi-row input[type=checkbox] { align-self: flex-start; }
.dev-fw-note { display: block; margin-top: 4px; opacity: .8; }

/* 1.1 beginner view: Blocks, Simulator, Examples, Projects (+ Settings, Help) */
body.rx-beginner .rail-btn[data-panel="sim3d"], body.rx-beginner .rail-btn[data-panel="circuit"], body.rx-beginner .rail-btn[data-panel="pinmap"],
body.rx-beginner .rail-btn[data-panel="wiring"], body.rx-beginner .rail-btn[data-panel="library"], body.rx-beginner .rail-btn[data-panel="docs"],
body.rx-beginner #dock, body.rx-beginner #btnTextMode { display: none !important; }
/* New Project dialog (boards/new-project.js) */
.np-dlg { width: min(880px, 94vw); }
.np-dlg h4 { margin: 6px 0 8px; font-size: 13px; color: var(--muted, #667); }
.np-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.np-type, .np-board { text-align: left; border: 2px solid var(--line, #e3e6ec); border-radius: 12px; background: var(--panel, #fff); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: inherit; position: relative; }
.np-type.sel, .np-board.sel { border-color: #F37A33; box-shadow: 0 0 0 3px #f37a3333; }
.np-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.np-board img { width: 100%; height: 150px; object-fit: contain; background: #f6f7f9; border-radius: 8px; }
.np-board small, .np-type small { font-size: 12px; opacity: .8; line-height: 1.35; }
.np-now { position: absolute; top: 8px; right: 8px; font-size: 10px; background: #F37A33; color: #fff; border-radius: 999px; padding: 1px 7px; }
.np-note { min-height: 1.4em; font-size: 12.5px; margin: 10px 0 0; }