/* AI model releases calendar (/calendar/releases/, releasesPage.js). Loaded only on that
   page by page-releases.hbs — not part of the inlined theme CSS. Tokens come from vars.css
   (already on the page). */

.th-rel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.th-rel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  align-items: end;
  justify-content: space-between;
}

.th-rel__titles {
  display: grid;
  gap: var(--space-8);
}

.th-rel__title {
  font-family: var(--font-heading);
  font-size: var(--text-48);
  font-weight: 400;
  line-height: 1;
}

.th-rel__intro {
  font-size: var(--text-16);
  color: var(--color-text-secondary);
}

.th-rel__views {
  display: inline-flex;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.th-rel-view {
  min-block-size: 36px;
  padding-inline: var(--space-20);
  font-size: var(--text-14);
  color: var(--color-text);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.th-rel-view[aria-pressed="true"] {
  color: var(--color-badge-text);
  background: var(--color-primary);
}

/* Model type: a row of pills like the rubric tabs in the site header; scrolls sideways
   on a phone. */

/* The pills are built by the script; the row keeps their height from the start, so the
   calendar below does not jump when they appear. They share the row above the calendar with
   the month switch and the view switch, and scroll sideways when the row is short. */
.th-rel__types {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-6);
  min-inline-size: 0;
  min-block-size: 36px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Label and count share one baseline (different fonts centred separately drift ~2px apart);
   the label's 34px line plus the border gives the 36px height of the view switch buttons. */
.th-rel-type {
  display: inline-flex;
  flex: none;
  gap: var(--space-8);
  align-items: baseline;
  padding: 0 var(--space-16);
  font-family: var(--font-heading);
  font-size: var(--text-16);
  font-weight: 500;
  line-height: 3.4rem;
  color: var(--color-text);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 100px;

  &:hover {
    border-color: var(--color-text-secondary);
  }
}

.th-rel-type[aria-pressed="true"] {
  border-color: var(--color-text);
}

.th-rel-type__count {
  font-family: var(--font-mono);
  font-size: var(--text-13);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-text-secondary);
}

.th-rel__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  min-inline-size: 0;
}

.th-rel__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  align-items: center;
}

/* Month switch (month view only) and view switch at the end of the row. */
.th-rel__controls {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  margin-inline-start: auto;
}

.th-rel__months {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

/* The timeline scrolls through its months itself: no month switch there. */
.th-rel:where([data-view="timeline"]) .th-rel__months {
  display: none;
}

.th-rel__nav .th-rel__arrow {
  min-inline-size: 36px;
  min-block-size: 36px;
  padding-inline: var(--space-12);
  font-size: var(--text-16);
  color: var(--color-text);
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.th-rel__month {
  min-inline-size: 10rem;
  font-family: var(--font-heading);
  font-size: var(--text-24);
  text-align: center;
}

.th-rel__body {
  min-block-size: 24rem;
}

/* Until the data is drawn the calendar keeps a screen of room from the very first paint:
   otherwise the footer shows up on the first screen and the arriving table pushes it away
   (a layout shift of the whole page). Only with scripting — without it nothing will arrive. */
@media (scripting: enabled) {
  .th-rel:where(:not([data-ready])) .th-rel__body {
    min-block-size: 100svh;
  }
}

.th-rel-note {
  padding: var(--space-32);
  font-size: var(--text-16);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-radius: var(--radius);
}

@media (max-width: 739px) {
  .th-rel__title {
    font-size: var(--text-32);
  }

  .th-rel__month {
    min-inline-size: 0;
    font-size: var(--text-22);
  }

  .th-rel__types {
    flex-basis: 100%;
  }

  .th-rel-view {
    padding-inline: var(--space-12);
  }
}

/* Chips (the studio logo mark itself — theme/studio-mark.css) */

.th-rel-chip {
  display: inline-flex;
  gap: var(--space-6);
  align-items: center;
  max-inline-size: 100%;
  min-block-size: var(--rel-chip-height);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.th-rel-chip:hover,
.th-rel-chip:focus-visible {
  background: var(--chip-hover);
  border-color: var(--color-text-secondary);
  box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}

/* One line; a long name ends with "…" — the full one is in the details window. */
.th-rel-chip__name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Expected release: dashed red, no fill — an estimate, not a release. */
.th-rel-chip--expected {
  color: var(--color-primary);
  background: transparent;
  border-color: var(--color-primary);
  border-style: dashed;
}

.th-rel-more {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-14);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: transparent;
  border: 0;
}

/* Timeline: studios as rows, months as columns; the studio column stays while scrolling */
.th-rel-timeline {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.th-rel-timeline__row {
  display: grid;
  grid-template-columns: 20rem repeat(var(--months), minmax(17rem, 1fr));
  min-inline-size: fit-content;
  border-block-start: 1px solid var(--color-border);
}

/* The month row is tinted like the studio column: the frame of the table. */
.th-rel-timeline__row--head {
  background: var(--rel-column);
  border-block-start: 0;
  border-block-end: 1px solid var(--rel-column-line);
}

.th-rel-timeline__studio {
  position: sticky;
  inset-inline-start: 0;
  z-index: var(--z-raised);
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
  padding: var(--space-16);
  color: var(--rel-column-text);
  background: var(--rel-column);
  border-inline-end: 1px solid var(--rel-column-line);
}

/* Column heads in the site's heading font, lowercase like the type pills above. */
.th-rel-timeline__row--head .th-rel-timeline__studio,
.th-rel-timeline__month {
  font-family: var(--font-heading);
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.th-rel-timeline__row--head .th-rel-timeline__studio {
  grid-template-rows: auto;
  align-content: center;
  color: var(--rel-column-muted);
}

.th-rel-timeline__month {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-16) var(--space-12);
  color: var(--rel-column-muted);
  border-inline-start: 1px solid var(--rel-column-line);
}

.th-rel-timeline__month[data-current="true"] {
  color: var(--color-primary);
}

.th-rel-timeline__now {
  padding: var(--space-2) var(--space-8);
  font-size: var(--text-13);
  color: var(--color-badge-text);
  background: var(--color-primary);
  border-radius: 999px;
}

.th-rel-timeline__name {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-22);
  line-height: 1.1;
}

.th-rel-timeline__name .th-rel-mark,
.th-rel-timeline__name .th-rel-mark__logo,
.th-rel-timeline__name .th-rel-mark__letter {
  inline-size: 22px;
  block-size: 22px;
}

/* One-colour logo in the studio column: its shape filled with --logo-color (releasesView). */
.th-rel-mark__shape {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--logo-color);
  mask: var(--logo) center / contain no-repeat;
}

/* Label grey and small, the value in the text colour and larger: one grey for everything
   reads as one blur. Sits at the bottom of the studio cell. */
.th-rel-timeline__expected {
  display: grid;
  align-self: end;
  font-size: var(--text-13);
  color: var(--rel-column-muted);
}

.th-rel-timeline__label {
  font-size: var(--text-13);
}

.th-rel-timeline__when {
  font-size: var(--text-16);
  color: var(--rel-column-text);
}

.th-rel-timeline__chance {
  font-size: var(--text-14);
  color: var(--rel-column-muted);
}

/* Every cell has --slots places of one chip height (releasesTimeline): rows of the table are
   one height, a fuller cell ends with "+N more". minmax keeps a place from clipping a chip
   under a larger font. */
.th-rel-timeline__cell {
  display: grid;
  grid-template-rows: repeat(var(--slots, 1), minmax(var(--rel-chip-height), auto));
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(var(--rel-chip-height), auto);
  gap: var(--space-6);
  align-content: start;
  justify-items: start;
  min-inline-size: 0;
  padding: var(--space-8);
  border-inline-start: 1px solid var(--color-border);
}

@media (max-width: 739px) {
  .th-rel-timeline__row {
    grid-template-columns: 13rem repeat(var(--months), minmax(17rem, 1fr));
  }

  .th-rel-timeline__studio {
    padding: var(--space-12);
  }

  .th-rel-timeline__name {
    font-size: var(--text-16);
  }

  .th-rel-timeline__expected {
    display: none;
  }
}

/* Month grid */
.th-rel-month {
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius);
}

.th-rel-month__weekdays,
.th-rel-month__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.th-rel-month__weekdays {
  padding-block: var(--space-12);
  font-family: var(--font-heading);
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: center;
  border-block-end: 1px solid var(--color-border);
}

.th-rel-month__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-inline-size: 0;
  min-block-size: 12rem;
  padding: var(--space-8);
  border-block-end: 1px solid var(--color-border);
  border-inline-end: 1px solid var(--color-border);
}

.th-rel-month__day[data-outside="true"] {
  color: var(--color-text-secondary);
  background: var(--color-bg);
}

.th-rel-month__head {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-16);
  font-weight: 500;
}

.th-rel-month__weekday {
  display: none;
  color: var(--color-text-secondary);
  text-transform: lowercase;
}

.th-rel-month__date[data-today="true"] {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  color: var(--color-badge-text);
  background: var(--color-primary);
  border-radius: 50%;
}

/* Narrow screen: seven columns leave no room for a model name, so the month becomes
   a list of the days that have releases. */
@media (max-width: 739px) {
  .th-rel-month__weekdays,
  .th-rel-month__day[data-empty="true"] {
    display: none;
  }

  .th-rel-month__days {
    grid-template-columns: minmax(0, 1fr);
  }

  .th-rel-month__day {
    min-block-size: 0;
    padding: var(--space-12) var(--space-16);
    border-inline-end: 0;
  }

  .th-rel-month__weekday {
    display: inline;
  }
}

/* Details window (native popover, placed by calendarPopover.js) */
.th-cal-pop {
  position: fixed;
  inset: auto;
  z-index: var(--z-pop);
  max-inline-size: min(38rem, calc(100vw - 16px));
  max-block-size: calc(100dvh - 16px);
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}

/* No Popover API: the same window as a fixed block, shown by clearing hidden. */
.th-cal-pop[hidden] {
  display: none;
}

/* The window eases in next to the item (data-open is set by calendarPopover on show). */
.th-cal-pop[data-open] {
  animation: th-cal-pop-in 0.16s ease-out;
}

@keyframes th-cal-pop-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .th-cal-pop[data-open],
  .th-rel-bench--first .th-rel-bench__fill {
    animation: none;
  }
}

.th-rel-pop {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-20);
  font-size: var(--text-14);
  color: var(--color-text);
}

.th-rel-pop--list {
  gap: var(--space-6);
  padding: var(--space-12);
}

.th-rel-pop__head {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.th-rel-pop__head .th-rel-mark,
.th-rel-pop__head .th-rel-mark__logo,
.th-rel-pop__head .th-rel-mark__letter {
  inline-size: 32px;
  block-size: 32px;
}

.th-rel-pop__title {
  font-family: var(--font-heading);
  font-size: var(--text-24);
  line-height: 1.1;
}

.th-rel-pop__sub,
.th-rel-pop__credit {
  font-size: var(--text-14);
  color: var(--color-text-secondary);
}

.th-rel-pop__date,
.th-rel-pop__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.th-rel-pop__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6) var(--space-24);
  padding-block-start: var(--space-12);
  border-block-start: 1px solid var(--color-border);
}

.th-rel-pop__facts dt {
  color: var(--color-text-secondary);
}

.th-rel-pop__bench {
  display: grid;
  gap: var(--space-8);
  padding-block-start: var(--space-12);
  border-block-start: 1px solid var(--color-border);
}

.th-rel-bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-4) var(--space-12);
  align-items: baseline;
}

.th-rel-bench__score {
  font-weight: 600;
}

.th-rel-bench__rank {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  color: var(--color-text-secondary);
}

.th-rel-bench__bar {
  position: relative;
  grid-column: 1 / -1;
  block-size: 6px;
  background: var(--color-border);
  border-radius: 999px;
}

.th-rel-bench__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--share) * 100%);
  background: var(--bench-fill);
  border-radius: inherit;
}

/* Where the #1 result sits — for every place but the first. */
.th-rel-bench__leader {
  position: absolute;
  inset-block: -3px;
  inset-inline-start: calc(var(--leader) * 100%);
  inline-size: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transform: translateX(-1px);
}

/* First place: gold with a soft glow and a light wave running along it (the wave is the top
   background layer; its position is what moves). */
.th-rel-bench--first .th-rel-bench__fill {
  background:
    linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 60%) 50%, transparent 65%) 0 0 / 250% 100% no-repeat,
    linear-gradient(90deg, var(--bench-gold), var(--bench-gold-light));
  box-shadow: 0 0 10px color-mix(in srgb, var(--bench-gold) 45%, transparent);
  animation: th-rel-shine 2.6s ease-in-out infinite;
}

.th-rel-bench--first .th-rel-bench__rank {
  font-weight: 600;
  color: var(--bench-gold-text);
}

@keyframes th-rel-shine {
  from {
    background-position: 150% 0, 0 0;
  }

  to {
    background-position: -50% 0, 0 0;
  }
}

.th-rel-pop__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* Links in the text colour: red is the site's accent, not the colour of every link. They read
   as links by the arrow (sources) or against the grey label (benchmarks). */
.th-rel-pop a {
  color: var(--color-text);
  text-decoration: none;
  text-underline-offset: 0.2em;

  &:hover,
  &:focus-visible {
    text-decoration: underline;
  }
}

/* Legend under the calendar */
.th-rel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  font-size: var(--text-14);
  color: var(--color-text-secondary);
}

.th-rel__legend-item {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.th-rel__legend-item:where([data-kind])::before {
  inline-size: 24px;
  block-size: 14px;
  content: "";
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.th-rel__legend-item:where([data-kind="expected"])::before {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: var(--color-primary);
  border-style: dashed;
}

/* Touch: every control and link of the calendar is at least a finger wide and tall. */
@media (pointer: coarse) {
  .th-rel {
    --rel-chip-height: var(--tap-min);
  }

  .th-rel-view,
  .th-rel-type,
  .th-rel__nav .th-rel__arrow,
  .th-rel-chip,
  .th-rel-more,
  .th-rel-pop a {
    min-inline-size: var(--tap-min);
    min-block-size: var(--tap-min);
  }

  .th-rel-more,
  .th-rel-pop a {
    display: inline-flex;
    align-items: center;
  }
}

/* Until the calendar has loaded (and without JavaScript) there is nothing to switch. */
.th-rel:where(:not([data-ready])) .th-rel__views,
.th-rel:where(:not([data-ready])) .th-rel__nav {
  visibility: hidden;
}

/* Text under the calendar (the Ghost page body, written daily by server/releases-page): one
   centred reading column; the FAQ questions sit under their section title one step smaller. */
.th-rel__text {
  inline-size: 100%;
  max-inline-size: 76rem;
  margin-inline: auto;
}

.th-rel__text h3 {
  font-size: var(--text-22);
}

/* FAQ accordions (releasesFaq.js): a row per question with + / −, the answer below. */
.th-faq {
  display: grid;
  border-block-start: 1px solid var(--color-border);
}

.th-faq__item {
  border-block-end: 1px solid var(--color-border);
}

.th-faq__question {
  display: flex;
  gap: var(--space-12);
  align-items: baseline;
  padding-block: var(--space-16);
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.th-faq__question::-webkit-details-marker {
  display: none;
}

.th-faq__question::before {
  flex: none;
  inline-size: 1em;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  content: "+";
}

.th-faq__item:where([open]) .th-faq__question::before {
  content: "−";
}

.th-faq__question:hover {
  color: var(--color-primary);
}

.th-faq__item > p {
  padding-block-end: var(--space-16);
  padding-inline-start: calc(1em + var(--space-12));
  margin: 0;
}