@layer components {
html[data-route="/heisman"]{
  /* ex-:root local overrides (supplement canonical tokens; --f-display intentionally omitted — none present) */
  --ht-bronze: var(--bronze-medal, #C7884A);
  --ht-bronze-deep: #8a5a2b;
  --ht-gold: var(--gold-accent, #F0BD30);

  /* ---- HERO — pomp & circumstance -------------------------- */
  .row-ht-hero { margin-bottom: 0; }
  .ht-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 30px 34px;
    /* bronze + gold, not just bronze (per Brock / legal) */
    background:
      radial-gradient(circle at 90% 20%, rgba(240,189,48,.28), transparent 55%),
      linear-gradient(135deg, rgba(199,136,74,.42) 0%, rgba(138,90,43,.30) 45%, rgba(10,10,10,.95) 100%);
    border: 1px solid rgba(240,189,48,.45);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(245,213,126,.18), 0 0 28px rgba(199,136,74,.18);
  }
  .ht-hero::before {
    /* faint chalk/print texture lines — college-font vibe (L344-376) */
    content: '';
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(115deg, rgba(245,213,126,.05) 0 2px, transparent 2px 9px),
      radial-gradient(ellipse at 88% 50%, rgba(240,189,48,.10), transparent 60%);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .ht-hero-text { position: relative; z-index: 1; }
  .ht-hero-title {
    font-family: var(--f-display) !important;
    font-size: clamp(34px, 6vw, 48px) !important;
    letter-spacing: 3px;
    color: var(--white-bright) !important;
    margin: 6px 0 4px;
    text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 0 24px rgba(240,189,48,.22);
  }
  .ht-hero-sub {
    color: var(--gray-light);
    font: 500 14px var(--f-body);
    margin: 4px 0 6px;
    display: flex; align-items: center; gap: 8px;
  }
  .ht-hero-sub span { color: var(--white-bright, #F5F5F5); font-weight: 700; }
  .ht-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ht-gold); }
  .ht-hero-tagline {
    /* was --text-faint (#5E626E) — illegibly dim on the bronze hero. Warm cream reads clean. */
    color: rgba(245, 232, 208, .82);
    font: 400 14px var(--f-body);
    margin: 4px 0 0;
    letter-spacing: .02em;
    max-width: 46ch;
  }
  .ht-hero-trophy {
    display: grid; place-items: center;
    position: relative; z-index: 1;
    /* Larger, stronger spotlight so the right side reads as a lit stage rather
       than dead bronze space on wide monitors. Extends left past the trophy. */
    background: radial-gradient(circle at 60% 50%, rgba(240,189,48,.34), rgba(240,189,48,.10) 45%, rgba(240,189,48,0) 72%);
    min-width: clamp(180px, 22vw, 320px);
  }
  .ht-trophy-img {
    height: clamp(140px, 18vw, 210px);
    width: auto; display: block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(240,189,48,.5));
    animation: heisman-ht-trophy-float 4.5s ease-in-out infinite alternate;
  }
  @media (prefers-reduced-motion: reduce) { .ht-trophy-img { animation: none; } }

  /* ---- DUAL SECTION ROW (side-by-side >= 768) -------------- */
  .row-ht-dual {
    display: grid;
    grid-template-columns: 1fr;   /* mobile: stacked */
    gap: var(--col-gap, 16px);
    align-items: start;
    grid-auto-rows: auto;
  }
  @media (min-width: 768px) {
    .row-ht-dual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  .ht-section { padding: 22px 24px; display: flex; flex-direction: column; }
  /* Race section gets a bronze top-edge accent; vote gets gold. */
  .ht-section--race { border-top: 2px solid var(--ht-bronze); }
  .ht-section--vote { border-top: 2px solid var(--ht-gold); }

  .ht-subhead {
    font: 700 12px var(--f-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white-bright, #F5F5F5);
    margin: 18px 0 8px;
  }

  .ht-source {
    font: 500 12px var(--f-mono);
    color: var(--text-faint);
    letter-spacing: .04em;
  }
  .ht-note {
    font: 400 12px var(--f-body);
    color: var(--text-faint);
    line-height: 1.5;
    margin: 14px 0 0;
  }
  .ht-note code {
    font-family: var(--f-mono);
    color: var(--gray-light);
    background: rgba(255,255,255,.05);
    padding: 1px 5px; border-radius: 4px;
  }
  .ht-empty {
    font: 500 13px var(--f-body);
    color: var(--gray-light);
    padding: 20px 8px;
    text-align: center;
  }

  /* ---- FETCH ERROR — distinct from empty/no-data/preseason states ----
     Shown ONLY when a critical fetch (/heisman/state, /heisman/shortlist,
     /heisman/results) exhausts script.js's bounded retry cap (a real
     outage) — never for a legitimately empty or preseason season. Red-
     tinted + a manual Retry button so a frustrated user has one clear
     action instead of hammering reload/season-toggle. */
  .ht-fetch-error {
    padding: 20px 16px;
    text-align: center;
    border: 1px solid rgba(224,96,96,.35);
    border-radius: 10px;
    background: rgba(224,96,96,.08);
  }
  .ht-fetch-error-title {
    font: 700 13px var(--f-body);
    letter-spacing: .02em;
    color: #e06060;
    margin-bottom: 6px;
  }
  .ht-fetch-error-sub {
    font: 400 12px var(--f-body);
    color: var(--text-faint);
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .ht-fetch-error-row {
    font: 500 13px var(--f-body);
    color: rgba(244,200,200,.85);
    text-align: center;
    padding: 20px 8px;
  }
  .ht-retry-btn {
    font: 600 12px var(--f-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1a1207;
    background: var(--ht-gold);
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
  }
  .ht-retry-btn:hover { filter: brightness(1.08); }
  .ht-retry-btn:disabled { opacity: .6; cursor: default; }
  .ht-retry-btn:focus-visible { outline: 2px solid var(--ht-bronze); outline-offset: 2px; }
  .ht-retry-link {
    background: none;
    border: none;
    color: var(--ht-gold);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
    padding: 0;
  }
  .ht-retry-link:focus-visible { outline: 2px solid var(--ht-bronze); outline-offset: 2px; }

  /* ---- SKELETON ------------------------------------------- */
  .ht-leader-skeleton, .ht-vote-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
  .skel-row {
    height: 48px; border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
    background-size: 200% 100%;
    animation: heisman-ht-shimmer 1.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) { .skel-row { animation: none; } }

  /* ============ SECTION A — RACE TRACKER ============ */
  .ht-leader-card {
    position: relative;
    padding: 16px 18px;
    border-radius: 12px;
    background:
      radial-gradient(circle at 100% 0%, rgba(240,189,48,.16), transparent 60%),
      linear-gradient(135deg, rgba(199,136,74,.22), var(--black-card));
    border: 1px solid rgba(199,136,74,.5);
    box-shadow: inset 0 1px 0 rgba(245,213,126,.18);
    overflow: hidden;
  }
  .ht-leader-eyebrow {
    font: 700 12px var(--f-mono);
    letter-spacing: .16em;
    color: var(--white-bright, #F5F5F5);
  }
  .ht-leader-body {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
  }
  .ht-leader-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--ht-bronze), var(--ht-bronze-deep));
    border: 2px solid var(--ht-gold);
    font: 700 18px var(--f-display);
    color: #1a0f06;
    box-shadow: 0 0 16px rgba(240,189,48,.3);
  }
  .ht-leader-info { min-width: 0; }
  .ht-leader-name {
    font: 400 26px var(--f-display);
    letter-spacing: .02em;
    color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-leader-meta {
    font: 500 12px var(--f-mono);
    color: var(--gray-light);
    letter-spacing: .04em;
    margin-top: 2px;
  }
  .ht-leader-foot { margin-top: 12px; }
  .ht-badge {
    display: inline-block;
    font: 700 12px var(--f-mono);
    letter-spacing: .1em;
    padding: 3px 9px;
    border-radius: 4px;
  }
  .ht-badge--live { background: rgba(34,197,94,.14); color: #34c759; border: 1px solid rgba(34,197,94,.4); }
  .ht-badge--placeholder { background: rgba(255,255,255,.05); color: var(--text-faint); border: 1px solid var(--hairline-2); }

  /* delta chips (shared by leader + trend) */
  .ht-delta, .ht-trend-delta {
    font: 700 12px var(--f-mono);
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .mv-up { color: #34c759; }
  .mv-dn { color: var(--red-bright); }
  .mv-flat { color: var(--text-faint); }
  .mv-new { color: var(--white-bright, #F5F5F5); }

  /* trend list */
  .ht-trend-head, .ht-tally-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
  }
  .ht-trend-list, .ht-tally-list { list-style: none; margin: 0; padding: 0; }
  .ht-trend-item {
    display: grid;
    grid-template-columns: 24px 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
  }
  .ht-trend-item + .ht-trend-item { border-top: 1px solid var(--hairline); }
  .ht-trend-rank { font: 400 18px var(--f-display); color: var(--ht-bronze); text-align: center; }
  .ht-trend-info { min-width: 0; }
  .ht-trend-name {
    display: block;
    font: 600 13px var(--f-body); color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-trend-meta { display: block; font: 500 12px var(--f-mono); color: var(--gray-light); letter-spacing: .05em; margin-top: 1px; }
  .ht-trend-odds { font: 700 12px var(--f-mono); color: var(--white-bright, #F5F5F5); }
  .ht-trend-ap { font: 500 12px var(--f-mono); color: var(--gray-light); }

  /* ============ SECTION B — VOTING ============ */
  .ht-vote-sub { font: 400 13px var(--f-body); color: var(--gray-light); line-height: 1.5; margin: 2px 0 6px; }
  .ht-vote-sub strong { color: var(--white-bright, #F5F5F5); }
  .ht-deadline { font: 600 12px var(--f-mono); color: var(--text-faint); letter-spacing: .04em; margin: 0 0 14px; }
  .ht-deadline span { color: var(--white-bright, #F5F5F5); }

  .ht-vote-options { display: flex; flex-direction: column; gap: 8px; }
  .ht-vote-opt {
    display: grid;
    grid-template-columns: 40px 1fr 22px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: linear-gradient(135deg, var(--black-soft), var(--black-card));
    border: 1px solid var(--hairline-2);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, transform .12s, box-shadow .15s, background .15s;
  }
  .ht-vote-opt:hover:not(:disabled) { border-color: var(--ht-gold); transform: translateY(-1px); }
  .ht-vote-opt:disabled { opacity: .55; cursor: not-allowed; }
  .ht-vote-opt.is-selected {
    border-color: var(--ht-gold);
    background: linear-gradient(135deg, rgba(240,189,48,.14), rgba(199,136,74,.10));
    box-shadow: 0 0 16px rgba(240,189,48,.22), inset 0 0 0 1px rgba(240,189,48,.3);
  }
  .ht-vote-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--bg-surface-3), var(--black-card));
    border: 2px solid var(--hairline-2);
    font: 700 13px var(--f-display); color: var(--white-bright, #F5F5F5);
  }
  .ht-vote-opt.is-selected .ht-vote-avatar { border-color: var(--ht-gold); box-shadow: 0 0 12px rgba(240,189,48,.35); }
  .ht-vote-opt-info { min-width: 0; }
  .ht-vote-opt-name {
    display: block; font: 600 14px var(--f-body); color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-vote-opt-meta { display: block; font: 500 12px var(--f-mono); color: var(--gray-light); letter-spacing: .05em; margin-top: 1px; }
  .ht-vote-check { font-size: 16px; color: var(--white-bright, #F5F5F5); opacity: 0; transition: opacity .15s; }
  .ht-vote-opt.is-selected .ht-vote-check { opacity: 1; }

  .ht-vote-actions { display: flex; gap: 10px; margin-top: 14px; }
  .ht-vote-actions .btn[hidden] { display: none; }
  .ht-vote-status { font: 500 12px var(--f-body); color: var(--gray-light); margin: 10px 0 0; min-height: 1em; }

  /* fan leaderboard */
  .ht-tally-item {
    display: grid;
    grid-template-columns: 1fr 90px auto;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
  }
  .ht-tally-item + .ht-tally-item { border-top: 1px solid var(--hairline); }
  .ht-tally-item.is-mine {
    background: rgba(240,189,48,.06);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(240,189,48,.25);
  }
  .ht-tally-info { min-width: 0; }
  .ht-tally-name {
    display: block; font: 600 13px var(--f-body); color: var(--white-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ht-yours {
    font: 700 12px var(--f-mono); letter-spacing: .1em;
    color: #1a0f06; background: var(--ht-gold);
    padding: 1px 5px; border-radius: 3px; vertical-align: middle;
  }
  .ht-tally-meta { display: block; font: 500 12px var(--f-mono); color: var(--gray-light); letter-spacing: .05em; margin-top: 1px; }
  .ht-tally-bar-wrap { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
  .ht-tally-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ht-bronze), var(--ht-gold)); transition: width .4s ease; }
  .ht-tally-count { font: 700 13px var(--f-display); color: var(--white-bright); letter-spacing: .04em; text-align: right; }

  /* ---- TOAST ---------------------------------------------- */
  .ht-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: linear-gradient(135deg, var(--ht-bronze), var(--ht-bronze-deep));
    color: #fff;
    font: 600 13px var(--f-body);
    padding: 11px 22px;
    border-radius: 8px;
    border: 1px solid var(--ht-gold);
    box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 0 18px rgba(240,189,48,.25);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 80;
  }
  .ht-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
  @media (prefers-reduced-motion: reduce) { .ht-toast { transition: opacity .25s ease; } }

  /* ---- MOBILE (320 / 390) --------------------------------- */
  @media (max-width: 600px) {
    .ht-hero { grid-template-columns: 1fr; padding: 22px 18px; }
    .ht-hero-trophy { display: none; }
    .ht-section { padding: 18px 16px; }
    .ht-leader-body { grid-template-columns: 48px 1fr; }
    .ht-leader-body .ht-delta { grid-column: 2; justify-self: start; margin-top: 4px; }
    .ht-leader-name { font-size: 22px; white-space: normal; }
    .ht-trend-item { grid-template-columns: 22px 1fr auto; }
    .ht-trend-odds, .ht-trend-ap { grid-column: 2 / -1; justify-self: start; }
    .ht-vote-actions { flex-direction: column; }
    .ht-tally-item { grid-template-columns: 1fr auto; }
    .ht-tally-bar-wrap { grid-column: 1 / -1; order: 3; }
  }

  /* ============================================================
     DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER  (Issue #762, FLUID agent)
     ------------------------------------------------------------
     Appended last. CONSUMES contract vars (--fs-fluid-*, --space-fluid-*)
     from tokens.css (Tokens agent) with inline clamp() fallbacks of the
     same intent, so correct regardless of PR merge order. tokens.css is
     not edited here. The hero title already used clamp() — left as-is.

     Patterns: Utopia.fyi fluid type/space (CC-BY); CSS-Tricks "Modern
     Fluid Typography Using CSS Clamp"; MDN container queries (CC-BY-SA).
     Range 344→2160px; rem base + vw slope preserves zoom (WCAG 1.4.4).

     Key change: the dual race/vote layout switched from a viewport
     media query (min-width:768px) to a CONTAINER query so it goes
     side-by-side based on the CONTENT column width (correct whether
     the sidebar is open, collapsed, or the page is on a narrow rail).
     ============================================================ */

  /* Dual section: container query instead of viewport media query.
     The row itself is the query container; it goes 2-up once the row
     is at least 40rem (~640px) wide, regardless of viewport. */
  .row-ht-dual{ container-type: inline-size; container-name: heisman-htdual; }
  @container heisman-htdual (min-width: 40rem){
    .row-ht-dual{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }

  /* Section padding + leader name: fluid instead of 22/18px + 26/22px steps. */
  .ht-section{ padding: var(--space-fluid-lg, clamp(1.125rem, 0.9rem + 0.9vw, 1.375rem)) var(--space-fluid-md, clamp(1rem, 0.75rem + 1.2vw, 1.5rem)); }
  .ht-leader-name{ font-size: var(--fs-fluid-h2, clamp(1.375rem, 1.18rem + 0.9vw, 1.625rem)); } /* 22 → 26px */
  .ht-vote-opt-name{ font-size: var(--fs-fluid-h3, clamp(0.875rem, 0.84rem + 0.18vw, 1rem)); } /* 14 → 16px */

  /* ============================================================
     END DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER
     ============================================================ */
}
}

/* ============================================================
   D-HEIS5 — DORMANT RACE / VOID STATE (2026-07-21, Pat)
   ============================================================
   The Heisman page does nothing until Week 3: "there should be no candidates
   available since the season has not started yet ... it should pretty much go
   into a completely void state." script.js#renderVoidState() replaces
   .ht-main-row (standings + ballot) with .ht-void once /heisman/state reports
   votingActive:false.

   .ht-gate-pending hides that row until the answer lands, because both ballot
   modules mount on DOMContentLoaded and would otherwise flash a live ballot on
   a dormant page. visibility (not display) so nothing reflows when it clears,
   and an inline 6s failsafe in index.html removes the class if the fetch dies.
   ============================================================ */
#main.ht-gate-pending .ht-main-row{
  visibility:hidden;
}

.ht-void{
  display:grid;
  place-items:center;
  padding:clamp(32px,7vw,72px) 20px;
}
.ht-void-inner{
  max-width:56ch;
  text-align:center;
  display:grid;
  gap:14px;
  justify-items:center;
}
.ht-void-trophy{
  color:var(--hm-gold-leaf,#E8C77A);
  opacity:.5;
}
.ht-void-trophy svg{
  width:clamp(48px,9vw,72px);
  height:clamp(48px,9vw,72px);
  display:block;
}
.ht-void-title{
  margin:0;
  font-family:var(--f-display,"Graduate",serif);
  font-size:clamp(1.5rem,1.1rem + 2vw,2.5rem);
  letter-spacing:.04em;
  line-height:1.1;
  color:var(--hm-ivory,#F4ECD8);
  text-wrap:balance;
}
.ht-void-msg{
  margin:0;
  font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem);
  line-height:1.6;
  color:var(--hm-ivory-dim,rgba(244,236,216,.65));
  text-wrap:pretty;
}
.ht-void-now{
  margin:6px 0 0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px;
  border:1px solid rgba(232,199,122,.28);
  border-radius:999px;
  background:rgba(232,199,122,.06);
}
.ht-void-now-label{
  font:700 10px/1 var(--f-mono,ui-monospace,monospace);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hm-ivory-dim,rgba(244,236,216,.65));
}
.ht-void-now-val{
  font:700 13px/1 var(--f-mono,ui-monospace,monospace);
  letter-spacing:.06em;
  color:var(--hm-gold-leaf,#E8C77A);
}