/* =============================================================
   WebGPU Bench Dashboard
   Design: Precision Dark (shadcn-inspired)
   ============================================================= */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
html { scroll-padding-top: 80px; }

/* === DESIGN TOKENS === */
:root {
  /* Light theme (default) */
  color-scheme: light;

  --background: #ffffff;
  --surface-0: #f4f4f5;
  --surface-1: #fafafa;
  --surface-2: #f0f0f1;
  --surface-3: #e4e4e7;

  --border: #e4e4e7;
  --border-hover: #d4d4d8;
  --ring: #a1a1aa;

  --foreground: #09090b;
  --foreground-secondary: #3f3f46;
  --foreground-muted: #71717a;
  --foreground-subtle: #a1a1aa;

  --success: #0fa968;
  --success-bg: rgba(15, 169, 104, 0.16);
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.14);
  --warning: #b45309;
  --info: #1d4ed8;

  /* Signature plasma green — used for brand accent, live state, running row,
     sortable-active marker, and primary CTA glow. The single load-bearing
     color in the palette; everything else stays neutral. */
  --signal: #0fa968;
  --signal-strong: #0a8a55;
  --signal-bg: rgba(15, 169, 104, 0.14);
  --signal-glow: 0 0 0 4px rgba(15, 169, 104, 0.18);

  /* Accent colors (theme-aware) — kept for badge variation only. */
  --accent-blue: #1d4ed8;
  --accent-blue-bg: rgba(29, 78, 216, 0.12);
  --accent-purple: #6d28d9;
  --accent-purple-bg: rgba(109, 40, 217, 0.12);
  --accent-amber: #b45309;
  --accent-amber-bg: rgba(180, 83, 9, 0.14);
  --accent-violet: #5b21b6;
  --accent-violet-bg: rgba(91, 33, 182, 0.12);

  /* Layered shadow vocabulary — light mode loses depth without these. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-dropdown: 0 8px 24px rgba(15, 23, 42, 0.10);

  /* Non-color tokens (same in both themes) */
  --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
  --font-serif: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

[data-theme="dark"] {
  color-scheme: dark;

  --background: #08080a;
  --surface-0: #0f0f12;
  --surface-1: #18181b;
  --surface-2: #1c1c20;
  --surface-3: #27272a;

  --border: #27272a;
  --border-hover: #3f3f46;
  --ring: #52525b;

  --foreground: #fafafa;
  --foreground-secondary: #d4d4d8;
  --foreground-muted: #a1a1aa;
  --foreground-subtle: #71717a;

  --success: #22e09a;
  --success-bg: rgba(34, 224, 154, 0.14);
  --error: #f87171;
  --error-bg: rgba(239, 68, 68, 0.14);
  --warning: #fbbf24;
  --info: #60a5fa;

  --signal: #22e09a;
  --signal-strong: #5cffaa;
  --signal-bg: rgba(34, 224, 154, 0.12);
  --signal-glow: 0 0 0 4px rgba(34, 224, 154, 0.20);

  --accent-blue: #60a5fa;
  --accent-blue-bg: rgba(96, 165, 250, 0.14);
  --accent-purple: #a78bfa;
  --accent-purple-bg: rgba(167, 139, 250, 0.14);
  --accent-amber: #fbbf24;
  --accent-amber-bg: rgba(251, 191, 36, 0.14);
  --accent-violet: #c084fc;
  --accent-violet-bg: rgba(192, 132, 252, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* === GLOBAL === */
html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-feature-settings: 'ss01', 'cv02', 'cv11';
  font-variant-numeric: tabular-nums slashed-zero;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bricolage Grotesque optical sizing — tighten for headings, relax for body. */
.hero-title,
.run-hero-title,
.methodology-content h1,
.methodology-content h2,
.section-header h1,
.section-header h2 {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 96;
}

a {
  color: var(--info);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--info); }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ring); }

/* =============================================================
   HEADER
   ============================================================= */
.header {
  border-bottom: 1px solid var(--border);
  background: var(--background);
  position: relative;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 56px;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--foreground);
  text-decoration: none;
}
.header-brand:hover { color: var(--foreground); text-decoration: none; }
.header-logo { color: var(--foreground-muted); flex-shrink: 0; }
.header-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.header-link:hover {
  color: var(--foreground);
  background: var(--surface-2);
  text-decoration: none;
}

/* =============================================================
   LOADING STATE
   ============================================================= */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.loading-content { text-align: center; }
.loading-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 16px;
  border: 2.5px solid var(--surface-3);
  border-top-color: var(--foreground);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state p {
  color: var(--foreground-muted);
  font-size: 14px;
}
.loading-error {
  color: var(--error);
  font-weight: 600;
  margin-bottom: 8px;
}
.loading-hint {
  color: var(--foreground-muted);
  font-size: 13px;
}
/* Skeleton rows that mimic the dashboard shell while data loads — reduces
   perceived latency compared with a centered spinner + text swap. */
.skeleton {
  background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.skeleton-hero { height: 120px; margin: 32px 0 1px; border-radius: 0; }
.skeleton-filters { height: 70px; margin-bottom: 1px; border-radius: 0; }
.skeleton-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 32px;
}
.skeleton-stats > div { height: 80px; }
.skeleton-table { margin: 0 32px 32px; height: 240px; }
@media (max-width: 640px) {
  .skeleton-stats { grid-template-columns: 1fr; padding: 16px; }
  .skeleton-table { margin: 0 16px 24px; }
}

.loading-hint code {
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  background: var(--background);
  overflow: hidden;
  /* No bottom border — filter-bar's top border is the visual divider. */
}
/* Subtle radial mesh — only present on the hero. Hints at the GPU subject
   matter without committing to a heavy gradient aesthetic elsewhere. */
.hero::before {
  content: '';
  position: absolute;
  inset: -10% -10% auto auto;
  width: 520px;
  height: 520px;
  background:
    radial-gradient(circle at 70% 30%, var(--signal-bg), transparent 60%),
    radial-gradient(circle at 30% 80%, var(--accent-violet-bg), transparent 60%);
  filter: blur(40px);
  opacity: 0.7;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 48px;
}
.hero-copy { min-width: 0; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 4px 10px 4px 8px;
  background: var(--signal-bg);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal-strong);
}
[data-theme="dark"] .hero-eyebrow { color: var(--signal); }
.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 169, 104, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(15, 169, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 169, 104, 0); }
}
[data-theme="dark"] .hero-eyebrow-dot {
  animation-name: live-pulse-dark;
}
@keyframes live-pulse-dark {
  0% { box-shadow: 0 0 0 0 rgba(34, 224, 154, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(34, 224, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 224, 154, 0); }
}
.hero-title {
  margin: 0 0 14px;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--foreground);
}
.hero-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--foreground-secondary);
  max-width: 56ch;
}
.hero-meta {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
}
.hero-lede code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--foreground);
}
.hero-actions { display: flex; gap: 10px; flex-shrink: 0; margin-top: 24px; }
.hero-actions .btn { text-decoration: none; }

/* Right-side stat block — surfaces the headline metric. Count-up tween is
   driven by JS; the markup ships with `data-target` and a starting "0.0". */
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  min-width: 240px;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.hero-stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--foreground);
  margin: 4px 0;
}
.hero-stat-num {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--signal-strong);
  line-height: 1;
}
[data-theme="dark"] .hero-stat-num { color: var(--signal); }
.hero-stat-unit {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--foreground-muted);
  font-weight: 500;
}
.hero-stat-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 28px; }
  .hero-stat { min-width: 0; }
  .hero-stat-num { font-size: 36px; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 36px; }
  .hero-lede { font-size: 14px; }
}

/* =============================================================
   FILTER BAR
   ============================================================= */
.filter-bar {
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  position: relative;
  z-index: 45;
}
.filter-bar-inner {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--foreground-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.filter-select {
  appearance: none;
  background: var(--surface-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  padding: 0 32px 0 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  height: 36px;
  min-width: 150px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-select:hover { border-color: var(--border-hover); }
.filter-select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
}
.filter-select option {
  background: var(--surface-1);
  color: var(--foreground);
}

[data-theme="dark"] .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Theme toggle button */
.theme-toggle-btn { padding: 6px 10px; }
.icon-sun { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

.filter-actions { display: flex; align-items: flex-end; }
.filter-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter-reset-btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--foreground);
  border-color: var(--border-hover);
}
.filter-reset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================
   QUANT MULTI-SELECT DROPDOWN
   ============================================================= */
.quant-dropdown { position: relative; }
.quant-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 36px;
  min-width: 150px;
  padding: 0 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.quant-dropdown-btn:hover { border-color: var(--border-hover); }
.quant-dropdown-btn:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
}
.quant-dropdown-btn svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.quant-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  max-height: 320px;
  overflow-y: auto;
  min-width: 180px;
  padding: 4px;
  animation: dropdownIn 0.15s ease-out;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.quant-dropdown.open .quant-dropdown-list { display: block; }

.quant-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  color: var(--foreground-secondary);
}
.quant-option:hover { background: var(--surface-2); }
.quant-option.select-all {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-radius: 0;
  font-weight: 600;
  color: var(--foreground);
}

/* Custom checkbox */
.quant-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ring);
  border-radius: 4px;
  background: var(--surface-0);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.quant-option input[type="checkbox"]:checked {
  background: var(--foreground);
  border-color: var(--foreground);
}
.quant-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4.5px;
  width: 4.5px;
  height: 8px;
  border: solid var(--background);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.quant-option input[type="checkbox"]:indeterminate {
  background: var(--foreground);
  border-color: var(--foreground);
}
.quant-option input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  top: 5.5px;
  left: 3px;
  width: 8px;
  height: 2px;
  background: var(--background);
  border-radius: 1px;
}

/* =============================================================
   STICKY HEAD (filter bar + section jump links)
   ============================================================= */
.sticky-head {
  position: sticky;
  top: 0;
  z-index: 45;
  background: var(--background);
}
/* On small screens the filter-bar + nav together exceed 500px, which is
   worse than not sticking at all. Drop back to static flow so the user
   can see content. */
@media (max-width: 768px) {
  .sticky-head { position: static; }
}

/* =============================================================
   SECTION NAVIGATION (jump links)
   ============================================================= */
.section-nav {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  position: relative;
  /* Right-edge fade so the user knows there's more to scroll on mobile. */
  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
          mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
@media (min-width: 901px) {
  .section-nav { -webkit-mask-image: none; mask-image: none; }
}
.section-nav-track {
  display: flex;
  padding: 0 32px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.section-nav-track::-webkit-scrollbar { display: none; }
/* Sliding indicator — JS sets `--indicator-x` and `--indicator-w` to the
   active button's offsetLeft/offsetWidth. Falls back to 0 (hidden) before
   first paint. */
.section-nav-track::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--indicator-w, 0px);
  transform: translateX(var(--indicator-x, 0));
  background: var(--signal);
  border-radius: 1px 1px 0 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), width 280ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.section-nav-item {
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--foreground-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.section-nav-item:hover { color: var(--foreground); }
.section-nav-item.active { color: var(--foreground); }

/* =============================================================
   SECTIONS & LAYOUT
   ============================================================= */
.container { padding: 0 32px; }

.dash-section { padding: 32px 0; }
.dash-section + .dash-section { border-top: 1px solid var(--border); }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
}
.section-header h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

/* Run page how-to-use instructions — collapsible card, open by default. */
.run-instructions {
  margin-bottom: 20px;
}
.run-instructions > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--foreground);
  list-style: none;
  padding: 4px 0;
}
.run-instructions > summary::-webkit-details-marker { display: none; }
.run-instructions > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
  color: var(--foreground-muted);
}
.run-instructions[open] > summary::before { transform: rotate(90deg); }
.run-instructions-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.run-instructions-body section { font-size: 13px; line-height: 1.55; }
.run-instructions-body h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.run-instructions-body p,
.run-instructions-body ol,
.run-instructions-body dl { margin: 0 0 8px; color: var(--foreground-muted); }
.run-instructions-body ol { padding-left: 20px; }
.run-instructions-body ol li + li { margin-top: 4px; }
.run-instructions-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2, rgba(0,0,0,0.05));
  padding: 1px 5px;
  border-radius: 3px;
}
.run-instructions-dl dt {
  font-size: 12px;
  margin-top: 8px;
  color: var(--foreground);
}
.run-instructions-dl dt:first-child { margin-top: 0; }
.run-instructions-dl dd {
  margin: 2px 0 0;
  padding-left: 0;
  font-size: 12px;
  color: var(--foreground-muted);
}

/* Run page hero row — matches the size of the Methodology h1 / index
   hero-title (28px). Houses the mode badge inline. */
.run-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.run-hero-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
@media (max-width: 640px) {
  .run-hero-title { font-size: 22px; }
}
.results-count {
  font-size: 13px;
  color: var(--foreground-muted);
  font-weight: 500;
  font-family: var(--font-mono);
}

/* =============================================================
   SUMMARY / STAT CARDS
   ============================================================= */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.stat-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.stat-card-icon--machines { background: var(--accent-blue-bg); color: var(--accent-blue); }
.stat-card-icon--benchmarks { background: var(--accent-violet-bg); color: var(--accent-violet); }
.stat-card-icon--pass { background: var(--success-bg); color: var(--success); }
.stat-card-icon--decode { background: var(--signal-bg); color: var(--signal-strong); }
[data-theme="dark"] .stat-card-icon--decode { color: var(--signal); }
.stat-card-icon--size { background: var(--accent-amber-bg); color: var(--accent-amber); }

.stat-card-content { min-width: 0; flex: 1; }
.stat-card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foreground-muted);
  margin-bottom: 4px;
}
.stat-card-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 26px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--foreground);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.stat-card-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground-muted);
  letter-spacing: 0;
}

@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .summary-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   TABLES (Results + Error)
   ============================================================= */
.table-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.results-wrapper {
  overflow: auto;
  max-height: 600px;
}

.results-table,
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

/* Table headers */
.results-table thead th,
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-1);
  text-align: left;
  padding: 10px 12px;
  color: var(--foreground-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  user-select: none;
}

/* Sticky-left columns: Machine (col 1) + Model (col 2). Keeps the row
   identity visible when scrolling through the 19-column table. */
.results-table .col-pin {
  position: sticky;
  z-index: 2;
}
.results-table thead th.col-pin {
  z-index: 11;
  background: var(--surface-1);
}
.results-table tbody td.col-pin { background: var(--background); }
[data-theme="dark"] .results-table tbody td.col-pin { background: var(--surface-0); }
.results-table tbody tr:hover td.col-pin { background: var(--surface-2); }
.results-table .col-pin-1 { left: 0; }
.results-table .col-pin-2 {
  left: 140px;
  box-shadow: 1px 0 0 var(--border);
}
@media (max-width: 768px) {
  .results-table .col-pin { position: static; box-shadow: none; }
}
/* Priority-based responsive columns: drop the bulky metric columns so
   the mobile table is readable instead of an endless horizontal scroll. */
@media (max-width: 900px) {
  .results-table .col-p3 { display: none; }
}
@media (max-width: 640px) {
  .results-table .col-p2 { display: none; }
}

/* Sortable headers (results table only) */
.results-table thead th {
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.results-table thead th:hover {
  color: var(--foreground);
  background: var(--surface-2);
}
.results-table thead th.sorted {
  color: var(--foreground);
}
.results-table thead th:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.results-table .th-label { margin-right: 4px; }
.results-table .th-sort-indicator {
  display: inline-block;
  width: 10px;
  color: var(--foreground-muted);
  opacity: 0.45;
  font-weight: 500;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.results-table thead th[aria-sort="ascending"] .th-sort-indicator,
.results-table thead th[aria-sort="descending"] .th-sort-indicator {
  opacity: 1;
  color: var(--signal);
}
.results-table thead th[aria-sort="ascending"],
.results-table thead th[aria-sort="descending"] {
  color: var(--foreground);
  box-shadow: inset 0 -2px 0 var(--signal);
}
.results-table thead th:hover .th-sort-indicator { opacity: 0.85; }

/* Table cells */
.results-table td,
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  color: var(--foreground-secondary);
}
.results-table tbody tr {
  transition: background var(--transition-fast);
}
.results-table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--surface-2);
}
.results-table tbody tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Row status indicator — purely decorative; the badge in the Status column
   carries the same info accessibly. The stripe is hidden from AT via
   the parent row's `aria-label` (added in tables.js render) plus the
   badge being the canonical source of truth. */
.row-pass td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
.row-fail td:first-child { box-shadow: inset 3px 0 0 var(--error); }

/* =============================================================
   BADGES
   ============================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge--pass { background: var(--signal-bg); color: var(--signal-strong); }
.badge--fail { background: var(--error-bg); color: #b91c1c; }
.badge--yes { background: var(--accent-blue-bg); color: var(--accent-blue); }
.badge--no { background: var(--surface-3); color: var(--foreground-secondary); }
.badge--webgpu { background: var(--accent-purple-bg); color: var(--accent-purple); }
.badge--cpu { background: var(--accent-amber-bg); color: var(--accent-amber); }

[data-theme="dark"] .badge--pass { color: var(--signal); }
[data-theme="dark"] .badge--fail { color: var(--error); }
[data-theme="dark"] .badge--yes { color: var(--accent-blue); }
[data-theme="dark"] .badge--no { color: var(--foreground-muted); }
[data-theme="dark"] .badge--webgpu { color: var(--accent-purple); }
[data-theme="dark"] .badge--cpu { color: var(--accent-amber); }

/* =============================================================
   ERROR CELLS & CATEGORIES
   ============================================================= */
.error-cell {
  color: var(--error);
  font-size: 12px;
}
.error-cat {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--error-bg);
  color: var(--error);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 4px;
  vertical-align: middle;
}

/* =============================================================
   CHARTS
   ============================================================= */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.chart-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  height: 340px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  /* Faint dot grid — visible mostly through empty-state placeholders, and
     adds texture to charts with sparse data points. */
  background-image: radial-gradient(circle, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 12px 12px;
}
[data-theme="dark"] .chart-box {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}
.chart-box canvas { max-width: 100%; position: relative; z-index: 1; }
.chart-box:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }

.subsection-title { font-size: 16px; font-weight: 600; color: var(--foreground); margin: 0; }
.metric-selector { display: flex; align-items: center; gap: 8px; }
.metric-selector-label { font-size: 13px; color: var(--foreground-muted); }
.col-sublabel { font-size: 10px; font-weight: 400; color: var(--foreground-muted); }
.th-group { text-align: center; font-weight: 700; color: var(--foreground); background: var(--surface-2); }
.th-sub { font-size: 11px; font-weight: 500; color: var(--foreground-muted); white-space: nowrap; }
.th-group-border { border-right: 1px solid var(--border-hover); }
.results-table td:has(+ .th-group-border) { border-right: 1px solid var(--border-hover); }

.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  z-index: 2;
}
.chart-empty::before {
  content: '— ';
  color: var(--foreground-subtle);
  margin-right: 8px;
}

/* =============================================================
   MACHINE CARDS
   ============================================================= */
.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.machine-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  transition: border-color var(--transition-base);
}
.machine-card:hover { border-color: var(--border-hover); }

/* "Add your machine" call-to-action card — strengthened version: subtle
   signal-tinted gradient ring, copyable command line, real arrow that
   slides on hover. */
.machine-card-add {
  position: relative;
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-color: var(--border);
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(135deg, var(--signal-bg), transparent 60%, var(--accent-violet-bg)) border-box;
  color: var(--foreground-secondary);
  text-decoration: none;
  gap: 14px;
  overflow: hidden;
}
.machine-card-add::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--signal-bg), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}
.machine-card-add:hover {
  border-color: transparent;
  color: var(--foreground);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.machine-card-add:hover::before { opacity: 1; }
.machine-card-add > * { position: relative; }
.machine-card-add .machine-card-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.machine-card-add .machine-card-icon { color: var(--signal-strong); }
[data-theme="dark"] .machine-card-add .machine-card-icon { color: var(--signal); }
.machine-card-add-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground-secondary);
}
.machine-card-add-cmd {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.machine-card-add-cmd::before {
  content: '$ ';
  color: var(--foreground-subtle);
  user-select: none;
}
.machine-card-add-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-top: auto;
}
.machine-card-add-cta svg {
  transition: transform var(--transition-base);
}
.machine-card-add:hover .machine-card-add-cta svg {
  transform: translateX(3px);
}

.machine-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Submitter cell in the Results table — small avatar + @username link.
   Inline so the column hugs its content rather than stretching. */
.submitter-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--foreground-secondary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: color var(--transition-fast);
}
.submitter-link:hover {
  color: var(--signal-strong);
  text-decoration: none;
}
[data-theme="dark"] .submitter-link:hover { color: var(--signal); }
.submitter-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  object-fit: cover;
  background: var(--surface-3);
  flex-shrink: 0;
}
.submitter-avatar--placeholder {
  background: linear-gradient(135deg, var(--signal-bg), var(--accent-violet-bg));
}
.submitter-name {
  white-space: nowrap;
}
.machine-card-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}
.machine-card-icon { color: var(--foreground-muted); flex-shrink: 0; }

.machine-card-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.spec-label { color: var(--foreground-muted); }
.spec-value { color: var(--foreground-secondary); font-weight: 500; font-family: var(--font-mono); font-size: 12px; }

/* =============================================================
   EMPTY STATES
   ============================================================= */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--foreground-secondary);
  font-size: 14px;
}
.empty-state p + p { margin-top: 8px; }
.empty-state-sub {
  font-size: 13px;
  color: var(--foreground-muted);
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.5;
}
.empty-state a {
  color: var(--foreground);
  font-weight: 600;
  text-decoration: underline;
}

/* =============================================================
   UTILITY CLASSES
   ============================================================= */
.mono { font-family: var(--font-mono); font-size: 12px; }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-muted { color: var(--foreground-subtle); }

/* =============================================================
   ENTRANCE ANIMATIONS
   ============================================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#dashboard.animate-in .filter-bar { animation: fadeInUp 0.35s ease-out both; }
#dashboard.animate-in .section-nav { animation: fadeInUp 0.35s ease-out 0.04s both; }
#dashboard.animate-in .dash-section:nth-of-type(1) { animation: fadeInUp 0.4s ease-out 0.08s both; }
#dashboard.animate-in .dash-section:nth-of-type(2) { animation: fadeInUp 0.4s ease-out 0.14s both; }
#dashboard.animate-in .dash-section:nth-of-type(3) { animation: fadeInUp 0.4s ease-out 0.20s both; }
#dashboard.animate-in .dash-section:nth-of-type(4) { animation: fadeInUp 0.4s ease-out 0.26s both; }
#dashboard.animate-in .dash-section:nth-of-type(5) { animation: fadeInUp 0.4s ease-out 0.32s both; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .header-inner { padding: 0 12px; height: 48px; gap: 8px; }
  .header-title { font-size: 14px; }
  .header-nav { gap: 2px; }
  .header-link { padding: 6px 8px; font-size: 12px; }
  /* Hide the "GitHub" wordmark, keep the icon-only link. */
  .header-nav > a[href*="github.com"] { padding: 6px; }
  .header-nav > a[href*="github.com"] > :not(svg) { display: none; }
}
@media (max-width: 420px) {
  .header-title { display: none; }
  .header-link { padding: 6px; font-size: 12px; }

  .filter-bar { padding: 16px; }
  .filter-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .filter-select { width: 100%; min-width: auto; }
  .quant-dropdown-btn { width: 100%; }
  .filter-actions { justify-content: flex-start; }

  .section-nav-track { padding: 0 16px; }

  .container { padding: 0 16px; }
  .section-header { margin-bottom: 16px; }
  .table-card { border-radius: var(--radius-md); }
  .results-wrapper { max-height: 450px; }

  .stat-card { padding: 16px 18px; }
  .stat-card-value { font-size: 22px; }

  .charts-grid { gap: 12px; }
  .chart-box { height: 280px; padding: 16px; }

  .machine-grid { grid-template-columns: 1fr; }

  .dash-section { padding: 24px 0; }
}

@media (max-width: 480px) {
  .stat-card { flex-direction: column; gap: 10px; }
  .stat-card-icon { width: 32px; height: 32px; }
  .stat-card-icon svg { width: 16px; height: 16px; }
}

/* =============================================================
   METHODOLOGY PAGE
   ============================================================= */
/* Two-column layout: sticky ToC on the left, content on the right.
   Falls back to a stacked layout on small screens. */
.methodology-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 800px);
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}
.methodology-toc {
  position: sticky;
  top: 24px;
  align-self: start;
  font-size: 13px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.methodology-toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--foreground-muted);
  margin-bottom: 12px;
}
.methodology-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--border);
}
.methodology-toc ol ol { margin-top: 4px; margin-left: 12px; }
.methodology-toc li { margin: 0; padding: 0; }
.methodology-toc a {
  display: block;
  padding: 6px 12px;
  color: var(--foreground-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  line-height: 1.4;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.methodology-toc a:hover { color: var(--foreground); }
.methodology-toc a.active {
  color: var(--foreground);
  border-left-color: var(--foreground);
  font-weight: 600;
}
@media (max-width: 900px) {
  .methodology-layout { grid-template-columns: 1fr; gap: 0; padding: 24px 16px 48px; }
  .methodology-toc {
    position: static;
    max-height: none;
    margin-bottom: 24px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
  }
  .methodology-toc ol { border-left: none; }
  .methodology-toc a { padding: 4px 0; border-left: none; }
}

.methodology-content {
  min-width: 0;
}
.methodology-content .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground-muted);
  transition: color var(--transition-fast);
}
.methodology-content .back-link:hover { color: var(--foreground); text-decoration: none; }

.methodology-content h1 {
  margin: 0 0 32px;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.04em;
  line-height: 1;
}

.methodology-content h2 {
  margin-top: 56px;
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.02em;
}
.methodology-content h1 + h2 { margin-top: 0; }

.methodology-content h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--foreground-muted);
}
/* Body paragraphs in Instrument Serif — gives Methodology editorial weight
   that separates it from the dashboard's UI typography. List items stay
   sans-serif for tighter scanning. */
.methodology-content p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 12px;
  color: var(--foreground-secondary);
  letter-spacing: -0.005em;
}
.methodology-content li {
  line-height: 1.7;
  margin-bottom: 6px;
  color: var(--foreground-secondary);
  font-size: 14px;
}
.methodology-content ol,
.methodology-content ul {
  padding-left: 24px;
}
.methodology-content strong {
  color: var(--foreground);
  font-weight: 600;
}
.methodology-content code {
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--foreground-secondary);
}
.methodology-content table {
  width: 100%;
  margin: 16px 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.methodology-content th {
  text-align: left;
  padding: 10px 16px;
  background: var(--surface-1);
  color: var(--foreground-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.methodology-content td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--foreground-secondary);
}
.methodology-content tbody tr:last-child td { border-bottom: none; }
.methodology-content tbody tr:hover { background: var(--surface-2); }

/* =============================================================
   RUN TAB (one-click benchmark)
   ============================================================= */
/* Global [hidden] override — the attribute's UA default (display:none) loses
   to any component rule that sets display explicitly (e.g. .btn → inline-flex,
   .run-pages-banner → flex). Restore the invariant with one rule. */
[hidden] { display: none !important; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}

/* Shared button primitives. Stay consistent with .filter-reset-btn height. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--foreground);
  color: var(--background);
  position: relative;
}
.btn-primary:hover:not(:disabled) {
  background: var(--foreground-secondary);
  box-shadow: var(--signal-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--foreground-secondary);
  border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--foreground);
  border-color: var(--border-hover);
}

.btn-danger {
  background: var(--error-bg);
  color: var(--error);
  border-color: var(--error);
}
.btn-danger:hover:not(:disabled) { background: var(--error); color: var(--background); }

/* Run-mode badge colored by surface. */
.run-mode-badge {
  letter-spacing: 0.02em;
  font-weight: 600;
}
.run-mode-localhost { background: var(--accent-blue-bg); color: var(--accent-blue); }
.run-mode-space { background: var(--accent-purple-bg); color: var(--accent-purple); }
.run-mode-pages { background: var(--surface-3); color: var(--foreground-secondary); }
.run-mode-file { background: var(--accent-amber-bg); color: var(--accent-amber); }

[data-theme="dark"] .run-mode-localhost { color: var(--accent-blue); }
[data-theme="dark"] .run-mode-space { color: var(--accent-purple); }
[data-theme="dark"] .run-mode-pages { color: var(--foreground-muted); }
[data-theme="dark"] .run-mode-file { color: var(--accent-amber); }

/* Pages-mode read-only banner. */
.run-pages-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--accent-blue-bg);
  color: var(--foreground-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.run-pages-banner a { font-weight: 600; color: var(--accent-blue); text-decoration: underline; }

/* HF hub sign-in/submit row (space surface only). */
.hub-row { margin-bottom: 20px; }
.hub-row-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hub-row-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground-muted);
  font-size: 13px;
  font-family: var(--font-mono);
}
.hub-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Device / budget stat cards (reuses .summary-grid + .stat-card shells). */
.run-device-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 24px;
}
.run-device-card { flex-direction: column; align-items: stretch; gap: 10px; }
.run-device-card .stat-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.run-device-rows { display: flex; flex-direction: column; gap: 4px; }
.run-device-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-family: var(--font-mono);
}
.run-device-row-label { color: var(--foreground-muted); }
.run-device-row-value { color: var(--foreground); font-weight: 600; }
.run-device-note { font-size: 11px; color: var(--foreground-muted); margin-top: 2px; }

/* User-reported machine card — appears between the auto-detected device
   stats and the filter bar. <details>/<summary> so it can collapse once
   the user has filled it in. */
.run-machine-card { margin-bottom: 24px; }
.run-machine-card > summary { cursor: pointer; }
.run-machine-card > summary > strong { font-weight: 600; }
.run-machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.run-machine-field { display: flex; flex-direction: column; gap: 6px; }
.run-machine-label {
  font-size: 12px;
  color: var(--foreground-muted);
  font-weight: 500;
}
.run-machine-req { color: var(--danger, #d04545); font-weight: 700; }
.run-machine-opt { color: var(--foreground-muted); font-weight: 400; }
.run-machine-input {
  height: 34px;
  padding: 0 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 13px;
}
.run-machine-input:focus {
  outline: none;
  border-color: var(--brand, #2b6df0);
}
.run-machine-input.is-missing {
  border-color: var(--danger, #d04545);
}
.run-machine-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--foreground-muted);
}
.run-machine-hint.is-warn { color: var(--danger, #d04545); }

/* Hide filters + iterations + action buttons — stacks with .filter-bar tokens. */
.run-filters { align-items: center; }
.run-filters-checks {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Family search — sits at the start of the run-filters row, expands to
   fill available space so the user has a generous typing target. */
.filter-group--search { flex: 1 1 220px; min-width: 200px; }
.run-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.run-search-icon {
  position: absolute;
  left: 10px;
  color: var(--foreground-muted);
  pointer-events: none;
}
.run-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.run-search-input::placeholder { color: var(--foreground-muted); }
.run-search-input:hover { border-color: var(--border-hover); }
.run-search-input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
}
/* Hide the native "x" clear button on type=search inputs — we don't want
   the rendering inconsistency between Webkit and Gecko. */
.run-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.run-hide-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--foreground-secondary);
  cursor: pointer;
}
.run-hide-label input[type="checkbox"] { accent-color: var(--foreground); }
.run-iter-input {
  width: 72px;
  min-width: 0;
  padding: 0 10px;
  background-color: var(--surface-1);
  background-image: none;
  background-repeat: no-repeat;
}
/* The dark-theme .filter-select override re-adds the chevron SVG at higher
   specificity; explicitly nullify for the number input. */
[data-theme="dark"] .run-iter-input {
  background-image: none;
}
.run-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}
.run-queue-status {
  font-size: 12px;
  color: var(--foreground-muted);
  font-family: var(--font-mono);
  min-height: 16px;
}

/* Small button variant used in the batch-select row. */
.btn-xs {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

/* Action bar with Download / Run / Abort / Purge — sits between the model
   list and the Progress section so the controls are visually adjacent to
   the status they drive. Wrapped in a card so it reads as a deliberate
   pre-launch surface, not a leftover toolbar. */
.run-action-bar {
  margin: 24px 0 16px;
  padding: 14px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.run-action-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Budget meter — visualizes "largest selected model" against the device
   memory budget so users can tell at-a-glance if their queue will fit. */
.run-budget {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 480px;
}
.run-budget-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.run-budget-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.run-budget-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--foreground-secondary);
}
.run-budget-text strong {
  color: var(--foreground);
  font-weight: 600;
}
.run-budget-size {
  color: var(--foreground);
  font-weight: 500;
}
.run-budget-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.run-budget-bar-fill {
  height: 100%;
  width: 0;
  background: var(--signal);
  border-radius: 3px;
  transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease;
}
.run-budget[data-tone="warn"] .run-budget-bar-fill { background: var(--accent-amber); }
.run-budget[data-tone="over"] .run-budget-bar-fill { background: var(--error); }
.run-budget-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-muted);
  letter-spacing: 0.01em;
  min-height: 14px;
}

@media (max-width: 640px) {
  .run-action-bar { padding: 12px 14px; }
  .run-action-bar-inner { gap: 10px; }
  .run-actions { margin-left: 0; width: 100%; }
  .run-budget { max-width: none; }
}

/* Family cards + variant rows. */
.run-models-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.run-family { padding: 0; overflow: hidden; }
.run-family-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-1);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
  user-select: none;
}
.run-family-summary:hover { background: var(--surface-2); }
.run-family.is-open > .run-family-summary {
  border-bottom-color: var(--border);
  background: var(--surface-2);
}
.run-family-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.run-family-toggle:hover { background: var(--surface-3); }
.run-family-toggle:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}
.run-family-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--foreground-muted);
  border-bottom: 1.5px solid var(--foreground-muted);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.run-family.is-open .run-family-chevron { transform: rotate(45deg); }
.run-family-select-all { margin: 0; accent-color: var(--foreground); cursor: pointer; }
.run-family-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
  cursor: pointer;
  user-select: none;
}
.run-family-params {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--signal-bg);
  color: var(--signal-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9999px;
  flex-shrink: 0;
}
[data-theme="dark"] .run-family-params { color: var(--signal); }
.run-family-stats {
  color: var(--foreground-muted);
  font-size: 12px;
  font-family: var(--font-mono);
}

.run-variant-list {
  display: flex;
  flex-direction: column;
}
.run-variant-row {
  display: grid;
  grid-template-columns: 20px minmax(60px, max-content) minmax(0, 1fr) 80px auto;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}
.run-variant-row:last-child { border-bottom: none; }
.run-variant-row:hover { background: var(--surface-2); }
.run-variant-row.is-non-fit { opacity: 0.45; }
.run-variant-select { margin: 0; accent-color: var(--foreground); cursor: pointer; }
.run-variant-quant {
  font-weight: 700;
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 12px;
}
.run-variant-file {
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--foreground-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-variant-size {
  color: var(--foreground-muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}
.run-variant-badges {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge--cached { background: var(--success-bg); color: var(--success); }
.badge--warn { background: var(--accent-amber-bg); color: var(--accent-amber); }

/* Progress table — piggybacks on .results-table styling. */
.run-progress-table { font-variant-numeric: tabular-nums slashed-zero; }
.run-progress-table th.num,
.run-progress-table td.num { text-align: right; }
.run-row-queued { color: var(--foreground-subtle); }
.run-row-running td {
  background: var(--signal-bg);
  position: relative;
}
/* Animated 1px stripe across the running row's leading cell — signals
   liveness without consuming attention the way a flashing background would. */
.run-row-running td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--signal) 50%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: running-stripe 1.4s linear infinite;
  pointer-events: none;
}
@keyframes running-stripe {
  from { background-position: -50% 0; }
  to { background-position: 150% 0; }
}
.run-row-ok { color: var(--foreground-secondary); }
.run-row-error td { color: var(--error); }
.run-row-error td.err { font-family: var(--font-mono); font-size: 12px; }

/* Output block. */
.run-output { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.run-output-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--foreground-secondary);
  cursor: pointer;
}
.run-output-toggle input[type="checkbox"] { accent-color: var(--foreground); }
.run-output-textarea {
  width: 100%;
  min-height: 320px;
  padding: 12px;
  background: var(--surface-0);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
  transition: min-height var(--transition-base);
}
/* Collapse when no output — hides the 320px empty textarea. */
.run-output.is-empty .run-output-textarea {
  min-height: 60px;
  height: 60px;
}
.run-output.is-empty .run-output-textarea::placeholder {
  color: var(--foreground-muted);
}
.run-output-textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.3);
}
.run-output-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* Log panel — collapsible details inside a .card. */
.run-log { padding: 0; }
.run-log > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  color: var(--foreground-muted);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--transition-fast);
}
.run-log > summary::-webkit-details-marker { display: none; }
.run-log > summary:hover { color: var(--foreground); }
.run-log[open] > summary { border-bottom: 1px solid var(--border); }
.run-log-pre {
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 12px 16px;
  background: var(--surface-0);
  color: var(--foreground-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 768px) {
  .run-actions { margin-left: 0; width: 100%; }
  .run-variant-row {
    grid-template-columns: 20px minmax(50px, max-content) minmax(0, 1fr);
    row-gap: 4px;
  }
  .run-variant-size { grid-column: 2; text-align: left; }
  .run-variant-badges { grid-column: 3; justify-content: flex-start; }
  .hub-row-inner { flex-direction: column; align-items: stretch; }
  .hub-row-actions { justify-content: flex-start; }
}