/* ULTRABENCH — intelligence-vs-cost page (scatter, value table) + the public
   model-detail page. Tokens come from base.css; nothing here loads a font, a library
   or a CDN asset. */

/* ---------- shared insight furniture ---------- */

.insight-panel { display: flex; flex-direction: column; }
.insight-note {
  margin: 10px 0 0; color: var(--text-faint); font-size: 12px; line-height: 1.5;
}

/* ---------- cost scatter ---------- */

.scatter-wrap { width: 100%; }
.scatter-svg {
  display: block; width: 100%; height: auto;
  background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: var(--radius-s);
}

.scatter-grid   { stroke: var(--line); stroke-width: 1; }
.scatter-tick   { fill: var(--text-faint); font-family: var(--mono); font-size: 11px; }
.scatter-axis   { fill: var(--text-dim); font-family: var(--sans); font-size: 12px; letter-spacing: .04em; }
/* The halo (stroke painted UNDER the fill) keeps a label readable where the frontier
   line or a grid line runs through it — without it the dashes strike the text out. */
.scatter-label {
  fill: var(--text-dim); font-family: var(--sans); font-size: 11px;
  paint-order: stroke fill; stroke: var(--bg-inset); stroke-width: 3px;
  stroke-linejoin: round; stroke-linecap: round;
  /* labels are never interactive — and opacity:0 alone leaves the default
     visiblePainted hit target, dead-zoning the dots beneath a quiet label */
  pointer-events: none;
}
/* Hover-reveal: every label is visible by default (owner directive 2026-08-18);
   hovering a dot hides all labels except the hovered model's. Source order carries the
   cascade: `.scatter-label.is-active` ties `.is-hovering .scatter-label` at (0,2,0), so
   it must come LAST to beat the hider without !important (`.is-hovering` = SVG root). */
.is-hovering .scatter-label { opacity: 0; }
.scatter-label.is-active { opacity: 1; }
.scatter-dot    { stroke: var(--bg-inset); stroke-width: 1; cursor: pointer; }
.scatter-dot:hover, .scatter-dot:focus { stroke: var(--text); stroke-width: 1.5; r: 6.5px; }
/* Free models sit ON the axis, not at a price the log scale can hold — the hollow ring
   says "no price position" rather than pretending to one. */
.scatter-dot-free { fill: none; }
.scatter-dot-free:hover, .scatter-dot-free:focus { stroke-width: 3; }
.scatter-frontier {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 5 4; opacity: .55;
}

.scatter-legend {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 12px; color: var(--text-dim);
}
.scatter-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ranked models with no plottable price — named under the legend so every indexed
   model is represented on this page */
.scatter-unpriced {
  margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px;
  font-size: 13px; line-height: 1.8; color: var(--text-dim);
}
.scatter-unpriced h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 6px;
}
.scatter-unpriced a { white-space: nowrap; }
.scatter-unpriced .muted { font-family: var(--mono); font-size: 11px; margin-right: 12px; }

/* ---------- value table ---------- */

.value-ratio { color: var(--accent); }

.value-free { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.value-free h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 6px;
}
.value-free-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.value-free-list li {
  display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
}
.value-free-n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-dim); }

/* ---------- intelligence-vs-cost page ---------- */

/* The scatter panel spans the page; the value table beneath is capped — at full page
   width its few columns stretch into unreadable gulfs. */
.cost-page svg { max-width: 100%; height: auto; }
.cost-value { max-width: 720px; }

/* ---------- model detail ---------- */

.md-title { font-size: 22px; margin-bottom: 4px; }
.md-sub {
  color: var(--text-faint); font-family: var(--mono); font-size: 12px;
  word-break: break-word;
}
.md-lineage { margin-top: 4px; color: var(--text-faint); font-size: 12px; }
.md-lineage a { font-family: var(--mono); }
.md-summary { color: var(--text-dim); max-width: 78ch; margin: 10px 0 14px; }
.md-sub + .panel-grid, .md-lineage + .panel-grid { margin-top: 14px; }

.md-note { margin: 8px 0 0; color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.md-stacked { margin-top: 14px; }

.md-source {
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--text-dim);
}
.md-source-t3 { color: var(--accent); }
.md-source-t2 { color: #a9d9c9; }
.md-source-t1 { color: var(--text-dim); }
.md-source-t0 { color: var(--text-faint); }

.md-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.md-tags li {
  font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 9px;
}

/* ---------- responsive ---------- */

@media (prefers-reduced-motion: no-preference) {
  .scatter-label { transition: opacity .12s ease; }
}

@media (max-width: 900px) {
  .scatter-legend { font-size: 11px; }
}

/* The SVG scales its user units down with the container, so on a phone the chart type
   must scale UP in user units to stay legible: at ~350px wide the viewBox renders at
   ~0.4x, which turns an 11px label into 4px. Resting labels (quiet ones included) are
   dropped rather than shrunk — the dot cloud, the axes and the frontier still carry the
   shape — but the one .is-active label re-enters at tick size when a dot is touched. */
@media (max-width: 560px) {
  .md-title { font-size: 18px; }
  .scatter-label { display: none; }
  .scatter-label.is-active { display: block; font-size: 24px; }
  .scatter-tick { font-size: 24px; }
  .scatter-axis-x { font-size: 26px; }
  /* the rotated y title would sit on top of the enlarged y ticks */
  .scatter-axis-y { display: none; }
  .scatter-dot { r: 9px; }
  /* out-cascades the global hover/focus bump (same specificity, later in file) */
  .scatter-dot:hover, .scatter-dot:focus { r: 10.5px; }
  .scatter-frontier { stroke-width: 3; stroke-dasharray: 10 8; }
  .scatter-grid { stroke-width: 2; }
}