/* NFL Weekend Survivor: one column at every size, using the shared Labs foundation. */
.wf-page { --wf-good:#44613e; --wf-good-fill:#e1e9db; --wf-bad:#a95145; --wf-bad-fill:#f5e6e0; --wf-ahead:#506e45; --wf-behind:#977326; --wf-behind-fill:#f1ead8; --wf-pending:#71839a; margin:0; min-height:100vh; background:var(--labs-paper); color:var(--labs-ink); font-size:14px; line-height:1.45; }
.wf-page *, .wf-page *::before, .wf-page *::after { box-sizing:border-box; }
.wf-page [hidden] { display:none!important; }
.wf-page h1,.wf-page h2,.wf-page h3,.wf-page p { margin:0; }
.wf-page h1,.wf-page h2,.wf-page h3 { font-family:var(--labs-font-display); font-weight:700; line-height:1.1; }
.wf-page h1 { font-size:32px; letter-spacing:-.6px; overflow-wrap:anywhere; }
.wf-page h2 { font-size:24px; }
.wf-page h3 { font-size:18px; }
.wf-page svg { flex:none; width:18px; height:18px; }
.wf-page :where(button,input) { font:inherit; }
.wf-page button,.wf-page a,.wf-page summary,.wf-page label:has(input[type=checkbox]),.wf-page label:has(input[type=radio]) { -webkit-tap-highlight-color:transparent; }
.wf-page button,.wf-page summary { cursor:pointer; }
.wf-page button { color:inherit; }
.wf-page a { color:inherit; text-decoration:none; }
.wf-page button:disabled { opacity:.55; cursor:wait; }
.wf-page :focus-visible { outline:2px solid var(--labs-accent); outline-offset:3px; }
.wf-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.wf-skip { position:fixed; left:12px; top:-80px; z-index:100; padding:12px; background:var(--labs-paper); }
.wf-skip:focus { top:8px; }
.wf-header { max-width:808px; margin:auto; min-height:70px; display:flex; align-items:center; justify-content:space-between; padding:8px 24px; border-bottom:1px solid var(--labs-line); }
.wf-brand { display:flex; align-items:center; gap:12px; }
.wf-wordmark { display:inline-flex; height:22px; width:130px; }
.wf-wordmark svg { width:110px; height:auto; }
.wf-main { width:100%; max-width:808px; margin:auto; padding:24px; }
.wf-main:focus { outline:none; }
.wf-footer { max-width:808px; width:100%; margin:12px auto 0; padding:22px 24px; border-top:1px solid var(--labs-line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px; color:var(--labs-muted); font-size:12px; }
.wf-footer-name { color:var(--labs-ink); font-weight:600; }
.wf-footer-by { color:var(--labs-muted); font-weight:400; }
.wf-footer-links { display:flex; flex-wrap:wrap; gap:6px 18px; }
.wf-footer a, .wf-footer-link { padding:0; border:0; background:none; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wf-flow { max-width:520px; margin:auto; }
.wf-eyebrow { display:flex; align-items:center; gap:7px; margin-bottom:7px!important; color:var(--labs-muted); font:11px var(--labs-font-mono); letter-spacing:1.1px; text-transform:uppercase; }
.wf-help { color:var(--labs-muted); font-size:12px; line-height:1.5; }
.wf-primary,.wf-secondary,.wf-text-button,.wf-icon-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:var(--labs-radius); text-align:center; font-weight:600; }
.wf-primary,.wf-secondary { padding:11px 16px; border:1px solid transparent; }
.wf-primary { background:var(--labs-ink); color:var(--labs-paper)!important; }
.wf-secondary { border-color:var(--labs-line); background:var(--labs-surface); }
.wf-text-button,.wf-icon-button { background:none; border:0; padding:8px; }
.wf-text-button { font-size:12px; }
.wf-icon-button { width:44px; flex:none; }
.wf-full { width:100%; }
.wf-label { display:block; font-weight:600; margin-bottom:7px; }
.wf-input { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--labs-input-border); border-radius:var(--labs-radius); background:var(--labs-surface); color:var(--labs-ink); font-size:16px!important; }
.wf-input[aria-invalid=true] { border-color:var(--wf-bad); }
.wf-error { color:#a13e33; font-size:13px; line-height:1.4; margin:10px 0!important; }
.wf-footnote { text-align:center; font-size:12px; color:var(--labs-muted); margin-top:10px!important; }
.wf-other-week { text-align:center; font-size:13px; margin-top:18px!important; }
.wf-other-week a { display:inline-flex; align-items:center; gap:.3em; min-height:44px; padding:0 8px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.wf-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wf-section-title h2 { font-size:21px; }
.wf-deadline { display:flex; align-items:center; gap:8px; padding:13px 0; font-size:12px; }
.wf-deadline svg { width:16px; height:16px; color:var(--labs-muted); }
.wf-start-options { padding:0; border:0; margin:24px 0 16px; display:grid; gap:8px; }
.wf-start-options legend { padding:0; margin-bottom:12px; font-weight:600; }
.wf-start-choice { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--labs-line); border-radius:var(--labs-radius); cursor:pointer; }
.wf-start-choice:has(input:checked) { background:var(--labs-selection); border-color:var(--labs-accent); }
.wf-start-choice input { appearance:auto; accent-color:var(--labs-accent); width:17px; height:17px; margin:0; flex:none; }
.wf-choice-content { flex:1; min-width:0; }
.wf-choice-content>span { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.wf-choice-content>span>span { font-size:12px; color:var(--labs-muted); }
.wf-choice-content strong { font:700 20px var(--labs-font-display); }
.wf-choice-content small { display:block; color:var(--labs-muted); margin-top:2px; font-size:12px; }
/* Two lines, each with a right-hand partner on its baseline: date with the title, time with the detail. */
.wf-choice-line + .wf-choice-line { margin-top:2px; }
.wf-choice-line small { margin-top:0; min-width:0; }
.wf-choice-content .wf-choice-date, .wf-choice-content .wf-choice-time { flex:none; white-space:nowrap; font-size:12px; }
.wf-choice-content .wf-choice-time { font-weight:600; color:var(--labs-ink); }
/* 360px phones: keep "ends Mon Night" on one line beside the time. */
@media (max-width:374px) { .wf-start-choice { padding:12px 10px; gap:9px; } .wf-choice-content>span { gap:8px; } }
.wf-round-preview { display:flex; padding:10px 0 13px; border-bottom:1px solid var(--labs-line); }
.wf-round-preview>div { flex:1 1 0; min-width:auto; text-align:center; border-left:1px solid var(--labs-line); padding:0 3px; }
.wf-round-preview>div:first-child { border-left:0; }
.wf-round-preview span,.wf-round-preview small { display:block; font-size:11px; color:var(--labs-muted); }
.wf-round-preview strong { display:block; font:700 16px var(--labs-font-display); white-space:nowrap; }
.wf-page .wf-round-preview .wf-et { display:inline; font-size:.7em; font-weight:500; color:var(--labs-muted); }
.wf-round-preview small { margin-top:4px; }
.wf-create-deadline { margin:14px 0!important; font-size:12px; line-height:1.6; color:var(--labs-muted); }
.wf-create-deadline strong { color:var(--labs-ink); }
.wf-switch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:16px 0 4px; padding:12px 13px; border:1px solid var(--labs-line); border-radius:var(--labs-radius); cursor:pointer; }
.wf-switch-row>span { min-width:0; }
.wf-switch-row strong { display:block; font-weight:600; }
.wf-switch-row small { display:block; margin-top:2px; }
.wf-switch-row input { appearance:none; flex:none; width:40px; height:24px; margin:0; border-radius:12px; background:var(--labs-line); position:relative; cursor:pointer; transition:background .15s; }
.wf-switch-row input::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--labs-surface); transition:transform .15s; }
.wf-switch-row input:checked { background:var(--labs-accent); }
.wf-switch-row input:checked::after { transform:translateX(16px); }
.wf-switch-row input:focus-visible { outline:2px solid var(--labs-accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .wf-switch-row input,.wf-switch-row input::after { transition:none; } }
.wf-optional { margin:18px 0 20px; }
.wf-optional summary { display:flex; gap:8px; font-weight:600; align-items:baseline; }
.wf-optional summary::before { content:'+'; }
.wf-optional[open] summary::before { content:'−'; }
.wf-optional input { margin-top:9px; }
.wf-social { background:var(--labs-panel); border-radius:var(--labs-radius); margin:18px 0 3px; }
.wf-social summary { display:flex; list-style:none; gap:11px; align-items:center; min-height:62px; padding:11px 12px; }
.wf-social summary::-webkit-details-marker { display:none; }
.wf-social summary>svg { margin-left:auto; color:var(--labs-muted); transition:transform .15s; }
.wf-social[open] summary>svg { transform:rotate(180deg); }
.wf-social-copy { flex:1; min-width:0; }
.wf-social-copy strong { display:block; font-size:13px; }
.wf-social-copy small { display:block; color:var(--labs-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.wf-faces { display:flex; padding-left:4px; }
.wf-faces span { width:27px; height:27px; margin-left:-4px; border:2px solid var(--labs-panel); border-radius:50%; display:grid; place-items:center; background:var(--labs-selection); font-size:9px; color:var(--labs-accent); font-weight:700; }
.wf-social-list { list-style:none; margin:0; padding:0 12px 12px; display:flex; flex-wrap:wrap; gap:6px; }
.wf-social-list li { padding:4px 10px; border:1px solid var(--labs-line); border-radius:999px; background:var(--labs-paper); font-size:12px; overflow-wrap:anywhere; }
.wf-round { border:0; border-top:1px solid var(--labs-line); padding:13px 0 18px; margin:0; min-width:0; }
.wf-round legend { padding:0 8px 0 0; font:700 22px var(--labs-font-display); }
.wf-round-meta { display:flex; justify-content:space-between; align-items:center; margin:-2px 0 10px; }
.wf-round-progress { font-size:11px; font-weight:600; color:var(--labs-muted); }
.wf-round-progress.is-complete { color:var(--labs-accent); }
.wf-matches { display:grid; gap:8px; }
.wf-match { display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); align-items:center; gap:4px; }
.wf-versus { color:var(--labs-muted); text-align:center; font-size:10px; }
.wf-team-choice { position:relative; display:block; min-width:0; cursor:pointer; container-type:inline-size; }
.wf-team-choice input { position:absolute; inset:0; z-index:1; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.wf-team-choice-face { position:relative; min-height:62px; padding:9px 9px 9px 8px; display:flex; align-items:center; gap:8px; border:1px solid var(--labs-line); border-radius:var(--labs-radius); background:var(--labs-surface); }
.wf-team-choice input:checked+.wf-team-choice-face { border-color:var(--labs-accent); background:var(--labs-selection); }
.wf-team-choice input:focus-visible+.wf-team-choice-face { outline:2px solid var(--labs-accent); outline-offset:3px; }
.wf-team-logo { object-fit:contain; width:28px; height:28px; flex:none; }
.wf-team-copy { min-width:0; flex:1; }
/* UI-WKND-338: code and record beside the circle, then one full-width line. The
   circle sits top-right so "−10 tiebreaker pts" fits a 360px phone's tile. */
.wf-team-head { display:flex; align-items:baseline; gap:6px; min-width:0; padding-right:24px; white-space:nowrap; }
.wf-team-code { font:700 17px/1.15 var(--labs-font-display); letter-spacing:.01em; }
.wf-team-record { flex:none; font-size:11.5px; color:var(--labs-muted); font-variant-numeric:tabular-nums; }
.wf-team-line { display:block; margin-top:2px; font-size:11px; color:var(--labs-muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-team-line b { font-weight:600; color:var(--labs-ink); }
.wf-team-gain { display:none; }
.wf-team-city { display:none; }
@container (min-width: 230px) { .wf-team-city { display:inline; } }
.wf-team-choice input:checked+.wf-team-choice-face .wf-team-pts { display:none; }
.wf-team-choice input:checked+.wf-team-choice-face .wf-team-gain { display:block; font-weight:600; color:var(--labs-accent); }
.wf-team-choice input:checked+.wf-team-choice-face .wf-team-gain b { color:inherit; }
.wf-team-ring { position:absolute; top:10px; right:9px; width:18px; height:18px; border:1.5px solid #c4c6bb; border-radius:50%; display:grid; place-items:center; color:transparent; background:var(--labs-surface); }
.wf-page .wf-team-ring svg { width:12px; height:12px; }
.wf-team-choice input:checked+.wf-team-choice-face .wf-team-ring { background:var(--labs-accent); border-color:var(--labs-accent); color:#fff; }
.wf-team-choice.is-replacing .wf-team-choice-face { border-style:dashed; }
.wf-submit { border-top:1px solid var(--labs-line); padding-top:20px; }
.wf-submit>.wf-help { margin-top:6px; }
.wf-submit-progress { margin:19px 0 8px!important; font-size:12px; color:var(--labs-muted); }
.wf-confirmed { display:flex; gap:6px; align-items:center; color:var(--labs-accent); margin:12px 0 3px!important; }
.wf-edit-button { margin-top:12px; }
.wf-page .wf-edit-button svg { width:16px; height:16px; }
.wf-ticket { border-top:2px solid var(--labs-ink); border-bottom:1px solid var(--labs-line); padding-top:7px; margin-top:10px; }
.wf-ticket-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:8px 0; border-top:1px solid var(--labs-line); font-size:13px; }
.wf-ticket .wf-ticket-row:first-of-type { border-top:0; }
.wf-ticket-picks { display:flex; gap:6px; }
.wf-saved-pick { display:flex; align-items:center; justify-content:center; gap:5px; min-width:62px; padding:6px; border:1px solid var(--labs-line); border-radius:3px; font:700 14px var(--labs-font-display); }
.wf-saved-pick .wf-team-logo { width:23px; height:23px; }
.wf-flow>.wf-primary { width:100%; margin-top:16px; }
.wf-lobby-intro { margin:14px 0 4px!important; }
.wf-lobby-actions { display:grid; gap:8px; margin-top:20px; }
.wf-message { padding:13px 14px; background:var(--labs-panel); border-radius:var(--labs-radius); margin:14px 0; font-size:13px; line-height:1.5; }
.wf-message h2 { margin-bottom:8px; }
.wf-message p+p { margin-top:8px; }
.wf-message-good { background:var(--labs-selection); }
.wf-live-heading h1 { font-size:30px; }
.wf-live-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:12px; }
.wf-round-badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.wf-live-dot { width:6px; height:6px; border-radius:50%; background:var(--labs-accent); }
.wf-reveal-action { display:flex; justify-content:flex-end; margin-top:-8px; }
.wf-finish { padding:16px; margin:16px 0 20px; border-radius:var(--labs-radius); background:var(--labs-panel); }
.wf-finish-won { background:var(--labs-selection); }
.wf-finish .wf-eyebrow svg { width:14px; height:14px; }
.wf-finish h2 { font-size:29px; overflow-wrap:anywhere; }
.wf-winner-names { margin-top:8px!important; font-size:13px; overflow-wrap:anywhere; }
.wf-finish>.wf-help { margin-top:12px; }
.wf-finish-actions { display:flex; gap:8px; margin-top:16px; }
.wf-finish-actions>* { flex:1; }
.wf-board { margin-top:18px; position:relative; }
.wf-board-sticky { position:sticky; top:0; z-index:5; background:var(--labs-paper); }
.wf-board-summary { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:3px 12px; padding:8px 0 9px; border-bottom:2px solid var(--labs-ink); font-size:12px; }
.wf-board-summary>span:last-child { color:var(--labs-muted); text-align:right; margin-left:auto; }
/* Go to your row (UI-WKND-337): plain underlined text marked with the viewer's 3px bar.
   The padding/margin pair widens the tap target without growing the sticky line; the
   button keeps its text baseline (the bar alone is centred) so the line never shifts. */
.wf-board-count { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:3px 8px; }
.wf-jump { display:inline-flex; align-items:baseline; gap:6px; padding:12px 0; margin:-12px 0; border:0; background:none; color:var(--labs-ink); font:inherit; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer; }
.wf-jump::before { content:''; width:3px; height:12px; flex:none; align-self:center; background:var(--labs-accent); }
/* Shown only while the row is away, but its space is always kept, so showing it never
   re-wraps the sticky summary (UI-WKND-337). Not `hidden`: that would drop the space. */
.wf-jump:not([data-shown]) { visibility:hidden; }
.wf-jump:focus-visible { outline:2px solid var(--labs-accent); outline-offset:2px; }
.wf-board-row.wf-is-viewer.wf-arrived { background:var(--labs-selection); box-shadow:-8px 0 0 var(--labs-selection), 8px 0 0 var(--labs-selection); }
@media (prefers-reduced-motion:no-preference) { .wf-board-row.wf-is-viewer { transition:background-color .5s ease, box-shadow .5s ease; } }
.wf-board-head,.wf-board-row { display:grid; grid-template-columns:var(--wf-columns); gap:4px; align-items:stretch; }
.wf-board-head { border-bottom:1px solid var(--labs-line); padding:6px 0; font:600 12px var(--labs-font-display); text-align:center; }
.wf-board-head [role=columnheader]>span { display:block; white-space:nowrap; }
.wf-unused-column { color:var(--labs-muted); font-weight:500; }
.wf-current-column { color:var(--labs-accent); }
.wf-board-row { min-height:44px; border-bottom:1px solid var(--labs-line); position:relative; }
.wf-board-row.wf-is-viewer { background:var(--labs-panel); box-shadow:-8px 0 0 var(--labs-panel), 8px 0 0 var(--labs-panel); }
.wf-board-row.wf-is-viewer::before { content:''; position:absolute; left:-8px; top:0; bottom:0; width:3px; background:var(--labs-accent); }
.wf-board-name { min-width:0; display:flex; align-items:stretch; }
.wf-board-name>div { width:100%; min-height:44px; padding:5px 2px 5px 0; text-align:left; font-size:12px; font-weight:600; line-height:1.15; overflow:hidden; display:flex; align-items:center; }
.wf-person-name { min-width:0; max-height:2.3em; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wf-is-out .wf-board-name>div { color:var(--labs-muted); text-decoration:line-through; text-decoration-thickness:1px; }
.wf-row-winner { display:inline-flex; margin-left:3px; vertical-align:middle; }
.wf-row-winner svg { width:12px; height:12px; color:var(--labs-accent); }
.wf-board-cell { display:flex; gap:3px; align-items:center; min-width:0; }
.wf-pick { flex:1; min-width:0; min-height:34px; padding:2px 1px; border:1px solid var(--labs-line); border-radius:3px; background:var(--labs-surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:var(--labs-ink); font:11px/1.05 var(--labs-font-display); position:relative; }
button.wf-pick::after { content:''; position:absolute; inset:-5px -1px; }
.wf-pick strong { font-weight:700; font-size:12px; }
.wf-pick-mark { display:flex; align-items:center; justify-content:center; min-height:12px; font:11px/1.05 var(--labs-font-display); }
/* Drawn margin arrows sit on the digits' baseline at their cap height (0.711em in
   Roboto Condensed), so arrow and number share a top and a bottom. */
.wf-pick-ahead .wf-pick-mark, .wf-pick-behind .wf-pick-mark { align-items:baseline; }
.wf-page .wf-arrow { width:.6em; height:.711em; flex:none; margin-right:1px; }
.wf-legend-ahead, .wf-legend-behind { align-items:baseline; }
.wf-page .wf-legend .wf-arrow { width:.62em; height:.72em; margin:0; }
.wf-pick svg { width:12px; height:12px; }
.wf-pick-ahead { border:2px solid var(--wf-ahead); color:var(--wf-ahead); }
.wf-pick-behind { border:2px solid var(--wf-behind); color:#7f5e19; }
.wf-pick-tied { border:2px solid var(--wf-pending); color:#526477; }
.wf-pick-won { border-color:transparent; background:var(--wf-good-fill); color:#365235; }
.wf-pick-lost { border-color:transparent; background:var(--wf-bad-fill); color:#963d33; }
.wf-pick-unused { border:1px dashed var(--labs-line); background:none; color:var(--labs-muted); }
.wf-pick-hidden { border-color:transparent; background:var(--labs-panel); color:var(--labs-muted); }
/* Quiet marks (`UI-WKND-334`): a tile without a result still fills its mark line. */
.wf-pick-future, .wf-pick-pending { background:var(--labs-paper); }
.wf-pick-future .wf-pick-mark::before, .wf-pick-pending .wf-pick-mark::before { content:''; width:3px; height:3px; border-radius:50%; background:#a9aaa0; }
.wf-pick-pending { border-color:#aab2a6; background:var(--labs-surface); }
.wf-pick-pending .wf-pick-mark::before { width:5px; height:5px; background:var(--labs-accent); }
.wf-pick-not-played { background:repeating-linear-gradient(135deg,transparent 0 4px,#ecece6 4px 5px); }
/* Section headers: a rule that starts the group, a small label tight to its first row. */
.wf-board-band { margin-top:14px; padding:8px 0 4px; border-top:1px solid var(--labs-ink); font:600 10.5px/1.3 var(--labs-font-mono); letter-spacing:1px; text-transform:uppercase; color:var(--labs-muted); }
.wf-board-sticky + .wf-board-band { margin-top:0; padding-top:10px; border-top:0; }
.wf-board-band-winner { color:var(--labs-accent); font-weight:600; }
.wf-board-footer { display:flex; align-items:center; justify-content:space-between; gap:9px 16px; flex-wrap:wrap; padding:14px 0 0; }
.wf-legend { display:flex; gap:12px; align-items:center; font-size:11px; color:var(--labs-muted); }
.wf-legend>span { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.wf-legend svg { width:13px; height:13px; }
.wf-legend-won svg { color:var(--wf-good); }
.wf-legend-lost svg { color:var(--wf-bad); }
.wf-legend-ahead>span { color:var(--wf-ahead); }
.wf-legend-behind>span { color:var(--wf-behind); }
.wf-legend-unused>span { width:13px; height:10px; border:1px dashed var(--labs-muted); border-radius:2px; background:repeating-linear-gradient(135deg,transparent 0 3px,#d9dad2 3px 4px); }
.wf-tap-hint { font-size:11px; color:var(--labs-muted); }
.wf-rules { max-width:520px; border-top:1px solid var(--labs-line); padding-top:18px; margin:28px auto 0; color:var(--labs-muted); }
.wf-rules h2 { font:600 14px var(--labs-font-body); color:var(--labs-ink); }
.wf-rules ul { list-style:disc; padding-left:19px; margin:12px 0 0; font-size:12px; line-height:1.55; }
.wf-rules li+li { margin-top:7px; }
.wf-page .wf-rules h3 { margin:20px 0 0; font:600 14px var(--labs-font-body); color:var(--labs-ink); scroll-margin-top:16px; }
.wf-rules h2 { scroll-margin-top:16px; }
.wf-refresh { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.wf-dialog { margin:auto; padding:0; width:calc(100% - 32px); max-width:520px; max-height:calc(100dvh - 48px); overflow:hidden; border:1px solid var(--labs-line); border-radius:6px; color:var(--labs-ink); background:var(--labs-paper); box-shadow:0 16px 70px #0003; }
.wf-dialog::backdrop { background:#171b1760; }
.wf-dialog:not([open]) { display:none; }
.wf-dialog[open] { display:flex; flex-direction:column; }
.wf-dialog-head { padding:8px 14px 10px; border-bottom:1px solid var(--labs-line); flex:none; }
.wf-dialog-head .wf-section-title { gap:8px; }
.wf-dialog-head h2 { font-size:22px; overflow-wrap:anywhere; }
.wf-game-dialog>[data-wf-detail-body] { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.wf-game-head { position:sticky; top:0; background:var(--labs-paper); z-index:2; }
.wf-game-top { position:relative; padding:0 36px; text-align:center; }
.wf-game-status { display:flex; justify-content:center; align-items:center; gap:8px; }
.wf-game-live { display:inline-flex; align-items:center; gap:5px; font:600 10.5px/1 var(--labs-font-mono); letter-spacing:1px; text-transform:uppercase; color:var(--labs-accent); }
.wf-game-live>span { width:6px; height:6px; border-radius:50%; background:var(--labs-accent); }
.wf-game-clock { font:600 13px var(--labs-font-display); }
.wf-game-situation { margin-top:2px!important; font-size:12.5px; }
.wf-game-situation b { font-weight:600; }
.wf-game-updated { margin-top:2px!important; font-size:11px; color:var(--labs-muted); }
.wf-game-close { position:absolute; right:-6px; top:-6px; }
.wf-game-sides { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:10px -14px -10px; border-top:1px solid var(--labs-line); }
.wf-game-side { min-width:0; padding:8px 8px; text-align:center; }
.wf-game-side + .wf-game-side { border-left:1px solid var(--labs-line); }
.wf-game-side-you { box-shadow:inset 0 -3px 0 var(--labs-accent); }
.wf-game-scoreline { display:flex; align-items:center; justify-content:center; gap:8px; }
.wf-game-logo { display:flex; align-items:center; justify-content:center; width:40px; height:30px; flex:none; }
.wf-game-logo img { max-width:none; flex:none; object-fit:contain; }
.wf-score-number { font:700 38px/1 var(--labs-font-display); font-variant-numeric:tabular-nums; min-width:1.2em; text-align:left; }
.wf-game-side-trailing .wf-score-number { color:var(--labs-muted); }
.wf-score-number.wf-score-none { color:var(--labs-line); font-weight:400; }
.wf-game-team { margin-top:3px!important; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-game-team b { font:700 14px var(--labs-font-display); }
.wf-game-team span { color:var(--labs-muted); }
.wf-ball { display:inline-block; width:9px; height:6px; margin-left:4px; border-radius:50%; background:#7a4b24; box-shadow:inset 0 0 0 1px #5b3516; vertical-align:middle; }
.wf-game-rosters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; }
.wf-game-rosters .wf-game-roster { padding:6px 12px 16px; }
.wf-game-rosters .wf-game-roster + .wf-game-roster { border-left:1px solid var(--labs-line); }
.wf-game-roster { min-width:0; }
.wf-rooter { display:flex; align-items:baseline; justify-content:space-between; gap:4px; padding:8px 5px; border-bottom:1px solid var(--labs-line); font-size:13px; }
.wf-rooter>span { min-width:0; overflow-wrap:anywhere; }
.wf-rooter small { color:var(--labs-accent); font-size:11px; }
.wf-rooter-round-out .wf-rooter-exit { color:var(--wf-bad); font-size:12px; flex:none; }
.wf-rooter-you { background:var(--labs-selection); }
.wf-rooter-out { color:var(--labs-muted); }
.wf-rooter-out>span { text-decoration:line-through; }
.wf-roster-band { font-size:11px; letter-spacing:.2px; padding:6px 5px; margin-top:10px!important; background:var(--labs-panel); color:var(--labs-muted); }
.wf-share-dialog { max-width:420px; }
.wf-share-layouts { display:flex; padding:4px; gap:4px; background:var(--labs-panel); border-radius:var(--labs-radius); margin:4px 0 0; }
.wf-share-layouts>button { flex:1; min-height:40px; border:0; border-radius:3px; background:none; font-size:12px; }
.wf-share-layouts>button[aria-pressed=true] { background:var(--labs-paper); box-shadow:0 1px 3px #0001; font-weight:600; }
.wf-share-preview { padding:14px; overflow-y:auto; overscroll-behavior:contain; min-height:100px; }
.wf-share-frame { position:relative; display:block; aspect-ratio:1200 / 630; border:1px solid var(--labs-line); border-radius:4px; overflow:hidden; background:#f1f1ec; }
.wf-share-frame img { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; transition:opacity .2s; }
.wf-share-frame.is-ready img { opacity:1; }
.wf-share-frame:not(.is-ready):not(.is-failed) { background:linear-gradient(100deg,#f1f1ec 30%,#f9f9f5 50%,#f1f1ec 70%); background-size:250% 100%; animation:wf-shimmer 1.3s linear infinite; }
.wf-share-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:13px; color:var(--labs-muted); }
.wf-share-frame.is-ready .wf-share-loading, .wf-share-frame.is-failed .wf-share-loading { display:none; }
.wf-spinner { width:18px; height:18px; border:2px solid var(--labs-line); border-top-color:var(--labs-accent); border-radius:50%; animation:wf-spin .8s linear infinite; }
@keyframes wf-shimmer { from { background-position:150% 0; } to { background-position:-100% 0; } }
@keyframes wf-spin { to { transform:rotate(360deg); } }
[data-wf-share-copy].is-copied { border-color:var(--labs-accent); color:var(--labs-accent); }
.wf-share-footer { padding:12px 14px; border-top:1px solid var(--labs-line); flex:none; }
.wf-share-actions { display:flex; gap:8px; }
.wf-share-actions>* { flex:1; }
.wf-share-footer .wf-help:empty { display:none; }
.wf-share-footer .wf-sr-only { margin:0; }
.wf-share-footer .wf-help { margin-top:10px; }
.wf-manual-link { display:block; font-size:12px; margin-top:10px; }
.wf-manual-link input { margin-top:5px; }
body.wf-dialog-open { overflow:hidden; }
.wf-feedback-dialog { max-width:440px; }
.wf-feedback-body { display:grid; gap:10px; padding:14px; overflow-y:auto; }
.wf-feedback-body .wf-label { margin:0; }
.wf-textarea { min-height:120px; resize:vertical; line-height:1.4; }
.wf-feedback-actions { display:flex; justify-content:flex-end; }
.wf-feedback-done p { font-size:14px; }
/* Third pick in a full round: a small menu at the tapped team, sized to its content. */
.wf-swap-menu { position:absolute; z-index:40; width:max-content; max-width:min(320px, calc(100vw - 24px)); padding:12px 12px 4px; border:1px solid var(--labs-line); border-radius:10px; background:var(--labs-paper); box-shadow:0 14px 44px #0000002e; }
.wf-swap-menu::before { content:''; position:absolute; top:-7px; left:var(--wf-arrow,50%); width:12px; height:12px; background:var(--labs-paper); border-left:1px solid var(--labs-line); border-top:1px solid var(--labs-line); transform:translateX(-50%) rotate(45deg); }
.wf-swap-menu.is-above::before { top:auto; bottom:-7px; transform:translateX(-50%) rotate(225deg); }
.wf-swap-title { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font:700 17px var(--labs-font-display); }
.wf-swap-title img { width:22px; height:22px; object-fit:contain; }
.wf-swap-sub { margin:2px 0 10px!important; font-size:12px; color:var(--labs-muted); }
.wf-swap-options { display:flex; flex-wrap:wrap; gap:8px; }
.wf-swap-option { flex:1 1 auto; display:inline-flex; align-items:center; gap:7px; min-height:48px; padding:7px 12px 7px 9px; border:1px solid var(--labs-accent); border-radius:6px; background:var(--labs-selection); text-align:left; white-space:nowrap; }
.wf-swap-option img { width:24px; height:24px; object-fit:contain; }
.wf-swap-option strong { font:700 15px var(--labs-font-display); }
.wf-swap-nick { font-size:12px; color:var(--labs-muted); }
.wf-swap-cancel { display:block; width:100%; min-height:44px; margin-top:2px; border:0; background:none; font-size:13px; font-weight:600; color:var(--labs-muted); }
@media (hover:hover) { .wf-text-button:hover,.wf-icon-button:hover { background:var(--labs-panel); } .wf-primary:hover { filter:brightness(1.15); } .wf-secondary:hover { background:var(--labs-panel); } .wf-swap-option:hover { filter:brightness(.97); } .wf-footer-link:hover,.wf-footer a:hover { color:var(--labs-ink); } button.wf-pick:hover { box-shadow:inset 0 0 0 100px #00000009; } .wf-board-name>button:hover { color:var(--labs-accent); } }
.wf-page button:active,.wf-team-choice:active .wf-team-choice-face { filter:brightness(.94); }
@media (max-width:600px) { .wf-header { min-height:58px; padding:6px 14px; } .wf-wordmark svg { width:98px; } .wf-main { padding:20px 12px; } .wf-footer { padding:18px 14px; font-size:12px; } .wf-feedback-actions>* { flex:1; } .wf-page h1 { font-size:29px; } .wf-board-head { font-size:11px; } .wf-board-head,.wf-board-row { gap:3px; } .wf-board-name>button { font-size:11px; } .wf-board-cell { gap:2px; } .wf-pick strong { font-size:11px; } .wf-board-summary { font-size:11px; } .wf-board-footer { flex-direction:column; justify-content:center; } .wf-legend { gap:11px; } .wf-dialog { width:100%; max-width:none; max-height:86dvh; margin:auto 0 0; border-radius:14px 14px 0 0; border-bottom:0; } .wf-share-dialog { max-height:90dvh; } .wf-dialog-head { padding-top:10px; } .wf-dialog-head::before { content:''; display:block; width:32px; height:4px; border-radius:4px; background:var(--labs-line); margin:0 auto 4px; } .wf-finish-actions { flex-direction:column; } }
@media (max-width:359px) { .wf-team-ring { display:none; } .wf-team-head { padding-right:0; } }
@media (max-width:360px) { .wf-team-choice-face { padding:9px 6px; gap:6px; } .wf-team-logo { width:25px; height:25px; } .wf-score-number { font-size:34px; } .wf-game-rosters .wf-game-roster { padding:6px 10px 14px; } }
@media (prefers-reduced-motion:reduce) { .wf-page * { transition:none!important; scroll-behavior:auto!important; } .wf-share-frame, .wf-spinner { animation:none!important; } }
/* Up to eight rounds: preserve the name column and type, reclaim only gutter space. */
@media (max-width:600px) { .wf-board-dense .wf-board-head,.wf-board-dense .wf-board-row { gap:2px; } }
/* Points (UI-WKND-338): a signed number in a hairline box, never win/loss colour,
   never an arrow, so it can't be read as a score margin. Favourites muted; an
   estimate dashed. On the board a won tile shows the number bare beside its check. */
.wf-pts { flex:none; display:inline-block; padding:2px 4px; border:1px solid var(--labs-line); border-radius:3px; background:var(--labs-surface); color:var(--labs-ink); font:600 11px/1 var(--labs-font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.wf-pts-fav { color:var(--labs-muted); }
.wf-pts-est { border-style:dashed; color:var(--labs-muted); }
.wf-saved-pick .wf-pts { font-size:10.5px; padding:2px 3px; }
/* How it works: the rules up front, Full rules beside the heading; under it a
   sand note while points are still estimates (the pick UI itself is unmarked). */
.wf-how { margin:2px 0 12px; padding:12px 14px; border-radius:var(--labs-radius); background:var(--labs-panel); }
.wf-how-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.wf-page .wf-how-head h2 { margin:0; font:600 11px var(--labs-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--labs-muted); }
.wf-page .wf-how-head a { font-size:12px; color:var(--labs-ink); text-decoration:underline; text-underline-offset:3px; }
.wf-how ol { margin:8px 0 0; padding-left:20px; list-style:decimal; font-size:13px; line-height:1.4; color:var(--labs-ink); }
.wf-how li+li { margin-top:6px; }
.wf-how li::marker { font:600 12px var(--labs-font-mono); color:var(--labs-muted); }
.wf-how strong { font-weight:600; }
.wf-est-note { margin:-4px 0 14px!important; padding:9px 14px; border-radius:var(--labs-radius); background:#f6f0e1; color:#5c5235; font-size:12.5px; line-height:1.4; }
.wf-est-note strong { font-weight:600; color:#4a4129; }
/* The card's tiebreak total, collapsed; it opens to one row per pick. */
.wf-card-total { margin:22px 0; border:1px solid var(--labs-line); border-radius:var(--labs-radius); background:var(--labs-surface); }
.wf-card-total summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; }
.wf-card-total summary::-webkit-details-marker { display:none; }
.wf-card-total-copy { display:grid; gap:2px; font-size:14px; font-weight:600; }
.wf-card-total-copy small { font-size:11.5px; font-weight:400; color:var(--labs-muted); }
.wf-card-total-value { display:flex; align-items:center; gap:6px; }
.wf-card-total-value strong { font:600 17px var(--labs-font-mono); font-variant-numeric:tabular-nums; }
.wf-card-total-value svg { width:16px; height:16px; color:var(--labs-muted); transition:transform .15s; }
.wf-card-total[open] .wf-card-total-value svg { transform:rotate(180deg); }
.wf-card-total .wf-points-sheet { padding:0 12px 10px; }
.wf-card-total .wf-points-line { grid-template-columns:88px 1fr auto; font-size:13px; padding:6px 0; }
.wf-card-total .wf-points-total { grid-template-columns:1fr auto; }
.wf-card-total .wf-help { margin-top:6px!important; font-size:11.5px; }
.wf-card-points-note { margin-top:10px!important; }
.wf-pick-pts { margin-left:2px; font:600 9.5px/1 var(--labs-font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.wf-legend-won .wf-pick-pts { margin:0 3px 0 0; color:var(--wf-good); }
.wf-points-head { display:flex!important; justify-content:flex-end; padding-right:2px; font:600 10px var(--labs-font-mono)!important; color:var(--labs-muted); text-transform:uppercase; letter-spacing:.5px; }
.wf-row-points { flex:none; margin-left:auto; padding:2px 0 2px 4px; border:0; background:none; color:var(--labs-ink); font:600 11px var(--labs-font-mono); font-variant-numeric:tabular-nums; text-decoration:underline dotted var(--labs-muted); text-underline-offset:3px; cursor:pointer; position:relative; }
.wf-row-points::after { content:''; position:absolute; inset:-8px -4px; }
.wf-board-band-survived { color:var(--labs-ink); }
/* Live groups (`UI-WKND-339`): the board's own band; colour alone marks a
   projection — official bands stay grey. A sub-group label has no rule. */
.wf-board-band-projected { color:var(--labs-accent); }
.wf-board-band-waiting { color:var(--labs-ink); }
.wf-board-band-needs { color:#7f5e19; }
.wf-board-band-projected-sub { margin-top:0; padding-top:8px; border-top:0; color:var(--labs-muted); }
.wf-points-title { font-size:22px; overflow-wrap:anywhere; }
.wf-points-sheet { padding:4px 16px 18px; }
.wf-points-line { display:grid; grid-template-columns:64px 1fr auto; gap:8px; align-items:baseline; padding:8px 0; border-top:1px solid var(--labs-line); font-size:14px; }
.wf-points-round { color:var(--labs-muted); font-size:12px; }
.wf-points-value { font:600 13px var(--labs-font-mono); font-variant-numeric:tabular-nums; text-align:right; }
.wf-points-total { grid-template-columns:1fr auto; border-top:1px solid var(--labs-ink); font-weight:700; }
.wf-finish-points { display:inline-grid; grid-template-columns:auto auto; gap:6px 10px; align-items:center; margin-top:10px; font-size:14px; }
.wf-finish-points-row { display:contents; }
.wf-finish-points-name { font-weight:500; overflow-wrap:anywhere; }
.wf-finish-points-lead .wf-finish-points-name { font-weight:700; }