/* =========================================================
   /bracket/forecast/ (rebuilt 2026-10-16, PROJECT_INTENT.md T2-T4).
   Two voices -- my bracket and yours -- as team cards (team-card.css). The voice tabs and the
   side-by-side table are shared with the other forecasts (forecast-list.css, forecast-tabs.js);
   this sheet holds the page's own toolbar, groups, callouts and footer.
   ========================================================= */

.bfc { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) var(--s-7); }


.bfc-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between;
  margin: var(--s-5) 0 var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border);
}
.bfc-toolbar h2 { margin: 0; font-family: var(--fb); font-weight: 600; font-size: var(--t-ui); color: var(--sub); }
.bfc-ctl { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.bfc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.bfc-seg button { background: none; border: 0; color: var(--muted); font: inherit; font-size: var(--t-meta); padding: 6px var(--s-3); cursor: pointer; }
.bfc-seg button[aria-pressed="true"] { background: var(--card); color: var(--text); }
.bfc-select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px var(--s-3); font: inherit; font-size: var(--t-meta); }
.bfc-seg button:focus-visible, .bfc-select:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.bfc-group { margin-top: var(--s-5); }
.bfc-ghead { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: 10px; }
.bfc-ghead .n { font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.bfc-ghead .l { font-family: var(--fb); font-size: var(--t-label); color: var(--muted); }
.bfc-ghead.is-plain .n { color: var(--sub); font-size: var(--t-strong); letter-spacing: .08em; text-transform: uppercase; }
.bfc-ghead.is-you .n { color: var(--text); }

.bfc-callout { border: 1px solid var(--studio-border); background: var(--studio-dim); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-top: var(--s-4); max-width: 72ch; color: var(--sub); }
.bfc-callout b { color: var(--orange); }
.bfc-callout a { color: var(--orange); }
.bfc-note { color: var(--muted); font-size: var(--t-meta); margin: var(--s-2) 0 0; max-width: 72ch; }
.bfc-note a { color: var(--orange); }
.bfc-pubnote { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); margin-top: var(--s-4); max-width: 72ch; }
.bfc-pubnote-label { font-family: var(--fb); font-size: var(--t-label); color: var(--orange); margin-bottom: 6px; }
.bfc-pubnote p { color: var(--sub); margin: 0 0 var(--s-2); }
.bfc-pubnote p:last-child { margin-bottom: 0; }
.bfc-pubnote a { color: var(--orange); }
.bfc-diff { font-size: var(--t-meta); margin-top: var(--s-3); color: var(--muted); }
.bfc-diff .add { color: var(--ok); }
.bfc-diff .rm { color: var(--danger); }
/* Room held for what arrives with teams.json (CLS, 2026-10-26): the phase strip (2-4 lines by width) and a
   screen-tall loading state so the notes below start off screen. Heights are the loaded page's. */
#brk-fc-phase:empty { min-height: 68px; }
@media (max-width: 619px) { #brk-fc-phase:empty { min-height: 83px; } }
@media (max-width: 449px) { #brk-fc-phase:empty { min-height: 97px; } }
@media (max-width: 339px) { #brk-fc-phase:empty { min-height: 112px; } }
.bfc-empty.is-loading { min-height: 100vh; }
.bfc-empty { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); margin-top: var(--s-4); text-align: center; color: var(--sub); }
.bfc-empty strong { display: block; color: var(--text); }
.bfc-empty a { color: var(--orange); }


.bfc-src { color: var(--muted); font-size: var(--t-label); margin-top: var(--s-3); }
.bfc-src a { color: inherit; }
.bfc-h2 { margin: var(--s-6) 0 var(--s-3); font-family: var(--fb); font-weight: 600; font-size: var(--t-ui); color: var(--sub); }
.bfc-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.bfc-limits p { margin: 0; color: var(--sub); border-top: 2px solid var(--border); padding-top: 10px; }
.bfc-limits b { display: block; color: var(--text); font-weight: 600; margin-bottom: var(--s-1); }
.bfc-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
.bfc-foot a { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); color: inherit; text-decoration: none; }
.bfc-foot a:hover { border-color: var(--orange); }
.bfc-foot b { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--fb); font-weight: 600; font-size: var(--t-strong); color: var(--orange); }
.bfc-foot span { display: block; color: var(--muted); font-size: var(--t-meta); margin-top: 6px; }
@media (max-width: 760px) { .bfc-limits, .bfc-foot { grid-template-columns: 1fr; } }
.bfc-ctl[hidden], .bfc-seg[hidden], .bfc-select[hidden] { display: none; }
.bfc-sport-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.bfc-build { display: inline-flex; align-items: center; gap: var(--s-1); padding: 6px var(--s-4); border: 1px solid var(--orange); border-radius: var(--r-pill); color: var(--orange); text-decoration: none; font-size: var(--t-meta); font-weight: 700; }
.bfc-build:hover { background: var(--card); }
.bfc-build:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bfc-sport { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.bfc-sport a { padding: 6px var(--s-4); color: var(--muted); text-decoration: none; font-size: var(--t-meta); font-weight: 600; }
.bfc-sport a[aria-current="page"] { background: var(--card); color: var(--text); }
.bfc-sport a:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* Keep the forecast's compact controls comfortable to use by touch. */
.bfc-seg button, .bfc-select, .bfc-build, .bfc-sport a {
  min-height: 44px;
  box-sizing: border-box;
}
.bfc-sport a { display: inline-flex; align-items: center; }

/* The publish date beside the toolbar title shows only where the voices tabs have dropped their descriptions. */
.bfc-title-note { display: none; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
/* On a phone the header also drops its "Build your own" link: the rail's third step and the card at the foot of
   the page both lead to the Studio, and the two rows it took pushed the first seed line off the first screen. */
@media (max-width: 439px) {
  .bfc-title-note { display: block; font-size: var(--t-label); margin-top: 2px; }
  .bfc-build { display: none; }
}

/* ── Phone By seed: ruled rows (Grant, 2026-11-09) ───────────────────────────────────────────
   Below 700px a seed line is a list, not a stack of cards: one hairline-ruled row per team, the
   logo and name on the left and the bid on the right, so the field reads as one scannable column
   (the 76 teams used to run ~5,000px). The conference stays in the team sheet. Rows keep a 44px
   tap target; a row still opens the full sheet. Desktop cards and By a metric are untouched. */
@media (max-width: 699px) {
  .bfc-group { margin-top: var(--s-4); }
  .bfc-ghead { margin-bottom: 0; padding-bottom: var(--s-1); border-bottom: 2px solid var(--border); }
  .bfc-group .tcard-grid { display: block; }
  .bfc-group .tcard.is-slim {
    display: flex; align-items: center; gap: var(--s-3); min-height: 44px; box-sizing: border-box;
    padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
    background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    transform: none;
  }
  .bfc-group .tcard.is-slim:hover { background: var(--card); transform: none; }
  .bfc-group .tcard.is-slim .tcard-logo { width: 28px; height: 28px; flex: none; }
  .bfc-group .tcard.is-slim .tcard-name { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
  .bfc-group .tcard.is-slim .tcard-name b { flex: 1 1 auto; min-width: 0; font-size: var(--t-body); -webkit-line-clamp: 2; }
  .bfc-group .tcard.is-slim .tcard-name small { display: contents; }
  .bfc-group .tcard.is-slim .tcard-cf { display: none; }
  .bfc-group .tcard.is-slim .tcard-bid { flex: none; font-size: var(--t-meta); }
  .bfc-group .tcard.is-slim:focus-visible { outline-offset: -2px; }

  /* Jump to the bubble: a pill over the field's bottom corner; script hides it once the bubble is on screen. */
  .bfc-jump {
    position: fixed; right: var(--pad); bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px)); z-index: 5;
    display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; box-sizing: border-box;
    padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--card); color: var(--orange);
    border: 1px solid var(--orange); font-size: var(--t-meta); font-weight: 700; text-decoration: none;
  }
  .bfc-jump[hidden] { display: none; }
  .bfc-jump:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
}
@media (min-width: 700px) { .bfc-jump { display: none; } }
#bfc-bubble { scroll-margin-top: calc(var(--nav-h, 66px) + var(--s-3)); }
.bfc-ghead:focus { outline: none; }
.bfc-ghead:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* A focused row scrolls clear of the floating jump pill (WCAG 2.2 focus not obscured). */
@media (max-width: 699px) { html:has(.bfc-jump:not([hidden])) { scroll-padding-bottom: calc(44px + var(--s-4) * 2); } }