/* =========================================================
   THE ROUND ROBIN — hub.css
   The category hub (_includes/category-hub.html) and its process
   scenes (_includes/hub-scene-*.html). Loaded by each hub page's
   `extra_css: [hub.css]`; listed in fingerprint-assets.js.

   Moved out of the include's inline <style> (and bracket/index.html's
   seedline block) on 2026-09-15, when the hub moved from bordered
   cards to an editorial spread: DESIGN_DIRECTION.md §7, "reserve a
   card for an object with a real boundary."
   ========================================================= */

/* ── Hero spread ───────────────────────────────────────── */

/* The hub hero sits on the same centered --max column as the path and shelves
   below it. Sitewide .page-header-inner is left-aligned; with a two-column hero
   that offset read as a misaligned grid, so the hub centers its own. */
.hub-hero .page-header-inner { margin-inline: auto; box-sizing: border-box; }

/* 1101px is the ladder's "wide desktop, where a layout can afford a second axis." */
@media (min-width: 1101px) {
  .hub-hero.has-scene .page-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6);
    align-items: start;
  }
}
.hub-scene-slot { margin-top: var(--s-5); }
@media (min-width: 1101px) { .hub-scene-slot { margin-top: 0; } }

/* The one number the hub carries, always with its scope. */
.hub-record { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); row-gap: 2px; }
.page-header-inner .hub-record { max-width: 540px; }
.hub-record-link { display: inline-flex; align-items: baseline; gap: var(--s-1); color: var(--text); text-decoration: none; }
.hub-record-link:hover .hub-record-label { color: var(--orange); }
.hub-record-link .trr-icon { align-self: center; color: var(--orange); }
.hub-record-val { font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); color: var(--projection); font-variant-numeric: tabular-nums; }
.hub-record-label { font-family: var(--fb); font-weight: 600; font-size: var(--t-ui); color: var(--sub); }
.hub-record-scope { font-family: var(--fm); font-size: var(--t-micro); color: var(--sub); }
.hub-record-sub { flex-basis: 100%; font-family: var(--fm); font-size: var(--t-micro); color: var(--muted); }

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

/* ── The ordered path ───────────────────────────────────── */
.hub-path-wrap { margin-top: 36px; }
.hub-path-wrap h2.section-label { display: flex; }
.hub-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 900px) { .hub-path { grid-template-columns: 1fr; gap: 0; } }

.hub-step { --node: 13px; position: relative; border-top: 2px solid var(--c, var(--orange)); }
.hub-step-link { display: flex; flex-direction: column; height: 100%; padding-top: var(--s-4); color: inherit; text-decoration: none; }
/* The step's stop on its rule: the ordinals it replaced (2026-09-25) now live only in DOM order. */
.hub-step-node {
  position: absolute; top: calc(var(--node) / -2 - 1px); left: 0; width: var(--node); height: var(--node);
  border-radius: var(--r-circle); background: var(--c, var(--orange));
}
.hub-step-title {
  font-family: var(--fb); font-weight: 700; font-size: var(--t-h3);
  line-height: 1.1; color: var(--text);
}
.hub-step-subtext { margin-top: 4px; font-family: var(--fd); font-weight: 600; font-size: var(--t-meta); color: var(--c, var(--orange)); }
.hub-step-desc { margin-top: var(--s-2); font-size: var(--t-body); line-height: 1.6; color: var(--sub); flex: 1; }
.hub-step-foot { margin-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.hub-step-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fd); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c, var(--orange));
}
a.hub-step-link:hover .hub-step-title { color: var(--c, var(--orange)); }
a.hub-step-link:focus-visible { outline: 2px solid var(--c, var(--orange)); outline-offset: 4px; }
.hub-step.soon { opacity: 0.5; }

/* Stacked: the rule turns vertical, so the three steps read as one descending path. */
@media (max-width: 900px) {
  .hub-step { border-top: none; border-left: 2px solid var(--c, var(--orange)); }
  .hub-step-node { top: 2px; left: calc(var(--node) / -2 - 1px); }
  .hub-step-link { padding: 0 0 var(--s-5) var(--s-4); }
  .hub-step:last-child .hub-step-link { padding-bottom: 0; }
}

/* ── Latest Projections (hub-leaders.js renders the widgets) ── */
.leader-shelf-wrap { margin-top: 48px; }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: 10px; }
.pick-grid.is-single { grid-template-columns: 1fr; max-width: 520px; }
@media (max-width: 860px) { .pick-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.pick-widget {
  display: flex; flex-direction: column;
  border-top: 2px solid var(--projection);
  padding-top: var(--s-3); text-decoration: none; color: inherit;
}
/* Grant's own picks take the orange the site reserves for his voice; the model
   half keeps --projection blue. Never swapped for variety. */
.pick-widget.is-mine { border-top-color: var(--orange); }
a.pick-widget:hover .pick-widget-title { color: var(--orange); }
a.pick-widget:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.pick-widget-title { font-family: var(--fd); font-weight: 700; font-size: var(--t-ui); color: var(--text); }
.pick-widget.is-mine .pick-widget-title { color: var(--orange); }
.pick-widget-sub { font-family: var(--fb); font-size: var(--t-meta); color: var(--muted); margin-top: 2px; }
.pick-widget-body { margin-top: var(--s-3); flex: 1; }
.pick-empty { font-family: var(--fb); font-size: var(--t-meta); color: var(--muted); font-style: italic; padding: 10px 0; }
.pick-widget-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border);
}
.pick-widget-foot:only-child { border-top: none; }
.pick-stamp { font-family: var(--fm); font-size: var(--t-micro); color: var(--muted); }
.pick-cta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fb); font-size: var(--t-meta); font-weight: 600; color: var(--orange); white-space: nowrap; }
.leader-shelf { display: flex; flex-direction: column; margin-top: 10px; }
.leader-row { display: flex; align-items: center; gap: var(--s-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.leader-row:last-child { border-bottom: none; }
.leader-rank { font-family: var(--fd); font-weight: 700; font-size: var(--t-meta); color: var(--muted); width: 18px; flex-shrink: 0; text-align: right; }
.leader-img { width: 28px; height: 28px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--surface); }
.leader-body { min-width: 0; flex: 1; }
.leader-name { font-family: var(--fb); font-weight: 600; font-size: var(--t-ui); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-meta { font-size: var(--t-micro); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-value { font-family: var(--fm); font-size: var(--t-meta); font-weight: 600; color: var(--projection); flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.leader-skeleton { height: 48px; position: relative; overflow: hidden; }
.leader-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--surface), transparent);
  animation: leader-shimmer 1.4s infinite;
}
@keyframes leader-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (max-width: 760px) { .leader-name { white-space: normal; } }

/* Seed-line rows inside the picks widgets: bracket's projection is naturally seed
   lines rather than a ranked list. Moved from bracket/index.html. */
.seedline-thead { display: flex; align-items: center; gap: var(--s-3); padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.seedline-thead span:first-child { width: 22px; flex-shrink: 0; }
.seedline-thead span { font-family: var(--fb); font-weight: 700; font-size: var(--t-micro); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.seedline-row { display: flex; align-items: center; gap: var(--s-3); padding: 9px 0; border-bottom: 1px solid var(--border); }
.seedline-row:last-child { border-bottom: none; padding-bottom: 0; }
.seedline-num {
  font-family: var(--fd); font-weight: 700; font-size: var(--t-meta); color: var(--orange);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.seedline-teams { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); min-width: 0; flex: 1; }
.seedline-team { display: flex; align-items: center; gap: var(--s-1); border-bottom: 1px solid var(--border); padding: 4px 0; min-width: 0; }
.seedline-team span { font-family: var(--fb); font-size: var(--t-meta); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seedline-logo { width: 15px; height: 15px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--card); }
.seedline-empty { font-family: var(--fb); font-size: var(--t-meta); color: var(--muted); font-style: italic; padding-top: 10px; }
@media (max-width: 480px) { .seedline-teams { grid-template-columns: 1fr; } }

/* ── What's next ────────────────────────────────────────── */
.cal-shelf-wrap { margin-top: 48px; }
.cal-shelf { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid var(--border); }
.cal-row { display: flex; align-items: baseline; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--border); }
.cal-when { font-family: var(--fm); font-size: var(--t-meta); color: var(--guide); width: 90px; flex-shrink: 0; }
.cal-tentative { font-style: italic; color: var(--muted); }
.cal-label { font-size: var(--t-ui); color: var(--sub); }
@media (max-width: 760px) {
  .cal-row { flex-direction: column; gap: 3px; }
  .cal-when { width: auto; }
}

/* =========================================================
   SCENES — shared frame (every hub-scene-*.html)
   ========================================================= */
.hub-scene { margin: 0; border-top: 2px solid var(--orange); padding-top: var(--s-3); }
.page-header-inner .hub-scene p { max-width: none; font-size: inherit; }
.scene-eyebrow { font-family: var(--fd); font-weight: 600; font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.page-header-inner .hub-scene .scene-eyebrow { font-size: var(--t-label); color: var(--muted); }
.scene-claim { margin-top: 6px; font-family: var(--fe); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; color: var(--text); }
/* grid-column: inside .cut-door (a 2-column grid) the stamp would otherwise fall
   into the 44px count column and wrap one word per line. */
.page-header-inner .hub-scene .scene-stamp { grid-column: 1 / -1; font-family: var(--fm); font-size: var(--t-micro); color: var(--muted); margin-top: var(--s-2); }

.scene-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.scene-controls[hidden] { display: none; }
.scene-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 10px; color: var(--sub); cursor: pointer;
  font-family: var(--fd); font-weight: 600; font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase;
}
.scene-btn:hover:not(:disabled) { color: var(--orange); border-color: var(--orange); }
.scene-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.scene-btn:disabled { opacity: 0.4; cursor: default; }
.page-header-inner .hub-scene .scene-status { flex: 1; text-align: center; font-family: var(--fm); font-size: var(--t-micro); color: var(--muted); }

/* Stepper states, set by hub-scenes.js. Without JS no step carries a class, so the
   final state shows. Future stages are what hasn't happened yet: dimmed, never hidden. */
.hub-scene [data-scene-step] { transition: opacity 180ms ease; }
.hub-scene.is-stepped .is-future { opacity: 0.22; }
.hub-scene.is-stepped .is-past { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .hub-scene [data-scene-step], .hub-scene [data-scene-step] * { transition: none !important; }
}

/* =========================================================
   SCENE — cut-funnel (the narrowing cut)
   ========================================================= */
.cut-stages { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.cut-stage {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-3);
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border);
}
.cut-count { grid-row: span 2; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
/* Width is the stage's share of the first stage's count, set inline from the funnel. */
.cut-bar { display: block; height: 6px; }
.cut-bar span { display: block; height: 100%; background: var(--sub); opacity: 0.45; }
.cut-text { display: block; margin-top: 4px; min-width: 0; }
.cut-label { font-family: var(--fb); font-weight: 600; font-size: var(--t-meta); color: var(--text); }
.cut-note { font-family: var(--fb); font-size: var(--t-meta); color: var(--muted); }
.hub-scene.is-stepped .cut-stage.is-active .cut-bar span { background: var(--orange); opacity: 1; }
.hub-scene.is-stepped .cut-stage.is-active .cut-count { color: var(--orange); }

/* The door: the class drawn as seats (solid = the Hall's minimum, outlined = up to
   its maximum), then the model's current class beneath it. */
.cut-door { border-bottom: none; }
.cut-seats { display: flex; gap: 3px; height: 10px; }
.seat { width: 10px; height: 10px; background: var(--orange); }
.seat.is-maybe { background: none; box-shadow: inset 0 0 0 1.5px var(--orange); }
.cut-door .cut-count { color: var(--orange); }

.door-names { grid-column: 1 / -1; list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.door-name {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; column-gap: var(--s-2);
  align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border);
}
.door-name:last-child { border-bottom: none; }
/* Square marks per CHART_STYLE.md §2. Every row is a projection, so every mark is
   notched; a filled mark clears the room's vote threshold, an outlined one does not. */
.door-mark { width: 9px; height: 9px; align-self: center; box-shadow: inset 0 0 0 1.5px var(--projection); clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%); }
.door-name.clears .door-mark { background: var(--projection); }
.door-who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.door-player { font-family: var(--fb); font-weight: 600; font-size: var(--t-meta); color: var(--text); }
.door-pos { font-family: var(--fm); font-size: var(--t-micro); color: var(--muted); }
.door-stat { font-family: var(--fm); font-size: var(--t-micro); color: var(--sub); white-space: nowrap; }
.door-chance { font-family: var(--fm); font-size: var(--t-meta); font-weight: 600; color: var(--projection); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.door-name:not(.clears) .door-player { color: var(--sub); }
.page-header-inner .hub-scene .door-more { grid-column: 1 / -1; margin-top: var(--s-2); font-family: var(--fb); font-size: var(--t-meta); color: var(--muted); }
.door-more a { display: inline-flex; align-items: center; gap: 3px; color: var(--orange); text-decoration: none; font-weight: 600; }
.door-more a:hover { text-decoration: underline; }
.door-hint { display: none; }
@media (max-width: 480px) {
  .door-name { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .door-stat { grid-column: 2 / -1; grid-row: 2; }
  /* Tap to reveal (hub-scenes.js [data-scene-reveal]). Only once JS has wired it
     (.has-reveal), so a no-JS phone still shows every stat. */
  .hub-scene.has-reveal .door-name[data-scene-reveal] { cursor: pointer; }
  .hub-scene.has-reveal .door-name[data-scene-reveal] .door-stat { display: none; }
  .hub-scene.has-reveal .door-name.is-open .door-stat { display: block; }
  .hub-scene.has-reveal .door-name[data-scene-reveal]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  .hub-scene.has-reveal .door-hint { display: inline; }
}