/* vexjoy-design: macro=timeline theme=championship-dossier contrast=pass nav=analytics-tabs footer=existing mobile=pass */
/* Analytics Hub (adr/five-star-analytics-hub.md) — shared chrome, tables,
   and widgets for /analytics, /analytics/wrestlers, /analytics/rankings.
   Chrome (surfaces, hairlines, radii, shadows, type scale, tabular
   numerals) reads the --an-* token layer from an-tokens.css (loaded before
   this file by analytics_base.html; the same tokens drive the ECharts
   "fiveStar" theme in an-viz.js). Brand gold, plates, and polarity colors
   stay on the validated --fs-* tokens from five-star.css; no new color
   language. */

.an-page {
  background: var(--an-bg, var(--fs-black));
  color: var(--an-ink);
  min-height: 100vh;
  /* Chart color tokens (beauty pass 2026-07-24, plans/active/
     analytics-hub-beauty-pass.md). Validated with the dataviz palette
     validator against the panel surface #101014 (dark mode):
     - ordinal gold ramp (grade donuts, best grade brightest):
       monotone lightness, adjacent gaps >= 0.06, dark end 2.58:1.
     - loss red and the voting diverging poles clear 4.5:1 as text and
       CVD deltaE >= 8 against each other; sign/identity is always also
       carried by glyphs and labels, never color alone. */
  --an-ord-1: #FFEFB8;
  --an-ord-2: #F2D374;
  --an-ord-3: #C9982E;
  --an-ord-4: #A87E1F;
  --an-ord-5: #6E5113;
  /* Round 2 (2026-07-24): polarity moved to the validated fs tokens in
     five-star.css (--fs-rise/--fs-fall/--fs-info + -fill steps). --an-loss
     stays as the FALLING FILL step (#E4572E, same hex as --fs-fall-fill);
     falling/overrated TEXT now wears --fs-fall (#FF6B4A). */
  --an-loss: var(--fs-fall-fill, #E4572E); /* falling / overrated large fills */
  --an-under: var(--fs-info, #1B98DD);     /* voting "underrated" diverging pole */
  --an-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.an-context-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  color: var(--an-ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.an-context-nav a {
  color: var(--an-accent);
  text-decoration: none;
}

.an-context-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.an-context-nav a:focus-visible {
  border-radius: 0.2rem;
  outline: 2px solid var(--an-accent);
  outline-offset: 0.2rem;
}

.an-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ---------- Topbar ---------- */
.an-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 16px;
}
.an-brand {
  font-family: var(--fs-display-font);
  font-size: 1rem;
  color: var(--fs-gold-1);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.an-brand:hover { text-decoration: underline; }
.an-brand-sub {
  font-size: var(--an-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--an-ink-3);
  border: 1px solid var(--an-border);
  border-radius: 4px;
  padding: 2px 8px;
}
.an-back {
  margin-left: auto;
  color: var(--an-ink-2);
  font-size: 0.8rem;
  text-decoration: none;
}
.an-back:hover { color: var(--an-ink); text-decoration: underline; }

/* ---------- Tab bar (same visual language as .dlb-tabs) ---------- */
.an-skip {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: var(--fs-ink-on-gold);
  background: var(--fs-gold-2);
  border-radius: var(--an-radius-sm);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
}
.an-skip:focus {
  transform: translateY(0);
}
.an-app-frame {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.an-content {
  min-width: 0;
}
.an-side-rail {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 14px 10px 16px;
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  background:
    linear-gradient(155deg, rgba(242, 211, 116, 0.055), transparent 44%),
    var(--an-surface-1);
  box-shadow: var(--an-shadow-1);
  scrollbar-width: thin;
}
.an-side-rail-kicker {
  display: block;
  margin: 0 8px 12px;
  color: var(--fs-gold-1);
  font-family: var(--fs-display-font);
  font-size: var(--an-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.an-nav-group + .an-nav-group {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--an-border-soft);
}
.an-nav-group h2 {
  margin: 0 8px 5px;
  color: var(--an-ink-3);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.an-nav-group > div {
  display: grid;
  gap: 2px;
}
.an-nav-branch {
  min-width: 0;
}
.an-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 9px;
  color: var(--an-ink-2);
  border-radius: var(--an-radius-sm);
  font-size: var(--an-text-xs);
  font-weight: 680;
  line-height: 1.2;
  text-decoration: none;
}
.an-nav-link:hover {
  color: var(--an-ink);
  background: var(--an-surface-3);
}
.an-nav-link.is-current {
  color: var(--fs-ink-on-gold);
  background: var(--fs-gold-2);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
}
.an-nav-link.is-parent-current {
  color: var(--fs-gold-1);
  background: var(--an-surface-3);
}
.an-nav-children {
  display: grid;
  gap: 3px;
  margin: 3px 0 5px 11px;
  padding: 2px 0 2px 9px;
  border-left: 1px solid var(--an-border-interactive);
}
.an-nav-child {
  display: grid;
  gap: 2px;
  min-height: 38px;
  padding: 7px 8px;
  color: var(--an-ink-2);
  border-radius: var(--an-radius-sm);
  font-size: 0.72rem;
  line-height: 1.2;
  text-decoration: none;
}
.an-nav-child span {
  font-weight: 760;
}
.an-nav-child small {
  display: none;
  color: var(--an-ink-3);
  font-size: 0.65rem;
  line-height: 1.35;
}
.an-nav-child:hover {
  color: var(--an-ink);
  background: var(--an-surface-3);
}
.an-nav-child.is-current {
  color: var(--fs-gold-1);
  background: color-mix(in srgb, var(--fs-gold-2) 11%, var(--an-surface-2));
  box-shadow: inset 2px 0 0 var(--fs-gold-2);
}
.an-nav-link:focus-visible,
.an-nav-child:focus-visible,
.an-destination-button:focus-visible,
.an-nav-sheet-close:focus-visible {
  outline: 2px solid var(--fs-gold-1);
  outline-offset: 2px;
}
.an-mobile-destination,
.an-nav-sheet {
  display: none;
}
.an-nav-sheet[hidden] {
  display: none !important;
}
.an-nav-open {
  overflow: hidden;
}
@media (max-width: 820px) {
  .an-app-frame {
    display: block;
  }
  .an-side-rail {
    display: none;
  }
  .an-mobile-destination {
    display: block;
    margin-bottom: 18px;
  }
  .an-destination-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 58px;
    padding: 10px 14px;
    color: var(--an-ink);
    background:
      linear-gradient(135deg, rgba(242, 211, 116, 0.09), transparent 65%),
      var(--an-surface-1);
    border: 1px solid var(--an-border-interactive);
    border-radius: var(--an-radius-md);
    box-shadow: var(--an-shadow-1);
    cursor: pointer;
    font: inherit;
    text-align: left;
  }
  .an-destination-button > span:first-child {
    display: grid;
    gap: 2px;
  }
  .an-destination-button small {
    color: var(--an-ink-3);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .an-destination-button strong {
    color: var(--fs-gold-1);
    font-family: var(--fs-display-font);
    font-size: var(--an-text-md);
  }
  .an-destination-button > span:last-child {
    flex: none;
    color: var(--an-ink-2);
    font-size: var(--an-text-xs);
    font-weight: 750;
  }
  .an-nav-sheet {
    position: fixed;
    z-index: 9000;
    inset: 0;
    display: block;
  }
  .an-nav-sheet-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    background: rgba(0, 0, 0, 0.72);
    border: 0;
  }
  .an-nav-sheet-panel {
    position: absolute;
    inset: auto 0 0;
    max-height: min(88vh, 760px);
    overflow-y: auto;
    padding: 18px max(16px, env(safe-area-inset-right))
      max(22px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    background:
      linear-gradient(145deg, rgba(242, 211, 116, 0.07), transparent 45%),
      var(--an-surface-1);
    border-top: 1px solid var(--an-border-interactive);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.46);
  }
  .an-nav-sheet-panel > header {
    position: sticky;
    z-index: 1;
    top: -18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: -18px -4px 12px;
    padding: 18px 4px 12px;
    background: color-mix(in srgb, var(--an-surface-1) 94%, transparent);
    backdrop-filter: blur(14px);
  }
  .an-nav-sheet-panel header small {
    color: var(--fs-gold-1);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  .an-nav-sheet-panel header h2 {
    margin: 2px 0 0;
    color: var(--an-ink);
    font-family: var(--fs-display-font);
    font-size: var(--an-text-lg);
  }
  .an-nav-sheet-close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    color: var(--an-ink);
    background: var(--an-surface-3);
    border: 1px solid var(--an-border);
    border-radius: 50%;
    cursor: pointer;
    font: 1.7rem/1 system-ui, sans-serif;
  }
  .an-nav-tree--sheet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .an-nav-tree--sheet .an-nav-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .an-nav-tree--sheet .an-nav-link {
    min-height: 48px;
    padding: 10px;
  }
  .an-nav-tree--sheet .an-nav-children {
    margin: 4px 0 0 8px;
    padding: 3px 0 3px 10px;
  }
  .an-nav-tree--sheet .an-nav-child {
    min-height: 48px;
    padding: 9px 10px;
  }
  .an-nav-tree--sheet .an-nav-child small {
    display: block;
  }
}
@media (max-width: 480px) {
  .an-nav-tree--sheet {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .an-nav-group + .an-nav-group {
    padding-top: 12px;
    border-top: 1px solid var(--an-border-soft);
  }
}
.an-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--an-border);
  padding-bottom: 10px;
}
.an-tab {
  padding: 8px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-family: var(--fs-display-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--an-surface-2);
  color: var(--an-ink-2);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-sm);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.an-tab:hover { background: var(--an-surface-3); color: var(--an-ink); }
.an-tab--on {
  background: var(--fs-gold-2);
  color: var(--fs-ink-on-gold);
  border-color: var(--fs-gold-2);
}

.an-content h1 {
  font-family: var(--fs-display-font);
  font-size: 1.4rem;
  color: var(--fs-gold-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}
.an-sub {
  color: var(--an-ink-2);
  font-size: 0.85rem;
  margin: 0 0 20px;
}

/* ---------- Hero counters ---------- */
.an-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.an-hero-card {
  /* Stat plaque: gold strip top rule + a soft gold sheen behind the number
     so the plaque reads as a lit broadcast graphic, not a form field. */
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(140px 70px at 50% 0%, var(--fs-gold-soft), transparent 75%),
    var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
  padding: 16px 12px 14px;
  text-align: center;
}
.an-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fs-strip);
}
.an-hero-value {
  font-family: var(--fs-display-font);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  color: var(--fs-gold-hi);
  line-height: 1.1;
}
.an-hero-label {
  font-size: var(--an-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--an-ink-3);
  margin-top: 4px;
}
@media (max-width: 640px) {
  .an-hero-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Event dossier ---------- */
.an-event-profile {
  min-width: 0;
}
.an-event-mast {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 0;
  padding: 22px 24px;
  border: 1px solid var(--an-border);
  border-bottom: 0;
  border-radius: var(--an-radius-md) var(--an-radius-md) 0 0;
  background:
    linear-gradient(135deg, var(--fs-gold-soft), transparent 46%),
    var(--an-surface-1);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
}
.an-event-kicker,
.an-event-section-head span,
.an-event-source span {
  color: var(--an-accent);
  font-size: var(--an-text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.an-event-mast h1 {
  max-width: 22ch;
  margin: 6px 0 8px;
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  line-height: 1.03;
  overflow-wrap: anywhere;
}
.an-event-deck {
  max-width: 65ch;
  margin: 0;
  color: var(--an-ink-2);
  font-size: var(--an-text-sm);
  line-height: 1.55;
}
.an-event-facts {
  display: grid;
  gap: 12px;
  margin: 0;
}
.an-event-facts > div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid var(--an-border-interactive);
}
.an-event-facts dt {
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.an-event-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--an-ink);
  font-size: var(--an-text-xs);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.an-event-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
  border: 1px solid var(--an-border);
  border-radius: 0 0 var(--an-radius-md) var(--an-radius-md);
  background: var(--an-surface-2);
  box-shadow: var(--an-shadow-1);
}
.an-event-stat {
  display: grid;
  min-width: 0;
  min-height: 94px;
  align-content: center;
  gap: 5px;
  padding: 16px 18px;
}
.an-event-stat + .an-event-stat {
  border-left: 1px solid var(--an-border);
}
.an-event-stat-value,
.an-event-stat-label {
  display: block;
  min-width: 0;
}
.an-event-stat-value {
  color: var(--fs-gold-hi);
  font-family: var(--fs-display-font);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1;
  overflow-wrap: anywhere;
}
.an-event-stat-value.is-text {
  font-size: clamp(0.92rem, 1.8vw, 1.2rem);
  line-height: 1.15;
}
.an-event-stat-label {
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  font-weight: 750;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.an-event-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  background: var(--an-surface-1);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
}
.an-event-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px 15px;
}
.an-event-section-head h2 {
  margin: 4px 0 0;
  color: var(--an-ink);
  font-family: var(--fs-display-font);
  font-size: var(--an-text-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.an-event-section-head > strong {
  color: var(--an-ink-3);
  font-size: var(--an-text-xs);
}
.an-event-card .an-table-wrap {
  border: 0;
  border-top: 1px solid var(--an-border);
  border-radius: 0;
}
.an-event-table tbody tr:hover {
  background: var(--an-surface-2);
}
.an-event-table td {
  vertical-align: top;
}
.an-event-card-position {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--fs-ink-on-gold);
  background: var(--fs-gold-2);
  border-radius: 50%;
  font-size: var(--an-text-xs);
  font-weight: 850;
}
.an-event-flag {
  display: block;
  margin-top: 7px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
}
.an-event-match-type,
.an-event-finish,
.an-event-duration,
.an-event-match-note,
.an-event-muted,
.an-event-title {
  display: block;
}
.an-event-match-type,
.an-event-finish {
  color: var(--an-ink);
  font-size: var(--an-text-xs);
}
.an-event-match-note,
.an-event-duration,
.an-event-muted {
  margin-top: 4px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.an-event-title {
  color: var(--an-ink-2);
  font-size: var(--an-text-xs);
  font-weight: 700;
  line-height: 1.4;
}
.an-event-title + .an-event-title {
  margin-top: 5px;
}
.an-event-participants {
  display: grid;
  min-width: 0;
}
.an-event-participant {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(76px, auto);
  gap: 8px 14px;
  align-items: start;
  min-width: 0;
}
.an-event-participant + .an-event-participant {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--an-border-soft);
}
.an-event-person {
  min-width: 0;
  color: var(--an-accent);
  font-size: var(--an-text-xs);
  font-weight: 750;
  line-height: 1.35;
  text-decoration-color: color-mix(in srgb, var(--an-accent) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.an-event-person:hover {
  color: var(--an-ink);
  text-decoration-color: var(--an-accent);
}
.an-event-person:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--an-accent);
  outline-offset: 2px;
}
.an-event-participant small {
  display: grid;
  gap: 3px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  line-height: 1.35;
}
.an-event-result {
  width: fit-content;
  color: var(--an-ink-2);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.an-event-result--win {
  color: var(--fs-rise);
}
.an-event-result--loss {
  color: var(--an-ink-3);
}
.an-event-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  background: var(--an-surface-1);
}
.an-event-source > div {
  display: grid;
  gap: 3px;
}
.an-event-source strong {
  color: var(--an-ink);
  font-size: var(--an-text-sm);
}
.an-event-source-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  color: var(--an-accent);
  border: 1px solid var(--an-border-interactive);
  border-radius: var(--an-radius-sm);
  font-size: var(--an-text-xs);
  font-weight: 800;
  text-decoration: none;
}
.an-event-source-link:hover {
  color: var(--an-ink);
  border-color: var(--an-accent);
  background: var(--an-surface-2);
}
.an-event-source-link:focus-visible {
  outline: 2px solid var(--an-accent);
  outline-offset: 2px;
}
@media (max-width: 840px) {
  .an-event-mast {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .an-event-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .an-event-facts > div {
    display: block;
  }
  .an-event-facts dd {
    margin-top: 4px;
  }
}
@media (max-width: 640px) {
  .an-event-mast {
    gap: 18px;
    padding: 18px 16px;
  }
  .an-event-mast h1 {
    font-size: 1.55rem;
  }
  .an-event-facts {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .an-event-facts > div {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .an-event-facts dd {
    margin-top: 0;
  }
  .an-event-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .an-event-stat {
    min-height: 86px;
    padding: 13px 14px;
  }
  .an-event-stat:nth-child(3) {
    border-left: 0;
  }
  .an-event-stat:nth-child(n + 3) {
    border-top: 1px solid var(--an-border);
  }
  .an-event-section-head {
    align-items: center;
    padding: 15px 14px 13px;
  }
  .an-event-table {
    min-width: 0;
  }
  .an-event-table .an-event-participant {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  .an-event-table .an-event-participant small {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 6px;
  }
  .an-event-source {
    display: grid;
    gap: 12px;
  }
  .an-event-source-link {
    justify-content: center;
  }
}

/* ---------- Today's hot stats ---------- */
.an-hot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.an-hot-card {
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-left: 3px solid var(--fs-gold-3);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
  padding: 12px 14px;
}
.an-hot-label {
  font-size: var(--an-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--an-ink-3);
  margin: 0 0 6px;
}
.an-hot-value {
  font-weight: 700;
  color: var(--an-ink);
  font-size: 0.95rem;
}
.an-hot-meta {
  color: var(--an-ink-2);
  font-size: 0.78rem;
  margin-top: 2px;
}
.an-hot-empty { color: var(--an-ink-3); font-style: normal; }

/* ---------- Quick link cards ---------- */
.an-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.an-quick-card {
  display: block;
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
  padding: 16px;
  text-decoration: none;
  color: var(--an-ink);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.an-quick-card:hover {
  border-color: var(--fs-gold-2);
  transform: translateY(-1px);
  box-shadow: var(--an-shadow-2), var(--an-shadow-lip);
}
.an-quick-title {
  font-family: var(--fs-display-font);
  color: var(--fs-gold-1);
  font-size: 0.95rem;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.an-quick-hook { color: var(--an-ink-2); font-size: 0.82rem; }
.an-quick-soon { color: var(--an-ink-3); font-size: 0.72rem; margin-top: 8px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Filter bar ---------- */
.an-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.an-filters select,
.an-filters input {
  min-height: 44px;
}
.an-filters .fs-search { min-width: 180px; }
.an-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--an-ink-2);
  font-size: 0.82rem;
  min-height: 44px;
}
/* A class-level `display` outranks the browser's own [hidden] rule, so
   Rankings' "Active era only" wrapper stayed on screen while its own JS had
   already marked it hidden for single-promotion views. Surfaced by promotion
   deep links, which land on a single-promotion view in the very first paint
   instead of only after a click. */
.an-filter-check[hidden] {
  display: none;
}
.an-sort-note {
  color: var(--an-ink-3);
  font-size: 0.78rem;
  margin: -6px 0 14px;
}

/* ---------- Data table (extends the .fs-search / dark-panel language into
   a real sortable, zebra-striped, sticky-header table) ---------- */
.an-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  -webkit-overflow-scrolling: touch;
}
table.an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 640px;
}
.an-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--an-surface-2);
  color: var(--an-ink-3);
  text-transform: uppercase;
  font-size: var(--an-text-2xs);
  letter-spacing: 0.06em;
  text-align: left;
  padding: 13px 12px;
  border-bottom: 1px solid var(--an-border);
  white-space: nowrap;
}
.an-table th.an-sortable {
  cursor: pointer;
  user-select: none;
  min-height: 44px;
}
.an-table th.an-sortable:hover { color: var(--an-ink); }
.an-table th.an-sortable::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.35;
}
.an-table th.an-sort-desc::after {
  border-top: 5px solid var(--fs-gold-1);
  opacity: 1;
}
.an-table th.an-sort-asc::after {
  border-bottom: 5px solid var(--fs-gold-1);
  opacity: 1;
}
.an-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--an-border-soft);
  color: var(--an-ink);
  vertical-align: middle;
}
.an-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.an-table tbody tr:hover { background: var(--an-surface-3); }
a.an-row-link {
  /* Was plain white: identical to surrounding body text, so nothing on the
     page read as a link. Gold is the existing brand link/emphasis color
     (an-brand, sort arrows, sparkline stroke) - reuse it so every wrestler
     name pops as clickable against the black background instead of only
     revealing itself on hover. Deliberately NOT scoped to .an-table: the
     Analytics Hub visual redesign (2026-07-23) reuses this same class for
     wrestler-profile links inside bar-chart rows (Records, Biggest Movers),
     outside any table, and those need the identical gold treatment instead
     of falling back to default blue/underlined browser links. */
  color: var(--fs-gold-1);
  text-decoration: none;
  font-weight: 600;
}
a.an-row-link:hover { text-decoration: underline; }
/* Whole-row tap targets (2026-07 fresh-eyes S2, AC.rowTap): the name link
   alone was a 15-20px target on phones. The row itself now navigates; the
   link stays the keyboard/AT target. Hover matches the existing
   .an-table tbody tr:hover tint so tables and non-table rows read the same.
   On touch layouts, table rows grow to a >=44px hit area. */
.an-row-tap { cursor: pointer; }
.an-row-tap:hover,
.an-row-tap:focus-within { background: var(--an-surface-3); }
@media (pointer: coarse), (max-width: 640px) {
  .an-table tbody tr.an-row-tap > td {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}
/* Second line under a wrestler name in a table row (Booker Stats active
   leaderboard: which promotion ran their last real match, and when). Muted
   and small so the name still leads the row. */
.an-row-meta {
  display: block;
  color: var(--an-ink-2);
  font-size: 0.74rem;
  font-weight: 400;
  margin-top: 2px;
}
.an-table .an-num { text-align: right; font-variant-numeric: var(--an-numeric); }
.an-table .an-muted { color: var(--an-ink-3); }

/* Sparkline cell */
.an-spark { display: inline-block; vertical-align: middle; }
.an-spark-empty { color: var(--an-ink-3); font-size: var(--an-text-xs); }

/* Pagination */
.an-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--an-ink-2);
}
.an-pagination button {
  min-height: 44px;
  min-width: 44px;
  background: var(--an-surface-2);
  color: var(--an-ink);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-sm);
  cursor: pointer;
}
.an-pagination button:hover:not(:disabled) { background: var(--an-surface-3); }
.an-pagination button:disabled { opacity: 0.4; cursor: default; }

/* Skeleton loading (not a blank flash) */
.an-skel-row { display: flex; gap: 10px; padding: 9px 12px; }
.an-skel-block {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--an-surface-2) 25%, var(--an-surface-3) 37%, var(--an-surface-2) 63%);
  background-size: 400% 100%;
  animation: an-skel-shimmer 1.4s ease infinite;
}
@keyframes an-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.an-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--an-ink-2);
}
/* Branded empty state: a dimmed outline star (the brand mark) above the
   fan-voice line, so "no data yet" is a moment, not a shrug. */
.an-empty::before {
  content: "\2606";
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--fs-gold-3);
  opacity: 0.8;
  margin-bottom: 8px;
}

/* Caveat / tooltip note (cross-promotion disclosure, etc.) */
/* `display` on a class beats the browser's [hidden] rule, so every template
   that ships a caveat pre-rendered and toggles it from JS was painting an
   empty bordered pill with a lone "i" in it until its condition fired. Rankings,
   Records (twice), Movers and Front Office all do that. Restore the intent. */
.an-caveat[hidden] {
  display: none;
}
.an-caveat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--an-text-xs);
  color: var(--an-ink-3);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-sm);
  padding: 6px 10px;
  margin-bottom: 12px;
}
.an-caveat-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--an-ink-3);
  font-size: 0.65rem;
  flex: none;
}
/* An info mark carrying a Floating UI tooltip (AC.attachTips) is
   interactive chrome: interactive-strength border, help cursor, and the
   shared token focus ring (an-tokens.css .an-focusable). Inside a sortable
   th it must not inherit the header's uppercase shout. */
.an-caveat-mark[data-an-tip] {
  cursor: help;
  border-color: var(--an-border-interactive);
  color: var(--an-ink-2);
  text-transform: none;
  vertical-align: middle;
}

/* Shared deep-link notice (analytics_base.html): shown when a shared
   /analytics/...?promotion=<value> link named a promotion we do not have.
   Sits above the page title on purpose, because it is about the link the
   reader just followed, not about the data underneath it. */
.an-deeplink-note {
  font-size: var(--an-text-sm);
  color: var(--an-ink-2);
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-left: 3px solid var(--fs-info);
  border-radius: var(--an-radius-sm);
  padding: 10px 12px;
  margin: 0 0 16px;
}

/* Era scope line (analytics_base.html). Same plaque as the deep-link note but
   a different job, so it keeps its own class: this one explains that the
   selected promotion is an ERA of a company (WWF is the WWE row, 1979-2001)
   and that its ratings are a slice of one continuous series. Gold rule rather
   than blue, because it describes the data, not the link you followed. */
.an-era-note {
  font-size: var(--an-text-sm);
  color: var(--an-ink-2);
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-left: 3px solid var(--an-accent);
  border-radius: var(--an-radius-sm);
  padding: 10px 12px;
  margin: 0 0 16px;
}

/* Rankings controls */
.an-ranking-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.an-date-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 220px;
}
.an-date-slider-wrap input[type="range"] { width: 100%; min-height: 32px; }
.an-date-readout { font-size: 0.8rem; color: var(--fs-gold-1); }

@media (max-width: 480px) {
  .an-shell { padding: 12px 10px 32px; }
  .an-hero-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Section headers (reused across Matchup Lab / Booker Stats /
   Voting for "Discovery", "Grade distribution", etc. sub-headings) ---------- */
.an-section-title {
  font-family: var(--fs-display-font);
  font-size: 1rem;
  color: var(--an-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 24px 0 10px;
}
.an-section-title:first-child { margin-top: 0; }

/* ---------- Matchup Lab: search boxes + typeahead ---------- */
.an-matchup-search {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.an-matchup-box { position: relative; flex: 1; min-width: 200px; }
.an-matchup-box > label {
  display: block;
  margin-bottom: 6px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.an-matchup-box .fs-search { width: 100%; }
.an-matchup-vs {
  font-family: var(--fs-display-font);
  color: var(--fs-gold-1);
  font-size: 0.9rem;
  padding: 10px 4px;
  flex: none;
}
.an-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  /* Floating layer: overlay surface + strong border + the deep shadow
     step, same recipe as every other floating readout on the hub. */
  background: var(--an-overlay);
  border: 1px solid var(--an-border-strong);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-3), var(--an-shadow-lip);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.an-suggest-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--an-border-soft);
  color: var(--an-ink);
  text-align: left;
  cursor: pointer;
  font-size: 0.85rem;
}
.an-suggest-item:last-child { border-bottom: none; }
.an-suggest-item:hover, .an-suggest-item:focus-visible { background: var(--an-surface-3); }
.an-suggest-item .an-muted { flex: none; }

/* ---------- Matchup Lab: result cards ---------- */
.an-matchup-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
}
.an-matchup-card {
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
  padding: 14px;
  text-align: center;
}
.an-matchup-card-name {
  display: inline-block;
  font-family: var(--fs-display-font);
  color: var(--fs-gold-1);
  font-size: 1rem;
  margin-bottom: 6px;
  text-decoration: none;
}
.an-matchup-card-name:hover { color: var(--fs-gold-hi); text-decoration: underline; }
.an-matchup-card-stat { color: var(--an-ink-2); font-size: 0.78rem; }
.an-matchup-vs-badge {
  font-family: var(--fs-display-font);
  color: var(--an-ink-3);
  font-size: 0.8rem;
}

.an-freq-banner {
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-left: 3px solid var(--fs-gold-3);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.an-freq-count {
  font-family: var(--fs-display-font);
  font-size: 1.3rem;
  color: var(--fs-gold-hi);
}
.an-freq-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--an-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--an-ink-3);
  border: 1px solid var(--an-border);
  border-radius: 4px;
  padding: 2px 8px;
  vertical-align: middle;
}
.an-freq-note { color: var(--an-ink-2); font-size: 0.78rem; margin-top: 6px; }
.an-game-depth { margin-bottom: 18px; }
.an-game-evidence {
  margin: 12px 0;
  padding-left: 22px;
  color: var(--an-ink-2);
  font-size: var(--an-text-xs);
  line-height: 1.5;
}
.an-game-evidence li { margin-bottom: 8px; overflow-wrap: anywhere; }
.an-story-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--an-ink-2);
  font-size: var(--an-text-xs);
}
.an-story-feedback--overall {
  padding: 12px 14px;
  border: 1px solid var(--an-border-soft);
  border-radius: var(--an-radius-md);
  background: var(--an-surface-1);
}
.an-story-feedback-button {
  min-height: 40px;
  padding: 7px 11px;
  color: var(--an-ink-2);
  background: var(--an-surface-2);
  border: 1px solid var(--an-border-interactive);
  border-radius: var(--an-radius-sm);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.an-story-feedback-button:hover,
.an-story-feedback-button:focus-visible { color: var(--an-ink); border-color: var(--fs-gold-2); }
.an-story-feedback-button:disabled { cursor: default; opacity: 0.55; }
/* "+N more" chip as a real button (Wrestler Scout promotions column): same
   chip look, but focusable and carrying a Floating UI tooltip that names
   the hidden promotions. */
button.an-freq-tag--more {
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--an-text-2xs);
  color: var(--fs-gold-1);
  border-color: var(--an-border-interactive);
}
button.an-freq-tag--more:hover { border-color: var(--fs-gold-3); }

/* Win split meter (stacked bar, not a full pie -- same "no external library"
   constraint, simpler and just as legible for a two-way split). */
.an-meter { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--an-surface-3); margin: 10px 0 6px; }
.an-meter-seg-a { background: var(--fs-gold-2); }
.an-meter-seg-b { background: var(--fs-white-faint); }
.an-meter-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--an-ink-2); }

/* ---------- Matchup Story pilot ---------- */
.an-story-filter-panel {
  margin: 18px 0;
  padding: 15px;
  background:
    linear-gradient(135deg, rgba(242, 211, 116, 0.08), transparent 48%),
    var(--an-surface-1);
  border: 1px solid var(--an-border-strong);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-2), var(--an-shadow-lip);
}
.an-story-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 36px;
  color: var(--an-ink);
  cursor: pointer;
  font-size: var(--an-text-sm);
}
.an-story-filter-summary span {
  color: var(--an-ink-3);
  font-size: var(--an-text-xs);
  font-weight: 500;
}
.an-story-filter-panel[open] .an-story-filter-summary {
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--an-border);
}
.an-story-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.an-story-filter-heading .an-section-title { margin: 0; }
.an-story-filter-clear {
  min-height: 40px;
  padding: 7px 11px;
  color: var(--fs-gold-1);
  background: transparent;
  border: 1px solid var(--an-border-interactive);
  border-radius: var(--an-radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--an-text-xs);
  font-weight: 700;
}
.an-story-filter-clear:hover,
.an-story-filter-clear:focus-visible { background: var(--an-surface-3); }
.an-story-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.an-story-filter {
  display: grid;
  gap: 5px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.an-story-filter select {
  width: 100%;
  min-height: 44px;
  padding: 8px 30px 8px 9px;
  color: var(--an-ink);
  background: var(--an-surface-2);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-sm);
  font: inherit;
  font-size: var(--an-text-xs);
  letter-spacing: 0;
  text-transform: none;
}
.an-story-filter-status {
  margin: 12px 0 0;
  color: var(--fs-gold-1);
  font-size: var(--an-text-xs);
  font-weight: 700;
}
.an-story-narrative {
  position: relative;
  margin: 14px 0;
  padding: 16px 18px 16px 21px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(27, 152, 221, 0.14), transparent 42%),
    var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
}
.an-story-narrative::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--fs-info, #1B98DD);
}
.an-story-narrative > span {
  color: var(--fs-info, #1B98DD);
  font-size: var(--an-text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.an-story-narrative p {
  margin: 7px 0 0;
  color: var(--an-ink);
  font-size: var(--an-text-md);
  line-height: 1.55;
}
.an-story-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.an-story-action {
  min-height: 44px;
  padding: 8px 13px;
  color: var(--fs-gold-1);
  background: var(--an-surface-2);
  border: 1px solid var(--an-border-interactive);
  border-radius: var(--an-radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: var(--an-text-xs);
  font-weight: 700;
}
.an-story-action:hover { border-color: var(--fs-gold-2); background: var(--an-surface-3); }
.an-story-action-status { color: var(--an-ink-2); font-size: var(--an-text-xs); }

.an-title-desk,
.an-thread-desk {
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 100% 0, rgba(232, 194, 84, 0.09), transparent 36%),
    var(--an-surface-1);
  border: 1px solid var(--an-border-strong);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1);
}
.an-title-desk-head {
  max-width: 72ch;
}
.an-title-facts {
  margin-top: 18px;
}
.an-title-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.an-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  background: var(--an-surface-2);
  border-left: 3px solid var(--fs-gold-2);
  border-radius: 0 var(--an-radius-sm) var(--an-radius-sm) 0;
}
.an-title-row strong {
  color: var(--an-ink);
}
.an-title-row span,
.an-title-note {
  color: var(--an-ink-3);
  font-size: var(--an-text-xs);
  line-height: 1.45;
}
.an-title-note {
  margin: 14px 0 0;
}
.an-title-gap {
  align-items: flex-start;
}
.an-title-gap strong {
  display: block;
  color: var(--an-ink);
  font-size: var(--an-text-xs);
}
.an-title-gap p {
  margin: 4px 0 0;
  color: var(--an-ink-2);
  font-size: var(--an-text-xs);
  line-height: 1.5;
}
.an-thread-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.an-thread-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  background: var(--an-surface-2);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-sm);
}
.an-thread-number {
  position: absolute;
  top: 12px;
  right: 14px;
  color: color-mix(in srgb, var(--fs-gold-1) 34%, transparent);
  font-family: var(--fs-display-font);
  font-size: 1.5rem;
}
.an-thread-card h4 {
  max-width: calc(100% - 42px);
  margin: 0;
  color: var(--an-ink);
  font-size: var(--an-text-md);
  line-height: 1.35;
}
.an-thread-card > p {
  margin: 8px 0 0;
  color: var(--an-ink-2);
  font-size: var(--an-text-xs);
  line-height: 1.55;
}
.an-thread-evidence {
  margin-top: 12px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
}
.an-thread-evidence summary {
  min-height: 34px;
  color: var(--fs-gold-1);
  cursor: pointer;
  font-weight: 750;
}
.an-thread-evidence ol {
  display: grid;
  gap: 6px;
  margin: 5px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}

.an-rivalry-read {
  position: relative;
  overflow: hidden;
  margin: 18px 0 16px;
  padding: clamp(22px, 4vw, 44px);
  background:
    radial-gradient(circle at 88% 8%, rgba(232, 194, 84, 0.13), transparent 34%),
    linear-gradient(145deg, #141419 0%, #0d0d11 70%);
  border: 1px solid var(--an-border-strong);
  border-radius: var(--an-radius-lg);
  box-shadow: var(--an-shadow-3), var(--an-shadow-lip);
}
.an-rivalry-read::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    rgba(237, 237, 241, 0.018) 1px,
    transparent 1px
  );
  background-size: 100% 6px;
  opacity: 0.45;
}
.an-rivalry-read > * {
  position: relative;
  z-index: 1;
}
.an-rivalry-read-head {
  max-width: 880px;
}
.an-rivalry-read-kicker,
.an-rivalry-signal-kicker,
.an-rivalry-chapter-date {
  display: block;
  color: var(--an-accent);
  font-size: var(--an-text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.an-rivalry-read-title {
  max-width: 22ch;
  margin: 8px 0 10px;
  color: var(--an-ink);
  font-family: var(--fs-display-font);
  font-size: clamp(1.55rem, 3vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.an-rivalry-read-thesis {
  max-width: 70ch;
  margin: 0;
  color: var(--an-ink-2);
  font-size: var(--an-text-md);
  line-height: 1.65;
}
.an-rivalry-spine-title {
  margin: 22px 0 0;
  color: var(--an-ink-3);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--an-text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.an-story-history-warning {
  margin: 12px 0 16px;
}
.an-dream-brief {
  border-color: color-mix(in srgb, var(--fs-gold-1) 46%, var(--an-border));
}
.an-story-confidence-basis {
  margin: 0;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  line-height: 1.45;
}
.an-rivalry-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--an-border);
  border-bottom: 1px solid var(--an-border);
}
.an-rivalry-signal {
  min-width: 0;
  padding: 18px 22px 18px 0;
  border-bottom: 1px solid var(--an-border-soft);
}
.an-rivalry-signal:nth-child(odd) {
  padding-right: 26px;
  border-right: 1px solid var(--an-border);
}
.an-rivalry-signal:nth-child(even) {
  padding-left: 26px;
}
.an-rivalry-signal:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.an-rivalry-signal-title,
.an-rivalry-signal-detail {
  display: block;
}
.an-rivalry-signal-title {
  margin-top: 7px;
  color: var(--an-ink);
  font-size: var(--an-text-md);
  line-height: 1.35;
}
.an-rivalry-signal-detail {
  margin-top: 6px;
  color: var(--an-ink-3);
  font-size: var(--an-text-xs);
  line-height: 1.5;
}
.an-rivalry-spine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--an-border-strong);
}
.an-rivalry-chapter {
  position: relative;
  min-width: 0;
  padding: 24px 20px 0 0;
}
.an-rivalry-chapter::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 2px solid var(--an-bg);
  border-radius: 50%;
  background: var(--an-accent);
  box-shadow: 0 0 0 1px var(--an-accent);
}
.an-rivalry-chapter-marker {
  position: absolute;
  top: 20px;
  right: 18px;
  color: rgba(237, 237, 241, 0.08);
  font-family: var(--fs-display-font);
  font-size: 2.4rem;
  line-height: 1;
}
.an-rivalry-chapter-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
}
.an-rivalry-chapter-event {
  max-width: 24ch;
  color: var(--an-ink);
  font-size: var(--an-text-sm);
  line-height: 1.35;
}
.an-rivalry-chapter-stage {
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  line-height: 1.45;
}
.an-rivalry-chapter-result {
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  color: var(--an-ink);
  background: var(--an-surface-3);
  border-radius: 999px;
  font-size: var(--an-text-2xs);
  font-weight: 700;
}

.an-story-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 10px;
}
.an-story-fact {
  min-width: 0;
  padding: 13px 14px;
  background:
    linear-gradient(145deg, rgba(242, 211, 116, 0.07), transparent 56%),
    var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
}
.an-story-fact-label,
.an-story-fact-note {
  display: block;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
}
.an-story-fact-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}
.an-story-fact-value {
  display: block;
  color: var(--an-ink);
  font-family: var(--fs-display-font);
  font-size: 0.95rem;
  line-height: 1.25;
}
.an-story-fact-note { margin-top: 6px; line-height: 1.35; }

.an-story-coverage {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px 12px;
  color: var(--an-ink-2);
  background: var(--an-surface-1);
  border: 1px solid var(--an-border-soft);
  border-radius: var(--an-radius-sm);
  font-size: var(--an-text-xs);
}
.an-story-coverage > strong {
  margin-right: 3px;
  color: var(--an-ink);
}
.an-story-coverage-chip {
  padding: 3px 7px;
  border: 1px solid var(--an-border);
  border-radius: 999px;
  color: var(--an-ink-2);
  font-variant-numeric: var(--an-numeric);
}
.an-chartbox--story { height: 280px; }

.an-story-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.an-story-context-panel { margin: 0; }
.an-story-context-title {
  margin: 0 0 8px;
  color: var(--an-ink);
  font-family: var(--fs-display-font);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.an-story-context-panel .an-chartbox { min-height: 132px; }
.an-story-atlas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.an-story-atlas .an-chartbox { min-height: 170px; }
.an-story-direct-list {
  border-top: 1px solid var(--an-border-soft);
}
.an-story-direct-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--an-border-soft);
}
.an-story-direct-row strong {
  color: var(--an-ink);
  font-size: var(--an-text-sm);
}
.an-story-direct-row span {
  flex: none;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
}

.an-story-section { margin-top: 24px; }
.an-story-jumps {
  margin: 16px 0 0;
  border-block: 1px solid var(--an-border);
}
.an-story-jumps > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--an-accent);
  font-family: var(--an-display-font);
  font-size: var(--an-text-xs);
  letter-spacing: var(--an-tracking-label);
  text-transform: uppercase;
}
.an-story-jumps nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 0 12px;
}
.an-story-jumps a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-left: 2px solid var(--an-border-strong);
  color: var(--an-ink-2);
  font-size: var(--an-text-xs);
  text-decoration: none;
}
.an-story-jumps a:hover,
.an-story-jumps a:focus-visible {
  border-color: var(--an-accent);
  color: var(--an-accent);
}
.an-story-opportunity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.an-story-opportunity {
  position: relative;
  overflow: hidden;
  padding: 15px 16px 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(27, 152, 221, 0.12), transparent 42%),
    var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-2), var(--an-shadow-lip);
}
.an-story-opportunity::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--fs-info, #1B98DD);
}
.an-story-opportunity-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.an-story-creative-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 7px;
  color: var(--fs-info, #1B98DD);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: system-ui, sans-serif;
  font-size: var(--an-text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: middle;
}
.an-story-opportunity-eyebrow .an-story-creative-chip { margin-left: 0; }
.an-story-opportunity-number {
  color: var(--an-accent);
  font-family: var(--fs-display-font);
  font-size: 1.15rem;
}
.an-story-confidence {
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.an-story-opportunity-title {
  margin: 0 0 8px;
  color: var(--fs-gold-hi);
  font-family: var(--fs-display-font);
  font-size: 0.96rem;
}
.an-story-opportunity-copy,
.an-story-opportunity-action {
  margin: 0 0 9px;
  color: var(--an-ink-2);
  font-size: var(--an-text-sm);
  line-height: 1.5;
}
.an-story-book-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-top: 2px;
  padding: 7px 10px;
  color: var(--fs-ink-on-gold);
  background: var(--fs-gold-2);
  border: 0;
  border-radius: var(--an-radius-sm);
  font-size: var(--an-text-xs);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.an-story-book-action:hover,
.an-story-book-action:focus-visible { background: var(--fs-gold-hi); }
.an-story-opportunity-action {
  color: var(--an-ink);
  font-weight: 650;
}
.an-story-opportunity-evidence {
  margin-top: 10px;
  color: var(--an-ink-3);
  font-size: var(--an-text-xs);
}
.an-story-opportunity-evidence summary {
  min-height: 36px;
  color: var(--an-ink-2);
  cursor: pointer;
  font-weight: 700;
}
.an-story-evidence-list {
  margin: 10px 0 0;
  padding: 9px 0 0 18px;
  color: var(--an-ink-3);
  border-top: 1px solid var(--an-border-soft);
  font-size: var(--an-text-xs);
  line-height: 1.45;
}
.an-championship-evidence-table td > strong,
.an-championship-evidence-table td > small {
  display: block;
}
.an-championship-evidence-table td > small {
  margin-top: 4px;
  line-height: 1.45;
}
.an-championship-evidence-table td > small + small {
  margin-top: 2px;
}
.an-story-cell-note {
  display: block;
  margin-top: 4px;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
}
.an-story-ledger { min-width: 900px; }
.an-story-ledger td { vertical-align: top; line-height: 1.4; }
.an-story-ledger-details {
  padding: 0;
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  background: var(--an-surface-1);
}
.an-story-ledger-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  color: var(--an-ink);
  cursor: pointer;
}
.an-story-ledger-details[open] .an-story-ledger-summary {
  border-bottom: 1px solid var(--an-border);
}
.an-story-ledger-details > .an-table-wrap,
.an-story-ledger-details > .an-sub,
.an-story-ledger-details > .an-empty {
  margin: 12px;
}
.an-story-evidence-cell { color: var(--an-ink-2); font-size: var(--an-text-xs); }
.an-story-methodology {
  margin-top: 16px;
  padding: 11px 13px;
  color: var(--an-ink-2);
  background: var(--an-surface-1);
  border: 1px solid var(--an-border-soft);
  border-radius: var(--an-radius-sm);
  font-size: var(--an-text-xs);
}
.an-story-methodology summary {
  min-height: 32px;
  color: var(--an-ink);
  cursor: pointer;
  font-weight: 700;
}
.an-story-methodology p { margin: 6px 0 0; line-height: 1.45; }
.an-story-turning-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.an-story-turning-point {
  display: grid;
  gap: 5px;
  min-height: 108px;
  padding: 13px 14px;
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-top: 3px solid var(--fs-gold-3);
  border-radius: var(--an-radius-md);
}
.an-story-turning-point time,
.an-story-turning-point span {
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
}
.an-story-turning-point strong {
  color: var(--an-ink);
  font-size: var(--an-text-sm);
}
.an-story-release {
  margin: 14px 0 0;
  color: var(--an-ink-3);
  font-size: var(--an-text-2xs);
}

@media (max-width: 600px) {
  .an-rivalry-read { padding: 22px 18px; }
  .an-thread-grid { grid-template-columns: 1fr; }
  .an-title-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .an-rivalry-signals,
  .an-story-opportunity-grid { grid-template-columns: 1fr; }
  .an-story-opportunity-grid {
    gap: 0;
    border-top: 1px solid var(--an-border);
  }
  .an-story-opportunity {
    padding: 17px 2px 17px 14px;
    border: 0;
    border-bottom: 1px solid var(--an-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .an-rivalry-signal,
  .an-rivalry-signal:nth-child(odd),
  .an-rivalry-signal:nth-child(even) {
    padding: 15px 0;
    border-right: 0;
    border-bottom: 1px solid var(--an-border-soft);
  }
  .an-rivalry-signal:last-child { border-bottom: 0; }
  .an-rivalry-spine { grid-template-columns: 1fr; border-top: 0; }
  .an-rivalry-chapter {
    padding: 0 0 22px 28px;
    border-left: 1px solid var(--an-border-strong);
  }
  .an-rivalry-chapter::before {
    top: 3px;
    left: -4px;
  }
  .an-rivalry-chapter-marker { top: 0; right: 0; }
  .an-story-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-chartbox--story { height: 240px; }
  .an-story-filter-heading { align-items: flex-start; }
  .an-story-filter-grid { grid-template-columns: 1fr; }
}

/* ---------- Discovery mode (Matchup Lab) ---------- */
.an-discovery-roll {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.an-discovery-result {
  color: var(--an-ink);
  font-size: 0.9rem;
}
.an-discovery-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

/* Compact ranked mini-list, reused by dream-matchup / rarest-matchup /
   booked-wrestler panels on Matchup Lab and Booker Stats. */
.an-mini-list { list-style: none; margin: 0; padding: 0; }
.an-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--an-border-soft);
  font-size: 0.83rem;
  min-height: 44px;
}
.an-mini-rank {
  flex: none;
  width: 22px;
  color: var(--an-ink-3);
  font-variant-numeric: var(--an-numeric);
}
.an-mini-names { flex: 1; color: var(--an-ink); }
/* Shared by five call sites: Record Book rows (analytics-records.js), Front
   Office mini boards, Achievement history dates, Matchup Lab rare-discovery
   rows, and the two shared AC list helpers in analytics-common.js. Four of
   them pass a SHORT value ("12 booked", a date), and flex: none is what keeps
   those from being squeezed, so it stays here. The Record Book is the one
   caller that passes a full sentence, and it gets the narrow-viewport
   exception below. Anything new that passes a long string needs the same
   opt-in; do not widen this base rule to cover it, because making the label
   shrinkable globally also shrinks the intrinsic width of any content-sized
   flex wrapper around it (measured: the Record Book's own bar track dropped
   from 110px to 68px and short labels wrapped to two lines at 1280). */
.an-mini-count {
  flex: none;
  color: var(--fs-gold-1);
  font-variant-numeric: var(--an-numeric);
  font-size: 0.78rem;
}
/* Record Book only, and only below 480px, which is exactly where the overflow
   was (106px of BODY overflow at 360px, 66px at 400px, 26px at 440px, zero
   from 480px up) and exactly where the page's own scoped style in
   templates/analytics_records.html reflows .an-rec-metric onto its own
   full-width line. On that line the long value has room to wrap, but it can
   only take it if it is allowed to shrink below its max-content width. The
   480px ceiling is deliberately the same breakpoint as that template block:
   if the template's breakpoint moves, move this one with it. */
@media (max-width: 480px) {
  .an-rec-row .an-mini-count { flex: 0 1 auto; }
}

/* Booker Stats' old plain-div distribution bars (.an-dist-row and friends)
   were removed here: the Phase 2 visual redesign (2026-07-23) migrated
   Grades/Stars/Modes to the shared AC.donutChart/AC.barChart helpers, and a
   repo-wide grep confirmed zero remaining template/JS references. */

.an-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* ---------- Voting page ---------- */
.an-vote-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.an-vote-tab {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-family: var(--fs-display-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--an-surface-2);
  color: var(--an-ink-2);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-sm);
  cursor: pointer;
}
.an-vote-tab:hover { background: var(--an-surface-3); color: var(--an-ink); }
.an-vote-tab.an-tab--on { background: var(--fs-gold-2); color: var(--fs-ink-on-gold); border-color: var(--fs-gold-2); }

@media (max-width: 640px) {
  .an-matchup-search { display: grid; grid-template-columns: minmax(0, 1fr); }
  .an-matchup-box { min-width: 0; width: 100%; }
  .an-matchup-vs { padding: 0; text-align: center; }
  .an-matchup-cards { grid-template-columns: 1fr; }
  .an-matchup-vs-badge { display: none; }
}

/* ---------- Your History page ---------- */
.an-signin-card {
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
  padding: 24px;
  text-align: center;
  max-width: 480px;
  margin: 24px auto;
}
.an-signin-card p { color: var(--an-ink-2); margin: 0 0 16px; }
.an-signin-cta { display: inline-block; max-width: 200px; margin: 0 auto; }

.an-hist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.an-panel {
  background: var(--an-surface-1);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  /* Elevation on near-black: fill + border do the work, the shadow scale
     adds a whisper of depth and the top-lip inset sells "lit from above". */
  box-shadow: var(--an-shadow-1), var(--an-shadow-lip);
  padding: 16px;
  /* Grid items default to min-width:auto, which respects a child's intrinsic
     minimum size. A wide child (table.an-table has min-width:640px so its own
     .an-table-wrap can scroll internally) was forcing THIS grid track to grow
     past the viewport instead, pushing the whole Bookers/History/Records/
     Overview page into horizontal scroll on desktop. min-width:0 lets the
     panel shrink to its grid track so .an-table-wrap's own overflow-x:auto
     handles any overflow, never the page. */
  min-width: 0;
}
.an-panel-wide { grid-column: 1 / -1; }
.an-panel-title {
  font-family: var(--fs-display-font);
  font-size: 0.85rem;
  color: var(--an-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
@media (max-width: 640px) {
  .an-hist-grid { grid-template-columns: 1fr; }
}

/* table.an-table's own min-width:640px (above) is sized for the full-width,
   many-column pages (Wrestler Index, Rankings, Voting). Booker Stats is the
   only page that nests a <table class="an-table"> inside an .an-panel grid
   tile -- a ~600px desktop column, much narrower on mobile -- so that global
   640px forced the table's own .an-table-wrap to scroll horizontally inside
   the tile on every viewport. These tables only have 4 narrow columns
   (#, Name, Times booked, action icon), so they don't need the wide-table
   floor at all; tbody td already wraps (no white-space:nowrap), so a long
   name just wraps to a second line instead of forcing a scrollbar. */
.an-panel .an-table { min-width: 0; }

.an-hist-stat-line { margin: 0 0 4px; }
.an-hist-stat-big {
  font-family: var(--fs-display-font);
  font-size: 1.6rem;
  color: var(--fs-gold-hi);
}

.an-hist-timeline-svg {
  width: 100%;
  height: 100px;
  display: block;
}

.an-hist-achievement-list { list-style: none; margin: 0; padding: 0; }

/* Horizontal bar chart (Modes played, Promotions booked) */
.an-bars { display: flex; flex-direction: column; gap: 12px; }
/* Label sits on its own full-width line above the bar, instead of squeezed
   into a fixed 110px grid column with an ellipsis -- a name like "Stone Cold
   Steve Austin" or "<name> . <promotion>" (Biggest Movers) needs to be fully
   readable at a glance, not clipped. The bar itself only needs to convey
   relative magnitude, so it doesn't need to be tall or wide to do its job. */
.an-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.an-bar-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--an-ink-2);
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}
.an-bar-label-text { min-width: 0; overflow-wrap: break-word; }
.an-bar-value-strong { color: var(--an-ink); font-weight: 700; }
.an-bar-track-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.an-bar-track {
  display: block;
  flex: 1 1 auto;
  height: 10px;
  background: var(--an-surface-3);
  border-radius: 2px 5px 5px 2px;
  overflow: hidden;
}
.an-bar-fill {
  display: block;
  height: 100%;
  background: var(--fs-gold-1);
  /* Rounded data-end, square at the baseline (dataviz mark spec). */
  border-radius: 0 4px 4px 0;
}
/* Fill-in entrance: AC.animateFill() sets width 0 first, then the real
   width one frame later; this transition carries the grow. The master
   reduced-motion block at the bottom of this file zeroes it. */
.an-fill-anim {
  transition: width 0.6s var(--an-anim-ease);
}
.an-bar-row {
  border-radius: var(--an-radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 0.15s;
}
.an-bar-row:hover,
.an-bar-row:focus-within {
  background: var(--an-surface-2);
}
/* Achievements page: marks a row the signed-in caller has personally
   unlocked among the shared community stats (same gold left-border accent
   .an-hot-card/.an-freq-banner already use for "this one matters" cards). */
.an-bar-row--mine {
  border-left: 3px solid var(--fs-gold-3);
  padding-left: 8px;
  margin-left: -11px;
}
.an-bar-mine-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--an-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fs-ink-on-gold);
  background: var(--fs-gold-2);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}
.an-bar-value {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--an-ink);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: var(--an-numeric);
}

/* Calendar activity heatmap (Your last 13 weeks of daily play) */
.an-heatmap { overflow-x: auto; }
.an-heatmap-svg { display: block; }

/* Donut chart (Grade mix) */
.an-donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.an-donut { flex: none; }
.an-donut-legend { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; color: var(--an-ink-2); }
.an-donut-legend li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.an-donut-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }

/* ==========================================================================
   Analytics Hub beauty pass (2026-07-24)
   plans/active/analytics-hub-beauty-pass.md
   Everything below is the shared visual system: controls, plaques, medals,
   deltas, chart boxes, and the single reduced-motion gate.
   ========================================================================== */

/* ---------- Form controls: selects, search, checkboxes, pagination.
   Scoped to .an-shell so the in-game roster controls are untouched. ---------- */
.an-shell .fs-sort,
.an-shell .fs-search {
  min-height: 44px;
  background-color: var(--an-surface-2);
  color: var(--an-ink);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  padding: 8px 12px;
  font-size: 0.85rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.an-shell select.fs-sort {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2D374' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
.an-shell .fs-sort:hover,
.an-shell .fs-search:hover {
  border-color: var(--fs-gold-3);
  background-color: var(--an-surface-3);
}
.an-shell .fs-sort:focus-visible,
.an-shell .fs-search:focus-visible {
  outline: 2px solid var(--fs-gold-1);
  outline-offset: 1px;
}
.an-shell .fs-search::placeholder { color: var(--an-ink-3); }
.an-filter-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--fs-gold-2);
}
.an-filter-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--fs-gold-1);
  outline-offset: 2px;
}
.an-pagination button {
  transition: border-color 0.15s, background-color 0.15s;
}
.an-pagination button:hover:not(:disabled) { border-color: var(--fs-gold-3); }
.an-pagination button:focus-visible {
  outline: 2px solid var(--fs-gold-1);
  outline-offset: 1px;
}
.an-tab:focus-visible,
.an-vote-tab:focus-visible,
.an-quick-card:focus-visible,
.an-back:focus-visible,
.an-brand:focus-visible {
  outline: 2px solid var(--fs-gold-1);
  outline-offset: 2px;
}

/* ---------- Date slider (Rankings): gold plate thumb, gold progress.
   JS keeps --an-range-pct in sync so the filled part of the track reads
   as "how far through history you are". ---------- */
.an-shell input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  background: transparent;
  cursor: pointer;
}
.an-shell input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--fs-gold-2) 0%,
    var(--fs-gold-2) var(--an-range-pct, 100%),
    var(--fs-black-4) var(--an-range-pct, 100%)
  );
}
.an-shell input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--fs-plate);
  border: 1px solid var(--fs-gold-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.an-shell input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--an-surface-3);
}
.an-shell input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--fs-gold-2);
}
.an-shell input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fs-plate);
  border: 1px solid var(--fs-gold-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.an-shell input[type="range"]:focus-visible {
  outline: 2px solid var(--fs-gold-1);
  outline-offset: 2px;
}
.an-date-readout {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  font-family: var(--fs-display-font);
  letter-spacing: 0.03em;
  color: var(--fs-ink-on-gold);
  background: var(--fs-strip);
  border-radius: 4px;
  padding: 3px 10px;
}

/* ---------- Overview headline plaque (broadcast lower-third). ---------- */
.an-headline {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 130px at 18% 0%, var(--fs-gold-soft), transparent 72%),
    linear-gradient(180deg, var(--an-surface-2), var(--an-surface-1));
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-lg);
  box-shadow: var(--an-shadow-2), var(--an-shadow-lip);
  padding: 16px 20px 16px 26px;
  margin: 0 0 20px;
  min-height: 86px;
}
.an-headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--fs-strip);
}
.an-headline-kicker {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fs-gold-1);
  margin: 0 0 6px;
}
.an-headline-line {
  font-family: var(--fs-display-font);
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--an-ink);
  margin: 0;
  transition: opacity 0.3s;
}
.an-headline-line .an-headline-num { color: var(--fs-gold-hi); }
.an-headline-line.an-headline-fade { opacity: 0; }

/* ---------- Rank medals + leaderboard treatment. ---------- */
.an-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--an-text-2xs);
  font-weight: 800;
  font-variant-numeric: var(--an-numeric);
  flex: none;
}
.an-medal-1 {
  background: var(--fs-plate);
  color: var(--fs-ink-on-gold);
  box-shadow: var(--fs-plate-edge);
}
.an-medal-2 {
  background: linear-gradient(172deg, #e8eaf2, #9aa0b4);
  color: #14141a;
}
.an-medal-3 {
  background: linear-gradient(172deg, #d9a05b, #8c5a23);
  color: #1a1206;
}
tr.an-rank-top td { background: rgba(217, 174, 63, 0.06); }
tr.an-rank-top td:first-child { box-shadow: inset 3px 0 0 var(--fs-gold-3); }
tr.an-rank-top .an-row-name {
  font-family: var(--fs-display-font);
  font-size: 0.95rem;
  color: var(--fs-gold-1);
}

/* Delta arrows: glyph carries the sign, color reinforces it. Round 2:
   rising = green, falling = red, everywhere (validated polarity tokens). */
.an-delta-up { color: var(--fs-rise, #26C6A2); white-space: nowrap; }
.an-delta-down { color: var(--fs-fall, #FF6B4A); white-space: nowrap; }
.an-delta-zero { color: var(--fs-delta-flat, var(--fs-white-faint)); white-space: nowrap; }

/* Row entrance (Rankings): JS adds .an-row-enter per row (inline
   animation-delay capped at 300ms on full loads). Scrub re-renders only
   give it to rows NEW to the list; persisting rows FLIP instead.
   (.an-stagger kept for any legacy tbody usage.) */
.an-stagger > tr,
.an-row-enter {
  animation: an-row-in 0.35s both var(--an-anim-ease);
}
@keyframes an-row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---------- Chart boxes (ECharts via AN.initChart; Stock Report and
   Record Book still put their page-owned Chart.js lead charts in the same
   box). AN.initChart resizes with the container, so the box owns the
   geometry. hbarChart sets an exact per-row inline height on --hbar. ---------- */
.an-chartbox {
  position: relative;
  height: 180px;
}
.an-chartbox--tall { height: 220px; }
.an-chartbox--hbar { height: auto; min-height: 96px; }
.an-donut-box {
  position: relative;
  width: 136px;
  height: 136px;
  flex: none;
}
.an-donut-legend b {
  color: var(--an-ink);
  font-weight: 600;
}
.an-donut-legend .an-muted { margin-left: 4px; }

/* ---------- Sparkline (shared helper AC.sparkline). ---------- */
.an-spark-dot { fill: var(--fs-gold-hi); stroke: var(--fs-black-2); stroke-width: 2; }
.an-spark-area { fill: var(--fs-gold-1); }

/* ---------- Heatmap legend. ---------- */
.an-heatlegend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--an-text-2xs);
  color: var(--an-ink-3);
  margin-top: 6px;
}
.an-heatlegend-cell {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--fs-gold-1);
}

/* ---------- Voting diverging legend chips. ---------- */
.an-vh-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--an-text-xs);
  color: var(--an-ink-2);
  margin: 0 0 12px;
}
.an-vh-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}

/* ---------- Quick cards: a touch more lift, gold sheen on hover. ---------- */
.an-quick-card {
  position: relative;
  overflow: hidden;
}
.an-quick-card:hover {
  background:
    radial-gradient(220px 90px at 20% 0%, var(--fs-gold-soft), transparent 75%),
    var(--an-surface-1);
}

/* ---------- Reduced motion: one gate for the whole hub.
   Final states render instantly; hover color changes and text updates stay
   (feedback is not motion). Chart.js animation is disabled from JS via
   AC.reducedMotion(). ---------- */
@media (prefers-reduced-motion: reduce) {
  .an-page *,
  .an-page *::before,
  .an-page *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
}

/* Keyboard focus for sortable table headers (they act as buttons). */
.an-table th.an-sortable:focus-visible {
  outline: 2px solid var(--fs-gold-1);
  outline-offset: -2px;
  color: var(--an-ink);
}

/* ---------- Mobile-first table strategy (owner update 2026-07-24: most
   players are on phones). Below 640px every .an-table drops its wide-table
   min-width floor and lets cells wrap, so the core tables FIT the viewport
   instead of horizontally scrolling; page templates additionally hide
   low-priority columns (column-priority pattern). The scrolling-shadow
   backgrounds on .an-table-wrap are a belt-and-braces affordance: they only
   become visible if some table still overflows, so a cut-off edge always
   reads as "more to swipe", never a bare crop. ---------- */
.an-table-wrap {
  background:
    linear-gradient(to right, rgba(10, 10, 12, 0.95) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, rgba(10, 10, 12, 0.95) 30%, transparent) right / 24px 100% no-repeat local,
    linear-gradient(to right, rgba(242, 211, 116, 0.12), transparent) left / 10px 100% no-repeat scroll,
    linear-gradient(to left, rgba(242, 211, 116, 0.12), transparent) right / 10px 100% no-repeat scroll;
}
@media (max-width: 640px) {
  table.an-table { min-width: 0; }
  .an-spark { width: 64px; height: 20px; }
  .an-vh-meter-cell { min-width: 110px; }
  .an-headline { padding: 14px 14px 14px 20px; }

  /*
   * Evidence-record reflow. The complete desktop table survives in the DOM,
   * while each row becomes one labelled record on a phone. No sideways
   * scroller and no column-priority deletion: every value remains readable.
   */
  .an-table-wrap:has(> .an-reflow-table),
  .an-fo-scroll:has(> .an-reflow-table),
  .an-fo-table-wrap:has(> .an-reflow-table) {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  table.an-table.an-reflow-table,
  .an-fo-scroll table.an-reflow-table,
  .an-fo-table-wrap table.an-reflow-table,
  table.an-fod-table.an-reflow-table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .an-reflow-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .an-reflow-table tbody {
    display: grid;
    gap: 0;
  }
  .an-reflow-table tbody tr,
  .an-reflow-table tbody tr:nth-child(even),
  .an-reflow-table tbody tr:hover {
    display: grid;
    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid var(--an-border);
    background: transparent;
  }
  .an-reflow-table tbody tr:first-child {
    border-top: 1px solid var(--an-border);
  }
  .an-reflow-table tbody td,
  .an-reflow-table tbody td.an-num,
  .an-fo-table.an-reflow-table tbody td,
  .an-fo-table.an-reflow-table tbody td:nth-child(n) {
    display: grid !important;
    grid-template-columns: minmax(92px, 0.42fr) minmax(0, 0.58fr);
    align-items: start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .an-reflow-table tbody td::before {
    content: attr(data-label);
    color: var(--an-ink-3);
    font-family: var(--an-display-font);
    font-size: var(--an-text-2xs);
    font-weight: 700;
    letter-spacing: var(--an-tracking-label);
    line-height: 1.35;
    text-transform: uppercase;
  }
  .an-reflow-table tbody td.an-reflow-note {
    display: block !important;
  }
  .an-reflow-table tbody td.an-reflow-note::before {
    content: none;
  }
  .an-reflow-table tbody td > :first-child {
    min-width: 0;
  }
}

/* Under-name sub-line: mobile column-priority tables move a hidden column's
   value here (e.g. Rankings' promotion) so the information survives the
   narrower layout. Hidden on desktop where the real column shows. */
.an-cell-sub {
  display: none;
  /* Explicit body font: the Rankings #1 row sets the display font on its
     name cell, and this sub-line must not inherit it. */
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--an-text-2xs);
  color: var(--an-ink-3);
  margin-top: 2px;
}
@media (max-width: 640px) {
  .an-cell-sub { display: block; }
}

/* ---------- Mobile tab bar: one swipeable row instead of a 5-row pill
   stack, so every page's content starts within the first screen. The
   gold scrolling-shadow on the right edge signals more tabs off-screen. ---------- */
@media (max-width: 640px) {
  .an-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background:
      linear-gradient(to right, var(--fs-black) 30%, transparent) left / 24px 100% no-repeat local,
      linear-gradient(to left, var(--fs-black) 30%, transparent) right / 24px 100% no-repeat local,
      linear-gradient(to left, rgba(242, 211, 116, 0.14), transparent) right / 12px 100% no-repeat scroll;
  }
  .an-tabs::-webkit-scrollbar { display: none; }
  /* Partial-tab peek (Round 2 punch list): a min-width near a third of the
     viewport guarantees roughly 2.7 tabs fit, so the third tab is always
     visibly cut by the edge fade -- an unmissable "swipe me" affordance
     that the fade alone did not deliver at 360px. */
  .an-tab {
    flex: none;
    white-space: nowrap;
    min-width: 29vw;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.74rem;
  }
  .an-table tbody td { padding: 9px 8px; }
  /* Headers may wrap on phones: a nowrap "BOOKED IN GAME" th otherwise
     forces the whole table wider than the viewport. */
  .an-table thead th { padding: 13px 8px; white-space: normal; }
}
@media (max-width: 480px) {
  .an-spark { width: 56px; }
}

/* ==========================================================================
   Round 2: juicy analytics (2026-07-24)
   plans/active/analytics-hub-beauty-pass.md "Round 2" section.
   Storytelling system (source chips, framing lines, story beats), the
   sparkline dot-then-draw, the Rankings FLIP scrub, the Matchup line-race,
   and the pointer-scrub chip. Reduced motion is still governed by the single
   master gate above (plus AC.reducedMotion() checks in JS).
   ========================================================================== */

/* ---------- Two-worlds source chips: REAL HISTORY vs PLAYER BOOKINGS.
   The words carry the meaning; color only reinforces (real = brand gold,
   player = info blue, both validated >= 4.5:1 on the panel surface). ---------- */
.an-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 1px solid;
  border-radius: 4px;
  padding: 2px 7px;
  vertical-align: 2px;
  white-space: nowrap;
}
.an-src::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.an-src--real { color: var(--fs-gold-1); border-color: var(--fs-gold-3); }
.an-src--game { color: var(--fs-info, #1B98DD); border-color: rgba(27, 152, 221, 0.45); }
h1 .an-src, .an-panel-title .an-src, .an-section-title .an-src, .an-content h2 .an-src {
  margin-left: 8px;
}

/* ---------- Framing lines: the plain-language sentence under a stat or a
   page title, written for someone on their first visit. ---------- */
.an-frame {
  font-size: 0.78rem;
  color: var(--an-ink-2);
  margin: -14px 0 20px;
}
.an-hero-frame {
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--an-ink-2);
  margin-top: 5px;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Story beats: one composed insight line, called out with a gold
   tick so it reads as commentary, not another data row. ---------- */
.an-beat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--an-ink);
  border-left: 2px solid var(--fs-gold-3);
  padding: 3px 10px;
  margin: 10px 0;
}
.an-beat::before {
  content: "\2605";
  color: var(--fs-gold-1);
  font-size: 0.65rem;
  flex: none;
}
.an-panel .an-beat { margin-top: 0; }

/* ---------- Sparkline dot-then-draw. JS (AC.sparkline) sets the dash
   geometry and toggles .an-spark--go on first visibility; the transitions
   below carry the motion. The area wash, end dot, and peak marker hold
   until the line lands, then the peak pulses exactly once. ---------- */
.an-spark--pending .an-spark-areafill,
.an-spark--pending .an-spark-dot,
.an-spark--pending .an-spark-peak,
.an-spark--pending .an-spark-line {
  opacity: 0;
}
.an-spark--go .an-spark-line { opacity: 1; }
.an-spark-line--draw {
  transition: stroke-dashoffset 0.7s var(--an-anim-ease);
}
.an-spark--go .an-spark-areafill,
.an-spark--go .an-spark-dot,
.an-spark--go .an-spark-peak {
  opacity: 1;
  transition: opacity 0.35s ease 0.55s;
}
.an-spark-peak {
  fill: var(--fs-gold-hi);
  stroke: var(--fs-black-2);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes an-peak-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(2); }
  100% { transform: scale(1); }
}
.an-spark--done .an-spark-peak {
  animation: an-peak-pulse 0.5s ease 1;
}
.an-spark-start { fill: var(--fs-gold-1); }
.an-spark { touch-action: pan-y; }

/* ---------- Pointer-scrub chip: follows the finger/cursor over any career
   line with "date, rating". One shared element per page, fixed-positioned
   by JS, never interactive itself. ---------- */
.an-scrub-chip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  /* The shared tooltip-card recipe (an-tokens.css): every floating readout
     on the analytics surfaces uses these exact numbers, whether it comes
     from ECharts, Floating UI, or this scrub chip. */
  background: var(--an-tip-bg);
  border: 1px solid var(--an-tip-border);
  border-radius: var(--an-tip-radius);
  padding: 4px 9px;
  font-size: 0.72rem;
  color: var(--an-ink-2);
  white-space: nowrap;
  font-variant-numeric: var(--an-numeric);
  box-shadow: var(--an-tip-shadow);
  transform: translate(-50%, calc(-100% - 12px));
}
.an-scrub-chip b { color: var(--fs-gold-1); font-weight: 700; }

/* ---------- Rankings FLIP scrub + Play button. Rows carry inline
   translateY() set from measured rects; this class plays it back to zero.
   transform-only, so a 100-row reshuffle never touches layout. ---------- */
.an-flip-move {
  transition: transform 0.45s var(--an-anim-ease);
}
.an-play-btn {
  min-height: 44px;
  padding: 8px 16px;
  background: var(--an-surface-2);
  color: var(--fs-gold-1);
  border: 1px solid var(--fs-gold-3);
  border-radius: var(--an-radius-md);
  font-family: var(--fs-display-font);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.an-play-btn:hover { background: var(--an-surface-3); border-color: var(--fs-gold-1); }
.an-play-btn:focus-visible { outline: 2px solid var(--fs-gold-1); outline-offset: 1px; }
.an-play-btn[aria-pressed="true"] {
  background: var(--fs-gold-2);
  color: var(--fs-ink-on-gold);
  border-color: var(--fs-gold-2);
}

/* "Show all 100" on phones (Round 2 punch list: 100 tiny rows is a wall at
   360px; the podium plus top 25 is the story, the rest is on demand). */
.an-showmore {
  display: block;
  margin: 14px auto 0;
  min-height: 44px;
  padding: 8px 20px;
  background: var(--an-surface-2);
  color: var(--an-ink);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius-md);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.an-showmore:hover { border-color: var(--fs-gold-3); background: var(--an-surface-3); }
/* display:block above would beat the UA's [hidden] rule; restate it. */
.an-showmore[hidden] { display: none; }
.an-showmore:focus-visible { outline: 2px solid var(--fs-gold-1); outline-offset: 1px; }
.an-bar-row.is-doorway {
  min-height: 44px;
  padding: 5px;
  margin-inline: -5px;
  border-radius: var(--an-radius-sm);
  cursor: pointer;
}
.an-bar-row.is-doorway:hover,
.an-bar-row.is-doorway:focus-visible {
  background: var(--an-surface-3);
  outline: none;
}
.an-bar-row.is-doorway:focus-visible {
  box-shadow: 0 0 0 2px var(--fs-gold-1);
}

/* ---------- Matchup Lab line-race: two full-career arcs drawn from the
   same x-origin. Series colors follow the fixed categorical order (gold
   then info blue); names sit beside swatches in the legend, so identity is
   never color alone. ---------- */
.an-race-panel { margin: 16px 0; }
.an-race-svg { display: block; width: 100%; height: 190px; touch-action: pan-y; }
.an-race-line-a { stroke: var(--fs-gold-1); }
.an-race-line-b { stroke: var(--fs-info, #1B98DD); }
.an-race-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.an-race-transition {
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  opacity: 0.52;
}
.an-race-line--draw { transition: stroke-dashoffset 1.1s var(--an-anim-ease); }
.an-race-grid { stroke: var(--fs-line); stroke-width: 1; }
.an-race-axis-label {
  fill: var(--fs-white-faint);
  font-size: 9px;
  font-family: system-ui, -apple-system, sans-serif;
}
.an-race-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--an-ink-2);
  margin: 4px 0 6px;
}
.an-race-legend .an-race-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: 3px;
}
.an-race-transition-key {
  color: var(--an-ink-3);
}
.an-race-transition-swatch {
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  border-top: 2px dotted var(--an-ink-3);
  vertical-align: 3px;
}
.an-race-caption {
  font-size: 0.72rem;
  color: var(--an-ink-3);
  margin: 4px 0 0;
}

/* Race chart pending/landed states (mirrors the sparkline draw states). */
.an-race--pending .an-race-line,
.an-race--pending .an-race-dot,
.an-race--pending .an-race-transition {
  opacity: 0;
}
.an-race--go .an-race-line { opacity: 1; }
.an-race--go .an-race-transition { opacity: 0.52; }
.an-race--go .an-race-dot {
  opacity: 1;
  transition: opacity 0.3s ease 0.95s;
}
.an-race-dot {
  stroke: var(--fs-black-2);
  stroke-width: 1.5;
}
.an-race-dot.an-race-line-a { fill: var(--fs-gold-hi); }
.an-race-dot.an-race-line-b { fill: var(--fs-info, #1B98DD); }

/* Hero plaques carry their world chip centered above the number. */
.an-hero-card .an-src { margin-bottom: 7px; }
@media (max-width: 640px) {
  /* "PLAYER BOOKINGS" must fit inside a half-width plaque at 360px. */
  .an-hero-card .an-src {
    font-size: 0.54rem;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    max-width: 100%;
  }
}

/* Scout promotion chips are name-only. Logos were removed on 2026-07-26. */