:root {
  --bg: #131313;
  --bg-panel: #1a1a1a;
  --bg-panel-alt: #1e1e1e;
  --border: #2a2a2a;
  --border-focus: #3b82f6;
  --text: #e0e0e0;
  --text-dim: #888;
  --text-muted: #555;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-bg: rgba(59, 130, 246, 0.12);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.12);

  --conn-body: #3a3a35;
  --conn-cavity: #2e2e28;
  --conn-stroke: #aaa;
  --label-color: #ddd;
  --line-color: #888;

  --hs-fill: rgba(59, 130, 246, 0.15);
  --hs-stroke: rgba(96, 165, 250, 0.6);
  --hs-fill-selected: rgba(59, 130, 246, 0.3);
  --hs-stroke-selected: rgba(96, 165, 250, 0.9);

  --toolbar-h: 40px;
  --panel-header-h: 32px;
  --resizer: 4px;

  /* Matches --ui-font in pinout-gen's default theme, so the designer and the
     pinouts it produces read the same. */
  --ui-font: "Roboto", system-ui, sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Form controls don't inherit the page font, so the chrome would otherwise
   stay on the browser's UI font. */
button, input, select, textarea {
  font-family: inherit;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 13px;
  overflow: hidden;
}

/* --- Top toolbar --- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--toolbar-h);
  padding: 0 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.toolbar-title {
  font-weight: 600;
  font-size: 14px;
  margin-right: auto;
}

.toolbar button, .toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.toolbar button:hover, .toolbar label:hover {
  border-color: var(--border-focus);
  background: var(--accent-bg);
}

.toolbar input[type="file"] {
  display: none;
}

/* Theme selector: a plain label + a dropdown styled like the connector-form
   selects, rather than the button-like Open/Save labels. */
.toolbar label.theme-field {
  background: none;
  border-color: transparent;
  padding: 4px 0;
  color: var(--text-dim);
  cursor: default;
}
.toolbar label.theme-field:hover {
  background: none;
  border-color: transparent;
}
.toolbar label.theme-field select {
  padding: 4px 8px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.toolbar label.theme-field select:hover,
.toolbar label.theme-field select:focus {
  border-color: var(--border-focus);
}

/* --- Main layout --- */

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panels {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Left panel (connector list and TOML editor) */

.panel-editor {
  display: flex;
  flex-direction: column;
  width: 40%;
  min-width: 200px;
  min-height: 0;
  border-right: 1px solid var(--border);
}

.panel-tabs {
  display: flex;
  flex-shrink: 0;
  min-height: var(--panel-header-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.panel-tab {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.panel-tab:hover { color: var(--text); background: var(--bg-panel-alt); }
.panel-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent-hover); background: var(--accent-bg); }

.panel-tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.panel-tab-content[hidden], .connector-list-empty[hidden] { display: none; }

.connector-list-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 10px 10px 0;
}

.board-title-row { flex-shrink: 0; padding: 10px 10px 0; }
#connector-list-count { margin-right: auto; color: var(--text-dim); font-size: 12px; }
.connector-list-toolbar .connector-move-btn { min-width: 28px; padding: 4px 7px; }
.connector-list-hint { color: var(--text-dim); font-size: 11px; line-height: 1.5; padding: 8px 10px; }
.connector-list-container { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; padding: 0 8px 8px; }
.connector-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }

.connector-list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-panel);
}

.connector-list-row:hover { border-color: var(--text-muted); }
.connector-list-row.selected { border-color: var(--accent); background: var(--accent-bg); }
.connector-list-row.dragging { opacity: 0.5; }
.connector-list-row.drop-before::before, .connector-list-row.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-hover);
  pointer-events: none;
}
.connector-list-row.drop-before::before { top: -4px; }
.connector-list-row.drop-after::after { bottom: -4px; }
.connector-list-handle { color: var(--text-dim); cursor: grab; user-select: none; padding: 2px; font-size: 16px; }

.connector-list-select {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 2px;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.connector-list-name-line { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.connector-list-name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-list-symbol { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-hover); font-size: 11px; padding: 1px 4px; border: 1px solid var(--border); border-radius: 3px; }
.connector-list-symbol svg { display: block; }
.connector-list-detail { max-width: 100%; color: var(--text-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.connector-list-action {
  flex-shrink: 0;
  min-width: 28px;
  min-height: 30px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
}
.connector-list-action:hover { border-color: var(--border-focus); color: var(--text); background: var(--accent-bg); }
.connector-list-action.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.connector-list-empty { padding: 28px 16px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.panel-tab:focus-visible, .connector-list-select:focus-visible, .connector-list-action:focus-visible, .toolbar-btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.panel-editor-header,
.panel-board-header,
.panel-connector-header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--panel-header-h);
  padding: 0 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.panel-editor-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* Right panels (stacked) */

.panel-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

/* Board image panel */

.panel-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  border-bottom: 1px solid var(--border);
}

.panel-board-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  /* One finger may still scroll the page from the board, but a pinch that
     starts here zooms the board, not the page. */
  touch-action: pan-x pan-y;
}

#draw-mode-btn { margin-left: auto; padding: 2px 8px; font-size: 11px; }
[data-draw-mode].active { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-bg); }
.toolbar-btn:disabled { opacity: 0.45; cursor: default; }

.board-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.board-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  line-height: 0;
  /* Pressing and dragging on the board draws or moves connectors, so it must
     not select the hotspot labels or open the image callout on a phone. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.board-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.board-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --chrome-k (set by BoardPanel to 1/zoom) keeps strokes, labels and handles a
   constant on-screen size regardless of the board image's pixel resolution:
   the overlay is drawn in image-pixel units and the wrapper is scaled by zoom,
   so multiplying by 1/zoom cancels that scaling. */
.board-rect {
  fill: var(--hs-fill);
  stroke: var(--hs-stroke);
  stroke-width: calc(2 * var(--chrome-k, 1));
  cursor: pointer;
  transition: fill 0.15s, stroke 0.15s;
}

.board-rect:hover {
  fill: var(--hs-fill-selected);
  stroke: var(--hs-stroke-selected);
}

.board-rect.selected {
  fill: var(--hs-fill-selected);
  stroke: var(--hs-stroke-selected);
  stroke-width: calc(2.5 * var(--chrome-k, 1));
}

.board-rect-label {
  fill: var(--text);
  font-size: calc(14px * var(--chrome-k, 1));
  font-weight: 600;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* The invisible touch target around each resize handle. Only a coarse primary
   pointer uses it, so a mouse still hits exactly what it points at. */
.resize-hit {
  fill: transparent;
  pointer-events: none;
}

@media (pointer: coarse) {
  .resize-hit { pointer-events: all; }
}

/* Connector editor panel */

.panel-connector {
  height: 40%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.panel-connector-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
  padding: 12px;
}

.connector-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
}

/* Connector editor form */

.conn-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.conn-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.conn-form-row label {
  font-size: 11px;
  color: var(--text-dim);
  width: 70px;
  flex-shrink: 0;
  text-align: right;
}

.conn-form-row input,
.conn-form-row select {
  flex: 1;
  padding: 4px 8px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: 12px;
  outline: none;
}

.conn-form-row input:focus,
.conn-form-row select:focus {
  border-color: var(--border-focus);
}

.conn-svg-preview {
  display: flex;
  justify-content: center;
  padding: 8px;
  background: var(--bg-panel);
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: auto;
}

.conn-svg-preview svg {
  max-width: 100%;
  height: auto;
}

.conn-svg-none {
  color: var(--text-muted);
  font-size: 12px;
  padding: 12px 0;
}

/* Pin list */

.pin-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pin-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
}

.pin-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.pin-row:hover {
  border-color: var(--border-focus);
}

.pin-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 11px;
  user-select: none;
}

.pin-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
}

.pin-name-input {
  flex: 1;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--text);
  font-size: 12px;
  font-family: "Consolas", "Fira Code", monospace;
  outline: none;
}

.pin-name-input:focus {
  border-color: var(--border-focus);
  background: var(--bg-panel-alt);
}

.pin-row-select {
  width: 36px;
  padding: 1px 2px;
  font-size: 11px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
}

.pin-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}

.pin-delete-btn:hover {
  color: var(--danger);
}

.pin-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s, color 0.15s;
}

.pin-add-btn:hover {
  border-color: var(--border-focus);
  color: var(--text);
}

/* New connector dialog */

.new-conn-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-panel);
  border: 1px solid var(--border-focus);
  border-radius: 8px;
  padding: 16px;
  z-index: 100;
  min-width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.new-conn-dialog-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text);
}

.toolbar-btn {
  padding: 4px 12px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.toolbar-btn:hover {
  border-color: var(--border-focus);
}

.toolbar-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.toolbar-btn.primary:hover {
  background: var(--accent-hover);
}

.toolbar button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Resize handles */

.resize-handle {
  pointer-events: all;
}

/* Horizontal resizer */

.resizer-h {
  width: var(--resizer);
  cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.15s;
}

.resizer-h:hover, .resizer-h.active {
  background: var(--accent);
}

/* Vertical resizer */

.resizer-v {
  height: var(--resizer);
  cursor: row-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.15s;
}

.resizer-v:hover, .resizer-v.active {
  background: var(--accent);
}

/* Code editor (textarea + highlight overlay) */

.code-editor {
  display: flex;
  height: 100%;
  overflow: hidden;
  font-family: "Consolas", "Fira Code", "Courier New", monospace;
  /* Absolute line height shared by the text and the gutter. A unitless 1.5 is
     relative to each element's own font-size, so the gutter's smaller 12px font
     made its rows 18px vs the 19.5px text rows and the line numbers drifted. */
  --code-lh: calc(13px * 1.5);
  font-size: 13px;
  line-height: var(--code-lh);
}

.code-gutter {
  width: 40px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  text-align: right;
  padding: 8px 6px 8px 0;
  color: var(--text-muted);
  font-size: 12px;
  user-select: none;
}

.code-gutter div {
  height: var(--code-lh);
}

.code-body {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.code-highlight,
.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8px;
  margin: 0;
  border: none;
  font: inherit;
  line-height: inherit;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}

.code-highlight {
  pointer-events: none;
  color: var(--text);
  z-index: 1;
}

.code-input {
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  resize: none;
  outline: none;
  z-index: 2;
  -webkit-text-fill-color: transparent;
}

.code-input::selection {
  background: rgba(59, 130, 246, 0.3);
  -webkit-text-fill-color: transparent;
}

/* TOML syntax highlighting */

.hl-comment { color: #6a737d; font-style: italic; }
.hl-table { color: #79c0ff; font-weight: 600; }
.hl-table-array { color: #d2a8ff; font-weight: 600; }
.hl-key { color: #7ee787; }
.hl-string { color: #a5d6ff; }
.hl-number { color: #f0883e; }
.hl-bool { color: #ff7b72; }

.code-error {
  display: none;
  padding: 4px 10px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 11px;
  border-top: 1px solid var(--danger);
}

/* Scrollbar styling */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Color picker popup */

.color-picker-popup {
  z-index: 200;
  background: var(--bg-panel);
  border: 1px solid var(--border-focus);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  min-width: 180px;
}

.color-picker-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.color-preset {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
}

.color-preset:hover {
  border-color: var(--text-dim);
  transform: scale(1.1);
}

.color-preset.active {
  border-color: #fff;
}

.color-picker-hex-row {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: "Consolas", "Fira Code", monospace;
  font-size: 12px;
  color: var(--text-dim);
}

.color-picker-hex-row span {
  padding-left: 4px;
}

.color-picker-hex {
  flex: 1;
  padding: 3px 6px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  outline: none;
}

.color-picker-hex:focus {
  border-color: var(--border-focus);
}

/* Toolbar disabled buttons */

.toolbar button:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.toolbar .separator {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}

/* ── Runtime status, About button, Generate ──────────────────────── */

.toolbar button.primary {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.toolbar button.primary:disabled,
.toolbar button:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: var(--border);
  background: var(--bg-panel-alt);
  color: var(--text-dim);
}

.toolbar button.icon-btn {
  padding: 4px 9px;
  font-weight: 600;
}

/* Boot progress. Reserves no space once ready, so the toolbar settles. */
.runtime-status {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.runtime-status.ready { display: none; }
.runtime-status.error { color: var(--danger); cursor: help; }

/* ── Modals ──────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: 100%;
  max-height: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.modal-wide { width: 1000px; }

.modal-head {
  display: flex;
  align-items: center;
  height: var(--panel-header-h);
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.modal-close {
  margin-left: auto;
  padding: 0 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover { color: var(--text); }

.modal-body {
  overflow: auto;
  padding: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.modal-body p { margin: 0 0 10px; }
.modal-body code {
  padding: 1px 4px;
  background: var(--bg-panel-alt);
  border-radius: 3px;
  font-size: 12px;
}

.about-links { display: flex; gap: 16px; margin-top: 14px; }
.about-links a { color: var(--accent-hover); }

/* ── Generate dialog ─────────────────────────────────────────────── */

.gen-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.gen-bar button {
  padding: 5px 11px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.gen-bar button:hover:not(:disabled) {
  border-color: var(--border-focus);
  background: var(--accent-bg);
}

.gen-bar button:disabled { opacity: 0.45; cursor: default; }
.gen-spacer { flex: 1; }
.gen-theme { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.gen-theme select {
  padding: 4px 6px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
}

.gen-status { font-size: 11px; color: var(--text-dim); }

/* The preview is the generated page itself, in an iframe, at a height that
   leaves the toolbar and the note visible inside the modal.

   It scrolls because a stacking theme reports a content height taller than the
   box and hides its own scrollbar, trusting the embedder to grow the frame.
   The gutter is reserved so gaining that scrollbar cannot narrow the frame,
   which would make the page report a new height and oscillate. */
.gen-preview {
  height: min(60vh, 560px);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: auto;
  scrollbar-gutter: stable;
  background: var(--bg);
}

.gen-preview iframe { width: 100%; height: 100%; border: 0; display: block; }

.gen-error {
  margin: 0;
  padding: 12px;
  color: var(--danger);
  font-size: 12px;
  white-space: pre-wrap;
}

.gen-note { margin: 10px 0 0; font-size: 11px; color: var(--text-dim); }

@media (max-width: 900px) {
  .modal-backdrop { padding: 0; }
  .modal { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .gen-bar { flex-wrap: wrap; }
  .gen-spacer { display: none; }

  /* The toolbar is one fixed-height row that does not fit a phone, so it
     scrolled the whole page sideways. Let it wrap instead. The title's auto
     margin has to go, or it would push every control onto its own line. */
  .toolbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 6px 8px;
  }

  .toolbar-title { margin-right: 4px; }
  .toolbar .separator { display: none; }
}

@media (max-width: 700px) {
  /* Give both left-panel tabs the full phone width. Keep a bounded list/source
     area above the board and editor, each with its own existing scroll area. */
  .panels { flex-direction: column; overflow-y: auto; }
  .panel-editor {
    width: 100% !important;
    flex: 0 0 32% !important;
    min-width: 0;
    min-height: 160px;
    max-height: 300px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .resizer-h { display: none; }
  .panel-right { min-width: 0; min-height: 300px; flex: 1 0 300px; }
  .panel-connector { height: 45%; }
  .conn-form-row input, .conn-form-row select { min-width: 0; }
  .connector-list-toolbar { padding-top: 6px; }
  .connector-list-hint { padding-top: 5px; padding-bottom: 5px; }
  .connector-list-action { min-width: 34px; min-height: 34px; }
}

.gen-embed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}

.gen-embed input { margin: 0; cursor: pointer; accent-color: var(--accent); }
.gen-embed:has(input:disabled) { opacity: 0.45; cursor: default; }

.gen-bar button.primary {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-hover);
}

/* A board asking for something the browser cannot do: it still rendered, but
   not the way pinout-gen would. Sits above the preview so it is read before
   the file is downloaded. */
.gen-warn {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--danger);
  border-radius: 4px;
  background: var(--danger-bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}