/* VRAMfit - hand-written styling.
 *
 * Goals: WCAG AA contrast on a calm dark surface, a single deliberate type
 * scale, and fit meaning that NEVER depends on color alone - every bucket and
 * per-row fit chip pairs an accent color with an icon glyph and a text label.
 * Layout is fluid (grid/flex + clamp). Re-ranking animates via a short
 * transform/opacity transition on .row, disabled under prefers-reduced-motion.
 *
 * The headline answer is immediate: each card shows the model, its VRAM cost
 * (a big labelled "GB VRAM" number), and the stacked weights/KV/overhead bar
 * with a GPU-capacity marker - all visible at a glance, no click required. The
 * offload plan, full param split, and provenance detail live one interaction
 * away in a keyboard-accessible disclosure (.row-details, toggled by .row-toggle).
 */

:root {
  /* Surfaces - calm, dark, layered. */
  --bg: #0a0d13;
  --bg-2: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2430;
  --surface-3: #232d3b;
  --border: #303b4b;
  --border-strong-solid: #415063;

  /* Text - tuned for AA against the surfaces above. Secondary tones were
     brightened so timestamps, host info and the footer clear WCAG AA. */
  --text: #eef2f8;
  --text-muted: #c2cbd8;
  --text-faint: #9eaaba;

  /* Accent (interactive elements). */
  --accent: #6ea8fe;
  --accent-strong: #4d8bff;
  --accent-contrast: #08111e;
  --violet: #8b6dff;

  /* Bucket accents - paired ALWAYS with icon + text, never color alone, and
     pushed apart in hue so green / amber / orange / red read distinctly even
     for color-blind users (the icons carry the meaning regardless). */
  --comfortable: #34d399;
  --tight: #facc15;
  --offload: #ff8a3d;
  --wontfit: #fb5d76;

  /* VRAM segment colors - shared by the canvas bar and the CSS legend. */
  --seg-weights: #6ea8fe;
  --seg-kv: #b79cff;
  --seg-overhead: #94a3b5;

  /* Spacing scale (8px rhythm). */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.28);
  --ring: 0 0 0 3px rgba(110, 168, 254, 0.6);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  /* Merchandising surfaces - a slightly lighter, raised surface so offer/buy
     zones advance visually from the darker content. Text on these clears AA. */
  --surface-merch: #2a3647;
  --surface-merch-2: #334256;

  /* Deal badge - high-contrast accent (dark text on warm yellow). Dormant. */
  --deal: #facc15;
  --deal-contrast: #2a2300;

  /* Trust-signal accent (decorative dot; meaning is carried by the chip label).
     Aliases --comfortable so the green stays defined in one place. */
  --trust: var(--comfortable);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(139, 109, 255, 0.16), transparent 60%),
    radial-gradient(900px 480px at 8% 0%, rgba(77, 139, 255, 0.12), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(15px, 0.95rem + 0.2vw, 17px);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0;
}

/* Screen-reader-only utility (copy/share live region). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard-only skip link. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  z-index: 50;
}
.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------------ header */
.site-header {
  padding: clamp(var(--s-5), 4vw, var(--s-7)) var(--s-5) var(--s-5);
  max-width: 1160px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--accent-strong), var(--violet));
  color: #fff;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  flex: none;
}
.brand-name {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tagline {
  margin: var(--s-1) 0 0;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ------------------------------------------------------------------ layout */
.layout {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ---------------------------------------------------------------- controls */
.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4) var(--s-5);
  align-items: end;
  padding: var(--s-5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.control {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.control label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.control-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* Custom select shell so we can draw our own chevron and focus ring. */
.select-wrap {
  position: relative;
  display: flex;
}
.select-chevron {
  position: absolute;
  right: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 140ms ease, transform 140ms ease;
}
.select-wrap:hover .select-chevron {
  color: var(--accent);
}

select,
.btn-copy {
  font: inherit;
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
select {
  width: 100%;
  appearance: none;
  cursor: pointer;
  font-weight: 600;
  padding-right: calc(var(--s-4) + 22px);
  /* Render the native option popup in dark mode so it is never light-on-light
     when the OS/browser is set to a light theme. */
  color-scheme: dark;
}
/* Explicit colors for the native option list. color-scheme handles the popup
   chrome, but several browsers still paint option/optgroup backgrounds from
   these values -- without them the white option text lands on a white popup. */
select option {
  background-color: var(--surface-2);
  color: var(--text);
}
select optgroup {
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-weight: 700;
}

/* Card-count (harness) number input: matches the select shell, dark-themed so
   it is legible on any OS theme, with its native spinner rendered dark too. */
.count-wrap {
  position: relative;
  display: flex;
}
.control-count input[type="number"] {
  font: inherit;
  font-weight: 600;
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  color-scheme: dark;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.control-count input[type="number"]:hover {
  border-color: var(--accent);
}
.control-count input[type="number"]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
}
select:hover,
.btn-copy:hover {
  border-color: var(--accent);
}
select:focus-visible,
.btn-copy:focus-visible,
.row-toggle:focus-visible,
.moe-badge:focus-visible,
#context-slider:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------- slider */
/* A tactile context-length slider: a filled track, a chunky focusable thumb,
   and a live value bubble that rides above the thumb (positioned by app.js via
   the --thumb custom property) so scrubbing feels direct. */
.slider-wrap {
  display: flex;
  align-items: center;
  padding: 0 var(--s-3);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  min-height: 48px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.slider-wrap:hover {
  border-color: var(--accent);
}
.slider-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.slider-track {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 18px; /* room for the value bubble above the thumb */
}
#context-slider {
  flex: 1;
  width: 100%;
  margin: 0;
  height: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) var(--fill, 35%),
    var(--surface-3) var(--fill, 35%),
    var(--surface-3) 100%
  );
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
#context-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfe0ff, var(--accent-strong));
  border: 2px solid #0c1320;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(110, 168, 254, 0.4);
  cursor: grab;
  transition: transform 120ms ease;
}
#context-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.12);
}
#context-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfe0ff, var(--accent-strong));
  border: 2px solid #0c1320;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: grab;
}
#context-slider::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: transparent;
}
/* The value readout bubble - positioned over the thumb by app.js. */
#context-value {
  position: absolute;
  top: -2px;
  left: var(--thumb, 35%);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent-contrast);
  background: linear-gradient(180deg, #cfe0ff, var(--accent));
  padding: 2px var(--s-2);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  transition: left 60ms linear;
}
#context-value::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}

.control-action {
  justify-content: end;
}
.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: var(--accent-contrast);
  border-color: transparent;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-copy:hover {
  filter: brightness(1.06);
}
.btn-copy:active {
  transform: translateY(1px);
}
.btn-icon {
  display: inline-flex;
}
/* Brief success flash shared by every copy affordance. */
.btn-copy.copied,
.btn-copy-cmd.copied {
  background: linear-gradient(180deg, var(--comfortable), #16a06a);
  color: #052015;
  border-color: transparent;
}

/* ----------------------------------------------------------- catalog status */
.catalog-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.catalog-status-text {
  flex: 1 1 auto;
  min-width: 0;
}
.catalog-status.stale {
  color: #ffe9bd;
  border-left-color: var(--tight);
  background: rgba(250, 204, 21, 0.08);
}
.catalog-status.offline {
  color: #ffdada;
  border-left-color: var(--wontfit);
  background: rgba(251, 93, 118, 0.08);
}

/* Refresh / Retry control: a quiet, accessible button that triggers the
   /api/refresh round-trip (status line) or an initial-load retry (empty state). */
.btn-refresh {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-4);
  min-height: 38px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.btn-refresh:hover {
  border-color: var(--accent);
  background: var(--surface-3);
}
.btn-refresh:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
}
.btn-refresh:active {
  transform: translateY(1px);
}
.empty-state .btn-refresh {
  margin-top: var(--s-4);
}

/* -------------------------------------------------------------- fit summary */
.fit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.fit-summary:empty {
  display: none;
}
.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--comfortable);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.summary-chip .summary-icon {
  display: inline-flex;
  color: var(--comfortable);
}
.summary-chip.none {
  border-left-color: var(--text-faint);
}
.summary-chip.none .summary-icon {
  color: var(--text-faint);
}

/* --------------------------------------------------------------- board key */
.board-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: 0.84rem;
  color: var(--text-muted);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.key-title {
  font-weight: 700;
  color: var(--text-muted);
}
.key-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.swatch-weights { background: var(--seg-weights); }
.swatch-kv { background: var(--seg-kv); }
.swatch-overhead { background: var(--seg-overhead); }
/* The GPU-capacity marker swatch: a dashed line, mirroring the dashed marker the
   canvas draws on each bar where the GPU's VRAM runs out. */
.swatch-limit {
  background: transparent;
  box-shadow: none;
  border-left: 2px dashed rgba(255, 255, 255, 0.9);
  border-radius: 0;
  width: 6px;
}

/* --------------------------------------------------------------- fit board */
.fit-board {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
/* The board and the empty-state are mutually exclusive; honour [hidden] even
   though .fit-board sets display:flex (which would otherwise win). */
.fit-board[hidden] {
  display: none;
}

.bucket {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top: 3px solid var(--bucket-accent, var(--border-strong-solid));
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.bucket[data-bucket="comfortable"] { --bucket-accent: var(--comfortable); }
.bucket[data-bucket="tight"] { --bucket-accent: var(--tight); }
.bucket[data-bucket="needs-offloading"] { --bucket-accent: var(--offload); }
.bucket[data-bucket="won't-fit"] { --bucket-accent: var(--wontfit); }

.bucket-heading {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bucket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bucket-accent, var(--text));
  background: color-mix(in srgb, var(--bucket-accent, var(--accent)) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bucket-accent, var(--accent)) 40%, transparent);
  padding: var(--s-2);
  border-radius: var(--radius-sm);
}
.bucket-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: color-mix(in srgb, var(--bucket-accent, var(--accent)) 16%, var(--surface-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bucket-accent, var(--accent)) 35%, transparent);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
}
.bucket-count:empty {
  display: none;
}
.bucket-sub {
  margin: var(--s-2) 0 var(--s-5);
  color: var(--text-muted);
  font-size: 0.86rem;
}
.rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* Empty buckets get an intentional, compact treatment rather than a tall band
   of dead air: a single quiet line, and (via :has) reduced bucket padding so an
   empty "Won't fit" or "Tight" never balloons the board. */
.rows:empty {
  display: flex;
}
.rows:empty::after {
  content: "Nothing lands here for this GPU and settings.";
  display: block;
  width: 100%;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.84rem;
  padding: var(--s-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.012);
}
.bucket:has(.rows:empty) {
  padding: var(--s-4) var(--s-5);
}
.bucket:has(.rows:empty) .bucket-sub {
  margin-bottom: var(--s-3);
}

/* ---------------------------------------------------------------- the rows */
.row {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent), var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--row-accent, var(--border-strong-solid));
  border-radius: var(--radius-sm);
  transition: transform 180ms ease, opacity 180ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.row[data-fit="comfortable"] { --row-accent: var(--comfortable); }
.row[data-fit="tight"] { --row-accent: var(--tight); }
.row[data-fit="needs-offloading"] { --row-accent: var(--offload); }
.row[data-fit="won't-fit"] { --row-accent: var(--wontfit); }
.row:hover {
  border-color: var(--border-strong-solid);
  border-left-color: var(--row-accent, var(--border-strong-solid));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), #1f2837;
  box-shadow: var(--shadow-sm);
}
/* Re-rank entrance: each freshly placed row fades/slides into its bucket when
   the GPU / context / quant changes. One-shot; removed on animationend by the
   JS. The global reduced-motion rule below cancels this animation. */
@keyframes row-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.row.row-enter {
  animation: row-enter 200ms ease both;
}

/* Headline: fit chip + name + badges on the left, the big labelled VRAM cost
   on the right. This is the focal point of each card. */
.row-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;
}
.row-head-main {
  display: flex;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  flex-wrap: wrap;
  flex: 1 1 260px;
  min-width: 0;
}
.row .model-name {
  font-weight: 750;
  font-size: 1.16rem;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* The big, unambiguous "GB VRAM" cost - the single most important quantity per
   row, right-aligned with an explicit unit and the GPU capacity for context. */
.vram-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  line-height: 1.05;
  text-align: right;
}
.vram-headline .vram-number {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.vram-headline .vram-unit {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--row-accent, var(--text-muted));
  margin-top: 2px;
}
.vram-headline .vram-context {
  font-size: 0.78rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Per-row fit chip: icon + text + color, so fit is glanceable and never depends
   on color alone (works for color-blind users and out of bucket context). */
.fit-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px var(--s-2);
  border-radius: var(--radius-pill);
  color: var(--chip-color, var(--text));
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent)) 50%, transparent);
  white-space: nowrap;
  flex: none;
}
.fit-chip .fit-chip-icon {
  display: inline-flex;
}
.fit-chip[data-fit="comfortable"] { --chip-color: var(--comfortable); }
.fit-chip[data-fit="tight"] { --chip-color: var(--tight); }
.fit-chip[data-fit="needs-offloading"] { --chip-color: var(--offload); }
.fit-chip[data-fit="won't-fit"] { --chip-color: var(--wontfit); }

/* Stacked VRAM breakdown bar (canvas drawn by the JS), now a headline feature
   on every card - always visible, with a compact numeric legend beneath it.
   The bar + legend are grouped tightly so they read as one unit. */
.vram-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.vram-bar {
  width: 100%;
}
.vram-bar canvas {
  display: block;
  width: 100%;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.vram-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.vram-legend .seg-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.vram-legend .seg-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}
.vram-legend .seg-total {
  margin-left: auto;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* The row foot: speed verdict, run command (zero-friction copy), details toggle. */
.row-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.row-speed {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  flex: 0 0 auto;
}
.tps-number {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tps-unit {
  font-size: 0.76rem;
  color: var(--text-faint);
}
.speed-pill {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--s-2);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.speed-pill.snappy {
  color: #b7f7c9;
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
}
.speed-pill.usable {
  color: #cfe0ff;
  background: rgba(110, 168, 254, 0.18);
  border-color: rgba(110, 168, 254, 0.45);
}
.speed-pill.slow {
  color: #ffd9b8;
  background: rgba(255, 138, 61, 0.18);
  border-color: rgba(255, 138, 61, 0.45);
}

.feels-like {
  display: block;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Command line (headline-level: zero-friction copy). */
.row-command {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: nowrap;
  flex: 1 1 280px;
  min-width: 0;
}
.command-text {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
  overflow-x: auto;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.btn-copy-cmd {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--accent-contrast);
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-4);
  min-height: 42px;
  cursor: pointer;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: filter 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 80ms ease;
}
.btn-copy-cmd:hover {
  filter: brightness(1.07);
}
.btn-copy-cmd:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn-copy-cmd:active {
  transform: translateY(1px);
}

/* Details disclosure toggle (progressive depth: offload plan + param split). */
.row-toggle {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-3);
  min-height: 42px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.row-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--surface-2);
}
.row-toggle .chevron {
  display: inline-flex;
  transition: transform 160ms ease;
}
.row-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* The depth panel: param split + offload plan. */
.row-details {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
}
.row-details[hidden] {
  display: none;
}

.row .model-meta {
  color: var(--text-muted);
  font-size: 0.84rem;
}
/* Param-count line: for MoE rows this carries both the total (VRAM) and active
   (speed) figures, so nudge it brighter than plain meta to draw the eye. */
.row .model-params {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.offload-plan {
  color: #ffdcc0;
  background: rgba(255, 138, 61, 0.12);
  border: 1px solid rgba(255, 138, 61, 0.35);
  border-radius: var(--radius-sm);
  padding: var(--s-3);
  font-size: 0.84rem;
}

/* ------------------------------------------------------------------ badges */
.moe-badge,
.provenance-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px var(--s-2);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
/* The MoE badge is a real button (opens an educational popover). */
.moe-badge {
  color: #ddccff;
  background: rgba(139, 109, 255, 0.18);
  border-color: rgba(139, 109, 255, 0.5);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.moe-badge:hover {
  background: rgba(139, 109, 255, 0.3);
}
.moe-badge .moe-caret {
  display: inline-flex;
  opacity: 0.8;
}

/* Provenance is a deliberate, high-contrast truth signal, NOT a neutral pill:
   measured = solid green border + check; estimated = dashed border + wave, so
   the "this is an estimate" caveat is impossible to miss (and reads without
   relying on color, per WCAG). */
.provenance-badge {
  color: var(--text-muted);
  background: var(--surface-3);
  border-color: var(--border-strong-solid);
}
.provenance-badge.measured {
  color: #9ff5c4;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.55);
}
.provenance-badge.estimated {
  color: #bcd2ff;
  background: rgba(110, 168, 254, 0.1);
  border: 1px dashed rgba(110, 168, 254, 0.7);
}
/* Icon paired with text (not color alone) so provenance reads for color-blind
   users; the icon is purely decorative (aria-hidden) and slightly dimmed. */
.provenance-icon {
  display: inline-flex;
  font-weight: 700;
  opacity: 0.95;
}
.provenance-text {
  text-transform: uppercase;
}

/* ----------------------------------------------------- spec-confidence badge */
/* Same pill shape as the speed-provenance badge, but it flags how much to trust
   the STRUCTURAL specs behind the VRAM number. Only estimated / unknown rows
   carry it; verified rows stay clean. Amber = approximate, red = no real specs. */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px var(--s-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.confidence-badge.confidence-estimated {
  color: #f3d9a4;
  background: rgba(245, 191, 99, 0.12);
  border: 1px dashed rgba(245, 191, 99, 0.7);
}
.confidence-badge.confidence-unknown {
  color: #ffc4c4;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.6);
}
.confidence-icon {
  display: inline-flex;
  opacity: 0.95;
}
.confidence-text {
  text-transform: uppercase;
}
/* Rows with no real specs are de-emphasised so their guessed placement never
   competes visually with genuinely-sized models. */
.row[data-confidence="unknown"] {
  opacity: 0.6;
}
.row[data-confidence="unknown"]:hover,
.row[data-confidence="unknown"]:focus-within {
  opacity: 0.85;
}

/* --------------------------------------------------------------- MoE popover */
/* A single popover element is reused (moved + shown next to the active badge).
   It is keyboard-dismissible (Escape) and closes on outside click. */
.moe-popover {
  position: absolute;
  z-index: 60;
  max-width: 340px;
  width: max-content;
  padding: var(--s-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong-solid);
  border-top: 3px solid var(--violet);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.86rem;
  line-height: 1.5;
}
.moe-popover[hidden] {
  display: none;
}
.moe-popover h3 {
  font-size: 0.95rem;
  margin: 0 0 var(--s-2);
  color: #ddccff;
}
.moe-popover p {
  margin: 0 0 var(--s-2);
  color: var(--text-muted);
}
.moe-popover p:last-child {
  margin-bottom: 0;
}
.moe-popover strong {
  color: var(--text);
}
.moe-popover .moe-split {
  display: flex;
  gap: var(--s-3);
  margin: var(--s-3) 0;
}
.moe-popover .moe-split-item {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.moe-popover .moe-split-item .k {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.moe-popover .moe-split-item .v {
  font-weight: 600;
}
.moe-popover-close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.moe-popover-close:hover {
  background: var(--surface-3);
  color: var(--text);
}
.moe-popover-close:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* ------------------------------------------------------------- empty state */
.empty-state {
  text-align: center;
  padding: var(--s-7) var(--s-5);
  background: var(--surface);
  border: 1px dashed var(--border-strong-solid);
  border-radius: var(--radius);
}
.empty-state[hidden] {
  display: none;
}
.empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--s-2);
}
.empty-body {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--s-5);
  color: var(--text-muted);
  font-size: 0.84rem;
  border-top: 1px solid var(--border);
}
.site-footer p {
  margin: 0 0 var(--s-1);
}
.footer-attrib {
  color: var(--text-faint);
}
.site-footer a {
  color: var(--text-muted);
}
.site-footer a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .control-action {
    justify-content: stretch;
  }
  .btn-copy {
    width: 100%;
  }
  .vram-headline {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    margin-top: var(--s-2);
  }
  .row-command {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

/* Honour reduced-motion: kill all transitions and animations. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   Model profile page (model.html / model.js) + shared nav
   ========================================================================= */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.brand-link {
  text-decoration: none;
  color: inherit;
}
.site-nav {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.site-nav a:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-2);
}

.profile-layout {
  gap: var(--s-5);
}

/* Best-model recommender (board) ------------------------------------------ */
.recommend-panel {
  background: linear-gradient(160deg, rgba(110, 168, 254, 0.14), transparent 65%), var(--surface);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.recommend-panel[hidden] {
  display: none;
}
.recommend-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.recommend-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.recommend-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.recommend-task {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong-solid);
  background: var(--surface-2);
  color: var(--text-muted);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.recommend-task:hover {
  color: var(--text);
  border-color: var(--accent);
}
.recommend-task.is-active {
  color: #0b1220;
  background: var(--accent);
  border-color: var(--accent);
}
.recommend-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--text);
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color 140ms ease, transform 140ms ease;
}
.recommend-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.recommend-top {
  border-color: var(--accent);
  background: rgba(110, 168, 254, 0.12);
}
.recommend-name {
  font-weight: 800;
  font-size: 1.15rem;
  word-break: break-word;
}
.recommend-top .recommend-name {
  color: var(--accent);
}
.recommend-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.recommend-alts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2);
}
.recommend-empty {
  margin: 0;
  color: var(--text-muted);
}

/* Amazon affiliate buy buttons + disclosure ------------------------------- */
.buy-amazon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.82rem;
  color: #1a1100;
  background: linear-gradient(180deg, #ffd277, #ff9900);
  border: 1px solid #e88a00;
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
  transition: transform 120ms ease, filter 120ms ease;
}
.buy-amazon:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.buy-amazon-sm {
  font-size: 0.74rem;
  padding: 3px var(--s-2);
  margin-left: var(--s-2);
}
.fit-buy {
  margin-top: var(--s-3);
}
.shop-search {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.shop-search-input {
  flex: 1;
  min-width: 200px;
  font: inherit;
  min-height: 42px;
  padding: var(--s-2) var(--s-3);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  color-scheme: dark;
}
.shop-search-input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
}
.gpu-stack-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.gpu-stack-label {
  font-weight: 700;
  font-size: 0.9rem;
}
.footer-disclosure {
  display: none;
  color: var(--text-faint);
}
body.affiliate-on .footer-disclosure {
  display: block;
}

/* GPU comparison page ----------------------------------------------------- */
.gpus-layout {
  gap: var(--s-5);
}
.gpus-loading {
  color: var(--text-muted);
}
.gpu-hero {
  background: linear-gradient(160deg, rgba(159, 122, 234, 0.14), transparent 65%), var(--surface);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
}
.gpu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.gpu-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong-solid);
  background: var(--surface-2);
  color: var(--text);
  transition: opacity 140ms ease, border-color 140ms ease;
}
.gpu-filter.is-off {
  opacity: 0.4;
}
.gpu-filter:hover {
  border-color: var(--accent);
}
.gpu-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.gpu-filter-count {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.gpu-chart-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-3);
}
.gpu-chart {
  width: 100%;
  height: auto;
  display: block;
}
.gpu-grid {
  stroke: var(--border);
  opacity: 0.45;
}
.gpu-axis-tick {
  fill: var(--text-faint);
  font-size: 12px;
}
.gpu-tick-y {
  text-anchor: end;
}
.gpu-tick-x {
  text-anchor: middle;
}
.gpu-axis-title {
  fill: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  text-anchor: middle;
}
.gpu-dot {
  cursor: pointer;
  stroke: rgba(8, 12, 22, 0.55);
  stroke-width: 1;
  transition: r 100ms ease;
}
.gpu-dot:hover,
.gpu-dot:focus-visible {
  stroke: #ffffff;
  stroke-width: 2;
  outline: none;
}
.gpu-dot.is-selected {
  stroke: var(--accent);
  stroke-width: 3;
}
.gpu-dot.is-found {
  stroke: #ffffff;
  stroke-width: 2.5;
}
.gpu-dot.is-dim {
  opacity: 0.16;
}
.gpu-dot-label {
  fill: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.gpu-find {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.gpu-find-input {
  font: inherit;
  flex: 1 1 280px;
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  color-scheme: dark;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.gpu-find-input::placeholder {
  color: var(--text-faint);
}
.gpu-find-input:hover {
  border-color: var(--accent);
}
.gpu-find-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(118, 211, 91, 0.25));
}
.gpu-find-status {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.gpu-tip.is-interactive {
  pointer-events: auto;
}
.gpu-tip-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--s-2);
  max-height: 220px;
  overflow-y: auto;
}
.gpu-tip-link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 6px;
  border-radius: var(--radius-xs, 5px);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.gpu-tip-link:hover,
.gpu-tip-link:focus-visible {
  background: var(--surface-2);
  outline: none;
}
.gpu-tip-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.gpu-tip {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  max-width: 250px;
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-strong-solid);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
}
.gpu-tip[hidden] {
  display: none;
}
.gpu-tip-name {
  font-weight: 800;
  margin-bottom: 2px;
}
.gpu-tip-row {
  color: var(--text-muted);
}
.gpu-tip-muted {
  color: var(--text-faint);
}
.gpu-tip-cta {
  margin-top: var(--s-2);
  color: var(--accent);
  font-weight: 700;
}

.gpu-compare {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-5);
}
.gpu-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.gpu-clear {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong-solid);
  background: var(--surface-2);
  color: var(--text-muted);
}
.gpu-clear:hover {
  color: var(--text);
  border-color: var(--accent);
}
.gpu-metric {
  margin-top: var(--s-4);
}
.gpu-metric-title {
  margin: 0 0 var(--s-2);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.gpu-bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 180px) 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: 3px 0;
}
.gpu-bar-label {
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpu-bar-label:hover {
  color: var(--accent);
  text-decoration: line-through;
}
.gpu-bar-track {
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  height: 24px;
}
.gpu-bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 3%;
  padding-right: var(--s-3);
  font-size: 0.78rem;
  font-weight: 800;
  color: #0b1220;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Board model search ------------------------------------------------------ */
.board-search {
  display: flex;
}
#model-search {
  font: inherit;
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  color-scheme: dark;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
#model-search::placeholder {
  color: var(--text-faint);
}
#model-search:hover {
  border-color: var(--accent);
}
#model-search:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
}

/* Consolidated home page (Compare GPUs / Models / About sections) ---------- */
.home-layout {
  gap: var(--s-7);
}
.home-section {
  scroll-margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.home-section-title {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.about-h3 {
  margin: var(--s-4) 0 0;
  font-size: 1.05rem;
  font-weight: 800;
}
#about p {
  max-width: 70ch;
}

/* News feed (homepage) ---------------------------------------------------- */
.news-layout {
  gap: var(--s-5);
}
.news-loading {
  color: var(--text-muted);
}
.news-hero {
  background: linear-gradient(160deg, rgba(110, 168, 254, 0.12), transparent 60%), var(--surface);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
}
.news-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
}
.news-headline {
  margin: var(--s-2) 0 0;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.news-sub {
  margin: var(--s-2) 0 var(--s-4);
  color: var(--text-muted);
  max-width: 62ch;
}
.news-hero-cta {
  display: inline-flex;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--text);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 140ms ease, transform 140ms ease;
}
.news-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.news-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.news-creator {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.news-chip {
  font-size: 0.66rem;
  padding: 2px var(--s-2);
}
.news-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* ------------------------------- creator brand marks (brand.js) */
.brand-chip,
.brand-mono {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-chip {
  background: linear-gradient(180deg, #f5f7fa, #dde3ec);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.brand-chip img {
  width: 18px;
  height: 18px;
  display: block;
}
.brand-mono {
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.brand-lg.brand-chip,
.brand-lg.brand-mono {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 0.92rem;
}
.brand-lg.brand-chip img {
  width: 30px;
  height: 30px;
}
.masthead-name {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.news-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.news-recency {
  color: var(--accent);
  font-weight: 700;
}
.news-new {
  color: #0b1220;
  background: var(--comfortable);
  border-color: var(--comfortable);
  letter-spacing: 0.08em;
}
.news-desc {
  margin: var(--s-1) 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.news-cta {
  margin-top: auto;
  padding-top: var(--s-2);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent);
}

/* Board model name -> profile link. */
.model-name-link {
  color: inherit;
  text-decoration: none;
}
.model-name-link:hover,
.model-name-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}
.profile-loading,
.muted {
  color: var(--text-muted);
}

.profile-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-5);
}
.profile-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}

/* 1 + 2: masthead --------------------------------------------------------- */
.profile-masthead {
  background: linear-gradient(160deg, rgba(110, 168, 254, 0.12), transparent 60%), var(--surface);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
}
.masthead-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
}
.masthead-name {
  margin: var(--s-2) 0 0;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  word-break: break-word;
}
.masthead-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* ------------------------------- per-GPU masthead with illustration */
.gpu-masthead {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.gpu-masthead-text {
  flex: 1 1 320px;
  min-width: 0;
}
.gpu-masthead-art {
  flex: 0 1 300px;
  max-width: 320px;
  margin-left: auto;
}
.gpu-art {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}
.gpu-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong-solid);
  box-shadow: var(--shadow);
}
.gpu-photo-credit {
  display: block;
  margin-top: var(--s-2);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-decoration: none;
  text-align: right;
}
.gpu-photo-credit:hover {
  color: var(--text-muted);
  text-decoration: underline;
}

/* ------------------------------- articles (aggregated + guides) */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--s-4);
}
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 140ms ease, transform 140ms ease;
}
.article-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.article-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  padding: var(--s-4) var(--s-5);
  color: var(--text);
  text-decoration: none;
}
a.article-card {
  padding: var(--s-4) var(--s-5);
  gap: var(--s-2);
  color: var(--text);
  text-decoration: none;
}
.article-knowledge {
  background: linear-gradient(160deg, rgba(118, 211, 91, 0.08), transparent 55%), var(--surface);
}
.article-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.article-summary {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.article-meta {
  margin: auto 0 0;
  padding-top: var(--s-2);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0 var(--s-5) var(--s-4);
}
.article-topic {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px var(--s-2);
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ------------------------------- knowledge article pages */
.article-page {
  max-width: 880px;
}
.article-page article > p,
.article-page article > h2,
.article-page article > h3 {
  max-width: 72ch;
}
.article-h1 {
  margin: var(--s-2) 0 var(--s-4);
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.article-page h2 {
  margin: var(--s-6) 0 var(--s-3);
  font-size: 1.25rem;
  font-weight: 800;
}
.article-answer {
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(118, 211, 91, 0.1), transparent 70%), var(--surface);
  font-size: 1.02rem;
}
.article-table {
  margin: var(--s-3) 0;
}
.article-cta {
  margin-top: var(--s-6);
}
.art-body {
  fill: var(--surface-3);
  stroke: var(--border-strong-solid);
  stroke-width: 1.5;
}
.art-fan-ring {
  fill: var(--surface-1);
  stroke: var(--border-strong-solid);
  stroke-width: 1.5;
}
.art-fan-blade {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.art-vent,
.art-fin {
  fill: var(--surface-1);
  stroke: var(--border-strong-solid);
  stroke-width: 1;
}
.art-fingers,
.art-pads {
  fill: #b8923f;
  opacity: 0.8;
}
.art-bracket {
  fill: var(--surface-2);
  stroke: var(--border-strong-solid);
  stroke-width: 1;
}
.art-die {
  fill: none;
  stroke: var(--border-strong-solid);
  stroke-width: 1.5;
}
.art-ram {
  fill: var(--surface-1);
  stroke: var(--border-strong-solid);
  stroke-width: 1;
}
@media (max-width: 560px) {
  .gpu-masthead-art {
    margin-left: 0;
  }
}
.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 700;
}
.meta-value {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Generic pill (badges) --------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 4px var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong-solid);
  background: var(--surface-3);
  color: var(--text);
}
.pill-moe {
  color: #d6c2ff;
  background: rgba(159, 122, 234, 0.16);
  border-color: rgba(159, 122, 234, 0.55);
}
.pill-cap-thinking {
  color: #bcd2ff;
  background: rgba(110, 168, 254, 0.16);
  border-color: rgba(110, 168, 254, 0.55);
}
.pill-cap-vision {
  color: #9ff5c4;
  background: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.5);
}
.pill-conf-estimated {
  color: #f3d9a4;
  background: rgba(245, 191, 99, 0.12);
  border: 1px dashed rgba(245, 191, 99, 0.7);
}
.pill-conf-unknown {
  color: #ffc4c4;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.6);
}
.pill-fit-comfortable { color: var(--comfortable); border-color: var(--comfortable); background: rgba(52, 211, 153, 0.12); }
.pill-fit-tight { color: var(--tight); border-color: var(--tight); background: rgba(250, 204, 21, 0.12); }
.pill-fit-needs-offloading { color: var(--offload); border-color: var(--offload); background: rgba(255, 138, 61, 0.12); }
.pill-fit-won\'t-fit { color: var(--wontfit); border-color: var(--wontfit); background: rgba(251, 93, 118, 0.12); }

/* 3: source links --------------------------------------------------------- */
.link-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.link-button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  padding: var(--s-3) var(--s-4);
  min-width: 150px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong-solid);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--text);
  transition: border-color 140ms ease, transform 140ms ease;
}
.link-button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.link-kind {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 700;
}
.link-name {
  font-weight: 700;
}

/* 4: overview ------------------------------------------------------------- */
.profile-lede {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}
.reserved-note {
  margin: var(--s-4) 0 0;
  color: var(--text-faint);
  font-style: italic;
  font-size: 0.9rem;
}

/* 5: key facts ------------------------------------------------------------ */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-3);
}
.fact-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.fact-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  font-weight: 700;
}
.fact-value {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fact-detail {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* 6: run commands --------------------------------------------------------- */
.cmd-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.cmd-row:last-child {
  border-bottom: none;
}
.cmd-tool {
  font-weight: 800;
  min-width: 80px;
  color: var(--text-muted);
}
.cmd-code {
  flex: 1;
  min-width: 220px;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: 0.9rem;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.btn-copy-inline {
  min-height: 0;
  padding: var(--s-2) var(--s-3);
}

/* 7: interactive fit ------------------------------------------------------ */
.fit-tool-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: end;
}
.fit-tool-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fit-tool-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.fit-tool-select,
.fit-tool-count {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  color-scheme: dark;
}
.fit-tool-count {
  width: 90px;
}
.fit-tool-select option,
.fit-tool-select optgroup {
  background-color: var(--surface-2);
  color: var(--text);
}
/* Quant ladder: a chip per quant, coloured by fit, recommended one starred. */
.quant-rec {
  margin: var(--s-4) 0 var(--s-2);
  font-weight: 700;
  color: var(--text);
}
.quant-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.quant-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  font: inherit;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-strong-solid);
  color: var(--text);
  transition: border-color 140ms ease, transform 140ms ease;
}
.quant-chip:hover {
  transform: translateY(-1px);
}
.quant-chip-name {
  font-weight: 800;
}
.quant-chip-gb {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.quant-chip.quant-fit-comfortable {
  border-color: var(--comfortable);
}
.quant-chip.quant-fit-tight {
  border-color: var(--tight);
}
.quant-chip.quant-fit-needs-offloading {
  border-color: var(--offload);
}
.quant-chip.quant-fit-won\'t-fit {
  border-color: var(--wontfit);
  opacity: 0.65;
}
.quant-chip.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.quant-chip.is-rec .quant-chip-name::after {
  content: " \2605"; /* star */
  color: var(--tight);
}

.fit-verdict {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.verdict-badge {
  align-self: flex-start;
  font-size: 1.1rem;
  font-weight: 800;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}
.verdict-comfortable { color: var(--comfortable); background: rgba(52, 211, 153, 0.12); }
.verdict-tight { color: var(--tight); background: rgba(250, 204, 21, 0.12); }
.verdict-needs-offloading { color: var(--offload); background: rgba(255, 138, 61, 0.12); }
.verdict-won\'t-fit { color: var(--wontfit); background: rgba(251, 93, 118, 0.12); }
.verdict-detail {
  margin: 0;
  color: var(--text-muted);
}

/* 8 + 10: tables ---------------------------------------------------------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.spec-table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.spec-table tbody th {
  color: var(--text-muted);
  font-weight: 700;
  width: 40%;
}
.across-table td {
  vertical-align: middle;
}
.spec-caveat {
  margin: 0 0 var(--s-4);
  color: var(--tight);
  font-size: 0.9rem;
}

/* 9: compare -------------------------------------------------------------- */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-3);
}
.compare-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  text-decoration: none;
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 140ms ease, transform 140ms ease;
}
.compare-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.compare-name {
  font-weight: 700;
  word-break: break-word;
}
.compare-params {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Interactive benchmark bar graph (Open LLM Leaderboard scores). */
.bench-graph {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.bench-tabs-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.bench-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.bench-help {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong-solid);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.bench-help:hover,
.bench-help.is-open {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-3);
}
.bench-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-strong-solid);
  box-shadow: var(--shadow);
}
.bench-popover[hidden] {
  display: none;
}
.bench-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 12px;
  width: 12px;
  height: 12px;
  background: var(--surface-3);
  border-left: 1px solid var(--border-strong-solid);
  border-top: 1px solid var(--border-strong-solid);
  transform: rotate(45deg);
}
.bench-popover-title {
  margin: 0 0 var(--s-1);
  font-weight: 800;
  font-size: 0.92rem;
}
.bench-legend-item {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}
.bench-legend-term {
  display: inline-block;
  min-width: 84px;
  font-weight: 800;
  color: var(--accent);
}
.bench-legend-def {
  color: var(--text-muted);
}
.bench-tab {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong-solid);
  background: var(--surface-2);
  color: var(--text-muted);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.bench-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}
.bench-tab.is-active {
  color: #0b1220;
  background: var(--accent);
  border-color: var(--accent);
}
.bench-bars {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bench-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: 3px var(--s-2);
  border-radius: var(--radius-sm);
}
.bench-bar-self {
  background: rgba(110, 168, 254, 0.1);
  outline: 1px solid rgba(110, 168, 254, 0.35);
}
.bench-bar-label {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bench-bar-link {
  color: var(--accent);
  text-decoration: none;
}
.bench-bar-link:hover {
  text-decoration: underline;
}
.bench-bar-self .bench-bar-label {
  color: var(--accent);
}
.bench-bar-track {
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  height: 26px;
}
.bench-bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 2%;
  padding-right: var(--s-3);
  font-size: 0.8rem;
  font-weight: 800;
  color: #0b1220;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--violet), var(--accent));
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bench-bar-self .bench-bar-fill {
  background: linear-gradient(90deg, #34d399, #6ea8fe);
}
.bench-footnote {
  margin: var(--s-3) 0 0;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* Commerce slots ----------------------------------------------------------
   A DORMANT inline-commerce layer (see web/commerce.js). These classes reserve
   space and styling for sales; no sales data ships today. */

/* OfferSlot: the reserved buy zone. Collapses when empty (dormant) so no empty
   boxes appear; the page layout keeps the surrounding region. */
.offer-slot {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--surface-merch);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
}
.offer-slot:empty {
  display: none;
}
/* Compact variant for inline/table placements: no box chrome. */
.offer-slot[data-offer-context="table"],
.offer-slot.offer-slot-compact {
  display: inline-flex;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
/* An empty compact slot must still collapse (the inline-flex override above
   would otherwise win over .offer-slot:empty at equal specificity). */
.offer-slot[data-offer-context="table"]:empty,
.offer-slot.offer-slot-compact:empty {
  display: none;
}
.offer-slot-compact {
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Stock pill: a colored dot plus a TEXT label (never color alone, for a11y). */
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-faint);
}
.stock-in {
  color: #76d35b;
}
.stock-in .stock-dot {
  background: #76d35b;
  box-shadow: 0 0 0 3px rgba(118, 211, 91, 0.18);
}
.stock-low {
  color: #f0b35b;
}
.stock-low .stock-dot {
  background: #f0b35b;
  box-shadow: 0 0 0 3px rgba(240, 179, 91, 0.18);
}
.stock-out {
  color: var(--text-faint);
}

/* Retail "from $X" price. */
.offer-price {
  font-weight: 800;
  color: var(--text);
}
.offer-price-from {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 3px;
}
.offer-price-value {
  font-size: 1.12rem;
}
.offer-price-compact .offer-price-value {
  font-size: 0.95rem;
}
.offer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.offer-provider {
  font-size: 0.72rem;
  color: var(--text-faint);
}

/* TrustBar + chips: pair an accent with a text label (never color alone). */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px var(--s-3);
}
.trust-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--trust);
}
/* .trust-chip-label intentionally has no rule - it inherits type/color from
   .trust-chip; the class is a stable hook for future per-signal styling. */

/* DealBadge: defined but dormant until offer data exists. */
.deal-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--deal-contrast);
  background: var(--deal);
  border-radius: var(--radius-pill);
  padding: 2px var(--s-2);
}

/* ProductMediaFrame: one consistent product-image treatment. */
.media-frame {
  display: flex;
  flex-direction: column;
  background: var(--surface-merch);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
  padding: var(--s-3);
}
.media-frame-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}
.media-frame-art {
  align-items: center;
  justify-content: center;
}
.media-frame-credit {
  margin-top: var(--s-2);
  font-size: 0.72rem;
  color: var(--text-faint);
  text-decoration: none;
  text-align: right;
}
/* Only the linked credit (an <a>) gets interactive hover affordance; the plain
   <span> fallback used when there is no source URL stays non-interactive. */
a.media-frame-credit:hover {
  color: var(--text-muted);
  text-decoration: underline;
}

/* Reserved offer region inside knowledge guides (layout prep; empty today). */
.guide-offer {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--surface-merch);
  border: 1px solid var(--border-strong-solid);
  border-radius: var(--radius-sm);
}
.guide-offer:empty {
  display: none;
}

/* Inline machine ("system") cards - woven into model/GPU/board pages. Use the
   raised merchandising surface so they read as buyable without a storefront. */
.system-card {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface-merch); border: 1px solid var(--surface-merch-2);
  border-radius: 10px; padding: 12px; margin: 8px 0;
}
.system-card-img { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; background: #fff; }
.system-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.system-card-title { font-weight: 600; }
.system-card-meta { color: var(--text-muted); font-size: 0.85rem; }
.system-card-runs { color: var(--comfortable); font-size: 0.85rem; }
.system-card-price { font-weight: 700; margin-top: 4px; }
.system-rfq { background: var(--surface-3); }

/* Unpronounced cart: the indicator only renders when non-empty (cart.js), so
   this is empty space until then. Quiet, not a storefront banner. */
.cart-slot { margin-left: auto; }
.cart-indicator {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-merch); color: var(--text); font-size: 0.85rem;
  text-decoration: none; border: 1px solid var(--surface-merch-2);
}
.cta-build, .cta-check { cursor: pointer; }
.cart-layout { max-width: 760px; }
.cart-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--surface-3); }
.cart-title { flex: 1; }
.cart-qty { width: 56px; }
.cart-price { font-weight: 600; }
.cart-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; text-decoration: underline; }
.cart-subtotal { font-weight: 700; margin: 16px 0; text-align: right; }
.cart-checkout-form { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin-left: auto; }
.cart-checkout { cursor: pointer; }
.cart-status { min-height: 1.2em; color: var(--text-muted); }

/* ----- Datacenter "How to buy" (buyguide) ---------------------------------- */
.buy-guide-how { color: var(--text-muted); margin: 0 0 var(--s-3); }
.buy-guide-price {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-merch); border: 1px solid var(--surface-merch-2);
  border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
}
.buy-guide-price-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint);
}
.buy-guide-price-row { font-weight: 600; }
.buy-guide-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3);
}
.buy-action {
  display: flex; flex-direction: column; gap: var(--s-1);
  background: var(--surface-merch); border: 1px solid var(--surface-merch-2);
  border-radius: var(--radius-sm); padding: var(--s-4);
}
.buy-action-title { margin: 0; font-size: 0.95rem; font-weight: 800; }
.buy-action-sub { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
/* The quote path is the primary, first-party action: brighter surface + accent edge. */
.rfq-cta {
  background: var(--surface-merch-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--surface-merch-2));
}
.rfq-cta .buy-amazon { margin-top: var(--s-1); }
.cloud-partner-row, .integrator-list {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1);
}
.cloud-partner, .integrator-link {
  display: inline-flex; align-items: center; text-decoration: none;
  font-size: 0.82rem; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong-solid);
}
.cloud-partner:hover, .integrator-link:hover { border-color: var(--accent); }
.cloud-partner:focus-visible, .integrator-link:focus-visible { outline: none; box-shadow: var(--ring); }
.cloud-partner--featured { border-color: var(--accent); }
.cloud-badge {
  margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-contrast);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
}
.buy-guide-disclaimer { margin-top: var(--s-3); font-size: 0.8rem; }

/* ----- Appliance info cards (informational, no cart) ----------------------- */
.appliance-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface-merch); border: 1px solid var(--surface-merch-2);
  border-radius: 10px; padding: 12px; margin: 8px 0;
}
.appliance-card-buy { margin-top: var(--s-2); }
.appliance-runs-link {
  display: inline-block; margin: 2px 0 4px; font-size: 0.82rem;
  color: var(--accent); text-decoration: none; font-weight: 600;
}
.appliance-runs-link:hover { text-decoration: underline; }
.machines-table td a { color: var(--accent); text-decoration: none; }
.machines-table td a:hover { text-decoration: underline; }
.appliance-vendor-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.appliance-vendor-link {
  text-decoration: none; font-size: 0.8rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong-solid);
}
.appliance-vendor-link:hover { color: var(--text); border-color: var(--accent); }

/* ----- /machines.html buying-reference table ------------------------------- */
.machines-table-wrap { overflow-x: auto; margin: var(--s-4) 0; }
.machines-table { width: 100%; }
.machines-table a { color: var(--accent); text-decoration: none; }
.machines-table a:hover { text-decoration: underline; }