@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/space-grotesk-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/space-grotesk-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg: #F8F5F0;
  --surface: #FFFFFF;
  --surface-2: #F3F7FB;
  --surface-hover: #F3F7FB;
  --border: #E0D6CA;
  --border-hover: #1E6E8E;
  --text: #0D1725;
  --text-dim: #486680;
  --accent: #1E6E8E;
  --accent-hover: #28728E;
  --accent-faint: rgba(30,110,142,0.09);
  /* Text/icon color on an --accent fill (selected chips, active mode buttons). */
  --on-accent: #F8F5F0;
  /* Accent used as *text* or a control border (same hue, contrast-safe per theme). */
  --accent-text: #1E6E8E;
  /* Foregrounds tuned for WCAG AA on white and on their own 20% tint. */
  --green: #1f6b45;
  --yellow: #7d5800;
  --blue: #315a7a;
  /* Same hue as the error text used by .tw-spark below. */
  --red: #b04432;
  --radius: 14px;
  --radius-sm: 8px;
  /* Chart categorical slots (validated: dataviz validate_palette, light on #FFF). */
  --xo-1: #2a78d6; --xo-2: #eb6834; --xo-3: #1baf7a; --xo-4: #eda100; --xo-5: #e87ba4; --xo-6: #008300;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1612;
  --surface: #242020;
  --surface-2: #2a2522;
  --surface-hover: #2a2522;
  --border: #3a3530;
  --border-hover: #1E6E8E;
  --text: #e4e0d8;
  --text-dim: #9a9088;
  --accent: #1E6E8E;
  --accent-hover: #28728E;
  --accent-faint: rgba(30,110,142,0.15);
  /* White on the accent fill clears AA in dark mode; --bg is too dark here. */
  --on-accent: #FFFFFF;
  /* Lighter accent for text/borders on dark surfaces (AA vs #242020/#1a1612). */
  --accent-text: #4AA6CB;
  /* Lighter green so status text clears AA on the dark surface and its tint. */
  --green: #63bd86;
  --yellow: #D4A843;
  --blue: #82aed2;
  --red: #e08070;
  --radius: 14px;
  --radius-sm: 8px;
  /* Same hues stepped for the dark surface (validated on #242020). */
  --xo-1: #3987e5; --xo-2: #d95926; --xo-3: #199e70; --xo-4: #c98500; --xo-5: #d55181; --xo-6: #008300;
}


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

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Focus & keyboard a11y ──────────────────────────────────────────── */
/* Suppress the ring for mouse focus, show a clear one for keyboard focus. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 2px;
}
th.sortable:focus-visible { outline-offset: -2px; }

/* Keep numeric columns aligned regardless of digit widths. */
.num, .cost { font-variant-numeric: tabular-nums; }

/* Roomier compare checkboxes for easier targeting. */
.compare-check { width: 18px; height: 18px; }

th, .num, .cost, button, select, label, .org-badge, .mode-btn, h1, h2, .provider-badge, .section-label, .preset-label, .group-control label, .control-group label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

header {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1rem;
}

/* Actions cluster: brand-adjacent links + theme toggle + (optionally) the
   advisor launcher. Kept as one wrapping row so narrow screens show compact
   chips side by side instead of a vertical stack of centered links. */
.header-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

header h1 { font-size: 1.8rem; font-weight: 700; }
.site-brand {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
}
.tagline { font-size: 1.15rem; font-weight: 600; margin-top: 0.9rem; }
.subtitle { color: var(--text-dim); margin-top: 0.3rem; font-size: 0.95rem; }

/* ── Tab navigation ─────────────────────────────────────────────────── */
.tab-nav {
  /* One row that scrolls horizontally when it can't fit; the auto margins on
     the first/last tab centre it when it does fit without trapping overflow. */
  display: flex;
  gap: 0.25rem;
  margin-top: 1rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 2rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 2px;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav > .tab-link:first-child { margin-left: auto; }
.tab-nav > .tab-link:last-child { margin-right: auto; }
/* Fade edges, set by shared-ui.js only when more tabs are hidden that way. */
.tab-nav[data-fade="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.tab-nav[data-fade="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
}
.tab-nav[data-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}
.tab-link {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.4rem 1.2rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.tab-link:hover {
  color: var(--text);
  background: var(--surface-2);
}
.tab-link.active,
.tab-link[aria-current="page"] {
  color: var(--accent-text);
  background: var(--accent-faint);
  border-color: var(--accent-text);
}
.repo-link {
  font-size: 0.85rem;
  color: var(--accent-text);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
.repo-link:hover { border-color: var(--accent-text); text-decoration: underline; }

.theme-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.section-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-text);
  display: block;
  margin-bottom: var(--sm, 8px);
  flex-basis: 100%;
  width: 100%;
}

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

h2 { font-size: 1.1rem; margin-bottom: 0.75rem; }

/* ── Controls ─────────────────────────────────────────── */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.control-group { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 160px; }
.control-group label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

select, input[type="text"], input[type="number"] {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: border-color 0.15s;
}
select:focus, input:focus { border-color: var(--accent-text); }

/* ── Token inputs ──────────────────────────────────────── */
.token-inputs {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.cost-mode-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}

.mode-btn {
  background: var(--surface-2);
  border: none;
  color: var(--text-dim);
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.mode-btn:hover {
  background: var(--surface);
}
.mode-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}

.compute-by-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.compute-by-toggle .toggle-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
}

.compute-by-toggle .compute-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.compute-by-toggle .compute-btn:hover {
  background: var(--surface);
}
.compute-by-toggle .compute-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-text);
}

/* On image/video tabs the compute-by-toggle lives inside .controls (flex-wrap).
   Force its control-group to span a full row so the count/budget inputs below
   align cleanly with the other single-input control-groups (provider/model/variant).
   Without this the toggle's two-button height pushes siblings out of vertical alignment. */
.control-group:has(> .compute-by-toggle) { flex-basis: 100%; min-width: 100%; }
.control-group:has(> .compute-by-toggle) .compute-by-toggle { margin-bottom: 0; }

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.usage-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.usage-summary #tokenBreakdown { font-variant-numeric: tabular-nums; }
.pct-ok { color: var(--green); font-weight: 600; }
.pct-warn { color: var(--yellow); font-weight: 600; }

/* Benchmark bar — dynamic median/mean/range/free strip over current result cohort */
.benchmark-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.75rem;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.benchmark-bar strong { color: var(--text); font-weight: 600; }
.benchmark-bar .bench-sep { opacity: 0.5; }
.hidden { display: none !important; }
.total-field input { font-size: 1.1rem; font-weight: 600; }

.token-field { display: flex; flex-direction: column; gap: 0.2rem; }
.token-field label { font-size: 0.85rem; font-weight: 600; }
.token-field input[type="number"] {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  transition: border-color 0.15s;
}
.token-field input[type="number"]:focus { border-color: var(--accent-text); }
.token-field small { font-size: 0.75rem; color: var(--text-dim); }

.presets { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.25rem 0 0.5rem; }
.preset-label { font-size: 0.8rem; color: var(--text-dim); }
.preset-description { margin: 0 0 1rem; font-size: 0.82rem; color: var(--text-dim); }
.presets button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.presets button:hover { border-color: var(--accent-text); color: var(--accent-text); }

.cache-assumption { margin: 0.75rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-dim); }

/* ── Promo / ZDR filter ─────────────────────────────────── */
.promo-control { flex: 0 0 auto; min-width: auto; }
.promo-toggle { display: flex; align-items: center; gap: 0.4rem; padding-top: 0.55rem; }
.promo-toggle input { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--accent-text); }

.promo-toggle label { font-size: 0.85rem; font-weight: 500; cursor: pointer; text-transform: none; letter-spacing: 0; }

.popular-control { flex: 1 1 100%; min-width: 100%; }
.popular-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.popular-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.popular-chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
.popular-chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent-text); }

/* ── Search help + More filters disclosure ─────────────────────────────── */
.search-help {
  flex-basis: 100%;
  margin: -0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.filters-row {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.more-filters { flex: 0 1 auto; }
/* When open, take the full row so the filter grid can use multiple columns
   instead of collapsing into one tall strip. */
.more-filters[open] { flex: 1 1 100%; }
.more-filters > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  transition: border-color 0.15s, color 0.15s;
}
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::before { content: '▸'; font-size: 0.7rem; color: var(--text-dim); }
.more-filters[open] > summary::before { content: '▾'; }
.more-filters[open] > summary { border-color: var(--accent-text); color: var(--accent-text); }

.more-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem 1rem;
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.active-filters:empty { display: none; }
.active-filters > * {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-faint);
  color: var(--accent-text);
  font-weight: 600;
}
.clear-filters-btn {
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.clear-filters-btn:hover { background: var(--accent); color: #fff; }

/* ── Results ───────────────────────────────────────────── */
.results {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.results-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 0.6rem; }
.last-updated { font-size: 0.78rem; color: var(--text-dim); }
.results-basis,
.ranking-explanation {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.results-basis:empty { display: none; }
.ranking-explanation { margin-bottom: 0.9rem; }
.mobile-sort {
  display: none;
  width: 100%;
  margin-bottom: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: border-color 0.15s;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.mobile-sort:focus { border-color: var(--accent-text); }


.table-wrap { overflow-x: auto; min-height: 400px; max-width: 100%; }

.skeleton-row td { padding: 0.55rem 0.55rem; }
.skeleton-bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton-bar { animation: shimmer 1.4s ease-in-out infinite; }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 0.55rem 0.55rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sort-asc::after { content: ' ▲'; font-size: 0.65rem; color: var(--accent-text); }
th.sort-desc::after { content: ' ▼'; font-size: 0.65rem; color: var(--accent-text); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-2); }
.empty { text-align: center; color: var(--text-dim); padding: 2rem; }

/* ── Error state ────────────────────────────────────────────────────── */
.error-state { padding: 2.5rem 1.5rem; }
.error-state p { margin: 0 0 0.4rem; }
.error-state .error-hint { font-size: 0.85rem; color: var(--text-dim); }
.retry-btn {
  margin-top: 0.9rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.retry-btn:hover { background: var(--accent-hover); }

.show-all-row td { text-align: center; padding: 1rem; }
.show-all-row button {
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--accent-text);
  border-radius: 8px;
  padding: 0.55rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.show-all-row button:hover { background: var(--accent); color: #fff; }
.export-csv-btn {
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-sm, 6px);
  padding: 0.35rem 0.9rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}
.export-csv-btn:hover { background: var(--accent); color: #fff; }

.rank { color: var(--text-dim); font-weight: 600; width: 2rem; }
.provider-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.org-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.cost { font-weight: 700; }
.cost-zero { color: var(--green); }
.missing { color: var(--text-dim); font-style: italic; }
.promo-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--yellow) 20%, transparent); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent); margin-left: 0.3rem; vertical-align: middle; }
.zdr-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); margin-left: 0.3rem; vertical-align: middle; }
.subscription-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--blue) 20%, transparent); color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); margin-left: 0.3rem; vertical-align: middle; }
.lifecycle-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text-dim) 20%, transparent); color: var(--text-dim); border: 1px solid color-mix(in srgb, var(--text-dim) 40%, transparent); margin-left: 0.3rem; vertical-align: middle; }
.lifecycle-badge.lifecycle-deprecated { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.tier-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent-text) 20%, transparent); color: var(--accent-text); border: 1px dashed color-mix(in srgb, var(--accent-text) 50%, transparent); margin-left: 0.3rem; vertical-align: middle; white-space: nowrap; }
.delivery-hint { display: block; font-size: 0.72rem; color: var(--text-dim); margin-top: 0.15rem; cursor: help; }
.perf-pill { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text-dim) 12%, transparent); color: color-mix(in srgb, var(--text) 70%, var(--text-dim)); border: 1px solid color-mix(in srgb, var(--text-dim) 25%, transparent); margin-left: 0.4rem; vertical-align: middle; cursor: help; }

/* Group-by control */
.group-control { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.group-control label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.group-control select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

/* Org toggle */
.org-toggle { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.org-toggle input { width: auto; }

/* Speed column */
.speed-cell { min-width: 5rem; }
.speed-cell .perf-pill { margin-left: 0; }

/* Collapsible Org column — desktop only (mobile always shows Org badge inline) */
@media (min-width: 641px) {
  #resultsTable.hide-org th[data-sort="org"],
  #resultsTable.hide-org td[data-label="Org"] { display: none; }
}

/* Sticky Total Cost column — desktop only (mobile uses card layout, no horizontal scroll) */
@media (min-width: 641px) {
  #resultsTable th:last-child,
  #resultsTable td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: -2px 0 4px color-mix(in srgb, var(--border) 50%, transparent);
  }
  /* Hover state must be opaque to cover scrolled content */
  #resultsTable tbody tr:hover td:last-child {
    background: var(--surface-2);
  }
  /* Group header sticky — spans full width */
  #resultsTable tr.group-header td {
    position: sticky;
    right: 0;
    background: var(--surface-2);
  }
}

/* ── Column customization (drag-reorder + hide) ─────────────────────────── */
/* Drag handle on draggable headers */
.col-handle {
  display: inline-block;
  margin-right: 0.35rem;
  color: var(--text-dim);
  cursor: grab;
  user-select: none;
  touch-action: none; /* let pointer drags reorder instead of scrolling on touch */
  font-size: 0.8rem;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.col-handle:hover { opacity: 1; }
th.sortable:active .col-handle { cursor: grabbing; }

/* Dragging state */
#resultsTable.col-dragging th { cursor: grabbing; }
#resultsTable.col-dragging th.col-dragging {
  opacity: 0.4;
  background: var(--surface-2);
}
#resultsTable th.col-drop-target {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Column-config button + popover */
.col-config { position: relative; margin-left: 0.5rem; }
.col-config-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 0.35rem 0.9rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.col-config-btn:hover { background: var(--surface-2); }
.col-config-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--accent-text); }
.col-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 18%, transparent);
  padding: 0.6rem;
}
.col-popover[hidden] { display: none; }
.col-popover-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.col-popover-list { display: flex; flex-direction: column; gap: 0.15rem; max-height: 60vh; overflow-y: auto; }
.col-popover-list label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  padding: 0.2rem 0.2rem;
  border-radius: var(--radius-sm, 4px);
}
.col-popover-list label:hover { background: var(--surface-2); }
.col-popover-list input { width: auto; }
.col-reset-btn {
  margin-top: 0.5rem;
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.col-reset-btn:hover { background: var(--border); }

/* Generalized column-hide — desktop only (mobile uses card layout) */
@media (min-width: 641px) {
  #resultsTable.hide-col-org th[data-sort="org"],
  #resultsTable.hide-col-org td[data-label="Org"] { display: none; }
  #resultsTable.hide-col-provider th[data-sort="provider"],
  #resultsTable.hide-col-provider td[data-label="Provider"] { display: none; }
  #resultsTable.hide-col-model th[data-sort="model"],
  #resultsTable.hide-col-model td[data-label="Model"] { display: none; }
  #resultsTable.hide-col-input th[data-sort="input"],
  #resultsTable.hide-col-input td[data-label="Input $/M"] { display: none; }
  #resultsTable.hide-col-output th[data-sort="output"],
  #resultsTable.hide-col-output td[data-label="Output $/M"] { display: none; }
  #resultsTable.hide-col-cache_read th[data-sort="cache_read"],
  #resultsTable.hide-col-cache_read td[data-label="Cache $/M"] { display: none; }
  #resultsTable.hide-col-context th[data-sort="context"],
  #resultsTable.hide-col-context td[data-label="Context"] { display: none; }
  #resultsTable.hide-col-quantization th[data-sort="quantization"],
  #resultsTable.hide-col-quantization td[data-label="Quantization"] { display: none; }
  #resultsTable.hide-col-speed th[data-sort="speed"],
  #resultsTable.hide-col-speed td[data-label="Speed"] { display: none; }
  #resultsTable.hide-col-ttft th[data-sort="ttft"],
  #resultsTable.hide-col-ttft td[data-label="TTFT"] { display: none; }
  #resultsTable.hide-col-intelligence th[data-sort="intelligence"],
  #resultsTable.hide-col-intelligence td[data-label="IQ"] { display: none; }
  #resultsTable.hide-col-blended th[data-sort="blended"],
  #resultsTable.hide-col-blended td[data-label="Blended $/M"] { display: none; }
}

/* Mobile card mode: hidden columns must not reappear as card rows */
@media (max-width: 640px) {
  #resultsTable.hide-col-org td[data-label="Org"],
  #resultsTable.hide-col-provider td[data-label="Provider"],
  #resultsTable.hide-col-model td[data-label="Model"],
  #resultsTable.hide-col-input td[data-label="Input $/M"],
  #resultsTable.hide-col-output td[data-label="Output $/M"],
  #resultsTable.hide-col-cache_read td[data-label="Cache $/M"],
  #resultsTable.hide-col-context td[data-label="Context"],
  #resultsTable.hide-col-quantization td[data-label="Quantization"],
  #resultsTable.hide-col-speed td[data-label="Speed"],
  #resultsTable.hide-col-ttft td[data-label="TTFT"],
  #resultsTable.hide-col-intelligence td[data-label="IQ"],
  #resultsTable.hide-col-blended td[data-label="Blended $/M"] { display: none; }
}

/* Hide org toggle on mobile — Org badge always shows inline there */
@media (max-width: 640px) {
  .org-toggle { display: none; }
}

/* Group header rows */
.group-header { background: var(--surface-2); font-weight: 700; cursor: pointer; }
.group-header td { padding: 0.6rem 0.55rem; border-bottom: 2px solid var(--border); }
.group-header .group-count { color: var(--text-dim); font-weight: 400; font-size: 0.8rem; margin-left: 0.5rem; }
.group-header .group-cheapest { color: var(--green); font-size: 0.8rem; margin-left: 0.5rem; }
.group-header.collapsed .collapse-arrow {
  transform: rotate(-90deg);
}
.collapse-arrow { display: inline-block; transition: transform 0.15s; margin-right: 0.3rem; font-size: 0.75rem; }

/* HQ badge */
.hq-badge { display: inline-block; font-size: 0.7rem; margin-left: 0.25rem; vertical-align: middle; }

/* Provider meta links */
.meta-link { font-size: 0.7rem; text-decoration: none; margin-left: 0.2rem; opacity: 0.6; vertical-align: middle; }
.meta-link:hover {
  opacity: 1;
}

/* ── Footer ────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.footer-links a { color: var(--accent-text); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* Comparison tray */
.compare-tray {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  z-index: 100;
}
.compare-tray button {
  padding: 0.4rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
}
.compare-tray button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.compare-tray #compareClear {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Compare checkbox */
.compare-check {
  margin-right: 0.3rem;
  cursor: pointer;
  accent-color: var(--accent-text);
}

/* Comparison modal */
.compare-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-modal-content {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem;
  position: relative;
}
.compare-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.compare-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.compare-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.compare-brand-link:hover { text-decoration: underline; }
.compare-brand-mark { flex-shrink: 0; opacity: 0.9; }
.compare-modal-header h2 {
  font-size: 1.2rem;
  margin: 0;
}
.compare-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.compare-copy-btn,
.compare-share-btn {
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-sm, 6px);
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}
.compare-copy-btn:hover:not(:disabled),
.compare-share-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.compare-copy-btn:disabled,
.compare-share-btn:disabled { opacity: 0.7; cursor: wait; }
.compare-modal-header button#compareClose,
.compare-modal-header .compare-header-actions > button:last-child {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  line-height: 1;
}
.compare-modal-header button#compareClose:hover {
  color: var(--text);
}
.compare-snapshot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
}
.compare-snapshot .snapshot-label {
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
  margin-right: 0.4rem;
}
.compare-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.compare-table th,
.compare-table td {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.3;
  white-space: normal;
}
.compare-table th {
  background: var(--surface);
  text-transform: none;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}
.compare-table th:not(:first-child),
.compare-table td:not(:first-child),
.compare-table .compare-value {
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.compare-table .compare-label {
  width: 168px;
  min-width: 168px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: normal;
}
.comparison-grid {
  min-width: 100%;
}
.compare-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}
.comparison-grid th:first-child,
.comparison-grid td.compare-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.comparison-grid thead th:first-child {
  z-index: 3;
}
.cost-card-table th:first-child,
.cost-card-table td:first-child {
  width: 42%;
}
.cost-card-table th:last-child,
.cost-card-table td:last-child {
  width: 58%;
}
.compare-cheapest {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  font-weight: 600;
}
.compare-scroll-hint {
  display: none;
  margin: -0.2rem 0 0.55rem;
  color: var(--text-dim);
  font-size: 0.76rem;
}
@media (max-width: 640px) {
  .compare-modal-content {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    padding: 0.75rem;
  }
  .compare-scroll-hint {
    display: block;
  }
}

/* ── Detail modal (per-model enrichment) ──────────────────────────────────── */
.detail-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.detail-modal-content {
  background: var(--surface, #fff);
  color: var(--text, #1a1a1a);
  border-radius: var(--radius, 8px);
  max-width: 560px; width: 90vw;
  max-height: 85vh; overflow: auto;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
@media (max-width: 640px) {
  .detail-modal-content { max-width: 90vw; padding: 1rem; }
}
.detail-modal-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem; gap: 1rem;
}
.detail-modal-header h2 {
  margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3;
}
.detail-modal-header button {
  border: none; background: none; cursor: pointer;
  font-size: 1.25rem; color: var(--text-dim, #888); padding: 0;
}
.detail-modal-header button:hover { color: var(--text, #1a1a1a); }

/* ── Benchmarks detail modal (shared .modal-backdrop pattern) ─────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
/* The modals toggle the hidden *attribute*; author display rules beat the UA
   [hidden] rule, so reset it here (same pattern as .col-popover[hidden]). */
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--surface, #fff);
  color: var(--text, #1a1a1a);
  border-radius: var(--radius, 8px);
  max-width: 560px; width: 90vw;
  max-height: 85vh; overflow: auto;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.modal h3 { margin: 0 0 0.5rem; }
.modal-close {
  float: right;
  border: none; background: none; cursor: pointer;
  font-size: 1.25rem; color: var(--text-dim, #888); padding: 0.1rem 0.35rem;
}
.modal-close:hover { color: var(--text, #1a1a1a); }
.detail-sources h4 { margin: 1rem 0 0.25rem; font-size: 0.95rem; }
.detail-sources ul { margin: 0 0 0.25rem; padding-left: 1.25rem; }
.detail-sources li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
@media (max-width: 640px) {
  .modal { max-width: 90vw; padding: 1rem; }
}
.detail-subtitle {
  font-size: 0.85rem; color: var(--text-dim, #888);
  margin: 0.25rem 0 0 0;
}
.detail-section {
  border-top: 1px solid var(--border, #e5e5e5);
  padding-top: 0.75rem; margin-top: 1rem;
}
.detail-section-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim, #888);
  margin-bottom: 0.5rem;
}

/* Quality section in detail modal — tabular label/value rows */
.detail-quality-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  padding: 0.2rem 0;
  font-variant-numeric: tabular-nums;
}
.detail-quality-label {
  color: var(--text-dim, #888);
}
.detail-quality-value {
  color: var(--text, #222);
  font-weight: 500;
}
.detail-quality-source {
  font-size: 0.72rem;
  color: var(--text-dim, #888);
  font-style: italic;
  margin-top: 0.5rem;
}
.detail-field {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.35rem 0;
  font-size: 0.9rem;
}
.detail-field-label { color: var(--text-dim, #888); min-width: 80px; }
.detail-field-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem; text-align: right; word-break: break-all; flex: 1;
}
.detail-field-value a { color: var(--accent, #1E6E8E); text-decoration: none; }
.detail-field-value a:hover { text-decoration: underline; }
.detail-pricing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
  margin-top: 0.5rem;
}
.detail-pricing-cell {
  text-align: center; padding: 0.5rem; background: var(--surface-2, #f5f5f5);
  border-radius: var(--radius-sm, 4px);
}
.detail-pricing-cell-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-dim, #888); margin-bottom: 0.2rem;
}
.detail-pricing-cell-value { font-weight: 600; font-size: 0.95rem; }
.detail-capabilities {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem;
}
.detail-capability {
  font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm, 4px);
  background: var(--surface-2, #f5f5f5); color: var(--text, #1a1a1a);
}
.detail-modalality-line { font-size: 0.85rem; margin-top: 0.5rem; color: var(--text-dim, #888); }
.detail-description { font-size: 0.88rem; line-height: 1.5; margin-top: 0.5rem; }
.detail-provenance { font-size: 0.78rem; color: var(--text-dim, #888); margin-top: 0.5rem; }
.detail-lifecycle .lifecycle-badge { margin-left: 0.1rem; }
.detail-tiers-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim, #888); margin-top: 0.8rem; }
.detail-tiers-wrap { overflow-x: auto; }
.detail-tiers-table { width: 100%; border-collapse: collapse; margin-top: 0.3rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.detail-tiers-table th, .detail-tiers-table td { padding: 0.25rem 0.4rem; text-align: right; border-bottom: 1px solid var(--border, #e5e5e5); }
.detail-tiers-table th:first-child, .detail-tiers-table td:first-child { text-align: left; }
.detail-tiers-table th { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim, #888); font-weight: 600; }
.detail-actions {
  display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.detail-actions button, .detail-actions a {
  font-size: 0.85rem; padding: 0.5rem 1rem; border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border, #e5e5e5); background: var(--surface, #fff);
  color: var(--text, #1a1a1a); cursor: pointer; text-decoration: none;
  display: inline-block;
}
.detail-actions button:hover, .detail-actions a:hover {
  background: var(--surface-2, #f5f5f5);
}
.detail-actions .detail-download-btn,
.detail-actions .detail-share-btn {
  color: var(--accent-text);
  border-color: var(--accent-text);
  font-weight: 600;
}
.detail-actions .detail-download-btn:hover:not(:disabled),
.detail-actions .detail-share-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--on-accent);
}
.detail-actions .detail-download-btn:disabled,
.detail-actions .detail-share-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
/* Accessible status region for cost-card export feedback (success/failure). */
.detail-card-status {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.detail-card-status.ok { color: var(--green); }
.detail-card-status.error { color: var(--yellow); }
/* Offscreen container for single-offering cost-card PNG export.
   Laid out (not display:none) so the shared renderer can measure live column
   widths, but moved off-viewport so it never flashes on screen. */
.cost-card-export {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 560px;
  max-width: none;
  max-height: none;
  overflow: visible;
  pointer-events: none;
}
.detail-no-enrich {
  font-size: 0.85rem; color: var(--text-dim, #888); font-style: italic;
  padding: 0.5rem 0;
}
.detail-no-url {
  font-style: italic; color: var(--text-dim, #888); font-size: 0.78rem;
}
.detail-disclaimer {
  font-size: 0.75rem; color: var(--text-dim, #888); font-style: italic;
  margin-top: 0.6rem; padding: 0.5rem; border-left: 2px solid var(--yellow, #e8a838);
  background: color-mix(in srgb, var(--yellow, #e8a838) 8%, transparent);
  line-height: 1.4;
}
.approx-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.1rem 0.3rem; border-radius: var(--radius-sm, 4px);
  background: color-mix(in srgb, var(--yellow, #e8a838) 20%, transparent);
  color: var(--yellow, #e8a838);
  border: 1px solid color-mix(in srgb, var(--yellow, #e8a838) 40%, transparent);
  margin-left: 0.5rem; vertical-align: middle;
}
.copy-btn {
  border: none; background: none; cursor: pointer; padding: 0 0.25rem;
  font-size: 0.9rem; color: var(--text-dim, #888);
}
.copy-btn:hover { color: var(--text, #1a1a1a); }
tbody tr[data-idx] { cursor: pointer; }
tbody tr[data-idx]:hover { background: var(--surface-2, #f5f5f5); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  header { padding: 1.5rem 1rem 1rem; }
  header h1 { font-size: 1.4rem; }
  .site-brand { font-size: 1.4rem; }
  .tagline { font-size: 1rem; }
  .header-row { flex-direction: column; gap: 0.5rem; }
  .controls { flex-direction: column; }
  .control-group { min-width: 100%; }
  main { padding: 0 0.75rem 2rem; }
  .controls, .token-inputs, .results, .benchmark-bar { padding: 1rem; }
  th, td { padding: 0.4rem 0.4rem; font-size: 0.78rem; }
  th { font-size: 0.68rem; }
  /* Allow text wrapping on mobile to avoid horizontal scroll */
  td { white-space: normal; word-break: break-word; }
  .org-badge, .provider-badge { font-size: 0.72rem; padding: 0.1rem 0.35rem; }
}

@media (max-width: 1100px) {
  .tab-link { padding: 0.4rem 0.8rem; }
}
@media (max-width: 640px) {
  .tab-nav { margin-inline: -1rem; padding-inline: 0.75rem; max-width: none; }
  .tab-link { padding: 0.45rem 0.7rem; }
  .seo-models table { min-width: 700px; }
  .seo-models th, .seo-models td { white-space: nowrap; word-break: normal; }
  .group-control { flex-wrap: wrap; }
  .col-config { margin-left: 0; }
  .usage-grid { grid-template-columns: 1fr 1fr; }
  .total-field { grid-column: 1 / -1; }
  .results h2 { word-wrap: break-word; overflow-wrap: break-word; }
  .mobile-sort { display: block; }

  /* Mobile card layout */
  #resultsTable thead { display: none; }
  #resultsTable, #resultsTable tbody, #resultsTable tr, #resultsTable td { display: block; width: 100%; }
  #resultsTable tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    background: var(--surface);
  }
  #resultsTable td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    border: none;
    text-align: right;
  }
  #resultsTable td::before {
    content: attr(data-label);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-align: left;
    flex: 1;
  }
  /* Model title gets the full card width, left-aligned, with no cramped
     vertical "MODEL" label fighting long names and inline badges. */
  #resultsTable td[data-label="Model"] {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  #resultsTable td[data-label="Model"]::before { display: none; }
  #resultsTable td[data-label="Org"], #resultsTable td[data-label="Provider"] { display: inline-block; width: auto; padding: 2px 6px; }
  #resultsTable td[data-label="Unit"], #resultsTable td[data-label="Resolution"], #resultsTable td[data-label="Audio"] { display: inline-block; width: auto; padding: 2px 6px; font-size: 0.78rem; }
  #resultsTable td[data-label="Quantization"] { font-variant-numeric: tabular-nums; }
  #resultsTable td[data-label="#"] { display: flex; align-items: center; padding: 4px 8px; }
  #resultsTable td[data-label="#"]::before { display: none; }
  #resultsTable td[data-label="$/Unit"], #resultsTable td[data-label="$/Sec"], #resultsTable td[data-label="Total Cost"] { font-size: 1.1rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
  #resultsTable td[data-label="Total Cost"] { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
  #resultsTable tr.group-header { display: block; }
  #resultsTable tr.group-header td { display: block; width: 100%; border-bottom: 2px solid var(--border); }
  #resultsTable tr.group-header td::before { display: none; }

  #compareModal .compare-table { font-size: 0.8rem; }
  #compareModal .compare-modal-content { width: 95%; padding: 16px; }
  #compareModal .compare-table th, #compareModal .compare-table td { padding: 4px 6px; }

  #compareTray { flex-wrap: wrap; gap: 4px; padding: 8px; }
  #compareTray .compare-tray-info { font-size: 0.8rem; }

  /* Touch-sized controls: keep primary taps at least ~40px tall. */
  .header-links .repo-link,
  .header-links .theme-toggle,
  .more-filters > summary,
  .clear-filters-btn,
  .presets button,
  .export-csv-btn,
  .col-config-btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }
  .mobile-sort,
  .group-control select { min-height: 2.5rem; }
  .more-filters-grid { grid-template-columns: 1fr; }
  .filters-row { gap: 0.5rem; }
  .active-filters-bar { margin-left: 0; }
}

/* ── SEO sections (FAQ, server-rendered models, noscript) ─────────────────── */
.seo-faq, .seo-models {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.seo-faq h2, .seo-models h2 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.seo-faq details {
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--surface, #fff);
}
.seo-faq summary {
  cursor: pointer;
  font-weight: 600;
}
.seo-faq p {
  margin: 0.5rem 0 0;
  color: var(--muted, #666);
  line-height: 1.5;
}
.seo-models .table-wrap {
  overflow-x: auto;
  min-height: 0;
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
}
.seo-models table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.seo-models caption {
  padding: 0.6rem 0.75rem;
  color: var(--text);
  font-weight: 600;
  text-align: left;
}
.seo-models th, .seo-models td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #e0dcd4);
}
.seo-models th {
  background: var(--surface, #fff);
  font-weight: 600;
}
.seo-models td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.seo-note {
  color: var(--muted, #666);
  font-size: 0.85rem;
  margin-top: 0.75rem;
}
.directory-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.directory-filter label {
  font-size: 0.9rem;
  font-weight: 600;
}
.directory-filter input {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
}
.directory-filter input:focus-visible {
  outline: 2px solid var(--accent-text, #8a5a00);
  outline-offset: 1px;
}
.directory-count {
  font-size: 0.85rem;
  color: var(--text-dim, #666);
  font-variant-numeric: tabular-nums;
}
.noscript-note {
  max-width: 1200px;
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, #e0dcd4);
  border-radius: 8px;
  background: var(--surface, #fff);
  font-size: 0.9rem;
}

/* ── Generated provider and documentation pages ─────────────────────────── */
.seo-page-main,
.seo-prose,
.seo-links {
  max-width: 1200px;
  margin: 0 auto;
}
.seo-page-main {
  padding: 0 1rem 2rem;
}
.seo-prose,
.seo-links {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.seo-prose {
  line-height: 1.65;
}
.seo-prose h2,
.seo-links h2,
.seo-price-group h3 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  margin: 1.5rem 0 0.65rem;
}
.seo-prose p {
  max-width: 78ch;
}
.seo-prose a,
.seo-links a,
.breadcrumbs a,
.brand-link {
  color: var(--accent-text);
}
.brand-link {
  text-decoration: none;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.seo-links {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.seo-price-group {
  margin-top: 1.5rem;
}
.seo-prose .table-wrap {
  overflow-x: auto;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.seo-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.seo-prose th,
.seo-prose td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.seo-prose th {
  background: var(--surface);
}
.seo-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  line-height: 1.5;
}
.seo-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}
@media (max-width: 640px) {
  .seo-page-main {
    padding: 0 0.75rem 1.5rem;
  }
  .seo-models,
  .seo-faq {
    padding: 0;
  }
}

/* ── Canonical-model summary (text calculator) ───────────────────────────── */
.model-summary {
  margin: 0.5rem 0 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.model-summary-title {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  line-height: 1.3;
}
.model-summary-sub {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.model-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.model-summary-metric {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.model-summary-metric-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.model-summary-metric-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
}
.model-summary-bars {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}
/* On-demand price distribution inside the compact summary. Uses a native
   <details> so collapsed content is never built until the user opens it. */
.model-summary details {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.model-summary details > summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
}
.model-summary details > summary::-webkit-details-marker { display: none; }
.model-summary details > summary::before { content: '▸ '; font-size: 0.7rem; }
.model-summary details[open] > summary::before { content: '▾ '; }
.model-summary-distribution { margin-top: 0.6rem; }
.model-summary-bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.model-summary-bar-label { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.model-summary-bar-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.model-summary-bar-label > .promo-badge, .model-summary-bar-label > .lifecycle-badge, .model-summary-bar-label > .tier-badge { flex: none; }
.model-summary-bar-track {
  display: block;
  position: relative;
  height: 1rem;
}
/* Dot plot: faint baseline, dotted stem to the value, dot at the value,
   shared dashed median line (custom property set on .dist-rows). */
.model-summary-bar-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.dist-rows .model-summary-bar-track::after {
  content: '';
  position: absolute;
  left: var(--dist-median, -10px);
  top: -0.2rem; bottom: -0.2rem;
  border-left: 1px dashed var(--text-dim);
  opacity: 0.7;
}
.dist-stem {
  position: absolute;
  left: 0; top: 50%;
  border-top: 2px dotted var(--text-dim);
  transform: translateY(-1px);
}
.dist-dot {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 2px var(--surface);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.model-summary-bar-row.is-best .dist-dot { width: 12px; height: 12px; background: var(--accent-text); }
.model-summary-bar-row.is-best .dist-stem { border-top-style: solid; border-top-color: var(--accent-text); }
.model-summary-bar-row.is-best .model-summary-bar-value { color: var(--accent-text); font-weight: 600; }
.dist-rows { display: flex; flex-direction: column; gap: 0.3rem; padding-right: 6px; }
.dist-head { font-size: 0.82rem; color: var(--text-dim); margin: 0.2rem 0 0.5rem; font-variant-numeric: tabular-nums; }
.model-summary-bar-row[data-tip] { cursor: default; }
.model-summary-bar-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}
.model-summary-note {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  .model-summary { padding: 0.75rem; }
  .model-summary-bar-row { grid-template-columns: minmax(5rem, 8rem) 1fr auto; font-size: 0.76rem; }
}

/* Compact results viewport (e.g. 902×932): keep the summary, table controls
   and the first data rows together when the results area scrolls into view. */
@media (min-width: 641px) and (max-width: 1100px) {
  .results { padding: 1rem; }
  .results-header { margin-bottom: 0.4rem; }
  .results-basis,
  .ranking-explanation { margin-bottom: 0.5rem; }
  .model-summary { margin: 0.4rem 0 0.6rem; padding: 0.7rem 0.85rem; }
  .model-summary-metrics { margin-bottom: 0.5rem; }
  .group-control { margin-bottom: 0.6rem; }
  .mobile-sort { margin-bottom: 0.6rem; }
}

/* Benchmarks detail modal: bound the viewport and keep focus obvious. */
.modal-backdrop { padding: 1rem; }
.modal { max-height: min(85vh, 720px); }
.modal :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 640px) {
  .modal { max-height: 90vh; }
}

/* ── Price-history sparkline (public/price-sparkline.js) ──────────────────────
   Dependency-free SVG chart. Every state the component can report has a
   distinct visual treatment so a sparse or flat history is never mistaken for
   a broken chart or for real $0 pricing. */
.tw-spark {
  --tw-spark-line: var(--accent);
  --tw-spark-dot: var(--accent);
  --tw-spark-switch: var(--yellow);
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
  color: var(--text-dim);
}
.tw-spark-svg {
  display: block;
  width: 100%;
  height: 120px;
  overflow: visible;
}
.tw-spark-caption {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tw-spark-message {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.tw-spark-detail {
  font-size: 0.75rem;
}
/* Distinct accents per state: loading is neutral, empty is informational,
   error is explicitly alarming. */
.tw-spark[data-state="loading"] .tw-spark-message { border-style: solid; }
.tw-spark[data-state="empty"] .tw-spark-message {
  border-color: var(--accent-text);
  background: var(--accent-faint);
}
.tw-spark[data-state="error"] .tw-spark-message {
  border-color: #b04432;
  border-style: solid;
  color: #b04432;
}
[data-theme="dark"] .tw-spark[data-state="error"] .tw-spark-message { color: #e08070; border-color: #e08070; }

/* A flat series is real data, not a failure — keep it visually normal but let
   the caption carry the "flat at $X" explanation. */
.tw-spark[data-flat="true"] .tw-spark-svg { opacity: 0.95; }
.tw-spark[data-switches]:not([data-switches="0"]) .tw-spark-caption { color: var(--yellow); }

.price-history {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.price-history h2,
.price-history h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}
.price-history .price-history-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

@media (max-width: 640px) {
  .price-history { padding: 0.75rem; }
  /* The SVG viewBox is fixed at 640x120 and is scaled down to the container, so
     its text shrinks with it. Give the chart text a larger viewBox size on
     mobile so the rendered label stays legible at ~390px. */
  .tw-spark-svg { height: 100px; }
  .tw-spark-message { min-height: 100px; }
  .tw-spark-svg text { font-size: 17px; }
  .tw-spark-caption { font-size: 0.78rem; line-height: 1.4; }
}

/* ── Homepage hero (build-time, scripts/hero.mjs) ─────────────────────── */
/* Use-case finder strip under the homepage nav (scripts/hero.mjs, tw-finder marker) */
.tw-finder {
  background: var(--accent-faint);
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 1rem;
}
.tw-finder-form {
  max-width: calc(1600px - 3rem);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.85rem;
}
.tw-finder-label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.tw-finder-controls { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.tw-finder select {
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tw-finder select:focus-visible,
.tw-finder-go:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.tw-finder-go {
  min-height: 2.25rem;
  padding: 0.35rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tw-finder-go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
@media (max-width: 640px) {
  .tw-finder-form { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .tw-finder-label { text-align: center; }
  .tw-finder-controls { width: 100%; }
  .tw-finder select { flex: 1 1 auto; min-height: 2.5rem; }
  .tw-finder-go { min-height: 2.5rem; }
}
.tw-hero {
  max-width: calc(1600px - 3rem);
  margin: 1.25rem auto;
  padding: 1.1rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 1rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (max-width: 1647px) { .tw-hero { margin-inline: 1.5rem; } }
.tw-hero-pitch {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tw-hero-sub { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.5rem; }
.tw-hero-sub a { color: var(--accent-text); }
.tw-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.tw-hero-cta {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tw-hero-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.tw-hero-cta-ghost { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.tw-hero-cta-ghost:hover { background: var(--accent-faint); color: var(--accent-text); }
.tw-hero-scene { width: 100%; height: auto; max-height: 220px; overflow: visible; }
.tw-hero-trunk, .tw-hero-lane { fill: none; stroke: var(--border); stroke-width: 2; }
.tw-hero-lane.tw-hero-win { stroke: var(--accent-text); }
.tw-hero-prompt { fill: var(--accent-faint); stroke: var(--accent-text); stroke-width: 2; }
.tw-hero-prompt-label, .tw-hero-prov { fill: var(--text-dim); font: 600 10.5px 'Space Grotesk', system-ui, sans-serif; }
.tw-hero-prompt-label { text-anchor: middle; }
.tw-hero-rate { fill: var(--text); font: 600 12px 'Space Grotesk', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.tw-hero-prov.tw-hero-win, .tw-hero-rate.tw-hero-win { fill: var(--accent-text); }
.tw-hero-track { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.tw-hero-meter { fill: var(--text-dim); opacity: 0.55; transform-box: fill-box; transform-origin: left center; }
.tw-hero-meter.tw-hero-win { fill: var(--accent-text); opacity: 1; }
.tw-hero-dot { fill: var(--text-dim); opacity: 0; }
.tw-hero-dot.tw-hero-win { fill: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .tw-hero-dot { animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .tw-hero-meter { animation: tw-hero-fill 8s cubic-bezier(.2,.7,.2,1) infinite; }
  .tw-hero.is-idle .tw-hero-dot, .tw-hero.is-idle .tw-hero-meter { animation-play-state: paused; }
}
@keyframes tw-hero-fill {
  0% { transform: scaleX(0); }
  12%, 88% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tw-hero-dot { display: none; }
}
@media (max-width: 860px) {
  .tw-hero { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .tw-hero { margin-inline: 0.75rem; }
}
@media (max-width: 640px) {
  .tw-hero { padding: 0.9rem 1rem; }
  .tw-hero-scene { display: none; }
  .tw-hero-pitch { font-size: 1.2rem; }
}

/* ── Re-rank flash (app.js animateRankChanges) ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  #resultsBody tr.rank-flash > td { animation: tw-rank-flash 1.1s ease-out; }
}
@keyframes tw-rank-flash {
  0%, 25% { background-color: var(--accent-faint); }
  100% { background-color: transparent; }
}

/* ── Crossover chart (model summary) ─────────────────────────────────── */
.model-summary-crossover { margin-top: 0.6rem; }
.model-summary-crossover > summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--accent-text); }
.xo-wrap { overflow-x: auto; margin-top: 0.4rem; }
.xo-chart { width: 100%; min-width: 640px; height: auto; display: block; }
.xo-grid { stroke: var(--border); stroke-width: 1; }
.xo-axis { fill: var(--text-dim); font: 11px 'Space Grotesk', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.xo-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.xo-line-lead { stroke-width: 3; opacity: 1; }
.xo-now { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; }
.xo-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.4rem; font-size: 0.82rem; }
.xo-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.xo-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.xo-legend-now { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ── Filter insights: "why is it missing?" + close matches ───────────── */
.filter-explain {
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--yellow);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
}
.filter-explain-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.filter-off-btn {
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--accent-text);
  background: transparent;
  color: var(--accent-text);
  cursor: pointer;
}
.filter-off-btn:hover { background: var(--accent-faint); }
.close-matches { margin-top: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.close-matches-title { font-size: 0.95rem; margin-bottom: 0.5rem; }
.close-matches-sub { font-weight: 400; color: var(--text-dim); font-size: 0.85rem; }
.close-matches-list { list-style: none; display: grid; gap: 0.35rem; }
.close-match { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; font-size: 0.86rem; }
.close-match-name { font-weight: 600; }
.close-match-provider { color: var(--text-dim); }
.close-match-rate { margin-left: auto; font-family: 'Space Grotesk', system-ui, sans-serif; }
.close-match-miss { color: var(--text-dim); font-size: 0.8rem; }
.agent-prompt-status { font-size: 0.8rem; color: var(--green); }

/* ── Tooltips (shared-ui.js initTooltips) ────────────────────────────── */
.tw-tip {
  position: absolute;
  z-index: 1000;
  max-width: 300px;
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  color: var(--surface);
  background: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none;
}
[data-tip]:not(th) { cursor: help; }

/* ── Rules we don't bend (homepage strip + methodology) ──────────────── */
.tw-rules { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tw-rules h2 { font-size: 1.05rem; }
.tw-rules-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem 1.25rem; padding: 0; }
.tw-rules-list li { font-size: 0.86rem; color: var(--text-dim); padding-left: 0.75rem; border-left: 2px solid var(--accent-text); }
.tw-rules-list li strong { color: var(--text); font-family: 'Space Grotesk', system-ui, sans-serif; }
.tw-rules-more { margin-top: 0.7rem; font-size: 0.85rem; }
.tw-rules-more a { color: var(--accent-text); }
.seo-prose .tw-rules-list { margin: 0.5rem 0 1.25rem; }
.filter-explain[hidden], .close-matches[hidden] { display: none; }

.xo-wrap { position: relative; }
.xo-cross { stroke: var(--text-dim); stroke-width: 1; }
.xo-hover-dot { stroke: var(--surface); stroke-width: 2; }
.xo-hit { fill: transparent; cursor: crosshair; }
.xo-tip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 0.4rem 0.6rem; border-radius: var(--radius-sm);
  background: var(--text); color: var(--surface);
  font-size: 0.78rem; line-height: 1.45; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.xo-tip .xo-swatch { margin-right: 0.35rem; vertical-align: middle; }
.tip-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-left: 0.2rem;
  font-size: 0.75rem; line-height: 1; border-radius: 50%;
  color: var(--accent-text); cursor: help; user-select: none;
  vertical-align: middle;
}
.tip-i:hover, .tip-i:focus-visible { background: var(--accent-faint); }
/* Fixed value column so every track (and the median line) shares one x-scale. */
.dist-rows .model-summary-bar-row { grid-template-columns: minmax(7rem, 12rem) 1fr 5.5rem; }
.dist-rows .model-summary-bar-value { text-align: right; }
@media (max-width: 640px) {
  .dist-rows .model-summary-bar-row { grid-template-columns: minmax(5rem, 8rem) 1fr 4.5rem; }
}
.tw-hero-promo { fill: var(--yellow); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.model-summary-history .price-history-inline { margin: 0.6rem 0 0; padding: 0.75rem; }
/* The sparkline stretches its fixed viewBox; cap the width so points stay round. */
.price-history-inline .tw-spark-svg, .price-history-inline .tw-spark-message { max-width: 760px; }

/* ── Workload recommender ───────────────────────────────────────────── */
.choose-main { max-width: 1320px; padding-top: 1.5rem; }
.choose-main .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.choose-intro { max-width: 780px; margin: 0 0 1.5rem; }
.choose-eyebrow {
  color: var(--accent-text); font: 600 0.7rem 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem;
}
.choose-eyebrow span { color: var(--text-dim); padding: 0 0.25rem; }
.choose-intro h2, .choose-section-heading h2, .choose-list-section h2, .choose-actions h2 {
  margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.2;
}
.choose-intro > p:last-child { color: var(--text-dim); margin-top: 0.6rem; max-width: 68ch; }
.choose-workloads { margin: 1rem 0 1.25rem; }
.choose-use-cases {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem;
  border: 0; min-width: 0;
}
.choose-use-case {
  position: relative; display: flex; align-items: flex-start; gap: 0.7rem;
  min-height: 82px; padding: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.choose-use-case:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.choose-use-case:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.choose-use-case:has(input:checked) { border-color: var(--accent-text); background: var(--accent-faint); }
.choose-use-case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choose-radio-mark {
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: 0.1rem;
  border: 1.5px solid var(--text-dim); border-radius: 50%; display: grid; place-items: center;
}
.choose-use-case input:checked + .choose-radio-mark { border-color: var(--accent-text); }
.choose-use-case input:checked + .choose-radio-mark::after {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-text);
}
.choose-use-case-copy { display: grid; gap: 0.22rem; }
.choose-use-case-copy strong { font: 600 0.95rem 'Space Grotesk', system-ui, sans-serif; }
.choose-use-case-copy small, .choose-check small { color: var(--text-dim); font-size: 0.78rem; line-height: 1.4; }
.choose-constraints {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  margin: 0 0 1rem; padding: 0.8rem 1rem;
}
.choose-constraints > summary { cursor: pointer; font: 600 0.95rem 'Space Grotesk', system-ui, sans-serif; }
.choose-constraints > summary span { margin-left: 0.5rem; color: var(--text-dim); font: 400 0.82rem Inter, system-ui, sans-serif; }
.choose-constraint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; padding: 1rem 0 0.2rem; }
.choose-check { display: flex; align-items: flex-start; gap: 0.65rem; font: inherit; cursor: pointer; }
.choose-check > input { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.2rem; accent-color: var(--accent); }
.choose-check > span { display: grid; gap: 0.2rem; }
.choose-hq-fieldset, .choose-priority-fieldset { min-width: 0; border: 0; }
.choose-hq-fieldset legend, .choose-priority-fieldset legend { font: 600 0.88rem 'Space Grotesk', system-ui, sans-serif; margin-bottom: 0.25rem; }
.choose-field-note, .choose-muted { color: var(--text-dim); font-size: 0.76rem; }
.choose-hq-options { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.choose-country { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.45rem; border: 1px solid var(--border); border-radius: 5px; font-size: 0.77rem; cursor: pointer; }
.choose-country input, .choose-priority-options input { accent-color: var(--accent); }
.choose-country span { color: var(--text-dim); font: 0.7rem 'Space Grotesk', system-ui, sans-serif; }
.choose-priority-options { display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem; }
.choose-priority-options label { display: flex; align-items: center; gap: 0.35rem; font: 400 0.82rem Inter, system-ui, sans-serif; cursor: pointer; }
.choose-data-note { margin: 0.5rem 0 0; color: var(--text-dim); font-size: 0.78rem; line-height: 1.5; }
.choose-data-note strong { color: var(--text); font-weight: 600; }
.choose-status { margin: 0.7rem 0; color: var(--text-dim); font-size: 0.82rem; }
.choose-status:empty { display: none; }
.choose-evidence-note {
  margin: 0.5rem 0 1rem; padding: 0.75rem 0.9rem; border-left: 3px solid var(--yellow);
  background: color-mix(in srgb, var(--yellow) 9%, var(--surface)); font-size: 0.85rem;
}
.choose-evidence-note[hidden], .choose-close-note[hidden], .choose-unverified[hidden] { display: none; }
.choose-preference-feature {
  display: grid; gap: 0.45rem; margin: 0 0 0.8rem; padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent-text) 45%, var(--border));
  border-radius: var(--radius-sm); background: var(--accent-faint);
}
.choose-preference-feature[hidden] { display: none; }
.choose-preference-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.choose-preference-summary p { margin: 0; font-size: 0.9rem; }
.choose-preference-summary p strong { color: var(--accent-text); }
.choose-preference-summary p span { color: var(--text-dim); font-size: 0.82rem; }
.choose-preference-provider {
  flex: 0 0 auto; min-height: 2.2rem; padding: 0.4rem 0.65rem;
  border: 1px solid var(--accent-text); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--accent-text); font: 600 0.75rem 'Space Grotesk', system-ui, sans-serif;
  cursor: pointer;
}
.choose-preference-provider:hover { background: var(--surface-2); }
.choose-preference-attribution { margin: 0; color: var(--text-dim); font-size: 0.7rem; line-height: 1.45; }
.choose-preference-attribution a { color: var(--accent-text); }
.choose-results, .choose-providers-section { margin-top: 2rem; }
.choose-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 0.8rem; }
.choose-mix-disclaimer { max-width: 48ch; color: var(--text-dim); font-size: 0.78rem; }
.choose-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0.8rem; }
.choose-model-card {
  display: flex; flex-direction: column; min-width: 0; padding: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.choose-model-card.is-selected { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.choose-model-card-empty { color: var(--text-dim); }
.choose-card-topline, .choose-provider-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.7rem; }
.choose-pick-label { color: var(--accent-text); font: 600 0.72rem 'Space Grotesk', system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; }
.choose-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.choose-badge {
  display: inline-flex; align-items: center; width: fit-content; padding: 0.16rem 0.42rem;
  border: 1px solid var(--border); border-radius: 999px; font: 600 0.65rem 'Space Grotesk', system-ui, sans-serif;
  line-height: 1.3; color: var(--text-dim); background: var(--surface-2);
}
.choose-badge-close { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, var(--border)); }
.choose-badge-partial { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.choose-badge-batch { color: var(--accent-text); }
.choose-badge-subscription { color: var(--yellow); }
.choose-badge-role { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent-text) 45%, var(--border)); background: var(--accent-faint); }
.choose-model-card h3, .choose-provider-card h3 { margin: 0.65rem 0 0.1rem; font: 600 1.2rem 'Space Grotesk', system-ui, sans-serif; line-height: 1.25; overflow-wrap: anywhere; }
.choose-model-id, .choose-provider-title p { color: var(--text-dim); font: 0.72rem ui-monospace, monospace; overflow-wrap: anywhere; }
.choose-card-provider { margin: 0.55rem 0; font-size: 0.82rem; }
.choose-score-block { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.choose-score-block strong { font: 600 1.45rem 'Space Grotesk', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.choose-score-block span, .choose-primary-score span { color: var(--text-dim); font-size: 0.72rem; }
.choose-primary-score { margin-top: 0.55rem; font-size: 0.8rem; }
.choose-card-price { display: grid; gap: 0.1rem; margin: 0.7rem 0; }
.choose-card-price strong { font: 600 1.2rem 'Space Grotesk', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.choose-card-price span { color: var(--text-dim); font-size: 0.72rem; }
.choose-assumed-line, .choose-license-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; font-size: 0.76rem; }
.choose-assumed { display: inline-block; padding: 0.12rem 0.38rem; border-radius: 4px; background: var(--accent-faint); color: var(--accent-text); font: 600 0.65rem 'Space Grotesk', system-ui, sans-serif; }
.choose-license-line { justify-content: space-between; color: var(--text-dim); }
.choose-workload-link { margin: 0.35rem 0 0.8rem; color: var(--accent-text); font-size: 0.78rem; text-decoration: none; }
.choose-workload-link:hover { text-decoration: underline; }
.choose-select-model, .choose-provider-select {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem;
  background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 0.78rem;
}
.choose-select-model:hover, .choose-provider-select:hover { border-color: var(--accent-text); }
.choose-why { margin-top: 0.7rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.choose-why > summary, .choose-list-more > summary { cursor: pointer; color: var(--accent-text); font: 600 0.78rem 'Space Grotesk', system-ui, sans-serif; }
.choose-explanation { margin-top: 0.65rem; color: var(--text-dim); font-size: 0.75rem; }
.choose-explanation h4, .choose-provider-notes h4 { margin: 0.65rem 0 0.25rem; color: var(--text); font: 600 0.74rem 'Space Grotesk', system-ui, sans-serif; }
.choose-explanation ul, .choose-provider-notes ul { padding-left: 1rem; }
.choose-explanation li, .choose-provider-notes li { margin: 0.2rem 0; }
.choose-table-wrap { max-width: 100%; overflow-x: auto; }
.choose-explanation table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.choose-explanation th, .choose-explanation td { padding: 0.32rem; text-align: left; border-bottom: 1px solid var(--border); }
.choose-lists-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.choose-list-section { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.choose-list-section > p:not(.choose-eyebrow) { margin: 0.35rem 0 0.75rem; color: var(--text-dim); font-size: 0.78rem; }
.choose-model-list ul { list-style: none; }
.choose-list-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--border); font-size: 0.8rem; }
.choose-list-row > span:first-child { display: grid; min-width: 0; }
.choose-list-row strong { overflow-wrap: anywhere; }
.choose-list-row small { color: var(--text-dim); font: 0.68rem ui-monospace, monospace; overflow-wrap: anywhere; }
.choose-list-meta { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.25rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.choose-empty-list { padding: 0.65rem 0; color: var(--text-dim); font-size: 0.8rem; }
.choose-list-more { margin-top: 0.55rem; }
.choose-close-note { margin: 0.65rem 0; padding: 0.7rem 0.85rem; border-left: 3px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 9%, var(--surface)); font-size: 0.82rem; }
.choose-close-note span { margin-left: 0.35rem; }
.choose-provider-list { display: block; }
/* Featured cards: flex-wrap so an odd final card grows into the row instead of leaving an empty grid cell. */
.choose-provider-featured { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; }
.choose-provider-featured > .choose-provider-card { flex: 1 1 22rem; }
.choose-provider-more { margin-top: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.choose-provider-more > summary { cursor: pointer; padding: 0.7rem 0.9rem; color: var(--accent-text); font: 600 0.85rem 'Space Grotesk', system-ui, sans-serif; }
.choose-provider-more > summary span { margin-left: 0.4rem; color: var(--text-dim); font: 400 0.75rem Inter, system-ui, sans-serif; }
.choose-provider-more[open] > summary { border-bottom: 1px solid var(--border); }
.choose-provider-row-head,
.choose-provider-row > details > summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 5.5rem 5.5rem 4.5rem minmax(0, 2fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
}
.choose-provider-row-head { color: var(--text-dim); font: 600 0.62rem 'Space Grotesk', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.choose-provider-rows { list-style: none; margin: 0; padding: 0; }
.choose-provider-row { border-top: 1px solid var(--border); }
.choose-provider-row.is-selected { box-shadow: inset 3px 0 0 var(--accent-text); }
.choose-provider-row > details > summary { cursor: pointer; list-style: none; font-size: 0.8rem; }
.choose-provider-row > details > summary::-webkit-details-marker { display: none; }
.choose-provider-row > details > summary:hover { background: var(--surface-2); }
.choose-provider-row > details > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.choose-provider-row-name { display: grid; min-width: 0; }
.choose-provider-row-name strong::before { content: ''; display: inline-block; width: 0; height: 0; margin: 0 0.5em 0.1em 0.1em; vertical-align: middle; border-left: 5px solid var(--text-dim); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.choose-provider-row > details[open] .choose-provider-row-name strong::before { transform: rotate(90deg); }
.choose-provider-row-name small { color: var(--text-dim); font: 0.68rem ui-monospace, monospace; overflow-wrap: anywhere; padding-left: calc(5px + 0.6em); }
.choose-provider-row-metric { font: 600 0.82rem 'Space Grotesk', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.choose-provider-row-reason { color: var(--text-dim); font-size: 0.75rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.choose-provider-row > details > .choose-provider-card { margin: 0 0.9rem 0.8rem; }
.choose-unverified-row { display: block; }
.choose-unverified-row > details > summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; cursor: pointer; }
.choose-unverified-row > details > summary > span:first-child { display: grid; min-width: 0; }
.choose-unverified-notes { margin: 0.4rem 0 0.2rem; padding-left: 1rem; color: var(--text-dim); font-size: 0.75rem; }
.choose-provider-card { min-width: 0; padding: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.choose-provider-card.is-selected { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.choose-provider-title { align-items: center; }
.choose-provider-title h3 { margin: 0; font-size: 1rem; }
.choose-provider-title p { margin-top: 0.15rem; }
.choose-provider-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.7rem; }
.choose-provider-metric { min-width: 0; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.choose-provider-metric dt { color: var(--text-dim); font: 600 0.62rem 'Space Grotesk', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.choose-provider-metric dd { margin: 0.15rem 0; font: 600 0.88rem 'Space Grotesk', system-ui, sans-serif; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.choose-provider-metric small { display: block; color: var(--text-dim); font-size: 0.65rem; line-height: 1.35; overflow-wrap: anywhere; }
.choose-provider-hq { margin-top: 0.5rem; color: var(--text-dim); font-size: 0.73rem; }
.choose-provider-notes { display: grid; gap: 0.2rem; margin: 0.4rem 0 0.65rem; font-size: 0.73rem; }
.choose-provider-notes h4 { margin-top: 0.35rem; }
.choose-warning-list h4 { color: var(--yellow); }
.choose-unknown-list h4 { color: var(--text-dim); }
.choose-stale { display: block; margin-top: 0.15rem; color: var(--yellow); font-weight: 600; }
.choose-provider-select { width: 100%; margin-top: 0.65rem; }
.choose-unverified { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.choose-unverified h3 { font: 600 1rem 'Space Grotesk', system-ui, sans-serif; }
.choose-unverified > p { margin: 0.3rem 0 0.5rem; color: var(--text-dim); font-size: 0.78rem; }
.choose-actions { margin-top: 1.5rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.choose-action-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.choose-action-primary, .choose-action-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem;
  padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: 600 0.8rem 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
}
.choose-action-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.choose-action-primary:hover { background: var(--accent-hover); }
.choose-action-secondary:hover { border-color: var(--accent-text); color: var(--accent-text); }
.choose-action-primary:disabled, .choose-action-secondary:disabled { opacity: 0.55; cursor: not-allowed; }
.choose-action-status { min-height: 1.2em; margin-top: 0.5rem; color: var(--green); font-size: 0.78rem; }
.choose-cost-note { margin-top: 0.3rem; color: var(--text-dim); font-size: 0.73rem; }
.choose-about { margin-top: 2rem; color: var(--text-dim); font-size: 0.88rem; }
.choose-about h2 { font-size: 1.05rem; }
.choose-about-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding: 0; list-style: none; }
.seo-choose-link { font-weight: 600; }
.choose-main + .site-footer { margin-top: 1rem; }

@media (max-width: 900px) {
  .choose-use-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choose-model-grid { grid-template-columns: 1fr; }
  .choose-model-card { max-width: none; }
  .choose-section-heading { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}
@media (max-width: 640px) {
  .choose-main { padding: 1rem 0.75rem 2rem; }
  .choose-use-cases, .choose-lists-grid, .choose-provider-list, .choose-constraint-grid { grid-template-columns: 1fr; }
  .choose-use-case { min-height: 72px; }
  .choose-constraints { padding: 0.7rem; }
  .choose-constraints > summary span { display: block; margin: 0.2rem 0 0; }
  .choose-priority-options { display: grid; grid-template-columns: 1fr 1fr; }
  .choose-provider-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choose-preference-summary { align-items: flex-start; flex-direction: column; }
  .choose-list-row { flex-direction: column; gap: 0.35rem; }
  .choose-list-meta { justify-content: flex-start; text-align: left; }
  .choose-provider-featured > .choose-provider-card { flex-basis: 100%; }
  .choose-provider-row-head { display: none; }
  .choose-provider-row > details > summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem 0.6rem; padding: 0.6rem 0.75rem; }
  .choose-provider-row-name, .choose-provider-row-reason { grid-column: 1 / -1; }
  .choose-provider-row-metric::before { content: attr(data-label); display: block; color: var(--text-dim); font: 600 0.6rem 'Space Grotesk', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
  .choose-provider-row > details > .choose-provider-card { margin: 0 0.5rem 0.6rem; }
  .choose-unverified-row > details > summary { flex-direction: column; gap: 0.35rem; }
  .choose-action-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .choose-action-primary, .choose-action-secondary { width: 100%; min-width: 0; }
}