/* ═══════════════════════════════════════════════════════════════════════════
   COMMUNITY PATCH — the archive page.

   Built entirely on Arcline tokens. The page has one job: make years of
   changelog legible at a glance and searchable in a second.

   The organising motif is the datum — a single hairline running down the
   left of the timeline, with every release hung off it as a lozenge. The
   arc appears once, in the release-cadence plot, where it is doing work.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────── hero */

.phero {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--pad) var(--space-6);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

/* Title and cadence sit on one row; the credit runs full width beneath.
   The earlier version stacked a tall credit card beside a vertically centred
   plot, which left a column of dead space and pushed the releases, the thing
   the page is for, most of a screen below the fold. */
.phero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  /* start, not end: the plot is the taller of the two, and aligning to the
     bottom pushed the title down the page behind a band of empty ground. */
  align-items: start;
  gap: var(--space-8);
}

.phero__art {
  position: absolute; inset: -40% 4% auto 38%; height: 190%;
  background: url("/assets/opscenter.webp") center / cover no-repeat;
  opacity: .14;
  mask-image: radial-gradient(ellipse 62% 70% at 56% 46%, #000 4%, transparent 70%);
  filter: saturate(.35) contrast(1.15) brightness(.8);
}
.phero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--canvas) 12%, color-mix(in srgb, var(--canvas) 52%, transparent) 40%, color-mix(in srgb, var(--canvas) 80%, transparent) 84%),
    linear-gradient(to bottom, transparent 66%, var(--canvas) 100%);
}
.phero > * { position: relative; }

.phero__say { max-width: 60ch; }

.phero__title {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--text);
}
.phero__title span { color: var(--brand); }

.phero__lede {
  margin: 0;
  max-width: 54ch;
  font-family: var(--font-sans);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.phero__lede strong { color: var(--text); font-weight: 600; }

/* ── the credit ──────────────────────────────────────────────────────────
   A glass plate with the specular rim, the system's one ornament, spent
   deliberately on the one thing the page most wants you to read. Laid out
   as two columns so it costs a band rather than a screen. */
.credit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--edge), var(--shadow-lg);
}
.credit::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: var(--edge-specular);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.credit__who { display: grid; justify-items: start; gap: var(--space-2); }
.credit__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.credit__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--brand);
}
.credit__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .84375rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ── release cadence ─────────────────────────────────────────────────── */

.pulse {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--edge), var(--shadow-lg);
}
.pulse__cap { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.pulse__hint { font-family: var(--font-sans); font-size: .75rem; color: var(--muted); }

.pulse__plot {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 116px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.pulse__bar {
  position: relative;
  flex: 1 1 0;
  min-width: 4px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: color-mix(in srgb, var(--brand) 34%, transparent);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  cursor: pointer;
  border: 0;
  padding: 0;
}
.pulse__bar[data-series="R25"] { background: color-mix(in srgb, var(--brand) 62%, transparent); }
.pulse__bar[data-series="R24"] { background: color-mix(in srgb, var(--yellow) 46%, transparent); }
.pulse__bar[data-series="R23"] { background: color-mix(in srgb, var(--chart-3) 42%, transparent); }
.pulse__bar[data-major="1"] { background: var(--brand); }
.pulse__bar:hover { transform: scaleY(1.04); transform-origin: bottom; }
.pulse__bar:hover,
.pulse__bar:focus-visible { background: var(--brand); }

.pulse__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ───────────────────────────────────────────────────────────────── tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  padding: 0;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tile {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--pad);
  background: var(--canvas);
}
.tile b {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tile span {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile--now b { color: var(--brand); }

/* ────────────────────────────────────────────────────────────── controls */

.controls {
  position: sticky;
  top: 46px;
  z-index: 10;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--pad);
  background: var(--glass-canvas);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--rule);
}
.controls__row { display: flex; align-items: center; gap: var(--space-3); }
.controls__row--wrap { flex-wrap: wrap; }

/* the series segmented control: raised means selected */
.seg {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.seg__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform 90ms var(--ease-press);
}
.seg__opt:hover { color: var(--text); }
.seg__opt:active { transform: scale(var(--press-scale)); }
.seg__opt[aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-sm);
}
.seg__opt b {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  color: var(--muted);
}
.seg__opt[aria-selected="true"] b { color: var(--brand-text); }

/* search field */
/* The .find control moved to style.css — the header search uses it on
   every page now, and style.css is the only stylesheet all of them load. */

/* filter chips — tinted, never outlined */
.chipset { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.fchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: .78125rem;
  font-weight: 560;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform 90ms var(--ease-press);
}
.fchip:hover { color: var(--text); }
.fchip:active { transform: scale(var(--press-scale)); }
.fchip[aria-pressed="true"] {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
}
.fchip__dot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--radius-full);
  background: var(--cat, var(--muted));
}
.fchip[aria-pressed="true"] .fchip__dot { background: var(--on-brand); }
.fchip__n {
  font-family: var(--font-mono);
  font-size: .625rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.fchip:disabled { opacity: .38; cursor: not-allowed; }

.controls__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.controls__count b { color: var(--text); font-weight: 500; }

/* ────────────────────────────────────────────────────────────── timeline */

.wrap {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-5) var(--pad) var(--space-16);
  max-width: 1440px;
  margin-inline: auto;
}

/* the jump rail — the datum made navigable */
.jump {
  position: sticky;
  /* --stick is measured from the real controls bar at runtime; the literal is
     only the pre-measurement fallback. Guessing here left the first two
     releases hidden behind the filters. */
  top: calc(var(--stick, 190px) + var(--space-4));
  display: grid;
  gap: 1px;
  max-height: calc(100vh - var(--stick, 190px) - var(--space-8));
  overflow-y: auto;
  padding-inline-end: var(--space-2);
}
.jump__series {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.jump__series:first-child { margin-top: 0; }

.jump__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .75rem;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.jump__link:hover { color: var(--text); background: var(--panel); }
.jump__link small { font-size: .625rem; opacity: .65; }

.jump__link.is-here { color: var(--brand-text); background: var(--brand-soft); }
/* the datum lozenge, inset from the edges — never a square-ended tick */
.jump__link.is-here::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--brand);
}

.timeline { display: grid; gap: var(--space-3); min-width: 0; }

/* ── a release ───────────────────────────────────────────────────────── */

.rel {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-xs);
  scroll-margin-top: calc(var(--stick, 190px) + var(--space-4));
  overflow: hidden;
}

/* major releases float, and carry the lit rim */
.rel--major {
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--edge), var(--shadow-lg);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--rule));
}
.rel--major::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px; border-radius: inherit;
  background: var(--edge-specular);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ── the disclosure ──────────────────────────────────────────────────────
   Closed is the resting state, so a collapsed row has to stay informative:
   the header keeps the version, the date, the change count, a one-line
   summary, and a spectrum bar showing what kind of work is inside. */
.rel__head { padding: 0; }

.rel__h { margin: 0; font: inherit; }

.rel__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.rel__toggle:hover { background: var(--panel); }
.rel__toggle:focus-visible { outline-offset: -3px; }

.rel__chev {
  width: 13px; height: 13px; flex: none;
  color: var(--muted);
  transition: transform var(--dur-med) var(--ease);
}
.rel.is-open .rel__chev { transform: rotate(90deg); }

.rel__tag {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap;
}
.rel--major .rel__tag { color: var(--brand); font-size: 1.3125rem; }

.rel__date {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* one segment per category, width proportional to its share */
.rel__spectrum {
  display: flex;
  flex: 1 1 90px;
  gap: 2px;
  max-width: 260px;
  height: 4px;
}
.rel__spectrum i {
  display: block;
  min-width: 3px;
  border-radius: var(--radius-full);
  background: var(--cat, var(--muted));
  opacity: .75;
}
.rel.is-open .rel__spectrum i { opacity: 1; }

.rel__badges { display: flex; gap: var(--space-2); margin-inline-start: auto; }

.rel__n {
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rel__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rel__flag--current { color: var(--moss); background: color-mix(in srgb, var(--moss) 15%, transparent); }
.rel__flag--major   { color: var(--brand-text); background: var(--brand-soft); }

/* The summary stays visible when collapsed: scanning 34 closed rows is only
   useful if each one says what it did. */
.rel__summary {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4) calc(var(--space-5) + 13px + var(--space-3));
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.rel.is-open .rel__summary { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-4); }

.rel__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.rel__body[hidden] { display: none; }

/* Opening should feel like the panel gave way, not like a jump cut. */
.rel.is-open .rel__body { animation: rel-open var(--dur-med) var(--ease); }
@keyframes rel-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── highlights: the big features of a major release ─────────────────── */

.hl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.hl__card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--panel);
  border-inline-start: 3px solid var(--cat, var(--brand));
}
.hl__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--text);
}
.hl__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ── change groups ───────────────────────────────────────────────────── */

.grp { margin-bottom: var(--space-5); }
.grp:last-child { margin-bottom: 0; }

.grp__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.grp__dot {
  width: 8px; height: 8px; flex: none;
  border-radius: var(--radius-full);
  background: var(--cat, var(--muted));
}
.grp__name {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}
.grp__n {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.chg { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.chg li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-soft);
  transition: background var(--dur-fast) var(--ease);
}
.chg li:hover { background: var(--panel); }

/* the datum tick for each line, a lozenge inset from the row edges */
.chg li::before {
  content: "";
  position: absolute;
  inset-block: 11px;
  inset-inline-start: var(--space-2);
  width: 2px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--cat, var(--muted)) 55%, transparent);
}

.chg mark {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--brand) 30%, transparent);
  color: var(--text);
}

/* faction tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: .59375rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--gdi   { color: var(--faction-gdi);   background: color-mix(in srgb, var(--faction-gdi) 15%, transparent); }
.tag--nod   { color: var(--faction-nod);   background: color-mix(in srgb, var(--faction-nod) 15%, transparent); }
.tag--scrin { color: var(--faction-scrin); background: color-mix(in srgb, var(--faction-scrin) 15%, transparent); }

/* video link */
.vid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-family: var(--font-mono);
  font-size: .59375rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.vid:hover { background: color-mix(in srgb, var(--brand) 22%, var(--brand-soft)); }
.vid svg { width: 9px; height: 9px; }

/* ─────────────────────────────────────────────────────────────── credits */

.credits {
  padding: var(--space-12) var(--pad);
  border-top: 1px solid var(--rule);
}
.credits__head { max-width: 60ch; margin-bottom: var(--space-6); }
.credits__head p {
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--text-soft);
}
.credits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: 0; padding: 0;
  list-style: none;
  max-width: 1440px;
}
.cred {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--edge), var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cred:hover { transform: translateY(-2px); box-shadow: var(--edge), var(--shadow-md); }
.cred--lead { border-color: color-mix(in srgb, var(--brand) 40%, var(--rule)); }
.cred__name {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.cred--lead .cred__name { color: var(--brand); }
a.cred__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cred__role {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ──────────────────────────────────────────────────────────── empty/foot */

.empty-state { margin: var(--space-16) auto; text-align: center; }
.empty-state__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.empty-state__body {
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--muted);
}

.foot p { font-family: var(--font-sans); }

/* ───────────────────────────────────────────────────────────── responsive
   Tablet drops the jump rail into a scroller; mobile stacks everything and
   holds the 44px touch minimum on every control. */

@media (max-width: 1080px) {
  .phero__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .credit { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-5); }
  .phero__art { inset: -30% -8% auto 26%; }
}

@media (max-width: 900px) {
  .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .jump {
    position: static;
    display: flex;
    gap: var(--space-2);
    max-height: none;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
  }
  .jump__series { display: none; }
  .jump__link {
    flex: none;
    min-height: var(--touch-target);
    border: 1px solid var(--rule);
    background: var(--surface);
  }
  .jump__link.is-here::before { inset-inline: 22%; inset-block: auto 3px; width: auto; height: 2px; }
}

@media (max-width: 720px) {
  .controls { position: static; }
  .seg { width: 100%; overflow-x: auto; }
  .seg__opt, .fchip { min-height: var(--touch-target); }
  .find { min-height: var(--touch-target); }
  .rel__toggle { flex-wrap: wrap; padding-inline: var(--space-4); min-height: var(--touch-target); }
  .rel__body { padding-inline: var(--space-4); }
  .rel__summary { padding-inline: var(--space-4); padding-left: var(--space-4); }
  .rel__spectrum { flex-basis: 100%; max-width: none; order: 3; }
  .rel__badges { margin-inline-start: 0; }
  .hl { grid-template-columns: minmax(0, 1fr); }
  .tile b { font-size: 1.5rem; }
  .phero__title { font-size: clamp(1.75rem, 9vw, 2.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse__bar:hover, .cred:hover { transform: none; }
  .rel.is-open .rel__body { animation: none; }
  .rel__chev { transition: none; }
}

/* ── patch adoption ────────────────────────────────────────────────────────
   The only thing on this page that is not from Masterleaf's changelog: what
   the community is actually running, read out of the build stamp the game
   writes into every map name.

   One line, in the brand, showing the share of games on the newest build
   that existed on each day. A stacked band per build needed twelve colours
   and the ordinal ramp could not carry them on a dark ground without either
   dropping under the contrast floor or outshouting the current build. */

.adopt {
  padding: var(--space-5) var(--pad);
  border-bottom: 1px solid var(--rule);
}

.adopt__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.adopt__title {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--text);
}
.adopt__lede {
  margin: 0;
  max-width: 68ch;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
}

.adopt__stats { display: flex; gap: var(--space-5); margin: 0; }
.adopt__stats dt {
  font-family: var(--font-mono); font-size: .59375rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.adopt__stats dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  line-height: 1; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.adopt__stats div:first-child dd { color: var(--brand); }

.adopt__fig { margin: 0 0 var(--space-3); }

/* ── the readout ──────────────────────────────────────────────────────────
   A line of thirty seven days cannot be interrogated by pointing at a
   hairline, so the numbers are written out. It shows the latest day at rest
   and follows the pointer, which means the chart is readable before anyone
   touches it. */
.adopt__read {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2); min-height: 1.4em;
  font-family: var(--font-sans); font-size: .8125rem; color: var(--muted);
}
.adopt__read b { color: var(--text); font-weight: 620; font-variant-numeric: tabular-nums; }
.ad__read-build {
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  background: var(--brand-soft); color: var(--brand-text);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
}
.ad__read-new {
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--moss) 16%, transparent); color: var(--moss);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
}

/* ── the plot ─────────────────────────────────────────────────────────── */

.adopt__plot {
  position: relative;
  height: 96px;
  margin-inline-start: 34px;          /* room for the y labels */
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  border-inline-start: 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  cursor: crosshair;
  touch-action: none;
}
.adopt__plot:focus-visible { outline: var(--focus-ring) solid var(--brand); outline-offset: 2px; }

.ad__svgwrap { position: absolute; inset: 0; }
.ad__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ad__area { fill: color-mix(in srgb, var(--brand) 13%, transparent); stroke: none; }
.ad__line {
  fill: none; stroke: var(--brand); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ad__grid {
  stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.ad__y {
  position: absolute; inset-inline-start: -34px;
  width: 30px; text-align: end;
  font-family: var(--font-mono); font-size: .59375rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.ad__y--top { top: -.45em; }
.ad__y--mid { top: calc(50% - .45em); }
.ad__y--bot { bottom: -.45em; }

/* every day gets a dot, so there is something to aim at */
.ad__dots { position: absolute; inset: 0; pointer-events: none; }
.ad__dots i {
  position: absolute; width: 3px; height: 3px; margin: 0 0 -1.5px -1.5px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand) 60%, transparent);
}

/* release markers, labelled where there is room */
.ad__marks { position: absolute; inset: 0; pointer-events: none; }
.ad__mark { position: absolute; top: 0; bottom: 0; }
.ad__mark i {
  position: absolute; inset-block: 0; inset-inline-start: -.5px;
  width: 1px; background: var(--rule-strong);
}
.ad__mark b {
  position: absolute; top: 3px; inset-inline-start: 4px;
  font-family: var(--font-mono); font-size: .59375rem; font-weight: 500;
  letter-spacing: .06em; color: var(--muted); white-space: nowrap;
}
.ad__mark.is-current i { background: color-mix(in srgb, var(--brand) 70%, transparent); }
.ad__mark.is-current b { color: var(--brand-text); }

/* the crosshair follows the pointer, and rests on the latest day */
.ad__cursor {
  position: absolute; top: 0; bottom: 0; width: 0;
  pointer-events: none;
  border-inline-start: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  opacity: .55;
  transition: opacity var(--dur-fast) var(--ease);
}
.adopt__plot.is-live .ad__cursor { opacity: 1; }
.ad__cursor i {
  position: absolute; bottom: var(--dot, 0%); inset-inline-start: -3.5px;
  width: 7px; height: 7px; margin-bottom: -3.5px;
  border-radius: var(--radius-full);
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--canvas);
}

.adopt__axis {
  display: flex; justify-content: space-between; gap: var(--space-3);
  margin: var(--space-2) 0 0 34px;
  font-family: var(--font-mono); font-size: .59375rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.adopt__note {
  margin: 0;
  max-width: 96ch;
  font-family: var(--font-sans); font-size: .78125rem; line-height: 1.55;
  color: var(--muted);
}
.adopt__note b { color: var(--text-soft); font-weight: 600; }

@media (max-width: 900px) {
  .adopt__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .adopt__stats { flex-wrap: wrap; gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .ad__cursor { transition: none; } }

/* ═══════════════════════════════════════════════════════════ series tally
   Games per release series. Deliberately small: five short bars under the
   adoption chart, not a second feature competing with it. */

.tally {
  padding: var(--space-4) var(--pad) var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.tally__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.tyrow {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 3.6rem;
  align-items: center;
  gap: var(--space-3);
}

.tyrow__name {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .04em;
}

.tyrow__track { position: relative; height: 12px; background: var(--panel); }

/* Flat against the axis on the left, rounded at the data end. */
.tybar {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  gap: 2px;                    /* surface gap, so adjacent builds stay distinct */
  min-width: 3px;
  border-radius: 0 3px 3px 0;
  overflow: hidden;
  background: var(--hue, var(--muted));
}

.tybar__seg {
  display: flex;
  align-items: center;
  padding-inline: .3rem;
  min-width: 2px;
  background: var(--hue, var(--muted));
  overflow: hidden;
}
/* Successive builds step down in opacity, so the composition reads without
   a second hue competing with the series identity. */
.tybar__seg:nth-child(2) { opacity: .8; }
.tybar__seg:nth-child(3) { opacity: .62; }
.tybar__seg:nth-child(4) { opacity: .48; }
.tybar__seg:nth-child(n+5) { opacity: .38; }

.tybar__seg i {
  font-family: var(--font-mono);
  font-size: .5rem;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--on-brand, #fff);
  white-space: nowrap;
  mix-blend-mode: luminosity;
}

.tyrow__val {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tally__note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: .6875rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .tyrow { grid-template-columns: 2.2rem minmax(0, 1fr) 3rem; }

  /* A 12px bar is under half the 24px a fingertip reliably hits, and the
     segments are now tap targets rather than hover targets. The track grows
     and the rows space out to match. */
  .tyrow__track { height: 22px; }
  .tally__bars { gap: 7px; }
  .tybar__seg i { font-size: .5625rem; }
}

/* A tapped segment's reading, in place of the caption. Coloured so it is
   clearly a value being shown rather than the standing note. */
.tally__note.is-read {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .6875rem;
}