/* ==========================================================================
   panels.css — side panels (examples, projects, settings, help) and the
   right panel (code, simulator board, serial monitor).
   ========================================================================== */

/* ---------- Side panel overlay (sits on top of the Blockly category menu) ---------- */
.side-panel { position: absolute; top: 0; bottom: 0; left: 0; width: var(--side-w); background: var(--surface); border-right: 1px solid var(--border);
  z-index: 20; display: none; flex-direction: column; box-shadow: 6px 0 20px -12px rgba(16,24,40,.18); }
.app[data-panel="examples"] .side-panel,
.app[data-panel="projects"] .side-panel,
.app[data-panel="settings"] .side-panel,
.app[data-panel="help"] .side-panel { display: flex; }
.sp-view { display: none; flex-direction: column; min-height: 0; height: 100%; }
.app[data-panel="examples"] [data-view="examples"], .app[data-panel="projects"] [data-view="projects"],
.app[data-panel="settings"] [data-view="settings"], .app[data-panel="help"] [data-view="help"] { display: flex; }
.sp-head { padding: 16px 16px 10px; }
.sp-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.sp-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.sp-actions { display: flex; gap: 6px; padding: 0 16px 10px; flex-wrap: wrap; }
.sp-scroll { flex: 1; overflow: auto; padding: 4px 12px 16px; }

/* Example cards styled as mini modules */
.ex-card { display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: #fff; border-radius: 12px; margin-bottom: 10px;
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; padding: 0; }
.ex-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.ex-card .ex-body { padding: 11px 12px 10px; background: linear-gradient(180deg, #fff, #F6F7F9); position: relative; }
.ex-card .ex-title { font-weight: 600; font-size: 13.5px; margin: 0 26px 3px 0; color: var(--text); }
.ex-card .ex-desc { font-size: 12px; color: var(--text-2); line-height: 1.45; margin: 0; }
.ex-card .ex-btn { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #DADDE2); box-shadow: 0 0 0 1px #BCC2CA, 0 1px 2px rgba(0,0,0,.12); }
.ex-card .ex-led { position: absolute; right: 15px; top: 32px; width: 5px; height: 5px; border-radius: 50%; background: #2FD060; box-shadow: 0 0 5px #2FD060; }
.ex-card .ex-band { background: var(--band); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; }
.ex-card .ex-band.light { color: #5A5446; }
.ex-card.loaded { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }

/* Project list */
.proj { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; background: #fff; }
.proj:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.proj .p-icon { width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(180deg, #fff 0, #EEF0F3 66%, var(--accent) 66%, var(--accent-600) 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.1); }
.proj .p-main { flex: 1; min-width: 0; cursor: pointer; }
.proj .p-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj .p-date { font-size: 11.5px; color: var(--muted); }
.proj .icon-btn { width: 28px; height: 28px; }
.proj .icon-btn:hover { color: var(--red); }
.empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 24px 12px; border: 1px dashed var(--border-strong); border-radius: 12px; }

/* Settings */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.setting.col { flex-direction: column; align-items: stretch; cursor: default; }
.setting b { display: block; font-size: 13px; font-weight: 600; }
.setting small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.switch { appearance: none; width: 34px; height: 20px; border-radius: 20px; background: #D5DAE0; position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(14px); }

/* Help */
.help { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.help h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 8px; }
.steps { padding-left: 18px; margin: 4px 0; }
.steps li { margin-bottom: 6px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; margin: 0; align-items: center; }
.keys dd { margin: 0; }

/* ---------- Right panel ---------- */
.right-panel { width: var(--right-w); flex: none; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); min-width: 0; z-index: 10; }
.app.right-collapsed .right-panel, .app.right-collapsed .splitter-right { display: none; }
.panel-reveal { position: absolute; right: 12px; top: 12px; z-index: 15; display: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; box-shadow: var(--shadow-md); color: var(--text-2); place-items: center; }
.panel-reveal[data-tip]::after { left: auto; right: 0; transform: none; }
.app.right-collapsed .panel-reveal { display: grid; }
.rp-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--border); }
.tabs { display: flex; flex: 1; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; min-width: 0; }
.tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 0; background: transparent; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; position: relative; min-width: 0; }
.tab:hover { color: var(--text); }
.tab.active { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.tab.active .ic { color: var(--accent); }
.badge { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; padding: 0 5px; display: inline-grid; place-items: center; }
.badge[hidden] { display: none; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: none; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.app.sim-running .live-dot { display: inline-block; }
.pane { display: none; flex-direction: column; flex: 1; min-height: 0; }
.pane.active { display: flex; }
.pane-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.pane-actions { display: flex; align-items: center; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-2); font-family: var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); cursor: pointer; margin-right: 4px; }
.check input { accent-color: var(--accent); }

/* Code view */
.code-wrap { flex: 1; overflow: auto; background: #FBFBFC; }
.code { margin: 0; padding: 12px 0; font: 12.5px/1.65 var(--mono); color: #24292F; counter-reset: ln; min-width: max-content; }
.code .ln { display: block; padding: 0 16px 0 0; }
.code .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 42px; padding-right: 14px; text-align: right; color: #B4BAC2; user-select: none; }
.code .ln:hover { background: #F2F4F7; }
.tok-com { color: #8A919B; font-style: italic; }
.tok-str { color: #0A7F4F; }
.tok-num { color: #C2570C; }
.tok-kw { color: #7C3AED; font-weight: 500; }
.tok-type { color: #0B69C7; font-weight: 500; }
.tok-const { color: #D0471F; font-weight: 500; }
.tok-fn { color: #0E7490; }

/* ---------- Simulator board ---------- */
.board { flex: 1; overflow: auto; padding: 14px; background: radial-gradient(circle at 1px 1px, #DDE1E6 1px, transparent 0) 0 0/18px 18px, var(--bg); }
.board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.board-chip { display: inline-flex; align-items: center; gap: 8px; background: #1F6F8B; background: linear-gradient(180deg, #2A7F9E, #1B637D); color: #fff;
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 9px; box-shadow: var(--shadow-sm); }
.board-chip small { opacity: .75; font-weight: 500; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #9BA3AD; }
.board.running .chip-dot { background: #54F08A; box-shadow: 0 0 6px #54F08A; }
.board-stats { font: 500 12px var(--mono); color: var(--text-2); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; }

.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mod-card { border-radius: 14px; overflow: hidden; background: #fff; position: relative;
  box-shadow: 0 0 0 1px rgba(20,32,48,.07), 0 8px 18px -8px rgba(20,32,48,.28), 0 2px 4px rgba(20,32,48,.06); }
.mod-top { position: relative; height: 118px; background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 60%, #E9ECEF 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: inset 0 1px 0 #fff; }
.mod-btn { position: absolute; right: 11px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFFFFF, #D8DCE1 75%); box-shadow: 0 0 0 1px #C1C7CF, 0 1px 2px rgba(0,0,0,.15); }
.mod-led { position: absolute; right: 18px; top: 38px; width: 6px; height: 6px; border-radius: 50%; background: #9FA7B0; }
.board.running .mod-led { background: #2FD060; box-shadow: 0 0 6px #2FD060; }
.mod-band { background: linear-gradient(180deg, color-mix(in srgb, var(--band) 88%, #fff), var(--band) 50%, color-mix(in srgb, var(--band) 90%, #000));
  color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }
.mod-band b { font-family: var(--mono); font-weight: 600; letter-spacing: 0; background: rgba(255,255,255,.22); padding: 1px 6px; border-radius: 5px; }
.sim-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-2); }
.sim-state { font: 600 11.5px var(--mono); color: var(--text-2); }

/* LED (like the small green LED on the modules) */
.sim-led { --b: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #E9ECEF 55%, #D3D8DE 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 1px 0 #fff; }
.sim-led i { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #D7F5DF, #6E9C7B 60%, #4E7A5B);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25); transition: background .06s, box-shadow .06s; }
.sim-led.on i { background: radial-gradient(circle at 38% 32%, #F2FFF5, #5CFF8F 35%, #19C24F 75%);
  box-shadow: 0 0 calc(6px + 16px * var(--b)) calc(2px + 6px * var(--b)) rgba(47, 208, 96, calc(.25 + .6 * var(--b))), inset 0 -1px 2px rgba(0,0,0,.1);
  opacity: calc(.45 + .55 * var(--b)); }

/* Buzzer */
.sim-buzzer { position: relative; width: 46px; height: 46px; }
.sim-buzzer svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); position: relative; z-index: 1; }
.sim-buzzer .wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.sim-buzzer.on .wave { animation: ring .6s ease-out infinite; }
.sim-buzzer.on .w2 { animation-delay: .3s; }
.sim-buzzer.on svg { animation: shake .08s linear infinite; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
@keyframes shake { 50% { transform: translateY(.6px); } }

/* Push button (like the round grey button on the modules) */
.sim-push { width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 42% 35%, #FFFFFF 0%, #E4E7EB 55%, #CDD2D8 100%);
  box-shadow: 0 0 0 1.5px #BEC4CC, 0 4px 6px rgba(0,0,0,.18), inset 0 -2px 3px rgba(0,0,0,.08), inset 0 2px 2px #fff; transition: transform .05s, box-shadow .05s; }
.sim-push:hover { box-shadow: 0 0 0 1.5px var(--accent), 0 4px 6px rgba(0,0,0,.18), inset 0 -2px 3px rgba(0,0,0,.08); }
.sim-push.pressed { transform: translateY(2px) scale(.97); background: radial-gradient(circle at 50% 45%, #E9ECEF, #CBD0D6);
  box-shadow: 0 0 0 1.5px var(--accent), 0 1px 2px rgba(0,0,0,.2), inset 0 2px 4px rgba(0,0,0,.18); }
.latch { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; cursor: pointer; }
.latch input { accent-color: var(--accent); margin: 0; }

/* Analog sliders */
.analog-card { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(20,32,48,.07), 0 8px 18px -10px rgba(20,32,48,.25); padding: 4px 14px 10px; border-bottom: 5px solid var(--band); }
.analog-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0 6px; }
.analog-head span { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.analog-head small { font-size: 11px; color: var(--muted); }
.an-row { display: grid; grid-template-columns: 62px 1fr 42px; align-items: center; gap: 10px; padding: 4px 0; }
.an-row label { font: 600 12px var(--mono); color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.an-row label em { font: 600 9px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--band); padding: 1px 5px; border-radius: 4px; }
.an-row output { font: 600 12px var(--mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.an-row:not(.used) { opacity: .6; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: #E3E7EC; outline: none; margin: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #DDE1E6); box-shadow: 0 0 0 1px #BCC3CB, 0 2px 4px rgba(0,0,0,.2); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid #BCC3CB; }
.an-row.used input[type=range] { background: linear-gradient(90deg, var(--band), color-mix(in srgb, var(--band) 60%, #fff)); }
.sim-empty { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; text-align: center; padding: 26px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; background: rgba(255,255,255,.6); }
.sim-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sim-status i { width: 8px; height: 8px; border-radius: 50%; background: #C3C9D1; }
.app.sim-running .sim-status i { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: pulse 1.2s infinite; }
.app.sim-running .sim-status { color: #15803D; }

/* ---------- Serial monitor ---------- */
.serial { flex: 1; overflow: auto; background: #FBFBFC; font: 12.5px/1.6 var(--mono); padding: 8px 0; }
.sm-line { display: flex; gap: 10px; padding: 1px 14px; white-space: pre-wrap; word-break: break-word; }
.sm-line:hover { background: #F2F4F7; }
.sm-ts { color: #A3AAB3; flex: none; font-size: 11.5px; }
.sm-arrow { color: #C8CDD3; flex: none; }
.sm-txt { color: #1E2329; }
.sm-system .sm-txt { color: var(--accent-600); font-weight: 500; }
.sm-error .sm-txt { color: var(--red); font-weight: 500; }
.sm-empty { color: var(--muted); font: 12.5px/1.6 var(--font); text-align: center; padding: 40px 20px; }

/* v11: the right-panel tab strip no longer squeezes six labels into ~400 px (they overlapped:
   "Simulator", "Pin Map", "Pico USB" were cut). When the panel is narrow, the open tab keeps its
   word and the others show their icon only (name in the tooltip and for screen readers). */
.right-panel { container: rpanel / inline-size; }
.tab-l { overflow: hidden; text-overflow: ellipsis; }
@container rpanel (max-width: 620px) {
  .tab { flex: 0 0 auto; padding: 0 9px; }
  .tab:not(.active) .tab-l { display: none; }
  .tab.active { flex: 1 0 auto; padding: 0 12px; }
}