/* ==========================================================================
   Page: Model card – Summit 2.1 (site/model-card.html)
   ========================================================================== */

.model-card {
  padding-bottom: clamp(80px, 10vw, 128px);
}

/* Hero -------------------------------------------------------------------- */
.model-card__title {
  max-width: 1000px;
  margin-top: 24px;
  font: 400 clamp(48px, 6.4vw, 92px)/1.02 var(--font-serif);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.model-card__lead {
  max-width: 680px;
  margin-top: 24px;
  font: 400 20px/1.55 var(--font-sans);
  color: var(--ink-2);
}

/* At a glance ----------------------------------------------------------- */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  margin-top: 40px;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline);
}

.glance__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 16px 0;
}

.glance__key {
  font: 500 11px/1 var(--font-mono);
  color: var(--machine-ink);
}

.glance__value {
  font: 500 16px/1.3 var(--font-mono);
}

/* Layout: sticky TOC + body ---------------------------------------------- */
.model-card__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  margin-top: 56px;
}

.page-toc {
  display: none;
  position: sticky;
  top: 96px;
  align-self: start;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 1000px) {
  .model-card__layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .page-toc {
    display: flex;
  }
}

.page-toc__title {
  padding-bottom: 10px;
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
}

.page-toc__link {
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--hairline);
  font: 400 14px/1.3 var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}

.page-toc__link.is-active {
  border-left-color: var(--ink);
  font-weight: 600;
}

.model-card__body {
  display: flex;
  flex-direction: column;
  gap: 72px;
  min-width: 0;
  max-width: 820px;
}

.mc-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mc-section__title {
  font: 400 36px/1.15 var(--font-serif);
}

.mc-section__text {
  font: 400 17px/1.65 var(--font-sans);
  color: var(--ink-2);
}

/* Uses ---------------------------------------------------------------------- */
.use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.use-card__label {
  font: 600 13px/1 var(--font-sans);
}

.use-card__label--intended { color: var(--success); }
.use-card__label--prohibited { color: var(--error); }

.use-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  font: 400 16px/1.5 var(--font-sans);
}

.use-card__link {
  font: 500 14px/1 var(--font-sans);
}

/* Evaluations ----------------------------------------------------------------- */
.compare-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compare-toggle__option {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--font-mono);
}

.compare-toggle__option[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

.eval-chart {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* Which models are shown per comparison */
.eval-chart[data-compare="family"] .eval-bar--frontier,
.eval-chart[data-compare="frontier"] .eval-bar--ridge,
.eval-chart[data-compare="frontier"] .eval-bar--pebble,
.eval-chart[data-compare="solo"] .eval-bar:not(.eval-bar--summit) {
  display: none;
}

.eval-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 8px 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--paper-200);
}

/* Narrow screens: name above bars (the original overflowed horizontally) */
@media (max-width: 719.98px) {
  .eval-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.eval-row__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eval-row__name {
  font: 600 15px/1.3 var(--font-sans);
}

.eval-row__meta {
  font: 400 12px/1.35 var(--font-mono);
  color: var(--ink-2);
}

.eval-row__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* One bar: --value = score (0–100 %), --ci = ± confidence interval */
.eval-bar {
  --bar-color: var(--ink);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 10px;
  font: 400 12px/1 var(--font-mono);
}

.eval-bar--ridge { --bar-color: var(--mist-600); }
.eval-bar--pebble { --bar-color: var(--mist-400); }
.eval-bar--frontier { --bar-color: var(--cluster-contracts); }

.eval-bar__model {
  color: var(--ink-2);
}

.eval-bar--summit .eval-bar__model {
  color: var(--ink);
}

.eval-bar__track {
  position: relative;
  height: 10px;
  border-radius: 2px;
  background: var(--paper-100);
}

/* Filled bar */
.eval-bar__track::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--value);
  height: 10px;
  border-radius: 2px;
  background: var(--bar-color);
}

/* Confidence interval whisker */
.eval-bar__track::after {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(var(--value) - var(--ci));
  width: calc(var(--ci) * 2);
  height: 14px;
  border-left: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
}

.eval-bar__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.eval-chart__alt {
  padding: 16px 20px;
  font: 400 14px/1.6 var(--font-sans);
  color: var(--ink-2);
}

.eval-chart__alt summary {
  cursor: pointer;
  font: 500 14px/1 var(--font-sans);
  color: var(--ink);
}

.eval-chart__alt p {
  margin-top: 12px;
}

/* Limitations ------------------------------------------------------------------ */
.limit-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline-strong);
}

.limit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}

.limit__title {
  font: 600 17px/1.35 var(--font-sans);
}

.limit__rate {
  font: 500 13px/1.3 var(--font-mono);
  color: var(--warning);
  white-space: nowrap;
}

.limit__desc {
  grid-column: 1 / 3;
  font: 400 16px/1.6 var(--font-sans);
  color: var(--ink-2);
}

.limit__mitigation {
  grid-column: 1 / 3;
  font: 400 13px/1.45 var(--font-mono);
}

/* Safety ------------------------------------------------------------------------- */
.safety-table {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.safety-table .data-table {
  min-width: 560px;
}

.safety-table td {
  padding: 14px 16px;
  border-bottom-color: var(--paper-200);
}

.safety-table td:first-child {
  font-weight: 500;
}

.safety-table td:nth-child(2) {
  color: var(--ink-2);
}

.safety-table td.is-num {
  font: 400 13px/1.3 var(--font-mono);
}

.safety-note {
  line-height: 1.45;
}

/* Version history ---------------------------------------------------------------- */
.version-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--hairline-strong);
}

.version-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 24px 24px;
}

/* Timeline dot; lime for the current version */
.version-list__item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.version-list__item.is-current::before {
  background: var(--action);
}

.version-list__version {
  font: 500 13px/1.3 var(--font-mono);
}

.version-list__text {
  font: 400 16px/1.55 var(--font-sans);
  color: var(--ink-2);
}

/* Research papers ---------------------------------------------------------------- */
.paper-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline-strong);
}

.paper-list__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}

.paper-list__title {
  font: 400 22px/1.3 var(--font-serif);
}

.paper-list__meta {
  font: 400 13px/1.3 var(--font-mono);
  color: var(--ink-2);
}

.model-card__download {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  font: 500 16px/1 var(--font-sans);
}