/* ============================================================
   MOBILE GAME MONETIZATION TRACKER (template-game-tracker.php)
   Structure ported from the chadworks ADA tracker; skin is the
   Illus Caden system. Tokens only from variables.css. Charts are
   plain elements sized by --h / --w and grown by transform only;
   without JS (or with reduced motion) they simply sit at full size.
   The wrapper is .ic-shell, so the page-shell grid places every
   section in the standard content track. No width on the wrapper.
   ============================================================ */

.ic-tracker { padding-bottom: var(--ic-space-4xl); }

/* --- Masthead --- */
.ic-tracker-masthead {
  padding-top: var(--ic-space-2xl);
  padding-bottom: var(--ic-space-2xl);
  border-bottom: 2px solid var(--ic-text-strong);
}
.ic-tracker-docket {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ic-space-sm);
  margin: 0 0 var(--ic-space-md);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  letter-spacing: var(--ic-tracking-label);
  text-transform: uppercase;
  color: var(--ic-accent-deep);
}
.ic-tracker-docket span + span::before { content: "/"; margin-right: var(--ic-space-sm); color: var(--ic-text-muted); }
.ic-tracker-masthead__title {
  font-family: var(--ic-font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: var(--ic-leading-tight);
  color: var(--ic-text-strong);
  margin: 0;
}
/* The version hangs above the end of the title's last word, out of flow, so
   it never pushes the title onto another line (Chad, 2026-10-05, ss3). */
.ic-tracker-masthead__last-word { position: relative; white-space: nowrap; }
.ic-tracker-masthead__version {
  position: absolute;
  right: 0;
  bottom: 100%;
  font-family: var(--ic-font-mono);
  font-size: var(--ic-text-meta);
  line-height: 1;
  color: var(--ic-accent-deep);
}
.ic-tracker-masthead__lede {
  max-width: var(--ic-reading-width);
  margin: var(--ic-space-lg) 0 0;
  font-size: var(--ic-text-lede);
  line-height: var(--ic-leading-snug);
  color: var(--ic-text);
}
.ic-tracker-masthead__actions { display: flex; flex-wrap: wrap; gap: var(--ic-space-sm); margin: var(--ic-space-xl) 0 0; }

/* --- Hero contents: the chadworks tracker TOC in this palette, on every
   tracker. A square panel framed in the masthead ink, numbered rows on
   hairlines. Right of the lede from 1000px, under the buttons below that. --- */
.ic-tracker-toc {
  --ic-tracker-toc-bleed: 0.5rem;
  margin-top: var(--ic-space-xl);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--ic-surface);
  border: 1px solid var(--ic-text-strong);
}
.ic-tracker-toc__title {
  margin: 0 0 var(--ic-space-xs);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-accent-deep);
}
.ic-tracker-toc__list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: ic-tracker-toc; }
.ic-tracker-toc__list li { counter-increment: ic-tracker-toc; border-top: 1px solid var(--ic-rule); }
.ic-tracker-toc__list li:first-child { border-top: none; }
/* Inline padding cancelled by an equal negative margin: the hover tint gets
   air either side while the type stays on the panel edge. */
.ic-tracker-toc__list a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ic-space-sm);
  align-items: baseline;
  padding: 0.6rem var(--ic-tracker-toc-bleed);
  margin-inline: calc(-1 * var(--ic-tracker-toc-bleed));
  border-radius: 6px;
  font-family: var(--ic-font-ui);
  font-size: 1rem;
  line-height: var(--ic-leading-tight);
  color: var(--ic-text-strong);
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.ic-tracker-toc__list a::before {
  content: counter(ic-tracker-toc, decimal-leading-zero);
  font-family: var(--ic-font-mono);
  font-size: var(--ic-text-label);
  color: var(--ic-accent-deep);
}
.ic-tracker-toc__list a:hover { background-color: var(--ic-tint-green); }
.ic-tracker-toc__list a:focus-visible { outline: 2px solid var(--ic-text-strong); outline-offset: 3px; }

@media (min-width: 1000px) {
  .ic-tracker-masthead--with-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: start;
    column-gap: var(--ic-space-3xl);
  }
  /* The text sits at the top of the hero and stays in view under the
     masthead while a taller contents panel scrolls past (Chad, 2026-10-05).
     Sticky works here because no ancestor scrolls (base.css clips, never
     hides). */
  .ic-tracker-masthead--with-toc .ic-tracker-masthead__main {
    position: sticky;
    top: calc(var(--ic-nav-height) + var(--ic-adminbar-offset) + var(--ic-space-lg));
    align-self: start;
  }
  .ic-tracker-toc { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-tracker-toc__list a { transition: none; }
}

.ic-tracker-empty { padding: var(--ic-space-2xl) 0; color: var(--ic-text-muted); }

/* --- Headline figures --- */
.ic-tracker-figures { padding: var(--ic-space-2xl) 0; border-bottom: 1px solid var(--ic-rule); }
.ic-tracker-figures__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ic-space-md);
  margin: 0;
}
.ic-tracker-figure {
  background: var(--ic-surface);
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  padding: var(--ic-space-md) var(--ic-space-lg);
}
/* The keystone (median top IAP price) takes two columns and two rows. */
.ic-tracker-figure--lead { grid-column: span 2; grid-row: span 2; background: var(--ic-dark-bg); border-color: var(--ic-dark-bg); color: var(--ic-dark-text); }
.ic-tracker-figure dt {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  letter-spacing: var(--ic-tracking-label);
  text-transform: uppercase;
  color: var(--ic-text-muted);
}
.ic-tracker-figure--lead dt { color: var(--ic-dark-muted); }
.ic-tracker-figure dd { margin: var(--ic-space-sm) 0 0; }
.ic-tracker-figure__number {
  font-family: var(--ic-font-mono);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ic-text-strong);
}
.ic-tracker-figure--lead .ic-tracker-figure__number { font-size: 3.5rem; color: var(--ic-accent); }
.ic-tracker-figure__out-of { margin-left: var(--ic-space-xs); font-size: var(--ic-text-small); color: var(--ic-text-muted); }
.ic-tracker-figure--lead .ic-tracker-figure__out-of { color: var(--ic-dark-muted); }
.ic-tracker-figure__note { display: block; margin-top: var(--ic-space-sm); font-size: var(--ic-text-small); line-height: var(--ic-leading-snug); }
.ic-tracker-as-of { margin: var(--ic-space-md) 0 0; font-size: var(--ic-text-meta); color: var(--ic-text-muted); }

/* Every data section ends on its source, as the ADA tracker's do. */
.ic-tracker-source {
  margin: var(--ic-space-md) 0 0;
  max-width: var(--ic-reading-width);
  font-size: var(--ic-text-meta);
  color: var(--ic-text-muted);
}
.ic-tracker-source strong { color: var(--ic-text); font-weight: var(--ic-weight-semibold); }
/* Links in running tracker text are underlined: colour alone is not enough
   against the muted text around them (WCAG 1.4.1). */
.ic-tracker-source a,
.ic-tracker-note a,
.ic-tracker-as-of a,
.ic-tracker-lead a,
.ic-tracker-prose a,
.ic-tracker-citation a { text-decoration: underline; text-underline-offset: 2px; }
/* The wall's sticky header sits under the masthead too, so a focused row
   has to clear both (WCAG 2.4.11). */
html:has(.ic-tracker-table--sticky-head) { scroll-padding-top: calc(var(--ic-nav-height) + var(--ic-adminbar-offset) + 88px); }

/* --- Sections --- */
.ic-tracker-section { padding-top: var(--ic-space-3xl); }
.ic-tracker-section__title {
  font-family: var(--ic-font-display);
  font-weight: 400;
  font-size: var(--ic-h2);
  line-height: var(--ic-leading-tight);
  color: var(--ic-text-strong);
  margin: 0 0 var(--ic-space-lg);
}
.ic-tracker-note { margin: var(--ic-space-md) 0 0; max-width: var(--ic-reading-width); font-size: var(--ic-text-small); color: var(--ic-text-muted); }
.ic-tracker-subline { display: block; font-size: var(--ic-text-meta); color: var(--ic-text-muted); font-family: var(--ic-font-ui); }

/* --- The count: daily columns ---
   Nothing on a tracker scrolls but the page (Chad, 2026-10-03): columns
   shrink to fit the track, the gap shrinks with the width, and only the
   columns ic_mgt_col_class() marks keep their date and value. */
.ic-tracker-columns {
  display: flex;
  align-items: flex-end;
  gap: clamp(1px, 0.7%, var(--ic-space-sm));
  height: 200px;
  border-bottom: 1px solid var(--ic-text-strong);
}
.ic-tracker-columns__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  /* Wide enough for a price label ("$30.99" is about 50px) to sit over its
     own bar: at 44px two labelled neighbours ran into each other (ss4). */
  max-width: 64px;
  height: 100%;
}
.ic-tracker-columns__value,
.ic-tracker-columns__axis-label { visibility: hidden; white-space: nowrap; }
.ic-tracker-columns__column.is-label-wide .ic-tracker-columns__value,
.ic-tracker-columns__column.is-label-wide .ic-tracker-columns__axis-label { visibility: visible; }
/* Values centre over their bars (Chad, 2026-10-05). Edge dates hang inward
   so they never poke past the track. */
.ic-tracker-columns__column:first-child .ic-tracker-columns__axis-label { align-self: flex-start; }
.ic-tracker-columns__column:last-child:not(:first-child) .ic-tracker-columns__axis-label { align-self: flex-end; }
.ic-tracker-columns__bar {
  width: 100%;
  height: calc(var(--h) * 170px);
  min-height: 2px;
  background: var(--ic-accent);
  border-radius: var(--ic-radius-sm) var(--ic-radius-sm) 0 0;
  transform-origin: bottom;
  transition: transform 600ms var(--ic-ease);
}
.ic-tracker-columns__value { font-family: var(--ic-font-mono); font-size: var(--ic-text-small); color: var(--ic-text-strong); margin-bottom: var(--ic-space-xs); }
.ic-tracker-columns__axis-label { position: relative; top: var(--ic-space-lg); height: 0; font-size: var(--ic-text-meta); color: var(--ic-text-muted); white-space: nowrap; }
.ic-tracker-columns + .ic-tracker-note { margin-top: var(--ic-space-2xl); }

/* --- Tables --- */
/* Kept as a hook; it no longer scrolls. Narrow screens stack rows instead. */
.ic-tracker-table-wrap { overflow: visible; }
.ic-tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ic-text-small);
}
.ic-tracker-table th,
.ic-tracker-table td {
  padding: var(--ic-space-sm) var(--ic-space-md);
  border-bottom: 1px solid var(--ic-rule);
  text-align: left;
  vertical-align: top;
}
.ic-tracker-table thead th {
  /* A shade brighter than the page so the label row reads as its own band
     (Chad, 2026-10-05). Muted label ink gains contrast on it. */
  background: var(--ic-surface);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  letter-spacing: var(--ic-tracking-label);
  text-transform: uppercase;
  color: var(--ic-text-muted);
  border-bottom: 2px solid var(--ic-text-strong);
}
/* The wall's column labels pin under the fixed masthead (77px: the 76px
   inner plus its 1px rule) and the WP admin bar when it shows. Sticky only
   works when no ancestor scrolls, and nothing here scrolls. Under 900px the
   header is hidden and each row stacks (see the end of this file). */
.ic-tracker-table--sticky-head thead th {
  position: sticky;
  top: calc(var(--ic-nav-height) + 1px + var(--ic-adminbar-offset));
  z-index: 2;
  box-shadow: 0 1px 0 var(--ic-rule);
}
.ic-tracker-table tbody th { font-weight: var(--ic-weight-semibold); color: var(--ic-text-strong); }
.ic-tracker-number { font-family: var(--ic-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-tracker-table--sticky-head tr.is-buy-once { background: var(--ic-tint-green); }
/* Muted ink drops to 4.4:1 on the tint, so the highlighted row uses body ink. */
.ic-tracker-table--sticky-head tr.is-buy-once .ic-tracker-subline,
.ic-tracker-table--sticky-head tr.is-buy-once .ic-tracker-flag--no { color: var(--ic-text); }
/* Inline padding grows the title link's box to a 24px tap target (2.5.8)
   without touching the line. */
.ic-tracker-row-title a { padding-block: 4px; color: var(--ic-text-strong); text-decoration: none; }
.ic-tracker-row-title a:hover { color: var(--ic-link); text-decoration: underline; }
.ic-tracker-corrected {
  display: inline-block;
  margin-left: var(--ic-space-xs);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  color: var(--ic-link) !important;
}

.ic-tracker-sort {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ic-space-xs);
  /* 24px tap target (2.5.8): padding in, margin out, so the header row
     keeps its height. The chips under 900 reset the margin. */
  padding-block: 3px;
  margin-block: -3px;
}
.ic-tracker-sort:focus-visible { outline: 2px solid var(--ic-focus); outline-offset: 2px; }
.ic-tracker-sort__icon::after { content: ""; display: inline-block; width: 0.6em; }
th[aria-sort="ascending"] .ic-tracker-sort__icon::after { content: "\2191"; }
th[aria-sort="descending"] .ic-tracker-sort__icon::after { content: "\2193"; }

.ic-tracker-flag {
  display: inline-block;
  padding: 2px var(--ic-space-sm);
  border-radius: var(--ic-radius-sm);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-meta);
  font-weight: var(--ic-weight-medium);
  white-space: nowrap;
}
.ic-tracker-flag--yes { background: var(--ic-error-bg); color: var(--ic-error-fg); }
.ic-tracker-flag--no { color: var(--ic-text-muted); }
.ic-tracker-flag--unknown { background: var(--ic-bg-alt); color: var(--ic-text-muted); }

.ic-tracker-details { margin-top: var(--ic-space-lg); }
.ic-tracker-details summary { padding-block: 2px; margin-block: -2px; cursor: pointer; font-size: var(--ic-text-small); color: var(--ic-link); } /* 24px target, layout unchanged */
.ic-tracker-details .ic-tracker-table { margin-top: var(--ic-space-md); }

/* --- Wall controls --- */
.ic-tracker-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ic-space-md);
  margin-bottom: var(--ic-space-lg);
}
.ic-tracker-filter { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ic-rule); border-radius: var(--ic-radius); overflow: hidden; }
.ic-tracker-filter__button {
  border: 0;
  background: var(--ic-surface);
  padding: 0.55em 1em;
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-small);
  color: var(--ic-text);
  cursor: pointer;
}
.ic-tracker-filter__button + .ic-tracker-filter__button { border-left: 1px solid var(--ic-rule); }
.ic-tracker-filter__button[aria-pressed="true"] { background: var(--ic-dark-bg); color: var(--ic-dark-text); }
.ic-tracker-filter__button:focus-visible { outline: 2px solid var(--ic-focus); outline-offset: -2px; }
.ic-tracker-search__input {
  min-width: 16rem;
  padding: 0.55em 0.9em;
  border: 1px solid var(--ic-rule);
  border-radius: var(--ic-radius);
  background: var(--ic-surface);
  font: inherit;
  font-size: var(--ic-text-small);
  color: var(--ic-text);
}
.ic-tracker-search__input:focus { outline: 2px solid var(--ic-focus); outline-offset: 0; }
.ic-tracker-result-count { margin: 0; font-size: var(--ic-text-meta); color: var(--ic-text-muted); }

/* --- Bar ledgers --- */
.ic-tracker-bars { list-style: none; margin: 0; padding: 0; }
.ic-tracker-bars__row {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) 1fr 6.5rem;
  align-items: center;
  gap: var(--ic-space-md);
  padding: var(--ic-space-sm) 0;
  border-bottom: 1px solid var(--ic-rule-soft);
}
.ic-tracker-bars__label { font-size: var(--ic-text-small); color: var(--ic-text-strong); }
.ic-tracker-bars__track { height: 12px; background: var(--ic-bg-alt); border-radius: var(--ic-radius-sm); overflow: hidden; }
.ic-tracker-bars__fill {
  display: block;
  height: 100%;
  background: var(--ic-accent);
  transform: scaleX(var(--w));
  transform-origin: left;
  transition: transform 600ms var(--ic-ease);
}
.ic-tracker-bars__count { font-family: var(--ic-font-mono); font-size: var(--ic-text-small); text-align: right; color: var(--ic-text); }

/* Grow-in, only once JS is running and only until the block is seen. */
.ic-tracker-js .ic-tracker-bars:not(.is-in-view) .ic-tracker-bars__fill { transform: scaleX(0); }
.ic-tracker-js .ic-tracker-columns:not(.is-in-view) .ic-tracker-columns__bar { transform: scaleY(0); }

/* --- History, evidence, player reports --- */
.ic-tracker-lead {
  max-width: var(--ic-reading-width);
  margin: 0 0 var(--ic-space-xl);
  font-size: var(--ic-text-lede);
  line-height: var(--ic-leading-snug);
  color: var(--ic-text-strong);
}
.ic-tracker-columns--years .ic-tracker-columns__column { flex-basis: 56px; }
.ic-tracker-table tr.is-price-up td strong { color: var(--ic-error-fg); }
.ic-tracker-evidence td .ic-tracker-flag { margin: 0 var(--ic-space-xs) var(--ic-space-xs) 0; }
.ic-tracker-evidence .ic-tracker-subline a, .ic-tracker-evidence a.ic-tracker-subline { color: var(--ic-link); }
.ic-tracker-player-quotes { margin-top: var(--ic-space-sm); }
.ic-tracker-player-quotes summary { cursor: pointer; font-size: var(--ic-text-meta); color: var(--ic-link); }
.ic-tracker-player-quotes ul { margin: var(--ic-space-sm) 0 0; padding-left: 1.1em; max-width: 34rem; }
.ic-tracker-player-quotes li { margin-bottom: var(--ic-space-sm); font-size: var(--ic-text-small); line-height: var(--ic-leading-snug); }
.ic-tracker q, .ic-tracker-player-quotes q { quotes: "\201C" "\201D"; font-style: italic; }
.ic-tracker-entries q { display: block; margin: var(--ic-space-xs) 0; }

/* --- Market context --- */
.ic-tracker-note--lead { margin: 0 0 var(--ic-space-xl); }
.ic-tracker-market {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ic-space-2xl);
}
.ic-tracker-market__title {
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
  font-weight: var(--ic-weight-semibold);
  letter-spacing: var(--ic-tracking-label);
  text-transform: uppercase;
  color: var(--ic-accent-deep);
  margin: 0 0 var(--ic-space-sm);
  padding-bottom: var(--ic-space-sm);
  border-bottom: 2px solid var(--ic-text-strong);
}
.ic-tracker-market__list { list-style: none; margin: 0; padding: 0; }
/* A group that spans the section and sets its figures side by side, --across
   to a row (ic_mgt_market_across). From three across, a column is too narrow
   for the value beside its label, so the value sits on top. */
.ic-tracker-market__group--across { grid-column: 1 / -1; }
.ic-tracker-market__group--across .ic-tracker-market__list {
  display: grid;
  grid-template-columns: repeat(var(--across), minmax(0, 1fr));
  column-gap: var(--ic-space-2xl);
}
.ic-tracker-market__group--value-on-top .ic-tracker-market-figure { grid-template-columns: 1fr; row-gap: var(--ic-space-xs); }
.ic-tracker-market__group--value-on-top .ic-tracker-market-figure__value { grid-row: auto; }
.ic-tracker-market-figure {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  column-gap: var(--ic-space-lg);
  padding: var(--ic-space-md) 0;
  border-bottom: 1px solid var(--ic-rule);
}
.ic-tracker-market-figure__value {
  grid-row: span 4;
  font-family: var(--ic-font-mono);
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ic-text-strong);
}
.ic-tracker-market-figure__label { font-weight: var(--ic-weight-semibold); color: var(--ic-text-strong); }
.ic-tracker-market-figure__meta,
.ic-tracker-market-figure__note { font-size: var(--ic-text-small); color: var(--ic-text-muted); line-height: var(--ic-leading-snug); }
.ic-tracker-market-figure__source { margin-top: var(--ic-space-xs); font-size: var(--ic-text-meta); }
.ic-tracker-market-figure__type {
  display: inline-block;
  margin-left: var(--ic-space-sm);
  padding: 1px var(--ic-space-sm);
  border-radius: var(--ic-radius-sm);
  background: var(--ic-bg-alt);
  color: var(--ic-text-muted);
  font-family: var(--ic-font-ui);
  font-size: var(--ic-text-label);
}
.ic-tracker-market-figure__type--primary { background: var(--ic-tint-green); color: var(--ic-accent-deep); }

@media (max-width: 900px) {
  .ic-tracker-market { grid-template-columns: 1fr; }
  .ic-tracker-market__group--across .ic-tracker-market__list { grid-template-columns: 1fr; }
}
/* At 320 the value column plus a label and its type chip ran 14px past the
   edge (WCAG 1.4.10): the value goes above instead. */
@media (max-width: 480px) {
  .ic-tracker-market-figure { grid-template-columns: 1fr; row-gap: var(--ic-space-xs); }
  .ic-tracker-market-figure__value { grid-row: auto; }
}

/* --- Prose, cite, changelog --- */
.ic-tracker-prose p,
.ic-tracker-citation p,
.ic-tracker-changelog p { max-width: var(--ic-reading-width); line-height: var(--ic-leading-body); }
.ic-tracker-citation {
  margin-top: var(--ic-space-3xl);
  padding: var(--ic-space-xl);
  background: var(--ic-bg-alt);
  border-left: 3px solid var(--ic-accent);
  border-radius: var(--ic-radius);
}
.ic-tracker-citation .ic-tracker-section__title { margin-top: 0; }
.ic-tracker-downloads { margin: var(--ic-space-md) 0; padding-left: 1.2em; }
.ic-tracker-downloads li { margin-bottom: var(--ic-space-xs); }
.ic-tracker-entries { padding-left: 1.2em; max-width: var(--ic-reading-width); }
.ic-tracker-entries li { margin-bottom: var(--ic-space-sm); }
.ic-tracker-changelog__list { list-style: none; margin: 0; padding: 0; }
.ic-tracker-changelog__list li { padding: var(--ic-space-md) 0; border-bottom: 1px solid var(--ic-rule); }
.ic-tracker-changelog__version-line { display: flex; flex-wrap: wrap; gap: var(--ic-space-md); align-items: baseline; margin: 0 0 var(--ic-space-xs); font-family: var(--ic-font-ui); font-size: var(--ic-text-small); }
.ic-tracker-changelog__version-line strong { font-family: var(--ic-font-mono); }

@media (max-width: 900px) {
  .ic-tracker-figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-tracker-figure--lead { grid-column: 1 / -1; grid-row: auto; }
  .ic-tracker-bars__row { grid-template-columns: 1fr 5.5rem; }
  .ic-tracker-bars__track { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 600px) {
  .ic-tracker-search__input { min-width: 0; width: 100%; }
  .ic-tracker-search { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .ic-tracker-columns__column.is-label-wide .ic-tracker-columns__value,
  .ic-tracker-columns__column.is-label-wide .ic-tracker-columns__axis-label { visibility: hidden; }
  .ic-tracker-columns__column.is-label-narrow .ic-tracker-columns__value,
  .ic-tracker-columns__column.is-label-narrow .ic-tracker-columns__axis-label { visibility: visible; }
  .ic-tracker-columns__value { font-size: var(--ic-text-meta); }
}

/* --- Tight tables ---
   From 900 to 1100 the wall's seven columns only just fit, so cells give up
   some padding and a sub-line may wrap. Measured 2026-10-03: the wall wants
   875px with the default padding. */
@media (max-width: 1100px) {
  .ic-tracker-table th,
  .ic-tracker-table td { padding: var(--ic-space-sm) 10px; }
  .ic-tracker-table .ic-tracker-subline { white-space: normal; }
}

/* --- Stacked tables ---
   Under 900px a table row becomes a block of label / value lines, the label
   floated beside its value from the data-label every cell carries
   (ic_mgt_label_tables). Under 900 every tracker table is wider than its
   column (the wall needs 875px, the history tables about 780), and the body
   clips sideways overflow, so a row that did not stack lost its right edge
   on every iPad in portrait. The header stays in the markup for screen
   readers. */
@media (max-width: 899px) {
  .ic-tracker-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ic-tracker-table,
  .ic-tracker-table tbody,
  .ic-tracker-table tr { display: block; width: 100%; }
  .ic-tracker-table tr { padding: var(--ic-space-sm) 0; border-bottom: 1px solid var(--ic-rule); }
  .ic-tracker-table tbody th,
  .ic-tracker-table td {
    display: flow-root;
    padding: 3px 0;
    border: 0;
    white-space: normal;
  }
  .ic-tracker-table [data-label]::before {
    content: attr(data-label);
    float: left;
    width: 42%;
    margin-right: var(--ic-space-md);
    font-family: var(--ic-font-ui);
    font-size: var(--ic-text-label);
    font-weight: var(--ic-weight-semibold);
    letter-spacing: var(--ic-tracking-label);
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--ic-text-muted);
  }
  .ic-tracker-number { white-space: normal; }
  /* A header with sort buttons cannot hide: hidden focusable buttons would
     take keyboard focus nobody can see (WCAG 2.4.7). It becomes a row of
     sort chips above the stacked rows instead. */
  .ic-tracker-table:has(.ic-tracker-sort) thead {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    margin-bottom: var(--ic-space-sm);
  }
  .ic-tracker-table:has(.ic-tracker-sort) thead tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ic-space-xs);
    padding: 0;
    border: 0;
  }
  .ic-tracker-table:has(.ic-tracker-sort) thead tr::before {
    content: "Sort";
    margin-right: var(--ic-space-xs);
    font-family: var(--ic-font-ui);
    font-size: var(--ic-text-label);
    font-weight: var(--ic-weight-semibold);
    letter-spacing: var(--ic-tracking-label);
    text-transform: uppercase;
    color: var(--ic-text-muted);
  }
  .ic-tracker-table:has(.ic-tracker-sort) thead th {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .ic-tracker-table:has(.ic-tracker-sort) .ic-tracker-sort {
    padding: 6px 10px;
    border: 1px solid var(--ic-rule);
    border-radius: var(--ic-radius);
    margin-block: 0;
    background: var(--ic-surface);
    color: var(--ic-text);
    letter-spacing: 0.04em;
  }
  .ic-tracker-table:has(.ic-tracker-sort) th[aria-sort] .ic-tracker-sort { border-color: var(--ic-text-strong); color: var(--ic-text-strong); }
  /* The game is the row's title, so it drops its label and leads. */
  .ic-tracker-table--sticky-head tbody th { font-size: 1rem; }
  .ic-tracker-table--sticky-head tbody th::before { content: none; }
  .ic-tracker-table--sticky-head tr.is-buy-once { padding-inline: var(--ic-space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .ic-tracker-bars__fill, .ic-tracker-columns__bar { transition: none; }
  .ic-tracker-js .ic-tracker-bars:not(.is-in-view) .ic-tracker-bars__fill { transform: scaleX(var(--w)); }
  .ic-tracker-js .ic-tracker-columns:not(.is-in-view) .ic-tracker-columns__bar { transform: none; }
}