/* =========================================================
   Forecast lists, tabs and the side-by-side table, shared by the three pillar-02 forecast
   pages (2026-10-17). Replaced forecast-round.css when The Round's ring was retired under
   PROJECT_INTENT.md's tenets: each page now switches its two voices with tabs
   (assets/js/forecast-tabs.js) -- Model + You on Hall of Fame and Oscars, Grant + You on Bracket.
   The list rows, probability bars, notes, actions and trust line are carried over unchanged.
   ========================================================= */

/* ── Voice tabs ─────────────────────────────────────────── */
.fc-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.fc-tab {
  display: flex; align-items: center; gap: var(--s-2); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3); color: var(--sub); font: inherit; text-align: left;
}
.fc-tab i { width: 10px; height: 10px; border-radius: var(--r-circle); background: var(--text); flex: none; }
.fc-tab.is-grant i { background: var(--orange); }
.fc-tab.is-model i { background: var(--projection); }
.fc-tab.is-compare i { background: none; border: 1px solid var(--muted); }
.fc-tab b { color: var(--text); font-weight: 600; font-size: var(--t-ui); }
.fc-tab small { display: block; color: var(--muted); font-size: var(--t-meta); }
.fc-tab[aria-selected="true"] { border-color: var(--muted); background: var(--card); }
.fc-tab.is-grant[aria-selected="true"] { border-color: var(--studio-border); }
.fc-tab.is-model[aria-selected="true"] { border-color: var(--projection-border); }
.fc-tab[hidden] { display: none; }
/* The tablist's room is held while the page loads its data, so the tabs arriving don't push the page down
   (CLS, 2026-10-26). Heights are the mounted tablist's: one row, or two where the voices wrap. */
.fc-tabs-slot[hidden] { display: block; visibility: hidden; min-height: 60px; margin-top: var(--s-4); }
@media (max-width: 439px) { .fc-tabs-slot[hidden] { min-height: 128px; } }
.fc-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ── Header band (2026-11-03) ───────────────────────────────
   A forecast header opts in with .fc-head. From 1200px the voices sit beside the title instead of in a row of
   their own, so the first number is a row nearer the top. On a phone the voices are one row of names: the one-line
   descriptions are on the tabs' own panels, and the held height is the row's (it was two 60px cards, 128px). */
@media (min-width: 1200px) {
  .fc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: end; }
  .fc-head > * { grid-column: 1; }
  .fc-head > .fc-tabs, .fc-head > .fc-tabs-slot[hidden] { grid-column: 2; grid-row: 1 / span 10; align-self: end; margin-top: 0; }
}
@media (max-width: 439px) {
  .fc-head .fc-tabs { flex-wrap: nowrap; }
  .fc-head .fc-tab { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; padding: var(--s-2); white-space: nowrap; }
  .fc-head .fc-tab small { display: none; }
  .fc-head .fc-tabs-slot[hidden] { min-height: 44px; }
}

/* ── Side by side ───────────────────────────────────────── */
.fc-cmp { overflow-x: auto; margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.fc-cmp table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fc-cmp th, .fc-cmp td { padding: 7px var(--s-3); border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.fc-cmp thead th { font-family: var(--fb); font-size: var(--t-label); color: var(--muted); background: var(--surface); }
.fc-cmp th[scope="row"] { text-align: left; font-weight: 600; }
.fc-cmp th[scope="row"] small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-meta); }
.fc-cmp th[scope="row"] .tcard-logo { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: var(--s-2); }
.fc-cmp td.is-gap { color: var(--orange); }
.fc-cmp td.is-off { color: var(--muted); }
.fc-cmp tr.is-same th, .fc-cmp tr.is-same td { color: var(--muted); }

/* ── Single-voice list ──────────────────────────────────── */
.fr-list { margin-bottom: var(--s-4); }
.fr-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; min-height: 48px; border-bottom: 1px solid var(--border); transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
.fr-rk { font-family: var(--fm); font-size: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-nm { min-width: 0; }
.fr-nm b { display: block; font-family: var(--fb); font-weight: 500; font-size: var(--t-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-nm small { display: block; font-family: var(--fm); font-size: var(--t-label); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-val { display: flex; align-items: center; gap: var(--s-1); font-family: var(--fc); font-size: var(--t-label); color: var(--muted); white-space: nowrap; }
.fr-sw { width: 10px; height: 10px; border-radius: var(--r-sm); border: 1.5px solid var(--projection); flex: none; }
.fr-sw.is-off { border-style: dashed; border-color: var(--muted); }
.fr-off { color: var(--sub); }
.fr-note a { color: var(--orange); }

.fr-empty { border: 1px dashed var(--border); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-3); justify-items: start; margin-bottom: var(--s-5); }
.fr-empty p { margin: 0; color: var(--sub); font-size: var(--t-body); max-width: 52ch; }
.fr-cta { font-family: var(--fb); font-weight: 600; font-size: var(--t-ui); color: var(--bg); background: var(--orange); border-radius: var(--r-md); padding: 8px 14px; text-decoration: none; }
.fr-cta:hover { filter: var(--hover-lift); }
.fr-note { font-family: var(--fc); font-size: var(--t-label); color: var(--muted); margin: var(--s-2) 0 var(--s-5); }

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

/* ── Ranked list with a probability bar (Hall of Fame model view) ───────────────────────────
   Same .fr-row as the single-voice list, widened to four columns: rank, name, bar, percent. The
   bar is each player's own induction chance, so 99% and 88% look different at a glance; rows
   below the class line are drawn quieter (they used to carry an inline opacity). */
.fr-row--bar { grid-template-columns: 28px minmax(0, 1fr) minmax(90px, 34%) 56px; }
.fr-row-head { min-height: 0; padding: var(--s-2) 0; font-family: var(--fm); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fr-row-head .fr-nm { font-family: inherit; }
.fr-bar { height: 6px; background: var(--surface); border-radius: var(--r-sm); overflow: hidden; }
.fr-bar i { display: block; height: 100%; background: var(--projection); border-radius: var(--r-sm); }
.fr-pc { font-family: var(--fm); font-size: var(--t-body); font-weight: 500; color: var(--projection); text-align: right; font-variant-numeric: tabular-nums; }
.fr-row.is-out .fr-nm b { color: var(--sub); }
.fr-row.is-out .fr-bar i { background: var(--muted); }
.fr-row.is-out .fr-pc { color: var(--sub); }
.fr-line { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; font-family: var(--fm); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--projection); }
.fr-line::before, .fr-line::after { content: ""; height: 1px; flex: 1; background: var(--projection); opacity: 0.55; }
.fr-line::before { flex: 0 0 16px; }
@media (max-width: 600px) {
  .fr-row--bar { grid-template-columns: 22px minmax(0, 1fr) 52px; }
  .fr-row--bar .fr-bar, .fr-row-head .fr-bar-h { display: none; }
}

/* Actions and the one-line record under the answer */
.fr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); font-family: var(--fc); font-size: var(--t-ui); }
.fr-actions a:not(.fr-cta) { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
/* Wide enough that the row does not wrap: the 44px target gives its extra height back to the row. */
@media (min-width: 761px) { .fr-actions a:not(.fr-cta) { margin-block: -12px; } }
.fr-cta { font-family: var(--fm); font-size: var(--t-ui); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 18px; }
.fr-trust { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-6) 0 var(--s-7); padding-top: var(--s-3); border-top: 1px solid var(--border); font-family: var(--fm); font-size: var(--t-meta); color: var(--muted); }
.fr-trust b { color: var(--text); font-weight: 500; }
/* A standalone link that can wrap at 390, so the target grows by padding and the layout gets it back by margin. */
.fr-trust a { color: var(--orange); padding-block: 13px; margin-block: -13px; }


/* "What the evidence can't see" strip (_includes/forecast-limits.html): same weight as the probabilities, so it
   sits with the first number (under the header on the Hall of Fame forecast, beside the chart on the Oscars one). The writer's note (_includes/forecast-note.html) shares
   the frame and sits right after the forecast list. */
.fc-limits, .fc-note { margin: var(--s-4) 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-left-width: 3px; }
.fc-limits__h, .fc-note__h { margin: 0 0 var(--s-1); font-family: var(--fm); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.fc-limits__p, .fc-note__body p { margin: 0 0 var(--s-2); font-family: var(--fb); font-size: var(--t-ui); line-height: 1.6; color: var(--sub); }
.fc-note__body p:last-child { margin-bottom: 0; }
.fc-limits__more { margin: 0; font-family: var(--fc); font-size: var(--t-label); }
.fc-limits__more a { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
/* The note is Grant's own voice, so it carries --orange (the sitewide mark of his voice); the limits strip is the model's, so it stays neutral. */
.fc-note { border-left-color: var(--orange); }
.fc-note__h { color: var(--orange); }
.fc-note__by { margin: var(--s-2) 0 0; font-family: var(--fc); font-size: var(--t-label); color: var(--muted); }
.fc-limits__more a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 761px) { .fc-limits__more a { margin-block: -15px; } }