/*
 * IoT Circuit Studio — the modern look, layered over css/styles.css (loaded after it).
 * Only how things look changes here: softer surfaces, rounder corners, layered shadows, tinted hovers, frosted
 * menus and dialogs, short entrance animations. The layout, sizes that the code measures, and every colour that
 * carries meaning (wires, check results, pin ratings) stay in styles.css. Delete this file's <link> to go back.
 */

/* ---------- Type: Inter, built in (vendor/inter-latin-var.woff2, SIL OFL 1.1) so it looks the same on every
   computer and works offline; letters outside its Latin set (Ω, →, ⌘) come from the system font as before ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../vendor/inter-latin-var.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --m-radius-sm: 7px;
  --m-radius: 10px;
  --m-radius-lg: 14px;
  --m-hover: color-mix(in srgb, var(--primary-2) 9%, transparent);
  --m-hover-strong: color-mix(in srgb, var(--primary-2) 14%, transparent);
  --m-hairline: color-mix(in srgb, var(--border-strong) 65%, transparent);
  --m-ring: 0 0 0 3px color-mix(in srgb, var(--primary-2) 22%, transparent);
  --m-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --m-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --m-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 16px -2px rgba(15, 23, 42, 0.1);
  --m-shadow-lg: 0 0 0 0.5px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06), 0 12px 32px -4px rgba(15, 23, 42, 0.18), 0 24px 56px -12px rgba(15, 23, 42, 0.16);
  --m-glass: color-mix(in srgb, var(--surface) 84%, transparent);
  --m-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  /* the code editor follows the theme: a light editor in the light theme (every colour 4.5:1 or better) */
  --ed-bg: #fbfcfe; --ed-gutter-bg: #f3f5f9; --ed-gutter-fg: #5d6c82; --ed-fg: #1e293b; --ed-caret: #0f172a;
  --ed-sel: rgba(37, 99, 235, 0.2); --ed-focus: rgba(37, 99, 235, 0.3);
  --ed-com: #15803d; --ed-str: #b45309; --ed-pre: #a21caf; --ed-num: #c2410c; --ed-kw: #1d4ed8;
  --ed-err-bg: #fee2e2; --ed-err-fg: #991b1b; --ed-warn-bg: #fef3c7; --ed-warn-fg: #92400e;
  --ed-tabs-bg: var(--surface-2); --ed-tab-fg: var(--muted); --ed-tab-hover: var(--text); --ed-tab-active-fg: var(--primary-text); --ed-tab-active-bg: var(--ed-bg); --ed-tab-line: var(--primary-2);
  --ed-note-bg: var(--surface-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-hover: color-mix(in srgb, var(--primary-2) 14%, transparent);
    --m-hover-strong: color-mix(in srgb, var(--primary-2) 22%, transparent);
    --m-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --m-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
    --m-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px -4px rgba(0, 0, 0, 0.5);
    --m-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 16px 40px -6px rgba(0, 0, 0, 0.6);
    --m-glass: color-mix(in srgb, var(--surface) 80%, transparent);
    --ed-bg: #0f172a; --ed-gutter-bg: #0b1222; --ed-gutter-fg: #8494ab; --ed-fg: #e2e8f0; --ed-caret: #f8fafc;
    --ed-sel: rgba(96, 165, 250, 0.35); --ed-focus: rgba(56, 189, 248, 0.35);
    --ed-com: #86efac; --ed-str: #fcd34d; --ed-pre: #f0abfc; --ed-num: #fdba74; --ed-kw: #7dd3fc;
    --ed-err-bg: #7f1d1d; --ed-err-fg: #fecaca; --ed-warn-bg: #78350f; --ed-warn-fg: #fde68a;
    --ed-tabs-bg: #1e293b; --ed-tab-fg: var(--muted-2); --ed-tab-hover: #e2e8f0; --ed-tab-active-fg: #fff; --ed-tab-active-bg: #0f172a; --ed-tab-line: #22c55e;
    --ed-note-bg: #111827;
  }
}
:root[data-theme="dark"] {
  --m-hover: color-mix(in srgb, var(--primary-2) 14%, transparent);
  --m-hover-strong: color-mix(in srgb, var(--primary-2) 22%, transparent);
  --m-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --m-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --m-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px -4px rgba(0, 0, 0, 0.5);
  --m-shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 16px 40px -6px rgba(0, 0, 0, 0.6);
  --m-glass: color-mix(in srgb, var(--surface) 80%, transparent);
  --ed-bg: #0f172a; --ed-gutter-bg: #0b1222; --ed-gutter-fg: #8494ab; --ed-fg: #e2e8f0; --ed-caret: #f8fafc;
  --ed-sel: rgba(96, 165, 250, 0.35); --ed-focus: rgba(56, 189, 248, 0.35);
  --ed-com: #86efac; --ed-str: #fcd34d; --ed-pre: #f0abfc; --ed-num: #fdba74; --ed-kw: #7dd3fc;
  --ed-err-bg: #7f1d1d; --ed-err-fg: #fecaca; --ed-warn-bg: #78350f; --ed-warn-fg: #fde68a;
  --ed-tabs-bg: #1e293b; --ed-tab-fg: var(--muted-2); --ed-tab-hover: #e2e8f0; --ed-tab-active-fg: #fff; --ed-tab-active-bg: #0f172a; --ed-tab-line: #22c55e;
  --ed-note-bg: #111827;
}

body {
  font-feature-settings: 'cv11', 'ss01', 'calt'; /* Inter's single-storey a and open digits read well on screen */
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* thin, rounded scrollbars that only darken on hover */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 55%, transparent); }

/* ---------- Top bar ---------- */
.topbar { border-bottom-color: var(--m-hairline); box-shadow: var(--m-shadow-xs); }
.brand { letter-spacing: -0.01em; }
#project-name { border-radius: var(--m-radius-sm); transition: background-color 0.15s, box-shadow 0.15s; }
#project-name:hover { background: var(--m-hover); }
#project-name:focus { box-shadow: var(--m-ring); }
.save-state { letter-spacing: 0.01em; }

/* ---------- Buttons ---------- */
.btn {
  border-color: var(--m-hairline);
  border-radius: var(--m-radius-sm);
  box-shadow: var(--m-shadow-xs);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); box-shadow: var(--m-shadow-sm); }
.btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.985); box-shadow: none; }
.btn.primary, .btn.accent {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(15, 23, 42, 0.12), 0 2px 6px -1px color-mix(in srgb, var(--btn-primary) 35%, transparent);
}
.btn.accent { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(15, 23, 42, 0.12), 0 2px 6px -1px color-mix(in srgb, var(--btn-accent) 35%, transparent); }
.btn.primary:hover:not(:disabled) { border-color: var(--btn-primary-hover); }
.btn.accent:hover:not(:disabled) { border-color: var(--btn-accent-hover); }
.btn.ghost, .btn.ghost:hover:not(:disabled) { box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--m-hover); border-color: transparent; }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn:disabled { box-shadow: none; }
.btn:focus-visible, .icon-btn:focus-visible, .part-card:focus-visible, .chip:focus-visible, .tabs button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--primary-2) 70%, transparent);
}
.icon-btn { border-radius: var(--m-radius-sm); color: var(--text-3); transition: background-color 0.15s, color 0.15s; }
.icon-btn:hover:not(:disabled) { background: var(--m-hover); color: var(--text); }

/* ---------- Tabs: a segmented bar, the open view a rounded card below it ---------- */
.center { background: var(--bg); }
.tabs { gap: 2px; padding: 8px 10px 6px; }
.tabs button {
  border: 0;
  border-radius: var(--m-radius-sm);
  padding: 7px 12px;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.tabs button:hover { background: var(--m-hover); color: var(--text); }
.tabs button.active { background: var(--surface); color: var(--primary-text); box-shadow: var(--m-shadow-sm), 0 0 0 1px var(--m-hairline); }
/* one accent colour: blue is for actions; green only means "running" or "all OK" (the Run button, the live dot) */
.tabs .sim-tab { color: var(--text-3); }
.tabs .sim-tab:hover { color: var(--text); }
.tabs .sim-tab.active { color: var(--primary-text); }
.tabs button .ico { opacity: 0.8; }
.tabs button.active .ico { opacity: 1; }
.view {
  margin: 0 10px 10px;
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-sm);
  overflow: hidden;
}

/* a view fades in when its tab opens (the old one simply goes). Opacity only: a moving view would shift the
   drawing's screen position while Fit and the pointer maths measure it */
.view.active { animation: m-view-in 0.18s ease-out; }
@keyframes m-view-in {
  from { opacity: 0; }
}

/* the strip that says what the view is: quieter, a hairline under it; folded to its label after the first visit
   (js/banners.js) */
.view > .banner { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px 7px 14px; font-size: 12.5px; border-bottom-color: var(--m-hairline); }
.banner .tag { flex: none; margin-right: 0; margin-top: 1px; font-size: 10.5px; padding: 2px 7px; border-radius: 99px; letter-spacing: 0.06em; }
.banner-text { flex: 1; min-width: 0; }
.banner-toggle { flex: none; width: 26px; height: 26px; margin: -3px 0 -3px auto; color: var(--muted); }
.banner-toggle .ico { width: 16px; height: 16px; }
.banner-toggle[aria-expanded="true"] { color: var(--primary-2); }
.view > .banner.folded { align-items: center; padding-top: 4px; padding-bottom: 4px; }
.banner.folded .banner-text { display: none; }
.banner.folded .tag { cursor: pointer; margin-top: 0; }
.toolbar { gap: 5px; padding: 7px 10px; border-bottom-color: var(--m-hairline); }
.toolbar .sep { opacity: 0.6; }
.zoom { font-variant-numeric: tabular-nums; }
.wiring-hint { box-shadow: var(--m-shadow-xs); }

/* the floating zoom pills on the Breadboard and Simulate pictures */
.bb-zoom { border-color: var(--m-hairline); border-radius: 12px; background: var(--m-glass); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: var(--m-shadow-md); }
.wk-hint { border-color: var(--m-hairline); background: var(--m-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- Side panels ---------- */
.palette { border-right-color: var(--m-hairline); }
.side { border-left-color: var(--m-hairline); }
.panel { border-bottom-color: var(--m-hairline); }
.panel h2, .palette h2 { letter-spacing: -0.01em; }
.panel-toggle {
  width: 20px;
  height: 40px;
  border-radius: 99px;
  border-color: var(--m-hairline);
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--m-shadow-sm);
}
.panel-toggle:hover { background: var(--surface); box-shadow: var(--m-shadow-md); }

/* parts palette: soft white groups and tiles that lift a little under the mouse */
.palette-group { border-color: var(--m-hairline); border-radius: 12px; box-shadow: var(--m-shadow-xs); }
.palette-group > summary { font-size: 11px; letter-spacing: 0.07em; color: var(--text-3); }
.palette-group > summary:hover { background: var(--m-hover); }
.part-card {
  border-color: var(--m-hairline);
  border-radius: var(--m-radius);
  transition: border-color 0.15s, transform 0.15s var(--m-ease), box-shadow 0.15s, background-color 0.15s;
}
.part-card:hover { border-color: color-mix(in srgb, var(--primary-2) 45%, transparent); background: color-mix(in srgb, var(--primary-2) 3%, var(--surface)); box-shadow: var(--m-shadow-md); transform: translateY(-1px); }
.part-card:active { transform: scale(0.97); box-shadow: var(--m-shadow-xs); }
.lang-pick { border-color: var(--m-hairline); border-radius: var(--m-radius); box-shadow: var(--m-shadow-xs); }
.lang-pick label + label { border-top-color: var(--m-hairline); }
.stats div { border-color: var(--m-hairline); border-radius: var(--m-radius); box-shadow: var(--m-shadow-xs); background: var(--surface); }

/* ---------- Fields ---------- */
.field input, .field select, .pin-select, #board-select, .part-search, .modal input[type="text"], .modal input[type="url"], .modal input[type="password"], .modal input[type="number"], .modal select, .modal textarea {
  border-color: var(--m-hairline);
  border-radius: var(--m-radius-sm);
  background-color: var(--surface);
  box-shadow: var(--m-shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:hover, .field select:hover, .pin-select:hover, #board-select:hover, .part-search:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .pin-select:focus, #board-select:focus, .part-search:focus, .modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--primary-2);
  box-shadow: var(--m-ring);
}
.chip { border-radius: 99px; transition: background-color 0.15s, box-shadow 0.15s; }

/* ---------- Circuit check ---------- */
.issue { border-color: var(--m-hairline); border-radius: 12px; box-shadow: var(--m-shadow-xs); transition: box-shadow 0.15s, transform 0.15s var(--m-ease); }
.issue:hover { box-shadow: var(--m-shadow-md); transform: translateY(-1px); }

/* ---------- Tables ---------- */
.table th { background: var(--surface-2); border-bottom: 1px solid var(--m-hairline); font-size: 11px; letter-spacing: 0.06em; }
.table td { border-bottom-color: var(--m-hairline); }
.table tbody tr { transition: background-color 0.1s; }
.table tbody tr:hover { background: var(--m-hover); }

/* ---------- Simulate ---------- */
.sim-card { border-color: var(--m-hairline); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-xs); transition: box-shadow 0.15s; }
.sim-card:hover { box-shadow: var(--m-shadow-md); }
.sim-clock { border-radius: 99px; font-variant-numeric: tabular-nums; }

/* ---------- Menus (Export, Examples): frosted, like the right-click menu ---------- */
.menu:not(.ctx-menu) {
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--m-hairline);
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: var(--m-shadow-lg);
  transform-origin: top right;
  animation: m-pop 0.14s var(--m-ease);
}
.menu:not(.ctx-menu) button { border-radius: var(--m-radius-sm); padding: 7px 10px; transition: background-color 0.08s; }
.menu:not(.ctx-menu) button:hover, .menu:not(.ctx-menu) button:focus-visible { background: var(--m-hover-strong); outline: none; }
.menu:not(.ctx-menu) button:hover .ico { color: var(--primary-2); }
.menu:not(.ctx-menu) hr { margin: 4px 8px; border-top-color: var(--m-hairline); }
@keyframes m-pop {
  from { opacity: 0; transform: scale(0.96) translateY(-3px); }
}

/* ---------- Dialogs ---------- */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.32);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  animation: m-fade 0.16s ease-out;
}
.modal {
  border-radius: 18px;
  border: 1px solid var(--m-hairline);
  box-shadow: var(--m-shadow-lg);
  animation: m-rise 0.2s var(--m-ease);
}
.modal h2 { letter-spacing: -0.015em; }
@keyframes m-fade {
  from { opacity: 0; }
}
@keyframes m-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ---------- Messages ---------- */
.toast {
  border-radius: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, #0f172a 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translate(-50%, 16px) scale(0.98);
  transition: opacity 0.2s, transform 0.25s var(--m-ease);
}
.toast.show { transform: translate(-50%, 0) scale(1); }
.toast { display: flex; align-items: center; gap: 14px; }
.toast-msg { flex: 1; min-width: 0; }
.toast-undo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin: -4px -6px -4px 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.toast-undo:hover { background: rgba(255, 255, 255, 0.24); }
.toast-undo:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.toast-undo .ico { width: 14px; height: 14px; }
.toast.ok { background: color-mix(in srgb, #14532d 92%, transparent); }
.toast.warn { background: color-mix(in srgb, #7c2d12 92%, transparent); }

/* ---------- Code editors (Code tab, Simulate tab, libraries.txt) ---------- */
.code-editor { background: var(--ed-bg); }
.code-gutter { background: var(--ed-gutter-bg); color: var(--ed-gutter-fg); border-right: 1px solid color-mix(in srgb, var(--ed-gutter-fg) 14%, transparent); }
.code-gutter .err { background: var(--ed-err-bg); color: var(--ed-err-fg); }
.code-gutter .warn { background: var(--ed-warn-bg); color: var(--ed-warn-fg); }
.code { color: var(--ed-fg); }
.code-input { caret-color: var(--ed-caret); }
.code-input::selection { background: var(--ed-sel); }
.code-input:focus { box-shadow: inset 0 0 0 2px var(--ed-focus); }
.c-com { color: var(--ed-com); font-style: italic; }
.c-str { color: var(--ed-str); }
.c-pre { color: var(--ed-pre); }
.c-num { color: var(--ed-num); }
.c-kw { color: var(--ed-kw); }
.wk-pane-head { background: var(--ed-tabs-bg); color: var(--ed-tab-fg); border-bottom: 1px solid var(--m-hairline); }
.wk-code .muted, .lm-txt-note { color: var(--ed-tab-fg); }
.lm-tabhost { background: var(--ed-tabs-bg); border-bottom: 1px solid var(--m-hairline); }
.lm-tabs button { color: var(--ed-tab-fg); border-radius: 7px 7px 0 0; transition: color 0.12s, background-color 0.12s; }
.lm-tabs button:hover { color: var(--ed-tab-hover); }
.lm-tabs button.active { color: var(--ed-tab-active-fg); background: var(--ed-tab-active-bg); border-bottom-color: var(--ed-tab-line); }
.lm-tabs button .ico { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.lm-txt, .lm-textarea { background: var(--ed-bg); color: var(--ed-fg); }
.lm-txt-note { background: var(--ed-note-bg); }
.lm-txt-note code { color: var(--ed-fg); }

/* ---------- Command palette (js/command.js) ---------- */
.cmd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 230px;
  min-width: 0;
  height: 32px;
  margin-left: 6px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--m-hairline);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.cmd-trigger:hover { border-color: var(--border-strong); background: var(--surface); box-shadow: var(--m-shadow-xs); }
.cmd-trigger:focus-visible { outline: none; box-shadow: var(--m-ring); border-color: var(--primary-2); }
.cmd-trigger .ico { width: 15px; height: 15px; }
.cmd-trigger-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-trigger kbd, .cmd kbd {
  padding: 1px 6px;
  border: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: none;
  color: color-mix(in srgb, var(--muted) 75%, var(--text)); /* plain --muted on the tint is under 4.5:1 at 11px */
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cmd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(15, 23, 42, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: m-fade 0.12s ease-out;
}
.cmd {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: min(520px, 76vh);
  border: 1px solid var(--m-hairline);
  border-radius: 16px;
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: var(--m-shadow-lg);
  overflow: hidden;
  animation: m-rise 0.16s var(--m-ease);
}
.cmd-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--m-hairline); }
.cmd-head .ico { width: 18px; height: 18px; color: var(--muted); }
.cmd-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 15.5px; }
.cmd-input::placeholder { color: var(--muted); }
.cmd-list { flex: 1; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.cmd-group { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.cmd-item { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 6px 10px; border-radius: 9px; cursor: pointer; color: var(--text); font-size: 13.5px; }
.cmd-item .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.cmd-item.active { background: var(--m-hover-strong); }
.cmd-item.active .ico { color: var(--primary-2); }
.cmd-item.disabled { opacity: 0.45; cursor: default; }
.cmd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-label small { margin-left: 8px; color: var(--muted); font-size: 12px; }
.cmd-empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
.cmd-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--m-hairline); color: var(--muted); font-size: 11.5px; }
.cmd-foot kbd { margin-right: 3px; }
@media (max-width: 1100px) {
  .cmd-trigger { flex: 0 0 auto; }
  .cmd-trigger-text, .cmd-trigger kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cmd, .cmd-backdrop { animation: none; } }

/* ---------- Button tooltips (js/tooltips.js) ---------- */
.ui-tip {
  position: fixed;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s var(--m-ease), visibility 0s 0.12s;
}
.ui-tip[data-side="above"] { transform: translateY(2px); }
.ui-tip.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ui-tip kbd {
  flex: none;
  padding: 1px 6px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}
:root[data-theme="dark"] .ui-tip { background: rgba(58, 61, 65, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ui-tip { background: rgba(58, 61, 65, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); }
}
@media (forced-colors: active) { .ui-tip { border: 1px solid CanvasText; } }

/* the schematic's dot grid (js/schematic.js): faint, so the circuit stays the thing you see */
.sch-dot { fill: color-mix(in srgb, var(--muted) 38%, transparent); }
@media (forced-colors: active) { .sch-dot { fill: transparent; } }

/* icons that stand in for the old emoji: sized to their text */
.sim-buzzer .ico { width: 1em; height: 1em; vertical-align: -0.12em; }
.all-good .big .ico { width: 1.1em; height: 1.1em; color: var(--ok); stroke-width: 1.75; }
.lm-lock .ico, .lm-why .ico, .lm-foot .ico, .lm-icon .ico { width: 13px; height: 13px; vertical-align: -2px; }
.meter-mode .ico { width: 14px; height: 14px; vertical-align: -2px; }
.sim-event .ico, .sim-reading .ico, .toast .ico, .hints-note .ico, .modal p .ico { width: 14px; height: 14px; vertical-align: -2px; }
.modal h2 .ico, .modal h3 .ico { width: 1em; height: 1em; margin-right: 6px; vertical-align: -0.14em; color: var(--muted); }
.libs-summary .ico, .libs-head h4 .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.menu b .ico { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: #ca8a04; }
#btn-theme .ico { width: 18px; height: 18px; }

/* ---------- Motion and contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .menu:not(.ctx-menu), .modal, .modal-backdrop, .view.active { animation: none; }
  .ui-tip { transition: none; }
  .part-card:hover, .issue:hover { transform: none; }
  .btn:active:not(:disabled) { transform: none; }
}
@media (forced-colors: active) {
  .menu:not(.ctx-menu), .modal, .toast, .bb-zoom, .panel-toggle { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .view { border: 1px solid CanvasText; }
}
/* phones and tablets: the view goes edge to edge again, there is no room for a card margin */
@media (max-width: 1100px) {
  .view { margin: 0; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
}
/* phones: the explanation goes under its label instead of in a narrow column beside it */
@media (max-width: 600px) {
  .view > .banner:not(.folded) { flex-wrap: wrap; }
  .view > .banner:not(.folded) .banner-text { order: 3; flex-basis: 100%; }
}