/* ==========================================================================
   /models/ — language-model history, one panel per lab
   ==========================================================================

   Loaded after css/styles.css and css/page.css, and short for the same reason
   page.css is: the type scale, both themes, the header, the footer and the
   logo plate all come from the design system. What this page adds is one
   shape the site has never drawn before — a shared year axis with a dot per
   release — and a dated list beneath it. Jae's brief (2026-09-04): "simple/
   modern/sleek/sexy ui for each company". Sleek here means no boxes: panels
   are separated by whitespace and one hairline, the way the entity pages'
   sections are, not by cards.

   Every colour is a token, so the dark theme needs no rules of its own. */

/* Wider than .prose's 38rem: twelve panels each carrying a timeline want the
  room, and the release rows are two columns. Still capped, so the strip's
  year labels stay legible rather than stretching across a 1240px container. */
.models {
  max-width: 52rem;
  padding-block: var(--space-6) var(--space-8);
}

.models-head .prose-lede {
  max-width: 38rem;
}

/* --- The index: one chip per lab, in page order ---------------------------
  A stranger lands here to see who is on the page and jumps. Logos, not
  names alone, because the logo plate is the site's own identity mark and the
  same chip appears in the panel header below, so the two read as one. */
.labs-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.labs-index__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3) 4px 4px;
  border-radius: 999px;
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.labs-index__item .logo {
  --logo-sm: 24px;
}

.labs-index__item:hover,
.labs-index__item:focus-visible {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* With js/models.js running the chips are toggles for the race board: a
  pressed chip is a shown lane. Off is dimmed, not removed — the reader has
  to be able to put it back. */
.labs-index__item[aria-pressed] {
  cursor: pointer;
}

.labs-index__item[aria-pressed="true"] {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.labs-index__item[aria-pressed="true"]:hover,
.labs-index__item[aria-pressed="true"]:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* id 637, 2026-09-24: OpenAI, Anthropic, xAI, Z.ai and Cohere's marks are one
   dark colour rather than a neutral (the same five `logopresentation.BACKING`
   already backs elsewhere, id 374), so the theme-swapped `<img>` stays a dark
   mark in the light theme and a light one in dark theme -- but the pressed
   pill's fill is `--color-text`, which is the INVERSE of `--color-bg` in
   both themes. `--color-bg` is what the mark was generated to sit on, so a
   plate of it, punched through the inverted fill, restores exactly that
   regardless of theme -- a fixed light or dark plate would only fix one. */
.labs-index__item[aria-pressed="true"] .logo {
  border-radius: 50%;
  background-color: var(--color-bg);
}

.labs-index__item[aria-pressed="false"] {
  opacity: 0.55;
}

.labs-index__item[aria-pressed="false"]:hover,
.labs-index__item[aria-pressed="false"]:focus-visible {
  opacity: 1;
}

.labs-index__all {
  align-self: center;
  padding: 4px var(--space-3);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.labs-index__all:hover,
.labs-index__all:focus-visible {
  text-decoration: underline;
}

/* --- The race board -------------------------------------------------------
  Every release of every shown lab on one page: a line per year, every
  lab's releases that year flowing along it in date order (see
  race_board_html in build-site.py for why a year, not a lab, is the row).
  Each chip is logo · month · name; flagship generations are filled, the
  same two states as the strips. Chips wrap, never truncate — every name
  visible is the whole point. js/models.js hides chips by lab with
  `hidden`, and a year whose chips are all hidden folds away with them. */
.race-board {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border-strong);
}

.race-year {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: 7px;
  border-bottom: 1px solid var(--color-rule);
}

.race-year__label {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.race-year__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;
  min-width: 0;
}

.race-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px 2px 3px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.race-chip .logo {
  --logo-sm: 16px;
  flex: none;
}

.race-chip__when {
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.race-chip__name {
  font-weight: 600;
  min-width: 0;
}

.race-chip--flagship {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.race-chip--flagship .race-chip__when {
  color: var(--color-accent);
  opacity: 0.7;
}

.race-chip:hover,
.race-chip:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.race-chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.models-legend {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.models-legend .strip-legend {
  margin-right: var(--space-1);
}

.models-legend .strip-legend:not(:first-child) {
  margin-left: var(--space-3);
}

/* --- One lab ------------------------------------------------------------- */
.lab {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
  /* The header is sticky, so an index chip's jump has to clear it or the lab
    name lands underneath — seen on the live page at 390px on 2026-09-04.
    `--nav-stack` is the header's parked height, the same token the browse
    toolbar and the entity rail use for the same reason. */
  scroll-margin-top: calc(var(--nav-stack, 82px) + var(--space-4));
}

.lab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.lab-identity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.lab-identity .logo {
  --logo-lg: 44px;
}

.lab-name {
  font-size: var(--text-xl);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.lab-identity:hover .lab-name,
.lab-identity:focus-visible .lab-name {
  color: var(--color-accent);
}

.lab-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.lab-count {
  color: var(--color-text-muted);
  font-weight: 600;
}

.lab-sep {
  margin-inline: var(--space-1);
}

.lab-lineage {
  max-width: 40rem;
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* --- The year strip -------------------------------------------------------
  One axis for every lab on the page (the generator computes the span once),
  so a lab that started in 2023 visibly starts two-thirds of the way along.
  It is an inline SVG because the CSP forbids inline styles and `cx="34%"`
  is an attribute, not a style; the generator sets the positions, this file
  only draws them. Hollow for a headline release, filled accent for a
  flagship generation — the same two states the legend at the top shows. */
.strip {
  display: block;
  margin-top: var(--space-5);
  overflow: visible;
}

.strip-line {
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

.strip-dot {
  fill: var(--color-bg);
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  transition: r 120ms ease;
}

.strip-dot--flagship {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.strip a:hover .strip-dot,
.strip a:focus-visible .strip-dot {
  r: 7.5;
}

.strip a:focus-visible {
  outline: none;
}

.strip a:focus-visible .strip-dot {
  stroke: var(--color-accent);
  stroke-width: 3;
}

.strip-legend {
  vertical-align: -1px;
}

.strip-year {
  fill: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* --- The dated list ------------------------------------------------------
  Every row is a closed <details> (Jae, 2026-09-04: "make all the long
  explanations collapsed"). What shows is the scanning surface — date, name,
  tags — on one line with a chevron at the right edge; the sentence and its
  source unfold beneath. Native <details>, so it opens with JS off and the
  folded text is still found by find-in-page. The date column is the
  summary's first grid track rather than a sibling of the <details>, because
  the whole line has to be the click target — a date that opens nothing
  beside a name that does would be a row half of which is dead. */
.releases {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.release {
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: calc(var(--nav-stack, 82px) + var(--space-4));
}

.release:first-child {
  border-top: 0;
}

.release:target {
  background-color: var(--color-accent-soft);
  box-shadow: 0 0 0 var(--space-3) var(--color-accent-soft);
  border-radius: var(--radius-sm);
}

.release-body {
  min-width: 0;
}

.release-title {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-4);
  padding-block: var(--space-3);
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  cursor: pointer;
  list-style: none;
}

.release-title::-webkit-details-marker {
  display: none;
}

/* The chevron: a bordered corner rotated to point down, turned up when open.
  Drawn rather than typed so it takes the row's colour tokens and never
  depends on a glyph the font may not carry. */
.release-title::after {
  content: "";
  grid-column: 3;
  align-self: center;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-right: 1.5px solid var(--color-text-faint);
  border-bottom: 1.5px solid var(--color-text-faint);
  transform: rotate(45deg);
  transition: transform 160ms ease, border-color 120ms ease;
}

.release-body[open] > .release-title::after {
  transform: rotate(225deg);
}

.release-title:hover .release-name,
.release-title:focus-visible .release-name {
  color: var(--color-accent);
}

.release-title:hover::after,
.release-title:focus-visible::after {
  border-color: var(--color-accent);
}

.release-title:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.release-date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Name and tags share the middle track and wrap together on a narrow line. */
.release-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.release-name {
  font-weight: 650;
}

/* Aligned under the name, not the date, so the unfolded sentence reads as
  belonging to the row's title. */
.release-detail {
  padding: 0 var(--space-6) var(--space-3) calc(7.5rem + var(--space-4));
}

.release-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* The chips borrow .category-badge's proportions but not its colours: a
  category is a fact about a company, a tag is a fact about a release, and
  the two must not read as the same system. Only flagship is coloured, so
  the eye finds the generation rows first. */
.release-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.release-tag--flagship {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.release-note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Same drawing as .stat-source on the entity pages — the source line is one
  idea across the site — restated here rather than shared so this page does
  not depend on a selector entity.css might rename. */
.release-source {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-text-faint);
  text-decoration: none;
}

.release-source:hover,
.release-source:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

/* --- Narrow screens -------------------------------------------------------- */
@media (max-width: 640px) {
  /* The date moves above the name; the chevron keeps the right edge. */
  .release-title {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }

  .release-date {
    grid-column: 1;
  }

  .release-title::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .release-detail {
    padding-left: 0;
  }

  /* The board on a phone: the year sits above its chips instead of beside
    them, so the chips get the whole width, and the month is dropped — the
    chips are already in date order along the line, and the full date is one
    tap away on the row. Measured at 390px: 2,470px tall with both (two chips
    a line), 1,776px without (three), and Jae's ask was "every model in less
    than one page". */
  .race-year {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .race-year__label {
    padding-top: 0;
  }

  .race-chip {
    padding-right: 7px;
  }

  .race-chip__when {
    display: none;
  }

  /* Nine year labels do not fit in 360px of strip; every other one does.
    The ticks are the first children of the svg after the line, so the odd
    ones (2nd, 4th, … child) are the even-numbered years. */
  .strip-year:nth-of-type(even) {
    display: none;
  }

  .lab-identity .logo {
    --logo-lg: 36px;
  }

  .lab-name {
    font-size: var(--text-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .labs-index__item,
  .strip-dot,
  .release-title::after {
    transition: none;
  }
}