/* ── Benchmark Table — bt- prefixed, self-contained ── */

/* Declared on :root, not on .bt-container, because the how-to disclosure sits
   on the page outside the widget and needs the same palette. */
:root {
  /* Values mirror the site's own tokens (--openzeka-*) rather than
     referencing them, because this stylesheet also ships to openzeka.com
     where those variables do not exist. */
  --bt-green: #76b900;
  --bt-green-dark: #5a8c00;
  --bt-dark: #1a1a1a;
  --bt-border: #e3e6ea;
  --bt-bg: #ffffff;
  --bt-bg-alt: #f6f8fa;
  --bt-bg-hover: #eef5e6;
  --bt-text: #1a1a1a;
  --bt-text-muted: #525f7a;
  --bt-radius: 6px;
}

.bt-container {
  font-family: inherit;
  color: var(--bt-text);
  font-size: 14px;
  line-height: 1.5;
  max-width: 100%;
  overflow-x: auto;
}

/* ── Filters ── */

.bt-filters {
  background: var(--bt-bg-alt);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.bt-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.bt-filter-row:last-child {
  margin-bottom: 0;
}

.bt-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
  min-width: 90px;
}

.bt-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bt-btn {
  padding: 5px 12px;
  border: 1px solid var(--bt-border);
  border-radius: 20px;
  background: var(--bt-bg);
  font-family: inherit;
  font-size: 13px;
  color: var(--bt-text);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.bt-btn:hover {
  border-color: var(--bt-green);
  color: var(--bt-green);
}

.bt-btn.bt-active {
  background: var(--bt-green);
  border-color: var(--bt-green);
  color: #fff;
}

/* ── Sliders ── */

.bt-slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.bt-slider-group label {
  font-size: 12px;
  color: var(--bt-text-muted);
  font-weight: 500;
}

.bt-slider-group .bt-slider-value {
  font-size: 12px;
  color: var(--bt-text);
  font-weight: 600;
}

.bt-slider-group input[type="range"] {
  width: 100%;
  accent-color: var(--bt-green);
  cursor: pointer;
}

/* ── Model search + checkbox list ── */

/* The model picker and the parameter-count slider sit side by side; the slider
   aligns to the top so it lands beside the search box, not the checkbox list. */
.bt-model-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 20px;
}

.bt-model-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bt-model-search {
  padding: 5px 10px;
  border: 1px solid var(--bt-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: var(--bt-text);
  background: var(--bt-bg);
  min-width: 220px;
}

.bt-model-search:focus {
  outline: 2px solid var(--bt-green);
  border-color: var(--bt-green);
}

.bt-model-list {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--bt-border);
  border-radius: 4px;
  background: var(--bt-bg);
  padding: 4px 0;
}

.bt-model-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 13px;
  color: var(--bt-text);
  cursor: pointer;
}

.bt-model-option:hover {
  background: var(--bt-bg-hover);
}

.bt-model-option input[type="checkbox"] {
  accent-color: var(--bt-green);
  cursor: pointer;
}

/* ── Performance filter row (merged C + TPS + TTFT) ── */

.bt-filter-row-perf {
  align-items: flex-end;
}

.bt-slider-perf {
  min-width: 180px;
}

/* ── Results count ── */

.bt-results-count {
  font-size: 13px;
  color: var(--bt-text-muted);
  margin-bottom: 8px;
  padding-left: 4px;
}

.bt-results-count strong {
  color: var(--bt-text);
}

/* ── Table ── */

.bt-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius);
}

.bt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
  table-layout: auto;
}

.bt-table thead th {
  background: var(--bt-dark);
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 2px solid var(--bt-green);
}

.bt-table thead th:hover {
  background: #333;
}

.bt-table thead th.bt-sorted-asc::after {
  content: " ▲";
  font-size: 10px;
  color: var(--bt-green);
}

.bt-table thead th.bt-sorted-desc::after {
  content: " ▼";
  font-size: 10px;
  color: var(--bt-green);
}

.bt-table thead th.bt-no-sort {
  cursor: default;
}

.bt-table thead th.bt-no-sort:hover {
  background: var(--bt-dark);
}

.bt-table tbody tr {
  border-bottom: 1px solid var(--bt-border);
  transition: background 0.1s;
}

.bt-table tbody tr:nth-child(even) {
  background: var(--bt-bg-alt);
}

.bt-table tbody tr:hover {
  background: var(--bt-bg-hover);
}

.bt-table tbody td {
  padding: 8px 14px;
  text-align: center;
}

.bt-table tbody td.bt-num {
  font-variant-numeric: tabular-nums;
}

.bt-table tbody td.bt-num.bt-good {
  color: #2d8a2d;
  font-weight: 600;
}

.bt-table tbody td.bt-num.bt-bad {
  color: #c0392b;
}

.bt-table tbody td.bt-muted {
  color: var(--bt-text-muted);
}

.bt-table tbody td.bt-mtp-yes {
  color: var(--bt-green);
  font-weight: 600;
}

.bt-table tbody td.bt-expand-cell {
  text-align: center;
  cursor: pointer;
  width: 32px;
}

.bt-table tbody td.bt-expand-cell:hover {
  color: var(--bt-green);
}

/* ── Expanded row ── */

.bt-detail-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--bt-border);
  background: #fafafa;
}

.bt-detail-content {
  padding: 16px 20px;
  display: none;
  /* .bt-table sets white-space: nowrap and text-align: center for the grid.
     Both are inherited here; prose must wrap, and must start at the left edge
     rather than growing outward from the centre of its box. */
  white-space: normal;
  text-align: left;
}

.bt-detail-content.bt-visible {
  display: block;
}

.bt-detail-table {
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}

.bt-detail-table th,
.bt-detail-table td {
  padding: 6px 16px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #eee;
}

.bt-detail-table th {
  color: var(--bt-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
}

.bt-detail-table .bt-detail-fail {
  color: #c0392b;
}

.bt-detail-table .bt-detail-pass {
  color: #2d8a2d;
  font-weight: 600;
}

.bt-detail-notes {
  font-size: 12px;
  color: var(--bt-text-muted);
  margin-top: 8px;
}

/* ── Chart Card ── */

.bt-chart-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 36px 40px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bt-chart-header {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1a1a2e;
  margin-bottom: 16px;
}

.bt-chart-legend {
  display: flex;
  gap: 40px;
  margin-bottom: 12px;
}

.bt-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}

.bt-legend-swatch {
  display: inline-block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
}

.bt-chart-axis-titles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.bt-axis-title-left,
.bt-axis-title-right {
  font-size: 12px;
  font-weight: 700;
}

.bt-chart-canvas-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}

.bt-chart-x-title {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-top: 8px;
}

.bt-chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.bt-chart-logo-img {
  height: 72px;
  width: auto;
}

.bt-chart-download {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 16px;
  border: 1px solid var(--bt-border);
  border-radius: 4px;
  background: var(--bt-bg);
  font-family: inherit;
  font-size: 12px;
  color: var(--bt-text);
  cursor: pointer;
  transition: all 0.15s;
}

.bt-chart-download:hover {
  border-color: var(--bt-green);
  color: var(--bt-green);
}

/* ── Empty state ── */

.bt-empty {
  padding: 32px;
  text-align: center;
  color: var(--bt-text-muted);
  font-size: 14px;
}

/* ── Loading state ── */

.bt-loading {
  padding: 40px;
  text-align: center;
  color: var(--bt-text-muted);
  font-size: 14px;
}

.bt-loading::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 12px auto 0;
  border: 3px solid var(--bt-border);
  border-top-color: var(--bt-green);
  border-radius: 50%;
  animation: bt-spin 0.8s linear infinite;
}

@keyframes bt-spin {
  to { transform: rotate(360deg); }
}

/* ── Error state ── */

.bt-error {
  padding: 20px;
  text-align: center;
  color: #c0392b;
  font-size: 14px;
  background: #fdf2f2;
  border: 1px solid #f5c6cb;
  border-radius: var(--bt-radius);
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .bt-container {
    font-size: 13px;
  }

  .bt-table {
    font-size: 12px;
  }

  .bt-table thead th,
  .bt-table tbody td {
    padding: 6px 10px;
  }

  .bt-filter-label {
    min-width: 70px;
  }

  .bt-assumptions-body {
    gap: 12px;
  }
}

/* ── Controls shell ── */

.bt-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.bt-filter-row-perf {
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bt-border);
}

.bt-filter-row-perf .bt-btn.bt-active {
  font-weight: 700;
}

.bt-perf-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bt-inline-label {
  margin-left: 14px;
}

.bt-slider-perf {
  min-width: 160px;
}

.bt-reset-row {
  justify-content: flex-start;
  gap: 6px;
}

.bt-reset {
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--bt-text);
  background: var(--bt-bg);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius);
  cursor: pointer;
}

.bt-reset:hover {
  border-color: var(--bt-green);
  color: var(--bt-green-dark, #5a8c00);
}

/* ── Performance targets / capacity assumptions ──
   Visually distinct from filters: filters choose which rows are shown, these
   decide what counts as acceptable and how capacity is estimated. */

.bt-targets {
  background: var(--bt-bg-alt);
  border: 1px solid var(--bt-border);
  border-radius: var(--bt-radius);
}

.bt-targets-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bt-text);
  background: transparent;
  border: 0;
  border-radius: var(--bt-radius);
  cursor: pointer;
}

.bt-targets-toggle:hover { color: var(--bt-green-dark, #5a8c00); }

.bt-targets-toggle .bt-arrow {
  display: inline-block;
  font-size: 10px;
  color: var(--bt-green);
  transition: transform 0.15s;
}

.bt-targets-toggle.bt-open .bt-arrow { transform: rotate(90deg); }

.bt-targets-body {
  padding: 0 16px 16px;
}

.bt-targets-body[hidden] { display: none; }

.bt-targets-intro {
  margin: 0 0 14px;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bt-text-muted);
}

.bt-targets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 20px;
}

.bt-target-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bt-target-item label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bt-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.bt-target-item input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--bt-text);
  background: var(--bt-bg);
  border: 1px solid var(--bt-border);
  border-radius: 4px;
}

.bt-target-item input[type="number"]:focus {
  outline: none;
  border-color: var(--bt-green);
}

.bt-preview-open {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--bt-green-dark, #5a8c00);
  background: transparent;
  border: 1px solid var(--bt-green);
  border-radius: 999px;
  cursor: pointer;
}

.bt-preview-open:hover {
  background: var(--bt-bg-hover);
}

/* ── Info tooltips ── */

.bt-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  color: var(--bt-text-muted);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: help;
  flex: none;
  vertical-align: middle;
}

.bt-table thead th .bt-tip {
  color: rgba(255, 255, 255, 0.75);
}

.bt-tip:hover,
.bt-tip:focus-visible {
  color: var(--bt-green);
  outline: none;
}

.bt-tooltip {
  position: fixed;
  z-index: 40;
  max-width: min(340px, calc(100vw - 32px));
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  color: #f5f5f5;
  background: #262626;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.bt-tooltip strong { color: #fff; }
.bt-tooltip p { margin: 6px 0 0; }
.bt-tooltip p:first-of-type { margin-top: 4px; }
.bt-tooltip em { color: var(--bt-green); font-style: normal; font-weight: 600; }

/* ── Results count ── */

.bt-count-label {
  font-weight: 600;
  color: var(--bt-text);
}

/* ── Clickable rows ──
   The whole row is the control, so it needs to look like one. */

.bt-table tbody tr.bt-row {
  cursor: pointer;
}

.bt-table tbody tr.bt-row:focus-visible {
  outline: 2px solid var(--bt-green);
  outline-offset: -2px;
}

.bt-table tbody tr.bt-row[aria-expanded="true"] {
  background: var(--bt-bg-hover);
}

.bt-table tbody tr.bt-row[aria-expanded="true"] td:first-child {
  box-shadow: inset 3px 0 0 var(--bt-green);
}

/* ── TPS speed preview — always on, inline under the targets ── */

.bt-tps-preview {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--bt-border);
}

.bt-tps-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}

.bt-tps-preview-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bt-text);
}

.bt-preview-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--bt-green-dark, #5a8c00);
}

/* the picked speed misses the TPS target */
.bt-preview-sub.bt-sub-bad {
  color: #c0392b;
}

.bt-preview-text {
  /* 110.5px is 6.5em at the 17px this box used before; pinned in px so the
     panel keeps its height now that the type is table-sized. */
  min-height: 110.5px;
  padding: 16px 18px;
  /* Matches the sweep table beside it. Note that is 14px, NOT the 13px on
     .bt-table below — just-the-docs styles bare `td`/`th` at 14px and wins,
     so every cell in both tables actually renders at 14px. Measured, not
     inferred: reading .bt-table alone gives the wrong number. */
  font-size: 14px;
  line-height: 1.7;
  color: var(--bt-text);
  background: var(--bt-bg);
  border: 1px solid var(--bt-border);
  border-radius: 6px;
}

.bt-preview-text.bt-streaming::after {
  content: "▍";
  font-size: 0.9em;
  color: var(--bt-green);
  animation: bt-blink 1s steps(2, start) infinite;
}

@keyframes bt-blink { to { visibility: hidden; } }

.bt-preview-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--bt-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .bt-preview-text.bt-streaming::after { animation: none; }
}

/* ── How-to disclosure ──
   Deliberately not a panel: it is page copy, and must not read as a third
   control surface stacked above the targets and filters. */

details.bt-howto {
  margin: 0 0 22px;
}

details.bt-howto > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bt-green-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details.bt-howto > summary::-webkit-details-marker { display: none; }

details.bt-howto > summary::before {
  content: "\25B6";
  font-size: 0.7em;
  color: var(--bt-green);
  transition: transform 0.15s;
}

details.bt-howto[open] > summary::before { transform: rotate(90deg); }

details.bt-howto > summary:hover { color: var(--bt-green); }

details.bt-howto > summary:focus-visible {
  outline: 2px solid var(--bt-green);
  outline-offset: 3px;
  border-radius: 3px;
}

.bt-howto-body {
  margin-top: 10px;
  padding-left: 18px;
  border-left: 2px solid var(--bt-border);
  max-width: 76ch;
}

.bt-howto-body h3 {
  margin: 22px 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bt-text);
}

.bt-howto-body h3:first-child { margin-top: 4px; }

.bt-howto-body p {
  margin: 0 0 10px;
  line-height: 1.65;
}

.bt-howto-body ul { margin: 0 0 10px; }

.bt-howto-example {
  margin: 4px 0 12px;
  padding: 12px 14px;
  background: var(--bt-bg-alt);
  border-radius: var(--bt-radius);
  font-size: 0.95em;
}

.bt-howto-example p:last-child { margin-bottom: 0; }

/* ── Expanded row: sweep table beside the speed preview ── */

.bt-detail-top {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 18px;
  margin-bottom: 16px;
}

.bt-detail-top .bt-detail-table {
  flex: 0 1 auto;
  margin-bottom: 0;
}

.bt-detail-preview {
  display: flex;
  flex-direction: column;
  /* No max-width: the preview takes whatever the sweep table leaves, so the
     pair spans the same width as the chart below and their right edges line
     up instead of the preview stopping short. */
  flex: 1 1 340px;
  min-width: 0;
}

/* Fixed box: it fills the space beside the sweep table and does not grow as
   text arrives, so nothing on the page shifts while it streams.
   flex-basis must be 0 — with `auto` the base size is the content, which is
   exactly what made the box grow token by token. */
.bt-detail-preview .bt-preview-text {
  flex: 1 1 0;
  /* 6em at the previous 17px */
  min-height: 102px;
  overflow: hidden;
}

.bt-detail-preview .bt-preview-note {
  flex: none;
}

/* The metric that caused a FAIL, marked on the number itself. Colour only —
   the STATUS column keeps the bold, so the row still reads status-first. */
.bt-detail-table td.bt-dp-good {
  color: #2d8a2d;
}

.bt-detail-table td.bt-dp-bad {
  color: #c0392b;
}

/* measurement rows are pickable: each one drives the preview */
.bt-detail-table tbody tr.bt-dp-row {
  cursor: pointer;
}

.bt-detail-table tbody tr.bt-dp-row:hover {
  background: var(--bt-bg-hover);
}

.bt-detail-table tbody tr.bt-dp-row:focus-visible {
  outline: 2px solid var(--bt-green);
  outline-offset: -2px;
}

.bt-detail-table tbody tr.bt-dp-active {
  background: var(--bt-bg-hover);
}

.bt-detail-table tbody tr.bt-dp-active td:first-child {
  box-shadow: inset 3px 0 0 var(--bt-green);
}

/* Columns whose values are names, not numbers: Model, Device, Quantization,
   Engine. Centring made them ragged — "1× DGX Spark" against "4× DGX Spark"
   against "RTX PRO 6000" reads as a list only when the left edges line up.
   Parameters, Intelligence and Agentic stay centred with the rest of the
   numbers.

   Selected by class, not by position, so adding or reordering a column cannot
   re-align the wrong one. Child combinators throughout: the expanded row nests
   a second table inside .bt-table, so a descendant selector here also caught
   the sweep table's cells. */
.bt-table > thead > tr > th.bt-th-left,
.bt-table > tbody > tr.bt-row > td.bt-left {
  text-align: left;
}

/* ── Attribution ──
   Artificial Analysis require credit wherever their index values are shown, so
   this line is a licensing obligation, not decoration: it must stay visible and
   must stay next to the table. Sits outside .bt-container because the widget
   replaces its own innerHTML on every filter change. */
.bt-attribution {
  max-width: 100%;
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--bt-text-muted);
}