/* =========================================================
   /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(--fd); font-weight: 700; font-size: var(--t-ui); letter-spacing: .12em; text-transform: uppercase; 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(--fd); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; 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(--fd); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; 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); }
.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(--fd); font-weight: 700; font-size: var(--t-ui); letter-spacing: .12em; text-transform: uppercase; 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(--fd); font-weight: 700; 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; }