/* ============================================
   RECORD BOOK — vault ground + shared page column (epic 686)
   ============================================
   Consumed by History.js and the level bodies stacked on it (Record Book,
   Head-to-Head, Matchup viewer). The ramp derives from the active theme's
   structure/action tokens, so it re-themes with no per-theme code.

   Deliberate divergence from the design handoff: the README's
   `.rb-vault.theme-bengals` override is NOT ported. It assumed Bengals'
   --color-action-primary is near-black; themeConfig.js now sets it to
   Bengals orange, so the base ramp already yields a legible gilt, and
   the override's structure-primary would be dark brown on a
   dark ground. Nothing in the app puts a `theme-*` class on an element
   anyway (applyTheme writes :root custom properties only). */

.rb-vault {
  --rb-ground:       color-mix(in srgb, var(--color-structure-deepest) 40%, var(--color-black));
  --rb-ground-top:   color-mix(in srgb, var(--color-structure-deep)    58%, var(--color-black));
  --rb-ground-mid:   color-mix(in srgb, var(--color-structure-deepest) 60%, var(--color-black));
  --rb-plaque-top:   color-mix(in srgb, var(--color-structure-deep)    70%, var(--color-black));
  --rb-plaque-mid:   color-mix(in srgb, var(--color-structure-deepest) 60%, var(--color-black));
  --rb-plaque-bot:   color-mix(in srgb, var(--color-structure-deepest) 44%, var(--color-black));
  --rb-gilt-solid:   var(--color-action-primary);
  --rb-gilt:         color-mix(in srgb, var(--color-action-primary) 72%, var(--color-white));
  --rb-gilt-dark:    color-mix(in srgb, var(--color-action-primary) 46%, var(--color-black));
  --rb-gilt-rule:    color-mix(in srgb, var(--color-action-primary) 34%, transparent);
  --rb-on-gilt:      var(--color-accent-text);
  --rb-cream:        var(--color-highlight-cream);
  --rb-text:         var(--color-structure-lightest);
  --rb-soft2:        var(--color-structure-lightest);
  --rb-soft:         var(--color-structure-lighter);
  /* label/dim2 lifted from the handoff's raw structure-light: measured 3.2-4.2:1
     on Seahawks/Giants/Chiefs/Niners at caption size; this mix is >= 5:1 on every
     theme's ground-top/mid/ground and plaque-top. */
  --rb-label:        color-mix(in srgb, var(--color-structure-light) 50%, var(--color-structure-lightest));
  --rb-dim:          var(--color-structure-lighter);
  --rb-dim2:         var(--rb-label);
  --rb-faint:        color-mix(in srgb, var(--color-structure-light) 62%, var(--rb-ground));
  --rb-line:         color-mix(in srgb, var(--color-structure-light) 58%, var(--rb-ground));
  --rb-rule:         color-mix(in srgb, var(--color-structure-light) 52%, transparent);
  --rb-rule-soft:    color-mix(in srgb, var(--color-structure-light) 34%, transparent);
  --rb-chip-border:  color-mix(in srgb, var(--color-structure-light) 52%, var(--rb-ground));
  --rb-pip-loss:     color-mix(in srgb, var(--color-structure-deepest) 52%, var(--color-black));
  /* Red-family themes ship dark danger tokens (Niners/Chiefs/Cardinals ~2.4:1 at the
     handoff's 72% mix); 35% keeps the red cast but is >= 6.3:1 everywhere. */
  --rb-bowl-text:    color-mix(in srgb, var(--color-danger-light)   35%, var(--color-white));
  --rb-bowl:         color-mix(in srgb, var(--rb-bowl-text) 55%, var(--rb-ground));
  /* Title/selected fills: white-on-orange (Dolphins on-gilt) is 2.76:1, so the
     filled-gilt treatment is a gilt tint + gilt border + gilt text (>= 4.5:1 on all 8 themes). */
  --rb-gilt-tint:    color-mix(in srgb, var(--color-action-primary) 22%, var(--rb-ground));
  --rb-live:         color-mix(in srgb, var(--color-action-primary) 60%, var(--color-black));
  --rb-live-text:    var(--rb-gilt);
  --rb-row-hover:    color-mix(in srgb, var(--color-action-primary)  8%, transparent);
  --rb-row-sel:      color-mix(in srgb, var(--color-action-primary) 13%, transparent);

  /* Layout + type scale from the handoff. Gutter/radius/gaps reuse global
     tokens; 44px section rhythm reuses --touch-target-min (same value). */
  --rb-page-gutter:     var(--space-lg);
  --rb-page-bottom:     var(--touch-target-min);
  --rb-section-gap:     var(--touch-target-min);
  --rb-radius:          var(--border-radius-default);
  --rb-font-display-xl: 50px;
  --rb-font-display-lg: 38px;
  --rb-font-display-md: 36px;
  --rb-font-display-sm: 27px;
  --rb-font-display-xs: 24px;
  --rb-font-display-2xs: 21px;
  --rb-font-mono-lg:    10.5px;
  --rb-font-mono-md:    9.5px;
  --rb-font-mono-base:  9px;
  --rb-font-mono-sm:    8.5px;
  --rb-font-mono-xs:    8px;
  --rb-font-mono-2xs:   7.5px;
  --rb-font-mono-3xs:   7px;
  --rb-font-body-md:    12px;
  --rb-font-body-sm:    11px;
  --rb-font-body-xs:    10.5px;

  /* Engraved letter-spacing scale (the handoff's "do not drop it") */
  --rb-track-xl:        6px;
  --rb-track-lg:        4px;
  --rb-track-eyebrow:   3.4px;
  --rb-track-md:        2.5px;
  --rb-track-base:      2px;
  --rb-track-sm:        1.6px;
  --rb-track-xs:        1px;
  --rb-track-2xs:       0.4px;
  --rb-track-p2:        0.2px;
  --rb-track-p3:        0.3px;
  --rb-track-p5:        0.5px;
  --rb-track-p6:        0.6px;
  --rb-track-p8:        0.8px;
  --rb-track-1p2:       1.2px;
  --rb-track-1p5:       1.5px;
  --rb-track-1p8:       1.8px;

  /* Handoff-only spacing values with no --space-* equivalent */
  --rb-sp-3:            3px;
  --rb-sp-5:            5px;
  --rb-sp-7:            7px;
  --rb-sp-9:            9px;
  --rb-sp-10:           10px;
  --rb-sp-11:           11px;
  --rb-sp-13:           13px;
  --rb-sp-14:           14px;
  --rb-sp-18:           18px;
  --rb-sp-22:           22px;
  --rb-mark-min-h:      112px;
  --rb-plaque-skeleton-h: 300px;

  /* Component dimensions from the handoff */
  --rb-rule-len:        52px;
  --rb-diamond:         5px;
  --rb-medallion:       58px;
  --rb-ring:            13px;
  --rb-chip:            34px;
  --rb-cell-h:          24px;
  --rb-name-col:        74px;
  --rb-rival-name-col:  76px;
  --rb-rival-rec-col:   46px;
  --rb-pip:             9px;
  --rb-swatch:          8px;
  --rb-ease:            0.18s ease;

  min-height: 100vh;
  background-image: radial-gradient(120% 60% at 50% 0%, var(--rb-ground-top) 0%, var(--rb-ground-mid) 42%, var(--rb-ground) 100%);
  background-color: var(--rb-ground);
  color: var(--rb-text);
  font-family: var(--font-primary);
}

.rb-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--rb-page-gutter) var(--rb-page-bottom);
}

/* Placeholder body (ticket B) — replaced by tickets C/D/E2 */
.rb-placeholder-title {
  margin: 0;
  padding-top: var(--rb-section-gap);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--rb-font-display-xl);
  line-height: 1;
  letter-spacing: 3px;
  color: var(--rb-gilt);
  text-transform: uppercase;
}

.rb-placeholder-rule {
  margin-top: var(--space-base);
  height: 1px;
  background: var(--rb-gilt-rule);
}

/* Shared state rows for level bodies (loading / empty / error) */
.rb-status {
  padding-top: var(--rb-section-gap);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-lg);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rb-dim);
}

.rb-status-retry {
  min-height: 44px;
  min-width: 44px;
  margin-top: var(--space-md);
  padding: 0 var(--space-base);
  background: transparent;
  border: 1px solid var(--rb-gilt-rule);
  border-radius: var(--rb-radius);
  color: var(--rb-gilt);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-lg);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================
   RECORD BOOK body (ticket C) — js/components/pages/RecordBook.js
   ============================================ */

.rb-masthead {
  padding-top: calc(var(--space-xl) + var(--space-snug));
  text-align: center;
}

.rb-gilt-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rb-gilt-dark) 20%, var(--rb-gilt) 50%, var(--rb-gilt-dark) 80%, transparent);
}

.rb-eyebrow {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-sm);
  font-weight: 600;
  letter-spacing: var(--rb-track-eyebrow);
  color: var(--rb-dim);
}

.rb-wordmark {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--rb-font-display-xl);
  line-height: 0.9;
  letter-spacing: var(--rb-track-xl);
  text-indent: var(--rb-track-xl); /* optical centering for the trailing letter-space */
  color: var(--rb-cream);
}

.rb-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-sp-9);
  margin-top: var(--space-md);
}

.rb-flourish i {
  display: block;
  width: var(--rb-rule-len);
  height: 1px;
  background: var(--rb-line);
}

.rb-flourish b {
  display: block;
  width: var(--rb-diamond);
  height: var(--rb-diamond);
  background: var(--rb-gilt);
  transform: rotate(45deg);
}

.rb-closing {
  margin-top: calc(var(--space-2xl) + var(--space-2xs));
}

/* Plaque */
.rb-plaque-frame {
  margin-top: calc(var(--space-xl) + var(--space-snug));
  padding: var(--space-2xs);
  border-radius: var(--border-radius-default);
  background: linear-gradient(160deg, var(--rb-gilt) 0%, var(--rb-gilt-dark) 30%, var(--rb-line) 62%, var(--rb-gilt) 100%);
}

.rb-plaque {
  padding: var(--rb-sp-22) var(--rb-sp-18) 0;
  border-radius: var(--rb-sp-3);
  text-align: center;
  background: linear-gradient(170deg, var(--rb-plaque-top) 0%, var(--rb-plaque-mid) 58%, var(--rb-plaque-bot) 100%);
}

.rb-plaque--skeleton {
  min-height: var(--rb-plaque-skeleton-h);
}

.rb-medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rb-medallion);
  height: var(--rb-medallion);
  margin: var(--space-md) auto 0;
  border: 1px solid var(--rb-gilt);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--rb-font-display-xs);
  letter-spacing: var(--rb-track-base);
  color: var(--rb-gilt);
}

.rb-plaque-name {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--rb-font-display-md);
  line-height: 1;
  letter-spacing: var(--rb-track-md);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.rb-plaque-team {
  margin-top: var(--rb-sp-5);
  font-size: var(--rb-font-body-md);
  letter-spacing: var(--rb-track-p3);
  color: var(--rb-soft);
}

.rb-rings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rb-sp-7);
  min-height: var(--rb-ring);
  margin-top: var(--space-md);
}

.rb-ring {
  display: block;
  width: var(--rb-ring);
  height: var(--rb-ring);
  border: 2px solid var(--rb-gilt);
  border-radius: 50%;
}

.rb-ring-label {
  margin-left: var(--rb-sp-3);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-base);
  letter-spacing: var(--rb-track-base);
  color: var(--rb-gilt);
}

.rb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: var(--space-lg) 0 0;
  border-top: 1px solid var(--rb-gilt-rule);
}

.rb-stat {
  padding: var(--rb-sp-13) var(--space-xs) var(--space-md);
  border-right: 1px solid var(--rb-rule);
}

.rb-stat:last-child {
  border-right: 0;
}

.rb-stat dt {
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-3xs);
  letter-spacing: var(--rb-track-1p5);
  color: var(--rb-label);
}

.rb-stat dd {
  margin: var(--rb-sp-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--rb-font-display-2xs);
  letter-spacing: var(--rb-track-xs);
  color: var(--color-white);
}

.rb-plaque-foot {
  padding: var(--rb-sp-11) 0 var(--rb-sp-13);
  border-top: 1px solid var(--rb-rule);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-base);
  letter-spacing: var(--rb-track-1p8);
  color: var(--rb-cream);
}

/* Manager chips: 34px visual inside a 44px tap target */
.rb-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-2xs);
  margin-top: var(--space-xs);
}

.rb-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.rb-chip-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rb-chip);
  height: var(--rb-chip);
  border: 1px solid var(--rb-chip-border);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-md);
  font-weight: 700;
  letter-spacing: var(--rb-track-p5);
  color: var(--rb-dim);
  transition: background var(--rb-ease), box-shadow var(--rb-ease);
}

.rb-chip:hover .rb-chip-face {
  border-color: var(--rb-gilt);
  color: var(--rb-cream);
}

.rb-chip--sel .rb-chip-face {
  background: var(--rb-gilt-tint);
  border-color: var(--rb-gilt);
  color: var(--rb-gilt);
  box-shadow: inset 0 0 0 1px var(--rb-gilt);
}

.rb-chip:focus-visible,
.rb-row:focus-visible,
.rb-rival:focus-visible,
.rb-status-retry:focus-visible {
  outline: 2px solid var(--rb-gilt);
  outline-offset: -2px;
}

/* Section header pattern */
.rb-section-head {
  margin-top: var(--rb-section-gap);
  text-align: center;
}

.rb-section-title {
  margin: var(--rb-sp-5) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--rb-font-display-sm);
  letter-spacing: var(--rb-track-lg);
  color: var(--rb-cream);
}

.rb-section-caption {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-sm);
  letter-spacing: var(--rb-track-sm);
  color: var(--rb-dim2);
}

.rb-taper {
  height: 1px;
  margin-top: var(--space-md);
  background: linear-gradient(90deg, transparent, var(--rb-line) 30%, var(--rb-line) 70%, transparent);
}

/* League marks */
.rb-marks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-xs);
}

.rb-mark {
  min-height: var(--rb-mark-min-h);
  padding: var(--rb-sp-18) var(--space-snug);
  text-align: center;
  border-bottom: 1px solid var(--rb-rule);
}

.rb-mark:nth-child(odd) {
  border-right: 1px solid var(--rb-rule);
}

.rb-mark:nth-child(n + 3) {
  border-bottom: 0;
}

.rb-mark-label {
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-2xs);
  letter-spacing: var(--rb-track-1p8);
  color: var(--rb-label);
}

.rb-mark-value {
  margin-top: var(--rb-sp-7);
  font-family: var(--font-display);
  font-size: var(--rb-font-display-lg);
  line-height: 1;
  letter-spacing: var(--rb-track-1p5);
  color: var(--rb-gilt);
}

.rb-mark-holder {
  margin-top: var(--rb-sp-7);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-sm);
  letter-spacing: var(--rb-track-1p2);
  color: var(--rb-dim);
}

/* The ladder */
.rb-ladder {
  margin-top: var(--space-md);
}

.rb-ladder-head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0 var(--space-xs) var(--space-sm);
}

.rb-ladder-spacer {
  width: var(--rb-name-col);
  flex-shrink: 0;
}

.rb-year {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-xs);
  font-weight: 600;
  letter-spacing: var(--rb-track-p5);
  color: var(--rb-dim2);
}

/* Row is a 44px button; the 24px cells sit centered inside it */
.rb-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-xs);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rb-rule-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rb-ease), box-shadow var(--rb-ease);
}

.rb-row:hover {
  background: var(--rb-row-hover);
}

.rb-row--sel {
  background: var(--rb-row-sel);
  box-shadow: inset 2px 0 0 var(--rb-gilt);
}

.rb-row--skeleton {
  cursor: default;
}

.rb-row-name {
  display: block;
  flex-shrink: 0;
  width: var(--rb-name-col);
  min-width: 0;
  padding-right: var(--rb-sp-5);
}

.rb-row-short {
  display: block;
  overflow: hidden;
  font-size: var(--rb-font-body-xs);
  font-weight: 700;
  letter-spacing: var(--rb-track-p2);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-white);
}

.rb-row-record {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-2xs);
  letter-spacing: var(--rb-track-p6);
  white-space: nowrap;
  color: var(--rb-dim2);
}

.rb-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--rb-cell-h);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-sm);
  font-weight: 600;
  letter-spacing: var(--rb-track-p2);
}

.rb-cell--title {
  background: var(--rb-gilt-tint);
  box-shadow: inset 0 0 0 1px var(--rb-gilt);
  color: var(--rb-gilt);
  font-weight: 800;
}

.rb-cell--final {
  box-shadow: inset 0 0 0 1px var(--rb-cream);
  color: var(--rb-cream);
}

.rb-cell--playoffs {
  box-shadow: inset 0 0 0 1px var(--rb-line);
  color: var(--rb-soft);
}

.rb-cell--missed {
  color: var(--rb-dim2);
}

.rb-cell--bowl {
  box-shadow: inset 0 0 0 1px var(--rb-bowl);
  color: var(--rb-bowl-text);
}

.rb-cell--live {
  box-shadow: inset 0 0 0 1px var(--rb-live);
  color: var(--rb-live-text);
}

/* "·" placeholder is decorative: the cell's aria-label says "did not play" */
.rb-cell--none {
  color: var(--rb-faint);
}

.rb-ladder-end {
  border-top: 1px solid var(--rb-rule-soft);
}

.rb-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  padding-top: var(--rb-sp-14);
}

.rb-legend-item {
  display: flex;
  align-items: center;
  gap: var(--rb-sp-5);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-2xs);
  letter-spacing: var(--rb-track-1p2);
  color: var(--rb-label);
}

.rb-swatch {
  display: block;
  width: var(--rb-swatch);
  height: var(--rb-swatch);
}

.rb-swatch--title { background: var(--rb-gilt-tint); box-shadow: inset 0 0 0 1px var(--rb-gilt); }
.rb-swatch--final { box-shadow: inset 0 0 0 1px var(--rb-cream); }
.rb-swatch--playoffs { box-shadow: inset 0 0 0 1px var(--rb-line); }
.rb-swatch--bowl { box-shadow: inset 0 0 0 1px var(--rb-bowl); }
.rb-swatch--live { box-shadow: inset 0 0 0 1px var(--rb-live); }

.rb-footnote {
  margin-top: var(--rb-sp-14);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-xs);
  line-height: 1.6;
  letter-spacing: var(--rb-track-p8);
  color: var(--rb-dim2);
}

/* Rivalries: each row drills into head-to-head */
.rb-rivals {
  margin-top: var(--space-sm);
}

.rb-rival {
  display: flex;
  align-items: center;
  gap: var(--rb-sp-10);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-2xs);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rb-rule-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rb-ease);
}

.rb-rival:hover {
  background: var(--rb-row-hover);
}

.rb-rival--skeleton {
  cursor: default;
}

.rb-rival-name {
  flex-shrink: 0;
  width: var(--rb-rival-name-col);
  overflow: hidden;
  font-size: var(--rb-font-body-sm);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--rb-soft2);
}

.rb-pips {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  height: var(--rb-pip);
}

.rb-pip {
  flex: 1;
  height: var(--rb-pip);
}

.rb-pip--w { background: var(--rb-gilt-solid); }
.rb-pip--t { background: var(--rb-line); }
.rb-pip--l { background: var(--rb-pip-loss); box-shadow: inset 0 0 0 1px var(--rb-rule-soft); }

.rb-rival-record {
  flex-shrink: 0;
  width: var(--rb-rival-rec-col);
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-lg);
  font-weight: 700;
  color: var(--color-white);
}

.rb-chev {
  display: flex;
  flex-shrink: 0;
  color: var(--rb-dim);
}

.rb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rb-chip-face,
  .rb-row,
  .rb-rival {
    transition: none;
  }
}

/* ============================================
   HEAD-TO-HEAD body (ticket D) — js/components/pages/HeadToHead.js
   ============================================ */

.rb-vault {
  --rb-font-display-hero: 52px;
  --rb-font-display-name: 22px;
  --rb-font-display-season: 20px;
  --rb-font-display-loser: 18px;
  --rb-font-mono-10: 10px;
  --rb-track-2p2: 2.2px;
  --rb-track-1p4: 1.4px;
  --rb-sp-26: 26px;
  --rb-meet-min-h: 52px;
  --rb-meet-wk-col: 56px;
  --rb-meet-margin-col: 44px;
  --rb-meet-res: 22px;
  --rb-meet-chev-col: 14px;
}

.rb-h2h__duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--rb-sp-10);
  /* padding, not margin: a top margin would collapse out of .rb-vault and expose the page ground above it */
  padding-top: var(--rb-sp-26);
}

.rb-h2h__side {
  min-width: 0;
  text-align: center;
}

.rb-h2h__medal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rb-medallion);
  height: var(--rb-medallion);
  margin: 0 auto;
  border: 1px solid var(--rb-gilt);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--rb-font-display-xs);
  letter-spacing: var(--rb-track-base);
  color: var(--rb-gilt);
}

/* Selected manager: gilt tint + border (solid gilt fails contrast with white on-gilt text on Dolphins) */
.rb-h2h__medal--sel {
  background: var(--rb-gilt-tint);
  box-shadow: inset 0 0 0 1px var(--rb-gilt);
}

.rb-h2h__name {
  margin-top: var(--rb-sp-10);
  font-family: var(--font-display);
  font-size: var(--rb-font-display-name);
  line-height: 1.05;
  letter-spacing: var(--rb-track-base);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.rb-h2h__team {
  margin-top: var(--space-xs);
  font-size: var(--rb-font-body-xs);
  letter-spacing: var(--rb-track-p3);
  color: var(--rb-soft);
  overflow-wrap: anywhere;
}

.rb-h2h__center {
  text-align: center;
}

.rb-h2h__rec {
  font-family: var(--font-display);
  font-size: var(--rb-font-display-hero);
  line-height: 0.9;
  letter-spacing: var(--rb-track-base);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.rb-h2h__w { color: var(--rb-gilt); }
.rb-h2h__l { color: var(--rb-soft); }

.rb-h2h__sep {
  margin: 0 var(--rb-sp-3);
  color: var(--rb-dim2);
}

.rb-h2h__leads {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-xs);
  letter-spacing: var(--rb-track-2p2);
  color: var(--rb-gilt);
}

.rb-h2h__streak {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: var(--rb-sp-3) var(--rb-sp-7);
  border: 1px solid var(--rb-rule);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-base);
  font-weight: 700;
  letter-spacing: var(--rb-track-1p5);
  color: var(--rb-cream);
}

.rb-h2h__pf {
  margin-top: var(--space-lg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-base);
  letter-spacing: var(--rb-track-1p4);
  color: var(--rb-dim);
}

.rb-h2h__pips {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  height: var(--rb-pip);
  margin-top: var(--space-md);
}

.rb-h2h__pip {
  display: block;
  flex: 1;
  height: var(--rb-pip);
}

.rb-h2h__pip--w { background: var(--rb-gilt-solid); }
.rb-h2h__pip--t { background: var(--rb-line); }
.rb-h2h__pip--l { background: var(--rb-pip-loss); }

.rb-h2h__pipyrs {
  display: flex;
  justify-content: space-between;
  margin-top: var(--rb-sp-5);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-xs);
  letter-spacing: var(--rb-track-p5);
  color: var(--rb-dim2);
}

.rb-h2h__stats {
  margin-top: var(--rb-sp-22);
  border-bottom: 1px solid var(--rb-rule);
  text-align: center;
}

.rb-h2h__stat-sub {
  min-height: var(--rb-font-mono-xs);
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-xs);
  letter-spacing: var(--rb-track-xs);
  color: var(--rb-dim2);
}

.rb-h2h__season {
  display: flex;
  align-items: center;
  gap: var(--rb-sp-10);
  margin-top: var(--space-base);
  padding: 0 var(--space-2xs);
}

.rb-h2h__season-yr {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--rb-font-display-season);
  letter-spacing: var(--rb-track-base);
  color: var(--rb-cream);
}

.rb-h2h__season-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rb-line), transparent);
}

.rb-h2h__season-rec {
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-base);
  letter-spacing: var(--rb-track-1p5);
  color: var(--rb-dim);
}

.rb-h2h__season-rec--live { color: var(--rb-live-text); }

.rb-h2h__meeting {
  display: grid;
  grid-template-columns: var(--rb-meet-wk-col) minmax(0, 1fr) var(--rb-meet-margin-col) var(--rb-meet-res) var(--rb-meet-chev-col);
  align-items: center;
  gap: var(--space-sm);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--rb-meet-min-h);
  padding: var(--rb-sp-7) var(--space-2xs);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rb-rule-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--rb-ease);
}

.rb-h2h__meeting:hover { background: var(--rb-row-hover); }

.rb-h2h__meeting:focus-visible {
  outline: 2px solid var(--rb-gilt);
  outline-offset: -2px;
}

.rb-h2h__when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rb-h2h__wk {
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-md);
  font-weight: 700;
  letter-spacing: var(--rb-track-xs);
  color: var(--rb-soft2);
}

.rb-h2h__tag {
  margin-top: var(--space-xs);
  padding: 1px var(--space-xs);
  border: 1px solid var(--rb-gilt-rule);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-xs);
  letter-spacing: var(--rb-track-1p2);
  color: var(--rb-gilt);
}

.rb-h2h__tag--prov {
  border-color: var(--rb-live);
  color: var(--rb-live-text);
}

.rb-h2h__scores {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--rb-sp-10);
  font-variant-numeric: tabular-nums;
}

.rb-h2h__score {
  font-family: var(--font-display);
  font-size: var(--rb-font-display-loser);
  letter-spacing: var(--rb-track-xs);
  color: var(--rb-soft);
}

.rb-h2h__score--w {
  font-size: var(--rb-font-display-name);
  color: var(--rb-gilt);
}

.rb-h2h__dash {
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-base);
  color: var(--rb-dim2);
}

.rb-h2h__margin {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-10);
  font-weight: 700;
  color: var(--rb-dim);
}

.rb-h2h__margin--pos { color: var(--rb-gilt); }

.rb-h2h__res {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rb-meet-res);
  height: var(--rb-meet-res);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-10);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--rb-line);
  color: var(--rb-soft);
}

/* W = gilt tint + gilt border (same treatment as selected chips; solid gilt fails contrast on Dolphins) */
.rb-h2h__res--W {
  background: var(--rb-gilt-tint);
  box-shadow: inset 0 0 0 1px var(--rb-gilt);
  color: var(--rb-gilt);
}

.rb-h2h__chev {
  display: flex;
  justify-content: flex-end;
  color: var(--rb-dim2);
}

@media (prefers-reduced-motion: reduce) {
  .rb-h2h__meeting { transition: none; }
}

/* ---------- Historical matchup viewer (level 3, E2) ----------
   Sits on MatchupPage's own scoreboard ground; the hairline is the only vault element. */
/* .rb-mv is the MatchupPage ground, not a .rb-vault, so the type tokens it uses are re-declared here. */
.rb-mv {
  --rb-font-mono-sm: 8.5px;
  --rb-font-mono-lg: 10.5px;
  --rb-font-mono-10: 10px;
  --rb-track-1p5: 1.5px;
  --rb-track-1p8: 1.8px;
}

.rb-mv__rule-wrap.rb-vault {
  background: none;
  min-height: 0;
}

.rb-mv__rule {
  height: 1px;
  background: var(--rb-gilt-rule);
}

.rb-mv .matchup-week-line.rb-mv__stamp {
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  text-align: center;
}

.rb-mv__stamp-sub {
  font-size: var(--rb-font-mono-sm);
  letter-spacing: var(--rb-track-1p8);
  font-weight: var(--font-weight-bold);
  color: var(--color-scoreboard-text-dim);
}

.rb-mv .matchup-week-nav {
  justify-content: space-between;
}

/* Winner's "NAME BY x.xx" hugs its side; FINAL stays centred even when a side is empty. */
.matchup-margin-caption--archive > span {
  flex: 1 1 0;
  min-width: 0;
}

.matchup-margin-caption--archive > span:nth-child(2) {
  flex: 0 0 auto;
  text-align: center;
}

.matchup-margin-caption--archive > span:last-child {
  text-align: right;
}

.rb-mv__lineups:focus {
  outline: none;
}

.rb-mv__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-base);
}

.rb-mv__error-text {
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--rb-track-1p5);
  color: var(--color-scoreboard-text-muted);
}

.rb-mv__retry {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: 0 var(--space-lg);
  background: var(--color-scoreboard-surface);
  border: 1px solid var(--color-scoreboard-border-strong);
  border-radius: var(--border-radius-default);
  color: var(--color-scoreboard-accent);
  font-family: var(--font-mono);
  font-size: var(--rb-font-mono-10);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--rb-track-1p5);
  cursor: pointer;
}

.rb-mv__retry:focus-visible {
  outline: 2px solid var(--color-scoreboard-accent);
  outline-offset: 2px;
}