/* Shared surfaces of the white laboratory workspace. The editor and the GPIO
   scope manage their own palettes so either can be dark independently. */
:root {
  --ui-navy:#18334e;
  --ui-accent:#365a7b;
  --ui-ink:#192d40;
  --ui-muted:#53687a;
  --ui-line:#cdd8e2;
  --ui-tint:#e8eff5;
  --ui-wash:#f4f7fa;
  --bg:#fff; --panel:#fff; color-scheme:light;
  accent-color:var(--ui-accent);
}
body, .studio-rail { background:#fff; }
.studio-header { background:#fff; color:var(--ui-navy); border-bottom:1px solid var(--ui-line); }
.studio-header .brand-lab, .studio-header .affiliation { color:var(--ui-accent); }
.studio-header .header-context, .studio-header .header-help { color:var(--ui-muted); }
.studio-header .header-help:hover { color:var(--ui-navy); }
.studio-header :is(.header-divider,.affiliation) { border-color:var(--ui-line); }
.studio-header .about-trigger { color:var(--ui-muted); font:600 13px var(--sans, system-ui); padding:5px 3px; }
.studio-header .about-trigger:hover { color:var(--ui-navy); text-decoration:underline; }
#aboutDialog { max-width:480px; background:white; color:var(--ui-ink); }
.about-content { padding:clamp(20px, 5vw, 32px); }
.about-content h2 { margin:12px 0 8px; color:var(--ui-navy); font-size:clamp(22px, 4vw, 29px); }
.about-content p { margin:0; font-size:15px; line-height:1.55; }
.about-credit { margin:20px 0; padding-top:16px; border-top:1px solid var(--ui-line); }
.about-credit h3 { margin:0 0 4px; font-size:13px; color:var(--ui-muted); }
.about-credit strong { font-size:18px; }
.about-credit p { font-size:13px; color:var(--ui-muted); }
.about-content form { display:flex; justify-content:flex-end; }
.about-content button { padding:7px 16px; color:white; background:var(--ui-navy); border:0; border-radius:5px; }
@media (max-width:600px) {
  .studio-header #guideBtn span { display:none; }
  .studio-header .studio-brand { white-space:nowrap; gap:5px; font-size:clamp(15px, 3.8vw, 22px); }
  .studio-header .studio-brand img { width:23px; height:23px; }
}
@media (max-width:380px) {
  .studio-header { gap:5px; padding-inline:8px; }
  .studio-header select.lab-language { max-width:76px; }
}
.scope-area, .scope-area canvas { background:#fff; color:#182d3b; }
.scope-readout { background:var(--ui-wash); color:var(--ui-muted); border-color:var(--ui-line); }
.scope-area #channelLabels select { color:var(--ui-ink); background:#fff; border-color:var(--ui-line); }
#terminalOutput, #buildOutput, #commandOutput { background:#fbfcfd; color:var(--ui-ink); border:1px solid var(--ui-line); }
.board-viewport { background:#fff radial-gradient(#c6d2db .8px,transparent 1px) 50% 50% / 13px 13px; }
.board-svg .pcb-background { fill:#fff; }
#board-grid circle { fill:#bdcbd6; }
.board-svg .board-pin .pin-label { fill:#3f5462; }
.board-svg .board-pin.gpio.high .pin-label { fill:#056d45; }
.board-svg .board-pin.selected .pin-label { fill:var(--ui-navy); }
.bm-wire { opacity:.88; filter:brightness(.74) saturate(1.25); }
.bm-wire.bm-selected { stroke:#1652a5; }
.tv-load-graph { background:var(--ui-wash); border-color:var(--ui-line); }