/* ==========================================================================
   MoboMaps — Dashboard Shell
   Shared styles for all app pages (board viewer, checker, boards, wizard).
   Every page imports this file. Page-specific styles live in each HTML file.
   ========================================================================== */

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; }

/* ===== TOKENS ===== */
:root {
  /* Palette — Cinematic dark, ultra-subtle surfaces */
  --bg: #0a0a0c;
  --bg-surface: #111114;
  --bg-raised: #1a1a1e;
  --accent: #e8e9eb;
  --accent-hover: #ffffff;
  --accent-deep: #060608;
  --text: #e8e9eb;
  --text-secondary: #898b90;
  --text-muted: #6b6d72;
  --text-dimmer: #505256;
  --seam: rgba(255, 255, 255, 0.06);
  --seam-hover: rgba(255, 255, 255, 0.10);
  --seam-active: rgba(255, 255, 255, 0.18);
  --accent-text: #141516;
  --accent-glow: rgba(255, 255, 255, 0.05);
  --accent-border: rgba(255, 255, 255, 0.15);

  /* Slot card — interactive checker tiles */
  --slot-bg: var(--bg-surface);
  --slot-bg-hover: var(--bg-raised);

  /* Rear I/O cards — banner + info tiles */
  --rio-card-bg: var(--bg-surface);

  /* CTA — resolved surface tint (hue ~214°) */
  --cta: #2D3846;
  --cta-hover: #384756;
  --cta-surface: #182028;
  --cta-text: #5a8aab;

  /* PCIe generation colors — gold / silver / copper */
  --gen5: #c4a94f;
  --gen4: #c0c0c0;
  --gen3: #b87d42;
  --gen5-glow: rgba(196,169,79,0.12);
  --gen4-glow: rgba(192,192,192,0.08);
  --gen3-glow: rgba(180,125,66,0.10);
  --gen5-border: rgba(196,169,79,0.35);
  --gen4-border: rgba(192,192,192,0.25);
  --gen3-border: rgba(180,125,66,0.30);

  /* Warning / bandwidth reduction */
  --warn: #c8aa37;
  --warn-border: rgba(200,170,55,0.30);
  --warn-bg: rgba(200,170,55,0.12);
  --warn-glow: rgba(200,170,55,0.06);

  /* Good / full bandwidth */
  --good: #5a9a6a;
  --good-border: rgba(90,154,106,0.25);
  --good-glow: rgba(90,154,106,0.06);

  /* Blocked / disabled */
  --blocked: #c45050;
  --blocked-border: rgba(196,80,80,0.30);
  --blocked-bg: rgba(196,80,80,0.10);
  --blocked-glow: rgba(196,80,80,0.06);

  /* Fluid type scale (375px → 1400px, 1.2 → 1.25) */
  --step--2: clamp(0.69rem, 0.62rem + 0.28vw, 0.875rem);
  --step--1: clamp(0.83rem, 0.77rem + 0.26vw, 1.00rem);
  --step-0: clamp(1.00rem, 0.91rem + 0.39vw, 1.25rem);
  --step-1: clamp(1.20rem, 1.07rem + 0.57vw, 1.56rem);
  --step-2: clamp(1.44rem, 1.25rem + 0.80vw, 1.95rem);
  --step-3: clamp(1.73rem, 1.47rem + 1.11vw, 2.44rem);
  --step-4: clamp(2.07rem, 1.72rem + 1.53vw, 3.05rem);

  /* Fluid space scale */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.10vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.45rem + 0.20vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.68rem + 0.29vw, 0.94rem);
  --space-s: clamp(1.00rem, 0.91rem + 0.39vw, 1.25rem);
  --space-m: clamp(1.50rem, 1.36rem + 0.59vw, 1.88rem);
  --space-l: clamp(2.00rem, 1.82rem + 0.78vw, 2.50rem);
  --space-xl: clamp(3.00rem, 2.73rem + 1.17vw, 3.75rem);
  --space-2xl: clamp(4.00rem, 3.63rem + 1.56vw, 5.00rem);

  /* One-up pairs */
  --space-s-m: clamp(1.00rem, 0.68rem + 1.37vw, 1.88rem);
  --space-s-l: clamp(1.00rem, 0.45rem + 2.34vw, 2.50rem);
  --space-m-xl: clamp(1.50rem, 0.68rem + 3.51vw, 3.75rem);

  /* Font stack */
  --font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Animation */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shell layout */
  --sidebar-width: 260px;
  --header-height: 56px;
}

/* ===== BASE ===== */
html {
  font-family: var(--font);
  font-size: 100%;
  font-variant-numeric: lining-nums;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
  font-size: var(--step-0);
  line-height: 1.6;
}

/* Lock scroll when sidebar overlay is open (mobile/tablet only) */
body.sidebar-open {
  overflow: hidden;
}

@media (min-width: 1024px) {
  body.sidebar-open {
    overflow: visible;
  }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default outline for mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
}

/* ===== SHELL HEADER ===== */
.shell-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-inline: var(--space-s);
  background: var(--bg-surface);
  border-block-end: 1px solid var(--seam);
}

.shell-logo {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: auto;
}

.shell-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  flex-shrink: 0;
}

.shell-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.shell-nav-btn:active {
  color: var(--text);
  background: var(--seam-hover);
}

@media (hover: hover) {
  .shell-nav-btn:hover {
    color: var(--text);
    background: var(--seam-hover);
  }
}

.shell-nav-btn.is-active {
  color: var(--text);
  background: var(--seam-hover);
}

.shell-nav-btn svg {
  width: 22px;
  height: 22px;
}


/* Hide compare toggle below 1500px */
@media (max-width: 1499px) {
  .shell-compare-toggle { display: none; }
  #viewCompareBtn { display: none; }
}

/* ===== SHELL LAYOUT ===== */
.shell-body {
  display: flex;
  min-height: calc(100dvh - var(--header-height));
  max-width: 2560px;
  margin-inline: auto;
}

/* Sidebar — hidden on mobile/tablet, visible on desktop */
.shell-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-inline-end: none;
  padding: var(--space-s);
  overflow-y: auto;
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  z-index: 90;
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.25s var(--ease), visibility 0.25s;
  scrollbar-width: thin;
  scrollbar-color: var(--seam) transparent;
}

.shell-sidebar::-webkit-scrollbar { width: 6px; }
.shell-sidebar::-webkit-scrollbar-track { background: transparent; }
.shell-sidebar::-webkit-scrollbar-thumb { background: var(--seam); border-radius: 3px; }
.shell-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12); }

/* Main content area */
.shell-main {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-2xs) var(--space-2xs);
  display: flex;
  flex-direction: column;
}

/* Desktop: hide sidebar toggle, sidebar always visible */
@media (min-width: 1024px) {
  .shell-sidebar-toggle {
    display: none;
  }

  .shell-sidebar {
    position: sticky;
    top: var(--header-height);
    height: calc(100dvh - var(--header-height));
    transform: none;
    visibility: visible;
    pointer-events: auto;
    z-index: auto;
  }
}

/* Mobile: sidebar is full-width overlay */
@media (max-width: 767px) {
  .shell-sidebar {
    right: 0;
    width: 100%;
  }
}

/* Mobile + Tablet: sidebar opens via JS toggle */
@media (max-width: 1023px) {
  .shell-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
}

/* Sidebar backdrop (for mobile/tablet overlay) */
.shell-backdrop {
  position: fixed;
  inset: 0;
  top: var(--header-height);
  z-index: 89;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.shell-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ===== PANEL SYSTEM ===== */
.panel {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: clip;
  container-type: inline-size;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  min-height: 44px;
}

.panel-title {
  font-size: var(--step-0);
  font-weight: 700;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

/* Toggle group */
.toggle-group {
  display: flex;
  border-radius: 8px;
  border: 1px solid var(--seam);
  overflow: hidden;
}

.toggle-group-btn {
  padding: 4px 12px;
  font-size: var(--step--1);
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.3px;
  background: transparent;
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.toggle-group-btn:hover {
  color: var(--text);
  background: var(--seam);
}

.toggle-group-btn.active {
  color: var(--accent);
  background: var(--accent-glow);
}

.panel-body {
  padding: var(--space-s);
}

/* Panel body variants */
.panel--flush .panel-body {
  padding: 0;
}

.panel-body--placeholder {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmer);
}

.panel-body--centered {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: center;
  text-align: center;
}

.panel--gold {
  flex: 1;
}

/* ===== SPEC LIST ===== */
.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spec-label {
  color: var(--text-muted);
}

/* ===== PRICE ===== */
.price-amount {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--accent);
}

/* ===== BUTTONS — MODIFIERS ===== */
.btn--full {
  width: 100%;
}

/* ===== PANEL GRID ===== */
/* Main content panels stack on mobile, grid on desktop */
.panel-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

.panel-grid + .panel-grid {
  margin-block-start: var(--space-2xs);
}

@media (min-width: 768px) {
  .panel-grid--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Full-width panels span both columns */
  .panel-grid--2col > .panel--full {
    grid-column: 1 / -1;
  }
}

/* ===== BADGES ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding-block: 0.15em;
  padding-inline: 0.5em;
  font-size: var(--step--2);
  font-weight: 600;
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--text-secondary);
  white-space: nowrap;
}

.badge--gold {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.badge--gen5 { color: var(--gen5); }
.badge--gen4 { color: var(--gen4); }
.badge--gen3 { color: var(--gen3); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 600;
  padding-block: 0.4em;
  padding-inline: 1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--gold {
  color: var(--text);
  background: var(--cta);
}

.btn--gold:active { background: var(--cta-hover); }
@media (hover: hover) { .btn--gold:hover { background: var(--cta-hover); } }

.btn--surface {
  color: var(--text-secondary);
  background: var(--bg-raised);
}

.btn--surface:active { color: var(--text); background: var(--seam-active); }
@media (hover: hover) { .btn--surface:hover { color: var(--text); background: var(--seam-active); } }

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

.btn--ghost:active { color: var(--text); border-color: var(--seam-active); }
@media (hover: hover) { .btn--ghost:hover { color: var(--text); border-color: var(--seam-active); } }

.btn svg {
  width: 1em;
  height: 1em;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== SIDEBAR COMPONENTS ===== */
.sidebar-section {
  margin-block-end: var(--space-m);
}

.sidebar-heading {
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dimmer);
  margin-block-end: var(--space-xs);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--step--1);
  color: var(--text-secondary);
  border-radius: 6px;
  min-height: 44px;
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-link:active {
  color: var(--text);
  background: var(--seam-hover);
}

@media (hover: hover) {
  .sidebar-link:hover {
    color: var(--text);
    background: var(--seam-hover);
  }
}

.sidebar-link.is-active {
  color: var(--accent);
  background: var(--accent-glow);
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Support links — sidebar bottom */
.sidebar-spacer { flex: 1; }

.sidebar-support {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.sidebar-support-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 6px;
  border: 1px solid var(--seam);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  min-height: 44px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .sidebar-support-link:hover {
    border-color: var(--seam-hover);
    color: var(--text);
  }
}

.sidebar-support-link:active {
  border-color: var(--seam-hover);
  color: var(--text);
}

.sidebar-support-link .support-icon {
  flex-shrink: 0;
  font-size: var(--step--1);
}

/* Sidebar close button (mobile/tablet only) */
.sidebar-filters .sidebar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-close:hover {
  color: var(--text);
  background: var(--seam);
}

.sidebar-close svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1023px) {
  .sidebar-close { display: flex; }
}

/* Filter counter */
.filter-counter {
  text-align: center;
  padding: 8px;
  margin-bottom: 4px;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--seam);
  border-radius: 6px;
}

/* ===== SIDEBAR — PAGE-AWARE CONTENT ===== */
/* Browser page shows filters, other pages show utility links */
.sidebar-filters { display: none; }
.sidebar-utility { display: block; }

.shell-body[data-page="browser"] .sidebar-filters { display: block; }
.shell-body[data-page="browser"] .sidebar-utility { display: none; }

/* ===== SIDEBAR FILTER ACCORDION ===== */
.filter-section {
  border-bottom: 1px solid var(--seam);
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.filter-header:hover { color: var(--text); }

.filter-title {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-secondary);
}

.filter-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.filter-section.is-open .filter-arrow {
  transform: scaleY(-1);
}

.filter-content {
  display: none;
  padding-bottom: 12px;
}

.filter-section.is-open .filter-content {
  display: block;
}

/* Checkbox / radio options */
.sidebar-filters .filter-option {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: var(--step--2);
  color: var(--text-muted);
  background: var(--bg-surface);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.sidebar-filters .filter-option:hover { color: var(--text); }

.sidebar-filters .filter-option input[type="checkbox"],
.sidebar-filters .filter-option input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* Radio button group (M.2, PCIe — inline) */
.filter-radio-group {
  display: flex;
  gap: var(--space-3xs);
}

.filter-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: var(--step--2);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.filter-radio:hover { color: var(--text); }

.filter-radio input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Price range */
.price-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-bottom: 8px;
}

.price-input {
  width: 80px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: var(--step--2);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--seam);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease;
}

.price-input:focus {
  border-color: var(--seam-active);
}

.price-dash {
  color: var(--text-muted);
}

.dual-range {
  position: relative;
  height: 24px;
}

.dual-range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--seam);
  border-radius: 2px;
}

.dual-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--cta);
  border-radius: 2px;
  left: 0%;
  right: 0%;
}

.dual-range-slider {
  position: absolute;
  width: 100%;
  top: 0;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  outline: none;
}

.dual-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  border: 2px solid var(--bg-surface);
  cursor: pointer;
  pointer-events: auto;
}

.dual-range-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-secondary);
  border: 2px solid var(--bg-surface);
  cursor: pointer;
  pointer-events: auto;
}

/* Filter action buttons */
.filter-actions {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Apply button — mobile/tablet only */
.filter-apply-btn {
  display: none;
  width: 100%;
  padding: 10px;
  font-family: inherit;
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text);
  background: var(--cta);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.filter-apply-btn:hover {
  background: var(--cta-hover);
}

@media (max-width: 1023px) {
  .filter-apply-btn { display: block; }
}

.filter-clear-btn {
  width: 100%;
  padding: 8px;
  font-family: inherit;
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--seam);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.filter-clear-btn:hover {
  color: var(--text);
  border-color: var(--seam-hover);
}

/* ===== SEARCH INPUT ===== */
.search-input {
  width: 100%;
  padding: var(--space-2xs) var(--space-s);
  padding-inline-start: 2.5em;
  font-family: var(--font);
  font-size: var(--step--1);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  border-radius: 8px;
  min-height: 44px;
  transition: border-color 0.15s ease;
}

.search-input::placeholder {
  color: var(--text-dimmer);
}

.search-input:focus {
  border-color: var(--accent-border);
}

.search-input:focus-visible {
  border-color: var(--accent-border);
  outline-offset: 0;
}

.search-wrap {
  position: relative;
}

.search-wrap svg {
  position: absolute;
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-dimmer);
  pointer-events: none;
}

/* ===== FILTER TRIGGER ===== */
.shell-filter-toggle {
  position: relative;
}

.filter-count-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--text);
  background: var(--cta);
  border-radius: 100px;
  pointer-events: none;
}

.filter-count-badge:empty {
  display: none;
}

/* ===== FILTER DIALOG ===== */
dialog.filter-dialog {
  margin: auto;
  border: none;
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text);
  width: 100%;
  max-width: min(640px, calc(100vw - var(--space-s) * 2));
  max-height: min(80vh, 720px);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

dialog.filter-dialog[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  dialog.filter-dialog[open] {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
}

/* Closing animation — applied before .close() so transition runs */
dialog.filter-dialog.is-closing {
  opacity: 0;
  transform: scale(0.97) translateY(8px);
}

dialog.filter-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
}

dialog.filter-dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

@starting-style {
  dialog.filter-dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}

dialog.filter-dialog.is-closing::backdrop {
  background: rgba(0, 0, 0, 0);
}

.filter-dialog-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.filter-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  border-block-end: 1px solid var(--seam);
  flex-shrink: 0;
}

.filter-dialog-title {
  font-size: var(--step-0);
  font-weight: 700;
}

.filter-dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.filter-dialog-close svg {
  width: 20px;
  height: 20px;
}

.filter-dialog-close:active {
  color: var(--text);
  background: var(--seam-hover);
}

@media (hover: hover) {
  .filter-dialog-close:hover {
    color: var(--text);
    background: var(--seam-hover);
  }
}

.filter-dialog-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-s);
}

.filter-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  border-block-start: 1px solid var(--seam);
  flex-shrink: 0;
  background: var(--bg-surface);
}

/* ===== FILTER CHIPS ===== */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.75em;
  font-family: var(--font);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text);
  background: var(--cta);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  min-height: 32px;
  transition: background 0.15s ease;
}

.filter-chip:active { background: var(--cta-hover); }
@media (hover: hover) { .filter-chip:hover { background: var(--cta-hover); } }

@media (max-width: 479px) {
  .filter-chip {
    min-height: 44px;
  }
}

.filter-chip-close {
  opacity: 0.6;
  font-size: 1.1em;
  line-height: 1;
}

@media (hover: hover) {
  .filter-chip:hover .filter-chip-close {
    opacity: 1;
  }
}

.filter-chips-clear {
  font-family: var(--font);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25em 0.5em;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

.filter-chips-clear:active { color: var(--text); }
@media (hover: hover) { .filter-chips-clear:hover { color: var(--text); } }

.filter-dialog-chips {
  padding: 0 var(--space-s) var(--space-2xs);
  flex-shrink: 0;
}

/* ===== FILTER STATUS ===== */
.filter-status {
  font-size: var(--step--2);
  color: var(--text-muted);
  padding: var(--space-2xs) var(--space-s);
  border-block-end: 1px solid var(--seam);
  flex-shrink: 0;
}

/* ===== FILTER ROWS ===== */
.filter-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  padding-block: var(--space-2xs);
}

.filter-row + .filter-row {
  border-block-start: 1px solid var(--seam);
}

.filter-row-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  width: 120px;
  flex-shrink: 0;
}

.filter-row-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  flex: 1;
}

.filter-option {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.75em;
  font-family: var(--font);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  border-radius: 6px;
  cursor: pointer;
  min-height: 32px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.filter-option:active {
  color: var(--text);
  border-color: var(--seam-hover);
}

@media (hover: hover) {
  .filter-option:hover {
    color: var(--text);
    border-color: var(--seam-hover);
  }
}

.filter-option.is-active {
  color: var(--text);
  background: var(--cta);
  border-color: transparent;
}

.filter-option.is-active:active { background: var(--cta-hover); }
@media (hover: hover) { .filter-option.is-active:hover { background: var(--cta-hover); } }

@media (max-width: 479px) {
  .filter-row {
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .filter-row-label {
    width: auto;
  }

  .filter-option {
    min-height: 44px;
  }
}

/* ===== DASH PAGES ===== */
.dash-page {
  display: none;
}

.dash-page.is-active {
  display: block;
}

/* ===== BOARD BROWSER ===== */
.browser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-s);
  flex-wrap: wrap;
}

.browser-search {
  position: relative;
  flex: 0 1 33%;
  min-width: 200px;
}

@media (max-width: 1499px) {
  .browser-search {
    flex: 1;
  }
}

.browser-sort {
  flex: none;
}

.browser-sort-select {
  width: auto;
  padding: 8px 28px 8px 10px;
  font-size: var(--step--2);
  font-family: inherit;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--seam);
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6d72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.browser-sort-select:hover {
  border-color: var(--seam-hover);
  color: var(--text);
}

.browser-sort-select:focus {
  border-color: var(--seam-active);
}

.browser-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.browser-search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--seam);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease;
}

.browser-search-input::placeholder {
  color: var(--text-dimmer);
}

.browser-search-input:focus {
  border-color: var(--seam-active);
}

/* Board grid */
.browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(550px, 100%), 1fr));
  gap: var(--space-2xs);
  padding: 0 var(--space-s) var(--space-s);
}

/* Board card — horizontal layout */
.browser-card {
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  transition: border-color 0.2s ease, transform 0.2s ease;
  container-type: inline-size;
}

.browser-card[data-brand="ASRock"]  { background: linear-gradient(90deg, #0c0b10 0%, #0f1214 60%, #132024 100%); }
.browser-card[data-brand="ASUS"]    { background: linear-gradient(90deg, #0c0b10 0%, #0b0d14 60%, #0b1019 100%); }
.browser-card[data-brand="Gigabyte"]{ background: linear-gradient(90deg, #0c0b10 0%, #120e10 60%, #18100f 100%); }
.browser-card[data-brand="MSI"]     { background: linear-gradient(90deg, #0c0b10 0%, #130c11 60%, #180d12 100%); }

@media (hover: hover) {
  .browser-card:hover {
    border-color: var(--seam-hover);
    transform: translateX(3px);
  }
}

.browser-card:active:not(:has(.browser-card-action:active)) {
  transform: scale(0.98);
}

.browser-card-thumb {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.browser-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .browser-card:hover .browser-card-thumb img {
    transform: scale(1.03);
  }
}

.browser-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.browser-card-name {
  font-size: var(--step-0);
  font-weight: 700;
  color: #b8babe;
  text-transform: uppercase;
}

.browser-card-meta {
  font-size: var(--step--2);
  color: var(--text-secondary);
  display: flex;
  gap: var(--space-3xs);
  flex-wrap: wrap;
  align-items: center;
}

.browser-card-meta .badge {
  font-size: var(--step--2);
}

.browser-card-badges {
  display: flex;
  gap: var(--space-3xs);
  flex-wrap: wrap;
}

.browser-card-price {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
  margin-top: var(--space-3xs);
}

.browser-card-amazon {
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--text);
  background: #0a2536;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.browser-card-amazon:hover {
  background: var(--cta);
}

.browser-card-actions {
  display: flex;
  gap: var(--space-3xs);
  margin-top: var(--space-3xs);
}

.browser-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--seam);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 32px;
  height: 32px;
}

.browser-card-action svg {
  width: 16px;
  height: 16px;
}

.browser-card-action:hover {
  color: var(--text);
  border-color: var(--seam-hover);
  background: var(--accent-glow);
}

.browser-card-action:active {
  color: var(--text);
  border-color: var(--seam-hover);
  background: var(--seam);
}

/* Power stage dial */
.browser-card-dial {
  flex-shrink: 0;
  margin-left: auto;
}

@container (max-width: 500px) {
  .browser-card-dial { display: none; }
}

.browser-card-dial .pw-dial {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(196, 169, 79, 0.25);
  background: radial-gradient(circle at center, rgba(196, 169, 79, 0.04) 0%, transparent 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.browser-card-dial .pw-dial::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(196, 169, 79, 0.08);
}

.browser-card-dial .pw-dial-num {
  font-size: 22px;
  font-weight: 700;
  color: #c4a94f;
  line-height: 1;
}

.browser-card-dial .pw-dial-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1;
}

.browser-card-dial .pw-dial-sub {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  line-height: 1;
}

/* Card fade-in animation */
.browser-card {
  animation: browserCardIn 0.3s ease both;
}

@keyframes browserCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Browser empty state */
.browser-empty {
  grid-column: 1 / -1;
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-dimmer);
  font-size: var(--step-0);
}

/* Load All button */
.browser-load-all {
  display: block;
  margin: var(--space-m) auto;
  padding: var(--space-2xs) var(--space-l);
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  border-radius: 24px;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 44px;
}

.browser-load-all:active {
  background: var(--seam-hover);
  border-color: var(--seam-hover);
}

@media (hover: hover) {
  .browser-load-all:hover {
    background: var(--seam-hover);
    border-color: var(--seam-hover);
  }
}

@media (max-width: 599px) {
  .browser-search {
    flex: 0 0 100%;
  }
  .browser-sort {
    flex: 0 0 100%;
  }
  .browser-sort-select {
    width: 100%;
  }
}

/* Mobile: single column, compact cards */
@media (max-width: 479px) {
  .browser-grid {
    grid-template-columns: 1fr;
  }

  .browser-card-thumb {
    width: 72px;
    height: 72px;
  }

  .browser-card-actions {
    display: none;
  }

  .browser-card-dial {
    display: none;
  }

  .browser-bar {
    padding: var(--space-2xs);
  }

}


/* ===== DASHBOARD HEADER ===== */
/* Board A (left) + view tabs (center) + Board B (right, compare only) */
.dash-header {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin-block: 0 var(--space-2xs);
  margin-inline: calc(-1 * var(--space-2xs));
  padding: var(--space-2xs);
  background: var(--bg-surface);
}

/* Board trigger is the main heading when inside dash-header */
.dash-header .board-trigger {
  font-size: var(--step-0);
  width: 100%;
}

/* ===== VIEW TABS ===== */
.view-tabs {
  display: flex;
  border-radius: 8px;
  border: 1px solid var(--seam);
  overflow: hidden;
  flex-shrink: 0;
}

.view-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(0.375rem, 1.04rem - 0.83vw, 0.875rem) 12px;
  font-size: var(--step--1);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.view-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.view-tab:hover {
  color: var(--text);
  background: var(--seam);
}

.view-tab.is-active {
  color: var(--accent);
  background: var(--cta);
}

.view-tab-share {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(0.375rem, 1.04rem - 0.83vw, 0.875rem) 12px;
  font-size: var(--step--1);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-left: 1px solid var(--seam);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.view-tab-share svg { width: 16px; height: 16px; flex-shrink: 0; }
.view-tab-share:hover { color: var(--text); background: var(--seam); }
.view-tab-share:active { transform: scale(0.95); }

@media (max-width: 1899px) {
  .view-tab-share-label { display: none; }
  .view-tab-share { padding: clamp(0.375rem, 1.04rem - 0.83vw, 0.875rem) 10px; }
}

/* Below 1900px: collapse to icon-only tabs */
@media (max-width: 1899px) {
  .view-tab-label {
    display: none;
  }

  .view-tab {
    padding: clamp(0.375rem, 1.04rem - 0.83vw, 0.875rem) 10px;
  }
}

/* Back + board selector row — keeps them on one line */
.board-selector-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}

.board-selector-row .board-selector {
  min-width: 0;
}

/* Back arrow — mobile/tablet only, non-browser pages */
.dash-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: clamp(2.25rem, 2.75rem - 0.83vw, 2.75rem);
  height: clamp(2.25rem, 2.75rem - 0.83vw, 2.75rem);
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.dash-back svg {
  width: 20px;
  height: 20px;
}

.dash-back:hover {
  color: var(--text);
  background: var(--seam);
}

@media (max-width: 1023px) {
  .dash-back { display: flex; }
  /* Hide on browser page (handled by the > * rule below) */
}

/* Browser page: hide board selectors & tabs, show filter button */
.dash-header-filter {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--step--1);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--seam);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dash-header-filter svg {
  width: 16px;
  height: 16px;
}

.dash-header-filter:hover {
  color: var(--text);
  background: var(--seam);
}

.dash-header-filter.active svg polygon {
  fill: var(--gen5);
  stroke: var(--gen5);
}

.shell-body[data-page="browser"] .dash-header > * {
  display: none;
}

.shell-body[data-page="browser"] .dash-header-filter {
  display: flex;
}

/* Hide filter button on desktop — sidebar is always visible */
@media (min-width: 1024px) {
  .dash-header-filter-btn {
    display: none !important;
  }
}

.filters-active-pill {
  display: none;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--step--2);
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: var(--cta);
  border-radius: 100px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.filters-active-pill.is-active {
  display: flex;
}

/* Mobile: tabs wrap below board selector */
@media (max-width: 767px) {
  .dash-header {
    flex-wrap: wrap;
  }

  .view-tabs {
    width: 100%;
    justify-content: center;
  }
}

/* ===== BOARD SELECTOR ===== */
.board-selector {
  position: relative;
  width: clamp(20rem, 12.5rem + 25vw, 35rem);
  min-width: 0;
}

/* Trigger button — used in site header or dashboard header */
.board-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
  max-width: 100%;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.board-trigger:active {
  color: var(--text);
  border-color: var(--seam-hover);
  background: var(--seam);
}

@media (hover: hover) {
  .board-trigger:hover {
    color: var(--text);
    border-color: var(--seam-hover);
    background: var(--seam);
  }
}

.board-trigger[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--accent-border);
  background: var(--seam);
}

.board-trigger-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-trigger-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}

.board-trigger[aria-expanded="true"] .board-trigger-chevron {
  transform: rotate(180deg);
}

/* Invisible backdrop — just catches clicks to dismiss */
.board-selector-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  visibility: hidden;
  pointer-events: none;
}

.board-selector-backdrop.is-visible {
  visibility: visible;
  pointer-events: auto;
}

/* Dropdown panel — positioned below board title */
.board-selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(-6px);
  z-index: 101;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--seam-hover);
  border-radius: 8px;
  padding: var(--space-s) 0;
  margin-block-start: var(--space-3xs);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.2s var(--ease), opacity 0.2s ease, visibility 0.2s;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.board-selector-dropdown.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Search input inside dropdown */
.board-selector-search {
  position: relative;
  padding-inline: var(--space-xs);
  margin-block-end: var(--space-2xs);
}

.board-selector-search svg {
  position: absolute;
  left: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-dimmer);
  pointer-events: none;
}

.board-selector-input {
  width: 100%;
  padding: var(--space-2xs) var(--space-s);
  padding-inline-start: 2.5em;
  font-family: var(--font);
  font-size: var(--step--1);
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  border-radius: 8px;
  min-height: 44px;
  transition: border-color 0.15s ease;
}

.board-selector-input::placeholder {
  color: var(--text-dimmer);
}

.board-selector-input:focus {
  border-color: rgba(255, 255, 255, 0.08);
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.04);
}

.board-selector-input:focus-visible {
  border-color: rgba(255, 255, 255, 0.08);
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.04);
}

/* Status line */
.board-selector-status {
  font-size: var(--step--2);
  color: var(--text-dimmer);
  padding-inline: var(--space-xs);
  margin-block-end: var(--space-2xs);
}

/* Results list */
.board-selector-list {
  max-height: 360px;
  overflow-y: auto;
  margin-inline: var(--space-xs);
  border-radius: 8px;
  border: 1px solid var(--seam);
}

.board-selector-item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  min-height: 44px;
  transition: color 0.1s ease, background 0.1s ease;
}

.board-selector-item + .board-selector-item {
  border-block-start: 1px solid var(--seam);
}

.board-selector-item:active {
  color: var(--text);
  background: var(--seam-hover);
}

@media (hover: hover) {
  .board-selector-item:hover {
    color: var(--text);
    background: var(--seam-hover);
  }
}

.board-selector-item.is-current {
  color: var(--accent);
  background: var(--accent-glow);
}

.board-selector-item-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-selector-item .badge {
  flex-shrink: 0;
}

/* ===== FOOTER ===== */
.shell-footer {
  background: var(--bg-surface);
  border-block-start: 1px solid var(--seam);
  padding-inline: var(--space-s);
  padding-block: var(--space-l);
  text-align: center;
}

.shell-footer-logo {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-block-end: var(--space-s);
}

.shell-footer-cta-text {
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--text);
  margin-block-end: var(--space-xs);
}

.shell-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  background: #2D3846;
  border: none;
  color: var(--text);
  border-radius: 24px;
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  margin-block-end: var(--space-l);
}

.shell-footer-cta-btn:active { opacity: 0.8; }
@media (hover: hover) { .shell-footer-cta-btn:hover { opacity: 0.8; } }

.shell-footer-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-block-end: var(--space-s);
}

.shell-footer-link {
  font-size: var(--step--1);
  color: var(--text-secondary);
  transition: color 0.15s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.shell-footer-link:active { color: var(--text); }
@media (hover: hover) { .shell-footer-link:hover { color: var(--text); } }

.shell-footer-copy {
  font-size: var(--step--2);
  color: var(--text-dimmer);
}

.shell-footer-copy + .shell-footer-copy {
  margin-top: 4px;
}

/* ===== SHARE TOAST ===== */
.share-toast {
  position: fixed;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--seam);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--step--2);
  font-weight: 500;
  font-family: var(--font);
  white-space: nowrap;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.share-toast.show { opacity: 1; }

/* ===== VIEW MODES ===== */
/* Toggle which panels are visible and how the layout behaves */
/* Applied as data-mode on .shell-body */

/* Default: single board view — all panels visible, single column flow */

/* Checker-only mode (check.html) — hide specs, show only checker */
.shell-body[data-mode="checker"] .panel--specs,
.shell-body[data-mode="checker"] .panel--connectivity,
.shell-body[data-mode="checker"] .panel--storage,
.shell-body[data-mode="checker"] .panel--price {
  display: none;
}

/* ===== REAR I/O — TIER CARDS ===== */

/* Empty state */
.rio-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-xl); opacity: 0.4; text-align: center;
}
.rio-empty-title { font-size: var(--step-0); font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.rio-empty-sub { font-size: var(--step--1); color: var(--text-dimmer); }

/* Wrapper */
.rio-wrap {
  max-width: 680px; margin: 0 auto;
  font-family: var(--font);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* Image */
.rio-img {
  width: 100%; border-radius: 10px; margin-bottom: var(--space-m);
  border: 1px solid var(--seam);
}

/* Summary strip */
.rio-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg-surface); border-radius: 10px;
  border: 1px solid var(--seam); margin-bottom: var(--space-m); overflow: hidden;
}
.rio-strip-stat {
  padding: var(--space-s) var(--space-2xs); text-align: center;
  border-right: 1px solid var(--seam);
}
.rio-strip-stat:last-child { border-right: none; }
.rio-strip-num { font-size: var(--step-2); font-weight: 900; line-height: 1; }
.rio-strip-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

/* Section headings */
.rio-section-title {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text); margin-bottom: var(--space-2xs);
}
.rio-detail-section { margin-bottom: var(--space-m); }

/* USB SVG port styles */
.usb-body { fill: none; stroke: var(--text-muted); stroke-width: 0.2; }
.usb-tongue { fill: rgba(255,255,255,0.025); stroke: rgba(255,255,255,0.04); stroke-width: 0.2; }
.usb-pin-data { fill: rgba(255,255,255,0.06); }

/* Tier cards */
.rio-tier-grid { display: flex; flex-direction: column; gap: 8px; }
.rio-tcard {
  background: var(--bg-surface); border-radius: 10px;
  padding: 14px 18px; border: 1px solid var(--seam);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 0 14px; align-items: center;
}
.rio-tcard-accent { width: 3px; height: 36px; border-radius: 2px; }
.rio-tcard-name { font-size: var(--step--1); font-weight: 600; }
.rio-tcard-speed { font-size: var(--step--2); color: var(--text-muted); }
.rio-tcard-ports { display: flex; align-items: center; gap: 5px; }
.rio-tcard-ports svg { height: 14px; overflow: visible; }
.rio-tcard-ports svg.port-c { height: 9px; }
.rio-tcard-cnt { font-size: var(--step--2); font-weight: 700; color: var(--text-muted); }
.rio-tcard--empty { opacity: 0.2; border-style: dashed; }
.rio-tcard--total {
  background: transparent; border-color: var(--gen5); border-style: dashed;
}
.rio-tcard--total .rio-tcard-name { color: var(--gen5); }

/* Detail rows (Network, Video, Audio) */
.rio-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; font-size: var(--step--1);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.rio-row:last-child { border-bottom: none; }
.rio-row-label { color: var(--text-muted); }
.rio-row-value { font-weight: 600; }
.rio-row--empty .rio-row-value { color: var(--text-dimmer); font-weight: 400; }
.rio-row--empty .rio-row-label { opacity: 0.4; }

/* Responsive: compact strip on small screens */
@media (max-width: 479px) {
  .rio-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ===== COMPARE MODE ===== */

/* Board B content + Board B selector — hidden by default */
.compare-b { display: none; }
.compare-only { display: none; }

/* When compare active — reveal Board B content + selector (not on browser page) */
.shell-body[data-compare] .compare-b { display: block; }
.shell-body[data-compare]:not([data-page="browser"]) .compare-only { display: flex; }

/* Compare mode: dash-header grid — Board A | Tabs | Board B */
/* Excluded on browser page where dash-header shows only the filter button */
.shell-body[data-compare]:not([data-page="browser"]) .dash-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2xs);
  align-items: center;
}

.shell-body[data-compare] .dash-header .board-selector-row {
  justify-self: end;
  max-width: 100%;
}

.shell-body[data-compare] .dash-header .view-tabs {
  justify-self: center;
}

.shell-body[data-compare] .dash-header .board-selector--compare {
  justify-self: start;
  max-width: 100%;
}

/* Page content — two-column grid */
.compare-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

/* 768px+ : side by side */
@media (min-width: 768px) {
  .shell-body[data-compare] .compare-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs);
    align-items: start;
  }
}

/* Hide compare button below 768px */
@media (max-width: 767px) {
  #compareToggle { display: none; }
}


/* ===== PERFORMANCE CHECKER ===== */

.checker-placeholder {
  display: block;
  padding: var(--space-l) var(--space-s);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-dimmer);
}

/* GPU Banner */
.checker-banner {
  padding: var(--space-xs) var(--space-s);
  border-radius: 8px;
  margin-block-end: var(--space-xs);
  background: var(--bg-surface);
  transition: background 0.2s ease;
}

.checker-banner-reset {
  min-height: 44px;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 999px;
  border: 1px solid var(--seam);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: var(--step--2);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.checker-banner-reset:active {
  color: var(--text);
  background: var(--bg-surface);
  border-color: var(--seam-hover);
}

@media (hover: hover) {
  .checker-banner-reset:hover {
    color: var(--text);
    background: var(--bg-surface);
    border-color: var(--seam-hover);
  }
}

.checker-banner-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.checker-banner-status-text {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
}

.checker-banner--idle .checker-banner-status-text,
.checker-banner--none .checker-banner-status-text { color: var(--text-dimmer); }
.checker-banner--full .checker-banner-status-text { color: var(--good); }
.checker-banner--reduced .checker-banner-status-text { color: var(--warn); }

.checker-banner--full {
  background: var(--good-glow);
}

.checker-banner--reduced {
  background: var(--warn-bg);
}

.checker-banner-detail {
  font-size: var(--step--1);
  margin-block-start: var(--space-3xs);
}

.checker-banner--idle .checker-banner-detail,
.checker-banner--none .checker-banner-detail { color: var(--cta-text); font-weight: 600; }
.checker-banner--full .checker-banner-detail { color: var(--text-muted); }
.checker-banner--reduced .checker-banner-detail { color: var(--text-muted); }

/* Section Headers */
.checker-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-block: var(--space-xs) var(--space-3xs);
  padding-block-end: var(--space-3xs);
  border-block-end: 1px solid var(--seam);
}

.checker-section-title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.checker-section-sub {
  font-size: var(--step--2);
  color: var(--text-muted);
  font-weight: 400;
}

/* Conflict Messages */
.checker-conflicts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-block: var(--space-s);
}

.checker-conflicts-empty {
  padding: var(--space-xs) var(--space-s);
  border-radius: 8px;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-dimmer);
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  text-align: center;
  min-height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checker-conflict {
  padding: var(--space-xs) var(--space-s);
  border-radius: 8px;
  font-size: var(--step--1);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  animation: checker-slide-in 0.2s var(--ease);
}

@keyframes checker-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.checker-conflict--warning {
  color: var(--text-secondary);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.checker-conflict--warning .checker-conflict-icon {
  color: var(--warn);
}

.checker-conflict--blocked {
  color: var(--text-secondary);
  background: var(--blocked-bg);
  border-color: var(--blocked-border);
}

.checker-conflict--blocked .checker-conflict-icon {
  color: var(--blocked);
}

.checker-conflict-icon {
  flex-shrink: 0;
  line-height: 1.5;
}

.checker-conflict-text strong {
  font-weight: 700;
  color: var(--text);
}

/* Build Summary */
.checker-summary {
  margin-block-start: var(--space-s);
  padding: var(--space-s);
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--seam);
}

.checker-summary-title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-block-end: var(--space-2xs);
}

.checker-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-3xs);
  font-size: var(--step--1);
}

.checker-summary-label {
  color: var(--text-muted);
}

.checker-sum-value { color: var(--text); font-weight: 600; }
.checker-sum-muted { color: var(--text-dimmer); }
.checker-sum-good { color: var(--gen4); font-weight: 600; }
.checker-sum-warn { color: var(--warn); font-weight: 600; }

/* Checker — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .checker-conflict { animation: none; }
  .checker-banner { transition: none; }
}

/* ===== SLOT CARD — Single-row PCIe card with inline lane diagram ===== */

.slot-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--slot-bg);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  margin-block-end: var(--space-3xs);
}

.slot-card:active {
  transform: scale(0.985);
}

.slot-card:focus-visible {
  outline: 2px solid var(--text-muted);
  outline-offset: 2px;
}

@media (hover: hover) {
  .slot-card:hover {
    background: var(--slot-bg-hover);
  }
}

/* USB4 not in a switch group — always active, not interactive */
.slot-card--static {
  cursor: default;
  pointer-events: none;
}

.slot-card-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.slot-card-check,
.slot-card-x {
  position: absolute;
  inset: 0;
  display: flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--text-dimmer);
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  color: transparent;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.15s ease, opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.slot-card-name {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.slot-card-size {
  font-size: var(--step--2);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 4ch;
  text-align: right;
}

.slot-card svg {
  height: 24px;
  width: auto;
  flex-shrink: 1;
  min-width: 0;
}
.slot-card svg.usb-port { height: 12px; }

.slot-card-mode {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 3ch;
  text-align: right;
}

.slot-card-gen {
  font-size: var(--step--2);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Gen badge text colors */
.slot-card--gen5 .slot-card-gen { color: var(--gen5); }
.slot-card--gen4 .slot-card-gen { color: var(--gen4); }
.slot-card--gen3 .slot-card-gen { color: var(--gen3); }

/* ── Installed State ── */
.slot-card.is-installed {
  background: var(--cta-surface);
}

.slot-card.is-installed .slot-card-name {
  color: var(--text);
}

.slot-card.is-installed .slot-card-mode {
  color: var(--text-secondary);
}

/* Checkmark — default color (fallback) */
.slot-card.is-installed .slot-card-check {
  visibility: visible;
  opacity: 1;
  border-color: var(--text-secondary);
  background: var(--text-secondary);
  color: var(--bg);
}

/* Gen badge glow when installed */
.slot-card.is-installed.slot-card--gen5 .slot-card-gen { background: var(--gen5-glow); }
.slot-card.is-installed.slot-card--gen4 .slot-card-gen { background: var(--gen4-glow); }
.slot-card.is-installed.slot-card--gen3 .slot-card-gen { background: var(--gen3-glow); }

/* Checkmark gen colors */
.slot-card.is-installed.slot-card--gen5 .slot-card-check {
  border-color: var(--gen5); background: var(--gen5); color: var(--bg);
}
.slot-card.is-installed.slot-card--gen4 .slot-card-check {
  border-color: var(--gen4); background: var(--gen4); color: var(--bg);
}
.slot-card.is-installed.slot-card--gen3 .slot-card-check {
  border-color: var(--gen3); background: var(--gen3); color: var(--bg);
}

/* ── SVG Pin Colors ── */
.pcie-body {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1;
}

.pcie-pin-data {
  fill: var(--seam);
  transition: fill 0.3s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.pcie-pin-power { fill: var(--text-dimmer); opacity: 0.3; }
.pcie-key       { stroke: var(--seam); stroke-width: 1; }
.m2-depth-bar   { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.03); stroke-width: 0.5; }
.slot-card .usb-body   { fill: none; stroke: var(--text-muted); stroke-width: 0.2; }
.slot-card .usb-tongue { fill: rgba(255,255,255,0.025); stroke: rgba(255,255,255,0.04); stroke-width: 0.15; }

.sata-body      { fill: none; stroke: var(--text-muted); stroke-width: 0.6; }
.sata-blade     { fill: none; stroke: var(--text-muted); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s ease; }
.slot-card.is-installed .sata-blade { stroke: var(--gen3); }

/* Installed: active pins light up in gen color */
.slot-card.is-installed .pcie-body { stroke: var(--text-dimmer); }
.slot-card.is-installed .pcie-pin-power { fill: var(--good); opacity: 0.5; }
.slot-card.is-installed.slot-card--gen5 .pcie-pin-data.is-active { fill: var(--gen5); }
.slot-card.is-installed.slot-card--gen4 .pcie-pin-data.is-active { fill: var(--gen4); }
.slot-card.is-installed.slot-card--gen3 .pcie-pin-data.is-active { fill: var(--gen3); }

/* Pin cascade animation — only on freshly installed card */
.slot-card.is-animating .pcie-pin-data.is-active {
  animation: pin-on 0.3s ease-out backwards;
}

@keyframes pin-on {
  from { opacity: 0; transform: scaleY(0.2); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* ── Reduced State ── */
.slot-card.is-reduced .slot-card-mode {
  color: var(--text-dimmer);
}

/* ── Warn-Reduced State (bandwidth conflict) ── */
.slot-card.is-warn-reduced {
  border: 1px solid var(--warn-border);
  position: relative;
}

.slot-card.is-warn-reduced .slot-card-tooltip {
  border-color: var(--warn-border);
}

@media (hover: hover) {
  .slot-card.is-warn-reduced:hover .slot-card-tooltip {
    display: block;
  }
}

/* ── Disabled / Blocked State ── */
.slot-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
  border: 1px solid var(--blocked-border);
  background: var(--blocked-glow);
  transition: opacity 0.15s ease, background 0.15s ease;
}

@media (hover: hover) {
  .slot-card.is-disabled:hover {
    opacity: 0.75;
    background: var(--blocked-bg);
  }
}

.slot-card.is-disabled:active {
  transform: none;
}

/* Red X indicator */
.slot-card.is-disabled .slot-card-x {
  visibility: visible;
  opacity: 1;
  border-color: var(--blocked);
  background: var(--blocked);
  color: var(--bg);
}

.slot-card.is-disabled.is-animating .slot-card-x {
  animation: x-in 0.25s var(--ease) backwards;
}

@keyframes x-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Blocker highlight — static glow persists while class is present (desktop hover) */
.slot-card.is-blocker-highlight {
  box-shadow: 0 0 0 2px var(--warn-border);
}

/* Blocker pulse — one-shot animation layered on top (mobile tap) */
.slot-card.is-blocker-pulse {
  animation: blocker-pulse 1.5s ease-in-out;
}

@keyframes blocker-pulse {
  0%   { box-shadow: 0 0 0 0 var(--warn-border); }
  30%  { box-shadow: 0 0 0 4px var(--warn-border); }
  100% { box-shadow: 0 0 0 2px var(--warn-border); }
}

/* Tooltip — appears above card on hover */
.slot-card-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--blocked-border);
  color: var(--text);
  font-size: var(--step--2);
  line-height: 1.4;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.slot-card-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #000;
}

@media (hover: hover) {
  .slot-card.is-disabled:hover .slot-card-tooltip {
    display: block;
  }
}

.slot-card.is-tooltip-visible .slot-card-tooltip {
  display: block;
}

/* Slot card — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slot-card.is-animating .pcie-pin-data.is-active { animation: none; }
  .slot-card.is-disabled.is-animating .slot-card-x { animation: none; }
  .slot-card.is-blocker-pulse { animation: none; }
  .slot-card { transition: none; }
  .pcie-pin-data { transition: none; }
}

/* TEMP: Kill transitions during initial render to prevent card flash on board switch.
   Remove when each board has its own static page. */
.no-transition .slot-card,
.no-transition .pcie-pin-data { transition: none !important; }

/* ===== LANE MAP ===== */

/* SVG layer stacking */
.board-layers {
  position: relative;
  width: min(100%, (100dvh - 12rem) * 680 / 750);
  aspect-ratio: 680 / 750;
  margin-inline: auto;
}

.board-layers > * {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.board-layers svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}

.board-bg {
  opacity: 0.9;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
}

.backdrops-svg, .lanes-dim-svg, .lanes-active-svg { pointer-events: none; }
.boxes-svg { pointer-events: auto; }

/* SVG asset rendering */
.asset rect.box { transition: stroke 0.1s ease, stroke-width 0.1s ease, stroke-opacity 0.1s ease; }
.asset.box.active-gen5 rect.box { stroke: var(--gen5); stroke-width: 1px; stroke-opacity: 1; }
.asset.box.active-gen4 rect.box { stroke: var(--gen4); stroke-width: 1px; stroke-opacity: 1; }
.asset.box.active-gen3 rect.box { stroke: var(--gen3); stroke-width: 1px; stroke-opacity: 1; }
.asset.box.active-none rect.box { stroke: #475569; stroke-width: 1px; stroke-opacity: 1; }
.asset.box.clickable { cursor: pointer; will-change: transform; }
.asset text.label { fill: #e2e8f0; dominant-baseline: middle; text-anchor: middle; pointer-events: none; }
.asset { transition: opacity 0.6s ease; }
.asset.fading { opacity: 0; }
.asset.hidden { opacity: 0; pointer-events: none; }

@media (hover: hover) {
  .asset.box.clickable:hover rect.box { stroke-width: 2px; stroke-opacity: 1; }
  .asset.box.active-gen5.clickable:hover rect.box { stroke: var(--gen5); stroke-width: 2px; }
  .asset.box.active-gen4.clickable:hover rect.box { stroke: var(--gen4); stroke-width: 2px; }
  .asset.box.active-gen3.clickable:hover rect.box { stroke: var(--gen3); stroke-width: 2px; }
  .asset.box.active-none.clickable:hover rect.box { stroke: #64748b; stroke-width: 2px; }
}

.lane-group { opacity: 1; transition: opacity 0.2s ease; }
.lane-group.hidden { opacity: 0; }
.lane-stroke { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.lanes-dim-g { opacity: .28; }

/* Lane badges */
.lane-badge { pointer-events: auto; transition: opacity 0.1s ease; cursor: inherit; }
.lane-badge .bg { fill: #000; stroke: #334155; stroke-width: 0; }
.lane-badge .tx { fill: #cbd5e1; font-size: 11px; dominant-baseline: middle; text-anchor: middle; cursor: inherit; }
.lane-badge.invisible { opacity: 0; pointer-events: none; }

/* Corner overlay (slot sizes) */
.corner-overlay { pointer-events: none; transition: opacity .25s ease; }
.corner-overlay.invisible { opacity: 0; pointer-events: none !important; display: none; }
.corner-overlay .corner-bg { fill: #000; stroke: #334155; stroke-width: 0; }
.corner-overlay .corner-tx { fill: #e2e8f0; font-size: 10px; dominant-baseline: middle; text-anchor: middle; }

/* Backdrops */
.backdrop rect.box { stroke: none; pointer-events: none; }

/* Switch UI */
.asset.switchbox .switch-ui { pointer-events: auto; }
.asset.switchbox .switch-ui .sb-left,
.asset.switchbox .switch-ui .sb-right { cursor: pointer; user-select: none; pointer-events: auto; font-size: 20px; fill: #0d771f; }
.asset.switchbox .switch-ui .sb-count { font-size: 13px; fill: #e2e8f0; cursor: default; }
.asset.switchbox rect.box, .asset.switchbox text.label { pointer-events: none; }
.asset.switchbox text.label { transform: translateY(-20px); }
.asset.in-switch-group .lane-badge, .asset.in-switch-group text.label { cursor: default !important; }

/* Lane map — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .asset { transition: none; }
  .lane-group { transition: none; }
  .lane-stroke { transition: none; }
  .lane-badge { transition: none; }
  .corner-overlay { transition: none; }
  .asset rect.box { transition: none; }
}

/* Lane map panels (Board A + Board B) */
#lanemap-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #000;
}

#lanemap-panel-b {
  flex: 1;
  background: #000;
}

/* Board B only gets flex layout when compare mode is active */
.shell-body[data-compare] #lanemap-panel-b {
  display: flex;
  flex-direction: column;
}

/* Center toggle group in lane map header */
#lanemap-panel .panel-header,
#lanemap-panel-b .panel-header {
  justify-content: center;
}

#lanemap-panel > .panel-body,
#lanemap-panel-b > .panel-body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 768px) {
  #lanemap-panel > .panel-body,
  #lanemap-panel-b > .panel-body {
    flex: 1;
    align-items: center;
  }
}

/* ===== UTILITY ===== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}