/* ============================================================
 * PCBWeave — Unified Design System
 * ============================================================
 * A single shared stylesheet used across every HTML page.
 * Define tokens here; components read from them so a value can
 * be changed in one place. HTML pages should import this file
 * BEFORE their own page-specific styles so overrides still work.
 */

:root {
  /* ---- Brand / semantic colors ---- */
  --color-primary: #1565c0;
  --color-primary-hover: #1255a1;
  --color-primary-active: #0d47a1;
  --color-primary-bg: #e3f2fd;
  --color-primary-soft: #bbdefb;

  --color-success: #2e7d32;
  --color-success-hover: #256829;
  --color-success-bg: #e8f5e9;
  --color-success-border: #a5d6a7;

  --color-danger: #c62828;
  --color-danger-hover: #b71c1c;
  --color-danger-bg: #ffebee;
  --color-danger-border: #e57373;
  --color-danger-border-soft: #ffcdd2;

  --color-warning: #e65100;
  --color-warning-bg: #fff3e0;
  --color-warning-border: #ffe0b2;

  --color-info: #0288d1;
  --color-info-bg: #e1f5fe;

  /* Admin/secondary accent (purple) — used on admin-only pages */
  --color-admin: #7b1fa2;
  --color-admin-hover: #6a1b9a;
  --color-admin-bg: #f3e5f5;

  /* ---- Text ---- */
  --text-strong: #222;
  --text-primary: #333;
  --text-secondary: #555;
  --text-muted: #888;
  --text-faint: #ccc;
  --text-on-primary: #fff;

  /* ---- Surfaces ---- */
  --bg-page: #fff;
  --bg-body: #f0f2f5;
  --bg-subtle: #f5f5f5;
  --bg-raised: #fafafa;
  --bg-hover: #f0f0f0;
  --bg-active: #e8e8e8;

  --border-color: #ddd;
  --border-strong: #ccc;
  --border-subtle: #eee;

  /* ---- Type scale ---- */
  --font-xs: 10px;
  --font-sm: 11px;
  --font-base: 12px;
  --font-md: 13px;
  --font-lg: 14px;
  --font-xl: 16px;
  --font-family: 'Segoe UI', 'Arial', sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- Shape ---- */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-xl: 0 6px 24px rgba(0, 0, 0, 0.3);

  /* ---- Z-index scale ---- */
  --z-dropdown: 200;
  --z-floating: 1000;
  --z-overlay: 1500;
  --z-dialog: 2100;
  --z-toast: 3000;

  /* ---- Transitions ---- */
  --t-fast: 0.12s;
  --t-base: 0.15s;

  /* ---- Canvas / schematic colors (light theme defaults) ---- */
  --canvas-bg: #ffffff;
  --canvas-page-bg: #fdfdfd;
  --canvas-page-border: #b0b0b0;
  --canvas-page-inner-border: #c0c0c0;
  --canvas-page-marker: #b0b0b0;
  --canvas-titleblock-bg: #f8f8f8;
  --canvas-titleblock-border: #a0a0a0;
  --canvas-titleblock-text: #808080;
  --canvas-titleblock-title: #505050;
  --canvas-grid-minor: #ccc;
  --canvas-grid-major: #aaa;
  --canvas-origin: #bbb;
  --canvas-wire: #009900;
  --canvas-bus: #0000c8;
  --canvas-junction: #009900;
  --canvas-no-connect: #000000;
  --canvas-pin: #840000;
  --canvas-pin-name: #000000;
  --canvas-pin-number: #000000;
  --canvas-body: #840000;
  --canvas-fill-bg: #ffffc8;
  --canvas-reference: #008484;
  --canvas-value: #00c100;
  --canvas-fields: #808080;
  --canvas-label: #008000;
  --canvas-global-label: #c80000;
  --canvas-text: #000000;
  --canvas-hier-sheet-bg: #ffffc8;
  --canvas-hier-sheet-border: #840084;
  --canvas-hier-sheet-filename: #808080;

  /* PCB footprint preview canvas background. Matches PcbCommon's default
     canvas clear color so the CSS box never shows a seam. Same in both
     themes: PCB canvases are intentionally always dark. */
  --pcb-preview-bg: #16162a;

  /* Rating-star color (yellow, same in both themes). */
  --rating-star: #f9a825;

  /* Overlay text used on top of translucent-dark-on-canvas scrims
     (3D viewer status/meta/buttons, Gerber viewer status chip, etc.).
     The backdrop is always dark regardless of page theme, so these
     stay light in both themes. */
  --overlay-text: #f2f2f2;
  --overlay-text-dim: #e0e0e0;
  --overlay-text-faint: #d0d0d0;
}

/* ============================================================
 * Dark theme overrides
 * ============================================================ */
[data-theme="dark"] {
  --color-primary: #42a5f5;
  --color-primary-hover: #64b5f6;
  --color-primary-active: #90caf9;
  --color-primary-bg: #0d2a4a;
  --color-primary-soft: #133862;

  --color-success: #66bb6a;
  --color-success-hover: #81c784;
  --color-success-bg: #1b3a1e;
  --color-success-border: #2e5c30;

  --color-danger: #ef5350;
  --color-danger-hover: #f06563;
  --color-danger-bg: #3a1b1b;
  --color-danger-border: #6e2a2a;
  --color-danger-border-soft: #4a2020;

  --color-warning: #ffa726;
  --color-warning-bg: #3a2a1b;
  --color-warning-border: #5a3f26;

  --color-info: #29b6f6;
  --color-info-bg: #0d2a3a;

  /* Admin/secondary accent (purple) — dark */
  --color-admin: #ba68c8;
  --color-admin-hover: #ab47bc;
  --color-admin-bg: #2a1a33;

  --text-strong: #f0f0f0;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-muted: #808080;
  --text-faint: #555555;
  --text-on-primary: #ffffff;

  --bg-page: #1e1e1e;
  --bg-body: #181818;
  --bg-subtle: #252525;
  --bg-raised: #2a2a2a;
  --bg-hover: #333333;
  --bg-active: #3a3a3a;

  --border-color: #404040;
  --border-strong: #555555;
  --border-subtle: #333333;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 6px 24px rgba(0, 0, 0, 0.7);

  /* Canvas / schematic colors (dark theme) */
  --canvas-bg: #1a1a1a;
  --canvas-page-bg: #222222;
  --canvas-page-border: #555555;
  --canvas-page-inner-border: #4a4a4a;
  --canvas-page-marker: #707070;
  --canvas-titleblock-bg: #2a2a2a;
  --canvas-titleblock-border: #606060;
  --canvas-titleblock-text: #a0a0a0;
  --canvas-titleblock-title: #d0d0d0;
  --canvas-grid-minor: #333333;
  --canvas-grid-major: #4a4a4a;
  --canvas-origin: #555555;
  --canvas-wire: #00a000;
  --canvas-bus: #3a7bd5;
  --canvas-junction: #00a000;
  --canvas-no-connect: #5a8eff;
  --canvas-pin: #ff6060;
  --canvas-pin-name: #e0e0e0;
  --canvas-pin-number: #e0e0e0;
  --canvas-body: #ff6060;
  --canvas-fill-bg: #3a3520;
  --canvas-reference: #4dd0e1;
  --canvas-value: #7ed67e;
  --canvas-fields: #a0a0a0;
  --canvas-label: #4caf50;
  --canvas-global-label: #ff5252;
  --canvas-text: #e0e0e0;
  --canvas-hier-sheet-bg: #2a2820;
  --canvas-hier-sheet-border: #c070c0;
  --canvas-hier-sheet-filename: #909090;
}

/* ============================================================
 * Accessibility utilities
 * ============================================================
 */

/* Visually hidden but readable by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip-to-content link: invisible until focused. */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 99999;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--font-md);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--color-primary-active);
  outline-offset: 2px;
}

/* ============================================================
 * Canonical button classes
 * ============================================================
 * Usage: <button class="btn btn-primary">Label</button>
 * Modifiers: .btn-sm / .btn-lg / .btn-block
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  -webkit-user-select: none;
          user-select: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.btn-success {
  background: var(--color-success);
  color: var(--text-on-primary);
  border-color: var(--color-success);
}
.btn-success:hover { background: var(--color-success-hover); border-color: var(--color-success-hover); }

.btn-danger {
  background: var(--color-danger);
  color: var(--text-on-primary);
  border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }

.btn-danger-outline {
  background: var(--bg-page);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}
.btn-danger-outline:hover { background: var(--color-danger-bg); }

.btn-outline {
  background: var(--bg-page);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { background: var(--bg-subtle); border-color: var(--text-muted); }

.btn-secondary {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---- Size modifiers ---- */
.btn-sm { padding: 4px 10px; font-size: var(--font-sm); }
.btn-lg { padding: 10px 20px; font-size: var(--font-lg); font-weight: 600; }
.btn-block { display: flex; width: 100%; }

/* ============================================================
 * Form controls
 * ============================================================ */

.input,
.form-input,
.form-select,
.form-textarea {
  display: inline-block;
  width: 100%;
  padding: 6px 10px;
  font-size: var(--font-md);
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--t-fast);
  box-sizing: border-box;
  font-family: inherit;
}
.input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
}
.form-textarea {
  min-height: 64px;
  resize: vertical;
}

.form-input-sm { padding: 3px 6px; font-size: var(--font-sm); }

.form-label {
  display: block;
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: 3px;
}

/* ============================================================
 * Badges / pill labels
 * ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: var(--font-xs);
  font-weight: 500;
  border-radius: 10px;
  background: var(--bg-active);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge-primary { background: var(--color-primary-bg); color: var(--color-primary); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-muted   { background: var(--bg-active);         color: var(--text-muted); }

/* ============================================================
 * Panels / section helpers
 * ============================================================ */

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}
.panel-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
}
.panel-subtitle {
  font-size: var(--font-sm);
  color: var(--text-muted);
}
.panel-empty {
  padding: var(--space-5) var(--space-4);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  font-size: var(--font-base);
}

/* ============================================================
 * Message / alert text
 * ============================================================ */

.msg { font-size: var(--font-base); margin-top: var(--space-1); }
.msg.ok { color: var(--color-success); }
.msg.err, .msg.error { color: var(--color-danger); }
.msg.warn { color: var(--color-warning); }

/* ============================================================
 * Auth card — shared pattern for login / reset-password /
 * invite / verify-email pages
 * ============================================================
 * Centered card on a subtle page background. Consumers put the
 * logo, title, subtitle, form fields (using standard .form-input
 * or bare inputs styled via `.auth-card input`), and a primary
 * button (.btn .btn-primary .btn-block, or bare .auth-btn) inside
 * a <div class="auth-card">. All colors come from tokens so
 * [data-theme="dark"] works automatically.
 */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  font-family: var(--font-family);
  color: var(--text-primary);
  padding: var(--space-4);
}

.auth-card {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  color: var(--text-primary);
}

.auth-card .auth-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  letter-spacing: -0.5px;
}
.auth-card .auth-logo span { color: var(--text-muted); font-weight: 400; }

.auth-card .auth-title {
  font-size: var(--font-xl);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.auth-card .auth-subtitle {
  font-size: var(--font-md);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.auth-card .auth-tabs {
  display: flex;
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--border-color);
}
.auth-card .auth-tabs button {
  flex: 1;
  padding: var(--space-2);
  background: none;
  border: none;
  font-size: var(--font-lg);
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
}
.auth-card .auth-tabs button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.auth-card .form-group { margin-bottom: var(--space-3); }
.auth-card .form-group label {
  display: block;
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  font-weight: 500;
}
.auth-card .form-group input {
  width: 100%;
  padding: var(--space-2) 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-lg);
  background: var(--bg-page);
  color: var(--text-primary);
  box-sizing: border-box;
  font-family: inherit;
}
.auth-card .form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.auth-card .checkbox-group {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  margin: var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1.4;
}
.auth-card .checkbox-group input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--color-primary);
}
.auth-card .checkbox-group a {
  font-weight: 500;
}

/* Full-width primary button tailored for auth forms.
 * Use either <button class="btn btn-primary btn-block"> or
 * <button class="auth-btn"> for convenience. */
.auth-card .auth-btn {
  width: 100%;
  padding: 10px;
  background: var(--color-primary);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-lg);
  cursor: pointer;
  font-weight: 500;
  margin-top: var(--space-2);
  font-family: inherit;
  transition: background var(--t-fast);
}
.auth-card .auth-btn:hover { background: var(--color-primary-hover); }
.auth-card .auth-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}

.auth-card .auth-link,
.auth-card a {
  color: var(--color-primary);
  text-decoration: none;
}
.auth-card a:hover { text-decoration: underline; }

.auth-card .error-msg {
  color: var(--color-danger);
  font-size: var(--font-base);
  margin-top: var(--space-2);
  display: none;
}
.auth-card .error-msg.visible { display: block; }

.auth-card .info-msg {
  color: var(--color-primary);
  font-size: var(--font-base);
  margin-top: var(--space-2);
  display: none;
}
.auth-card .info-msg.visible { display: block; }

.auth-card .success-msg {
  color: var(--color-success);
  font-size: var(--font-md);
  margin-top: var(--space-3);
  display: none;
  text-align: center;
}
.auth-card .success-msg.visible { display: block; }

.auth-card .auth-divider {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

/* Spinner used on verify-email while we wait for the server. */
.auth-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Small note beneath auth form (e.g. "Forgot password?" link row). */
.auth-card .auth-note {
  margin-top: var(--space-3);
  font-size: var(--font-base);
  text-align: center;
}
.auth-card .auth-note + .auth-note { margin-top: var(--space-1); }

/* ============================================================
 * Toast (non-blocking notifications) — top-right per UX Vision §14.1
 * ============================================================
 * Pages add <div class="toast-container" id="toast-container"></div>
 * and call a local showToast(msg, type) that appends a .toast child.
 * Positioned below the site header (48–56 px) so toasts are not
 * obscured by the nav bar on pages that load /editor/header.js.
 */
.toast-container {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  pointer-events: none;
}
.toast {
  background: var(--bg-active);
  color: var(--text-primary);
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 0;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  max-width: 400px;
  word-break: break-word;
  opacity: 0;
  transform: translateX(20px);
  animation: toast-slide-in var(--t-fast) forwards;
}
/* Semantic variants — two naming conventions for compatibility:
   header.js uses .toast-error/.toast-success;
   per-page showToast helpers use .error/.success. */
.toast.toast-error,
.toast.error  { background: var(--color-danger);  color: var(--text-on-primary); }
.toast.toast-success,
.toast.success { background: var(--color-success); color: var(--text-on-primary); }
.toast.toast-out { animation: toast-slide-out var(--t-fast) forwards; }
@keyframes toast-slide-in { to { opacity: 1; transform: translateX(0); } }
@keyframes toast-slide-out { to { opacity: 0; transform: translateX(20px); } }

/* ============================================================
 * Utility classes — for sparing use in JS-generated markup
 * ============================================================ */

.u-hidden { display: none !important; }
.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-mono { font-family: var(--font-mono); }
.u-muted { color: var(--text-muted); }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-1 { flex: 1; min-width: 0; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }

/* ============================================================
 * Font-scale override (per-user preference, §10.1 Appearance)
 * ============================================================
 * Keep sm/md/lg as three discrete scales so the cascade stays
 * predictable — avoids runtime multiplication on every token.
 * Default (no attribute) is identical to 'md'.
 */
html[data-font-scale="sm"] {
  --font-xs: 9px;
  --font-sm: 10px;
  --font-base: 11px;
  --font-md: 12px;
  --font-lg: 13px;
  --font-xl: 15px;
}
html[data-font-scale="lg"] {
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
}

/* ============================================================
 * Empty state — shared across marketplace / dashboard pages
 * ============================================================ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state h3 {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 600;
}
.empty-state p {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* ============================================================
 * Loading state — shared across marketplace / dashboard pages
 * ============================================================ */
.loading-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.loading-state::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: loading-spin 0.7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }

/* ============================================================
 * Tab bar — shared by symbol-detail, footprint-detail, home
 * ============================================================
 * Pages that need per-element tweaks (e.g. .tab-count-pill) add
 * their own rules on top of these base styles.
 */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 0;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.tab-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
 * Diff-overlay color tokens — used by editor-revision-diff.js
 * ============================================================
 * Default (light) values match the hardcoded hex literals the
 * canvas used before. Dark-theme overrides produce softer tones
 * that read well on the dark canvas background (#1e1e1e).
 * The "bg" variants are semi-transparent fills for symbol rects.
 */
:root {
  --diff-added:        #2e7d32;
  --diff-removed:      #c62828;
  --diff-modified:     #ef6c00;
  --diff-added-bg:     #c8e6c9;
  --diff-removed-bg:   #ffcdd2;
  --diff-modified-bg:  #ffe0b2;
  --diff-neutral-wire: #455a64;
  --diff-neutral-bus:  #1565c0;
  --diff-neutral-hier: #6a1b9a;
  --diff-neutral-label:#00695c;
  --diff-neutral-sym:  #616161;
  --diff-neutral-sym-bg:#e0e0e0;
  --diff-canvas-bg:    #ffffff;
  --diff-text:         #222222;
}
[data-theme="dark"] {
  --diff-added:        #66bb6a;
  --diff-removed:      #ef5350;
  --diff-modified:     #ffa726;
  --diff-added-bg:     #1b3a1e;
  --diff-removed-bg:   #3a1b1b;
  --diff-modified-bg:  #3a2a1b;
  --diff-neutral-wire: #78909c;
  --diff-neutral-bus:  #64b5f6;
  --diff-neutral-hier: #ce93d8;
  --diff-neutral-label:#80cbc4;
  --diff-neutral-sym:  #9e9e9e;
  --diff-neutral-sym-bg:#3a3a3a;
  --diff-canvas-bg:    #1e1e1e;
  --diff-text:         #e0e0e0;
}
</content>
</invoke>