/* =========================================================
   THE ROUND ROBIN — Hall of Fame shared components
   Loaded by /pro-football-hof/players/ and /classes/ via the
   layout's `extra_css` front-matter hook.

   These lived twice, once per page, and had drifted apart in ways that
   were invisible until the two copies were put side by side:

     .hof-page          one copy had picked up width:100% / min-width:0 /
                        box-sizing, an overflow fix the other never got.
                        The fixed version wins here, for both pages.
     .hof-stepper-arrow 32px on one page, 36px on the other, same control.
                        Unified at 36px -- the larger target, and neither
                        was near the 44px minimum anyway.
     .hof-stepper-current  110px/7px/16px/--r-xl/13px vs
                        160px/9px/18px/--r-pill/14px.

   The stepper "current" chip is genuinely two different controls sharing
   one name: a static label on /players/, an interactive dropdown trigger
   on /classes/. The shape is unified here; min-width and cursor stay as
   per-page overrides, because those follow content and affordance.

   Requires assets/css/tokens.css (loaded ahead of this by the layout).
   ========================================================= */

.hof-page {
  width: 100%; max-width: var(--max); min-width: 0;
  margin: 0 auto; padding: 0 var(--pad) 64px; box-sizing: border-box;
}
@media (max-width: 760px) { .hof-page { padding: 0 16px 48px; } }

.hof-section-head { font-family: var(--fb); font-weight: 600; font-size: 20px; margin: 0 0 6px; }
/* Heading + its "Updated Sep 21" stamp (TRRDataStatus.stampHtml) on one baseline. */
.hof-section-head-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.hof-section-head-row .hof-section-head { margin: 0; }
.hof-section-sub {
  font-size: 13px; color: var(--sub); line-height: 1.65; margin: 0 0 20px;
  padding-left: 14px; border-left: 2px solid rgba(255,119,4,0.35);
}
.hof-section-sub strong { color: var(--text); }
.hof-section-sub a { color: var(--orange); text-decoration: none; font-weight: 700; }

.hof-stepper-arrow {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-circle);
  border: 1px solid var(--border); background: var(--card); color: var(--sub);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.hof-stepper-arrow:hover { border-color: var(--orange); color: var(--text); }
.hof-stepper-arrow:disabled { opacity: 0.35; cursor: default; }
.hof-stepper-arrow:disabled:hover { border-color: var(--border); color: var(--sub); }

.hof-stepper-current {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-family: var(--fd); font-weight: 700; font-size: var(--t-ui); text-align: center;
}

.hof-loading { text-align: center; color: var(--muted); font-family: var(--fb); padding: 32px !important; }

/* Team-colour initials badge sitting inline with the player name in the
   HoFW table's Player column. Geometry only -- hof-shared.js's
   hofTeamBadgeHtml() applies each franchise's colours inline. */
.hof-name-with-badge { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Source credit under the players table. Not decoration: Sports Reference's
   reuse terms are conditional on explicit attribution, so this line is a
   condition being met, not styling. See scripts/HOF_DATA_SOURCING_REVIEW.md. */
.hof-source-note { font-size: var(--t-meta); line-height: 1.6; color: var(--muted); margin: 14px 0 0; }
.hof-source-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.hof-source-note a:hover { color: var(--orange); }

/* HoFW score chip + tier chips -- the table's status badges. Had no CSS at all
   until 2026-09-19 (players/'s only consumer): the chips and the legend below
   rendered as unstyled inline text in production. Colors are a merit ramp,
   not the uncertainty vocabulary in CHART_STYLE.md -- this is a categorical
   status badge, not a chart. */
.hof-chip {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; box-sizing: border-box; width: 54px; height: 24px; padding: 0; border-radius: var(--r-lg);
  font-family: var(--fb); font-weight: 600; font-size: 13px; line-height: 1;
}
.hof-chip-lg { width: 72px; height: 32px; font-size: 18px; gap: 6px; }
.hof-chip-nodata { background: rgba(124,153,183,0.14); color: var(--muted); }
/* 2026-10-18: one blue ramp, tokens in tokens.css. Fill weight carries the order (solid > tint > outline > bare);
   Enshrined is neutral ink plus the orange seal (hofSealSvg in hof-shared.js; --hof-seal), the one hue it carries. The bare classes set colour
   only; the fills live on .hof-chip so a tier-text span or a legend dot never inherits a pill. */
.hof-tier-lock { color: var(--hof-lock); }
.hof-tier-strong { color: var(--hof-strong); }
.hof-tier-borderline { color: var(--hof-borderline); }
.hof-tier-longshot { color: var(--hof-longshot); }
.hof-status-enshrined { color: var(--hof-enshrined); }
.hof-chip.hof-tier-lock { background: var(--hof-lock); color: var(--hof-lock-ink); }
.hof-chip.hof-tier-strong { background: color-mix(in srgb, var(--hof-strong) 16%, transparent); }
.hof-chip.hof-tier-borderline { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hof-borderline) 60%, transparent); }
.hof-chip.hof-tier-longshot { background: transparent; }
.hof-chip.hof-status-enshrined { background: color-mix(in srgb, var(--hof-enshrined) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hof-enshrined) 30%, transparent); }
.hof-seal { flex-shrink: 0; fill: var(--hof-seal); }
.hof-chip-partial-marker { margin-left: 2px; color: var(--muted); font-weight: 700; cursor: help; }

.hof-legend {
  display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card);
}
.hof-legend-tiers { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hof-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fb); font-size: 12px; color: var(--sub); white-space: nowrap;
}
.hof-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hof-legend-dot.hof-tier-lock { background: var(--hof-lock); }
.hof-legend-dot.hof-tier-strong { background: var(--hof-strong); }
.hof-legend-dot.hof-tier-borderline { background: transparent; border: 1.5px solid var(--hof-borderline); box-sizing: border-box; }
.hof-legend-dot.hof-tier-longshot { background: transparent; border: 1.5px dashed var(--hof-longshot); box-sizing: border-box; }
.hof-legend-mark { display: inline-flex; color: var(--hof-enshrined); }
.hof-legend-note { font-size: 11px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }
.hof-legend-note strong { color: var(--sub); }

/* This Class vs. Eventually -- the merged forecast cell in players/'s table.
   Two independently sortable labels packed into one <th> -- see hofSubsortSpan
   in players/index.html -- since the merged cell's single sortKey silently
   dropped the ability to sort by induction odds (caught 2026-09-19). */
.hof-subsort { cursor: pointer; user-select: none; }
.hof-subsort:hover { color: var(--text); }
.hof-subsort-sep { color: var(--border); }
.hof-forecast-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hof-this-class-badge {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--r-lg);
  background: rgba(255,119,4,0.18); color: var(--orange); font-family: var(--fb);
  font-weight: 600; font-size: 11px; vertical-align: middle;
}

/* Forecast shelf (the tabbed views, 2026-10-17): the room the ring's grid used to give it. */
.hof-fc-shelf { margin: var(--s-5) 0 var(--s-6); min-width: 0; }
/* Screen-tall while the class loads, so the actions and record below start off screen (CLS, 2026-10-26). */
.hof-fc-shelf .is-loading { min-height: 100vh; }

/* Position marker (shared with the classes and forecast pages; groups live in position-groups.js, colours in tokens.css). */
.pos-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; flex-shrink: 0; }
.pos-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0 0 12px; padding: 0; font-family: var(--fm); font-size: var(--t-label); color: var(--muted); }
.pos-legend li { display: inline-flex; align-items: center; }

/* "Updated <date>" under the forecast subtitle (TRRDataStatus.stampHtml). */
.hof-fc-updated { margin: var(--s-1) 0 0; }
.hof-fc-updated:empty { display: none; }

/* ── The Class forecast's Model tab ─────────────────────────────────────────
   The jerseys fill to each player's chance; the rows below the class line pair years already
   eligible with this class / a later class / never. Drawing: assets/js/hof-jersey.js. */
.hfc { --hfc-later: rgba(96, 165, 250, 0.34); --hfc-cols: 176px minmax(190px, 230px) minmax(0, 1fr) 62px 58px; }
.hj-defs { position: absolute; }
.hj { display: block; width: 100%; height: 100%; }
.hj-level { stroke: var(--projection-ink); stroke-width: 2; }
.hfc-claim { font: 600 var(--t-display)/1.14 var(--fe); color: var(--text); margin: 0 0 var(--s-3); max-width: 26ch; }
.hfc-caveat { font-size: var(--t-body); color: var(--sub); margin: 0 0 var(--s-5); max-width: 72ch; }
.hfc-seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(2, minmax(0, 0.62fr)); gap: var(--s-4); align-items: start; }
.hfc-paper { background: var(--paper); border-radius: var(--r-sm); aspect-ratio: 4 / 5; padding: 7% 5%; }
.hfc-pct { font: 500 var(--t-display)/1 var(--fm); color: var(--projection); margin-top: var(--s-3); font-variant-numeric: tabular-nums; }
.hfc-name { font-size: var(--t-lede); font-weight: 600; line-height: 1.2; margin-top: var(--s-2); }
.hfc-meta { font-size: var(--t-ui); color: var(--muted); margin-top: var(--s-1); }
.hfc-meta em { font-style: normal; color: var(--orange); }
.hfc-reserved { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; border: 1px solid var(--dv-comparison); border-radius: var(--r-sm);
  background: repeating-linear-gradient(45deg, rgba(92, 122, 158, 0.42) 0 1.5px, transparent 1.5px 9px), repeating-linear-gradient(-45deg, rgba(92, 122, 158, 0.42) 0 1.5px, transparent 1.5px 9px); }
.hfc-reserved span { font: 500 var(--t-label)/1.3 var(--fm); color: var(--sub); background: var(--bg); padding: 6px 9px; border-radius: var(--r-sm); text-align: center; }
.hfc-reserved b { display: block; font: 600 var(--t-strong)/1.25 var(--fb); color: var(--text); }
.hfc .fr-line { margin-top: var(--s-6); }
.hfc-key, .hfc-row { display: grid; grid-template-columns: var(--hfc-cols); gap: var(--s-4); align-items: center; }
.hfc-key { font-size: var(--t-meta); color: var(--muted); padding: var(--s-3) 0 var(--s-2); align-items: end; }
.hfc-key-wait { text-align: right; color: var(--orange); }
.hfc-key-bar { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.hfc-key-bar span { white-space: nowrap; }
.hfc-key-bar i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: var(--r-sm); background: var(--projection); }
.hfc-key-bar i.is-later { background: var(--hfc-later); }
.hfc-key-bar i.is-never { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.hfc-key-bar i.is-year { width: 10px; height: 10px; background: var(--orange); }
.hfc-key-num, .hfc-key-yr { text-align: right; }
.hfc-key-phone { display: none; }
.hfc-row { min-height: 66px; border-top: 1px solid var(--border); }
.hfc-wait { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }
.hfc-wait-group { display: flex; flex-direction: row-reverse; gap: var(--s-1); }
.hfc-wait i { display: block; width: 10px; height: 10px; background: var(--orange); }
.hfc-wait i.is-past { background: none; box-shadow: inset 0 0 0 1.5px var(--orange); }
.hfc-first { font-size: var(--t-meta); color: var(--orange); }
.hfc-who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.hfc-tile { flex: none; width: 46px; height: 50px; padding: 3px; background: var(--paper); border-radius: var(--r-sm); }
.hfc-who b { display: block; font-size: var(--t-strong); font-weight: 600; line-height: 1.2; color: var(--text); }
.hfc-who small { display: block; font-size: var(--t-meta); color: var(--muted); }
.hfc-bar { position: relative; height: 22px; background: var(--surface); border-radius: var(--r-sm); overflow: hidden; }
.hfc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--projection); }
.hfc-bar i.is-later { background: var(--hfc-later); }
/* The model's limits beside the claim from 1000px up (2026-11-03): the claim and its caveat fill the left half
   and the right was empty. Below that the strip follows the jerseys, so it is with the numbers either way. */
.hfc > .fc-limits { margin: var(--s-5) 0 0; }
.hof-fc-shelf > .fc-limits { margin: 0 0 var(--s-4); }
@media (min-width: 1000px) {
  .hfc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: var(--s-6); }
  .hfc > * { grid-column: 1 / -1; }
  .hfc > .hfc-claim { grid-column: 1; grid-row: 1; }
  .hfc > .hfc-caveat { grid-column: 1; grid-row: 2; }
  .hfc > .fc-limits { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; }
}
.hfc-num { font: 500 var(--t-h2)/1 var(--fm); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.hfc-yr { font: 500 var(--t-ui)/1 var(--fm); text-align: right; color: var(--sub); }
.hfc .fr-note { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); }
@media (max-width: 1099px) {
  .hfc { --hfc-cols: 176px minmax(170px, 200px) minmax(0, 1fr) 54px 50px; }
  .hfc-key, .hfc-row { gap: var(--s-3); }
  .hfc-seats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hfc-seat--reserved { grid-column: span 2; }
  .hfc-reserved { aspect-ratio: auto; height: 76px; }
}
@media (max-width: 760px) {
  .hfc-key { display: block; padding: var(--s-2) 0; }
  .hfc-key-wait, .hfc-key-num, .hfc-key-yr, .hfc-key-gap { display: none; }
  .hfc-key-bar .hfc-key-phone { display: inline; }
  .hfc-row { grid-template-columns: minmax(0, 1fr) 54px; grid-template-areas: "who num" "bar bar" "wait yr"; gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; }
  .hfc-who { grid-area: who; } .hfc-num { grid-area: num; } .hfc-bar { grid-area: bar; } .hfc-yr { grid-area: yr; }
  .hfc-wait { grid-area: wait; flex-direction: row; }
  .hfc-wait-group { flex-direction: row; }
}
@media (max-width: 640px) {
  .hfc-claim { font-size: var(--t-h2); }
  .hfc-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .hfc-seat--reserved { grid-column: span 1; }
}

/* /pro-football-hof/classes/: the leaderboard fills in about 5 s after load (one data call). Until then it is a
   34px line, so the footer sat in view and was pushed out of it (CLS 0.10 at 390). Hold a viewport of space for it.
   scripting: enabled keeps the no-JS page from showing a blank screen. */
@media (scripting: enabled) {
  #hof-leaderboard { min-height: 100vh; min-height: 100svh; }
  /* The projected-classes wall above it is also a "Loading projections..." line (69px) until the same data lands,
     then grows and pushes the year stepper down. Heights measured per plaque-grid breakpoint (5/4/3/2/1 columns,
     set in classes/index.html); re-measure if the number of projected classes changes. */
  #proj-wall { min-height: 333px; }
}
@media (scripting: enabled) and (max-width: 1200px) { #proj-wall { min-height: 610px; } }
@media (scripting: enabled) and (max-width: 900px)  { #proj-wall { min-height: 680px; } }
@media (scripting: enabled) and (max-width: 640px)  { #proj-wall { min-height: 931px; } }
@media (scripting: enabled) and (max-width: 400px)  { #proj-wall { min-height: 1600px; } }

/* ── Contributor evidence cards (forecast and Classes) ──────────────────────────────────────────
   A contributor has no score, so a nominee is a card of the facts the Hall published, in the neutral
   ramp only: orange is Grant's voice and blue is the model's, and a contributor is neither. Markup:
   hofContributorCardsHtml() / hofContributorRowsHtml() in hof-shared.js. The Studio draws the same
   card in React (studio/src/playercard.jsx). */
.hcc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-top: var(--s-5); }
.hcc-intro { margin: var(--s-2) 0 0; max-width: 70ch; font-family: var(--fb); font-size: var(--t-body); line-height: 1.55; color: var(--sub); }
.hcc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: var(--s-3); margin: var(--s-4) 0 var(--s-5); }
.hcc { display: grid; gap: var(--s-3); align-content: start; min-width: 0; padding: var(--s-4) 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.hcc-top, .hcc-rowtop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-3); }
.hcc-name { margin: 0; font: 500 var(--t-h3)/1.25 var(--fb); color: var(--text); }
.hcc-nm { font: 500 var(--t-read)/1.25 var(--fb); color: var(--text); }
.hcc-tags { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.hcc-tag, .hcc-slate { font: 500 var(--t-label)/1 var(--fm); letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--r-sm); padding: 4px var(--s-2); white-space: nowrap; }
.hcc-tag { color: var(--sub); border: 1px solid var(--border); }
.hcc-slate { color: var(--text); border: 1px solid var(--muted); }
.hcc-facts { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: var(--s-2) var(--s-3); margin: 0; }
.hcc-facts dt { font: 500 var(--t-label)/1.6 var(--fm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hcc-facts dd { margin: 0; font: 400 var(--t-body)/1.5 var(--fb); color: var(--text); }
.hcc-hist { display: grid; gap: var(--s-2); }
.hcc-k { font: 500 var(--t-label)/1 var(--fm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hcc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hcc-chip { font: 400 var(--t-label)/1.3 var(--fm); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px var(--s-2); color: var(--sub); }
.hcc-chip b { font-weight: 500; color: var(--text); }
.hcc-chip.is-now { border-color: var(--muted); color: var(--text); }
.hcc-aside, .hcc-src { margin: 0; font: 400 var(--t-meta)/1.5 var(--fc); color: var(--muted); }
.hcc-src a { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
/* The nominees who did not advance collapse to one line (Grant, 2026-11-07). */
.hcc-out { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: 10px var(--s-3); border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--muted); font: 400 var(--t-body)/1.5 var(--fb); }
.hcc-out b { color: var(--sub); font-weight: 500; }
.hcc-grid > .hcc-out { grid-column: 1 / -1; }
/* Classes: compact rows */
.hcc-row { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.hcc-line { margin: 0; font: 400 var(--t-body)/1.5 var(--fb); color: var(--sub); }
@media (max-width: 560px) {
  .hcc-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .hcc-facts dd { margin-bottom: var(--s-2); }
}