/* Fantasy basketball (js/views/fantasy*.js). Colors come from the app tokens, so both themes work. */
.fa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.fa-inline { display: inline-flex; align-items: center; gap: 6px; }
.fa-phase { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.fa-intro { max-width: 70ch; }
.fa-note { font-size: 12px; margin: 6px 0; line-height: 1.4; }
.fa-hint { font-size: 11px; }
.fa-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0 16px; align-items: start; }
.fa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 12px; }
.fa-grid-tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
.fa-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fa-field select, .fa-field input[type="text"], .fa-field input[type="number"] { width: 100%; min-width: 0; box-sizing: border-box; }
.fa-flabel { font-size: 12px; color: var(--dim); }
.fa-num { width: 5.5em; }
.fa-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 6px 10px; margin-bottom: 8px; }
.fa-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.fa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 4px; }
.fa-actions .btn { text-decoration: none; }
.fa-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 16px; align-items: start; }
.fa-two > * { min-width: 0; }
.fa-two:has(> div:empty:first-child) { grid-template-columns: 1fr; }
.fa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fa-search { flex: 1 1 160px; min-width: 0; }
.fa-pcell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fa-pcell .face { flex: none; }
.fa-pname { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.fa-pos { font-size: 10px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; line-height: 1.5; }
.fa-sub { font-size: 12px; }
.fa-tlink { font-weight: 600; }
.fa-tlink.me::after { content: " (you)"; font-weight: 400; color: var(--dim); font-size: 11px; }
.fa-list, .fa-picks, .fa-facts { list-style: none; margin: 0; padding: 0; }
.fa-picks { max-height: 520px; overflow: auto; }
.fa-list li, .fa-pick, .fa-facts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.fa-facts li { display: block; line-height: 1.6; }
.fa-facts .fa-pcell { vertical-align: middle; }
.fa-list li:last-child, .fa-pick:last-child { border-bottom: 0; }
.fa-pick.me, .fa-table tr.me td, .fa .table-wrap tr.me td { background: var(--accent-soft); }
.fa-pickno { font-variant-numeric: tabular-nums; color: var(--dim); min-width: 2.8em; font-size: 12px; }
.fa-benchrow .num { margin-left: auto; }
.fa-table { width: 100%; }
.fa-table td, .fa-table th { vertical-align: middle; }
.fa-table tr.cut td { border-bottom: 2px solid var(--accent); }
.fa-w { color: var(--good); font-weight: 700; }
.fa-l { color: var(--bad); font-weight: 700; }
.fa-cats th[scope="row"] { text-align: center; color: var(--dim); }
.fa-cats td { text-align: center; font-variant-numeric: tabular-nums; }
.fa-clock { border-color: var(--accent); }
.fa-warn { margin: 8px 0; padding-left: 18px; color: var(--warn); font-size: 13px; }
.fa-matchups { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.fa-mu { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.fa-mu.me { border-color: var(--accent); }
.fa-mu-link { display: block; padding: 6px 10px; color: inherit; text-decoration: none; }
.fa-mu-link:hover { background: var(--hover); border-radius: 10px; }
.fa-mu-side { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.fa-mu-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-mu-score { font-variant-numeric: tabular-nums; }
.fa-mu-side.win { font-weight: 700; }
.fa-mhead { text-align: center; }
.fa-mscore { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 8px 0; }
.fa-mteam.win .fa-big { color: var(--good); }
.fa-big { font-family: var(--score); font-size: 32px; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.fa-vs { color: var(--dim); }
.fa-champ { text-align: center; }
.fa-lineup { display: grid; gap: 6px; }
.fa-slot { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fa-slot:last-child { border-bottom: 0; }
.fa-slotname { font-weight: 700; color: var(--dim); font-size: 12px; }
.fa-slotsel, .fa-locksel { grid-column: 2 / -1; max-width: 100%; min-width: 0; }
.fa-slotinfo { grid-column: 2 / 3; font-size: 12px; }
.fa-slotval { grid-column: 3; grid-row: 1; }
.fa-slot > .fa-pcell { grid-column: 2; }
.fa-games { font-size: 12px; }
.fa-g { white-space: nowrap; }
.fa-addpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fa-addpanel select { max-width: 100%; }
.fa-phead { display: flex; gap: 14px; align-items: center; }
.fa-pt { margin: 0 0 2px; font-size: 22px; overflow-wrap: anywhere; }
.fa-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.fa-dl dt { color: var(--dim); }
.fa-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
	.fa-two { grid-template-columns: 1fr; }
	.fa-big { font-size: 26px; }
	.fa-phase { margin-left: 0; width: 100%; }
	.fa-matchups { grid-template-columns: 1fr; }
	.fa-form { grid-template-columns: 1fr; }
}
.fa-table td.fa-games { white-space: normal; min-width: 11em; line-height: 1.5; }
.fa-table td { overflow-wrap: anywhere; }
.fa-table td.num, .fa-table th.num { white-space: nowrap; }
.fa .table-wrap { overflow-x: auto; max-width: 100%; }
.fa-table td.fa-games { min-width: 9em; }

/* step indicator: Setup → Draft → Season → Playoffs → Recap */
.fa-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0; counter-reset: none; }
.fa-step { display: flex; align-items: center; font-size: 13px; color: var(--dim); }
.fa-step + .fa-step::before { content: ""; width: 18px; height: 1px; background: var(--line); margin: 0 6px 0 2px; }
.fa-step > a, .fa-step > span { display: inline-flex; align-items: center; gap: 6px; }
.fa-step > a { color: inherit; text-decoration: none; border-radius: 999px; padding: 2px 4px; }
.fa-step > a:hover { background: var(--hover); }
.fa-step > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fa-stepno { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-step.done { color: var(--text); }
.fa-step.done .fa-stepno { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fa-step.cur { color: var(--text); font-weight: 700; }
.fa-step.cur .fa-stepno { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }

/* setup: draft order, names */
.fa-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.fa-order { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.fa-order li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; border: 1px solid transparent; }
.fa-order li.me { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.fa-order-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-order-mv { display: inline-flex; gap: 2px; flex: none; }
.fa-order-mv .btn { min-width: 32px; min-height: 32px; padding: 0 6px; }
.fa-you input { border-color: var(--accent); }
.fa-start { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); z-index: 2; }

/* the "up next" / live card and results */
.fa-next { border-color: var(--accent); }
.fa-next-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.fa-next-head .card-title { margin-bottom: 4px; }
.fa-proj { margin: 4px 0; font-variant-numeric: tabular-nums; }
.fa-lineup-status { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.fa-lineup-status.warn { border: 1px solid var(--warn); }
.fa-simbar .btn { min-height: 38px; }
.fa-res-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; }
.fa-res-badge { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.fa-res-badge.win { color: var(--good); border-color: var(--good); }
.fa-res-badge.loss { color: var(--bad); border-color: var(--bad); }
.fa-res-score { font-family: var(--score); font-size: 22px; font-variant-numeric: tabular-nums; }
.fa-results:focus { outline: none; }
.fa-sub { margin: 10px 0 4px; font-size: 13px; color: var(--dim); }
.fa-notes, .fa-simrun { margin: 4px 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.fa-simrun { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fa-livescore { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 18px; font-variant-numeric: tabular-nums; margin: 6px 0; }
.fa-decide { display: grid; gap: 8px; margin: 10px 0; padding: 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.fa-decision { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.fa-decision .fa-actions { margin: 2px 0 0; }

/* starters with the stat lines that counted */
.fa-starters { list-style: none; margin: 0; padding: 0; }
.fa-starter { padding: 6px 0; border-bottom: 1px solid var(--line); }
.fa-starter:last-child { border-bottom: 0; }
.fa-starter.locked .fa-starter-tot { color: var(--good); }
.fa-starter-head { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.fa-starter-head .fa-slotname { min-width: 3em; }
.fa-starter-tot { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-lines { display: grid; gap: 2px; margin: 4px 0 0 3.5em; }
.fa-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; line-height: 1.5; }
.fa-line-when { color: var(--dim); white-space: nowrap; min-width: 8.5em; }
.fa-line-stats { display: inline-flex; flex-wrap: wrap; gap: 0 8px; font-variant-numeric: tabular-nums; }
.fa-st { white-space: nowrap; color: var(--dim); }
.fa-st b { color: var(--text); font-weight: 600; }
.fa-line-fp { font-weight: 700; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fa-gambled { opacity: .55; text-decoration: line-through; text-decoration-color: var(--dim); }
.fa-dnp { color: var(--bad); }
.fa .btn:focus-visible, .fa-order .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
	.fa-lines { margin-left: 0; }
	.fa-line-when { min-width: 0; }
	.fa-step + .fa-step::before { width: 8px; margin: 0 3px 0 0; }
	.fa-step { font-size: 12px; }
	.fa-simbar .btn { flex: 1 1 100%; }
}
/* phones: the five steps fit one line; only the current step keeps its visible label */
@media (max-width: 480px) {
	.fa-step:not(.cur) .fa-steplab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.fa-step + .fa-step::before { width: 12px; }
}

/* trades */
.fa-tcols { gap: 12px 16px; }
.fa-tside { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 8px; margin: 0; min-width: 0; display: grid; gap: 2px; max-height: 460px; overflow: auto; }
.fa-tside legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.fa-tpick { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-radius: 6px; min-height: 32px; cursor: pointer; }
.fa-tpick:hover { background: var(--hover); }
.fa-tpick input { flex: none; width: 18px; height: 18px; margin: 0; }
.fa-tpick .fa-pcell { flex: 1 1 auto; }
.fa-tpick > .num { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fa-tpick.muted { cursor: default; }
.fa-tprev { font-size: 13px; }
.fa-trades { list-style: none; margin: 0; padding: 0; }
.fa-trade { padding: 8px 0; border-bottom: 1px solid var(--line); }
.fa-trade:last-child { border-bottom: 0; }
.fa-trade.me { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.fa-trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.fa-trade-sides { display: grid; gap: 2px; margin: 4px 0; font-size: 13px; line-height: 1.7; }
.fa-trade-sides .fa-pcell { vertical-align: middle; }
.fa-t-accepted { color: var(--good); border-color: var(--good); }
.fa-t-rejected, .fa-t-vetoed { color: var(--bad); border-color: var(--bad); }
.fa-t-countered { color: var(--warn); border-color: var(--warn); }
.fa-ok { border-color: var(--good); }

/* draft grades */
.fa-grade { display: inline-grid; place-items: center; min-width: 2.2em; padding: 1px 6px; border-radius: 6px; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid var(--line); background: var(--panel-2); }
.fa-g-A { color: var(--good); border-color: var(--good); }
.fa-g-C, .fa-g-D { color: var(--warn); border-color: var(--warn); }
.fa-g-F { color: var(--bad); border-color: var(--bad); }

/* keepers, share codes */
.fa-keepers { display: grid; gap: 2px; margin: 6px 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.fa-keepers .badge { flex: none; }
.fa-kept { margin-top: 8px; font-size: 13px; }
.fa-kept summary { cursor: pointer; color: var(--dim); }
.fa-kept li.me { background: var(--accent-soft); }
.fa-code { width: 100%; box-sizing: border-box; font-family: var(--mono, monospace); font-size: 12px; word-break: break-all; resize: vertical; }
.fa-import { border-style: dashed; }
.fa-mini td:nth-child(2) { white-space: normal; overflow-wrap: break-word; }