/* Barlow Condensed, self-hosted. A broadcast scoreboard is condensed and
   tightly tracked; system UI faces are not. Body copy stays on the system
   stack - condensed type is for display and numerals, where it belongs. */
@font-face{font-family:"PG Cond";src:url(../fonts/barlow-condensed-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PG Cond";src:url(../fonts/barlow-condensed-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PG Cond";src:url(../fonts/barlow-condensed-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* The condensed display family and the chalk rule colour. These are used
     from line ~280 of this file onwards (h2.pg-h, .pg-tab, .pg-t th, .pg-num,
     .pg-score, every section heading rule) and four separate sections had each
     appended their own identical backfill of them; declared once, here, beside
     the @font-face blocks that define the family. */
  --cond:"PG Cond",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --chalk:var(--line2);
  --bg:#0b0f16; --bg2:#121824; --bg3:#1a2231; --line:#232c3d; --line2:#2f3a4f;
  --fg:#e8edf5; --fg2:#9aa8bd; --fg3:#6b7a91;
  --acc:#4da3ff; --good:#35d07f; --warn:#ffb545; --bad:#ff6d80;
  --QB:#ff6d80; --RB:#35d07f; --WR:#58a9ff; --TE:#ffb545;
  --K:#bf95ff; --DEF:#93a4bb; --DL:#ff9046; --LB:#2fd4c4; --DB:#d879e4;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.pg-wrap{max-width:1080px;margin:0 auto;padding:0 18px}

.pg-top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#141c2b,#0d121b)}
.pg-top-in{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
.pg-brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.01em}
.pg-mark{width:22px;height:22px;border-radius:6px;flex:none;
  background:conic-gradient(from 200deg,#ffb545,#ff6d80,#4da3ff,#35d07f,#ffb545)}
.pg-season{color:var(--fg3);font-weight:500;margin-left:8px;font-size:14px}
.pg-state{color:var(--fg2);font-size:12.5px;font-variant-numeric:tabular-nums}

.pg-nav{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.pg-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.pg-tabs::-webkit-scrollbar{display:none}
.pg-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--fg3);font-family:inherit;font-weight:600;font-size:12.5px;line-height:1;
  letter-spacing:.03em;padding:13px 13px 11px;cursor:pointer;white-space:nowrap}
.pg-tab:hover{color:var(--fg2)}
.pg-tab-on{color:var(--fg);border-bottom-color:var(--acc)}

.pg-main{padding:22px 18px 60px;min-height:60vh}
.pg-loading{color:var(--fg3);padding:28px 0;font-size:13px}
.pg-err{background:rgba(255,109,128,.1);border:1px solid rgba(255,109,128,.3);
  border-radius:8px;padding:12px 14px;color:var(--bad);font-size:13px}

h2.pg-h{font-size:15px;margin:0 0 3px;letter-spacing:-.01em}
.pg-sub{color:var(--fg3);font-size:12px;margin:0 0 14px}
.pg-sec{margin-bottom:30px}

.pg-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pg-scroll{overflow-x:auto}
table.pg-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pg-t th{font-weight:700;font-size:10px;line-height:1;letter-spacing:.07em;
  color:var(--fg3);text-align:right;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg3)}
.pg-t th:first-child,.pg-t td:first-child{text-align:left}
.pg-t td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.pg-t tr:last-child td{border-bottom:0}
.pg-t tbody tr:hover{background:rgba(255,255,255,.022)}
.pg-team{font-weight:600;color:var(--fg)}
.pg-mgr{color:var(--fg3);font-size:11.5px;margin-left:6px;font-weight:400}
.pg-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.pg-dim{color:var(--fg3)}
.pg-good{color:var(--good)} .pg-bad{color:var(--bad)} .pg-warn{color:var(--warn)}

.pg-pos{display:inline-block;min-width:30px;text-align:center;border-radius:4px;
  padding:1px 5px;font-weight:700;font-size:9.5px;line-height:1.5;
  letter-spacing:.04em;color:#0b0f16}
.pg-pos-QB{background:var(--QB)} .pg-pos-RB{background:var(--RB)} .pg-pos-WR{background:var(--WR)}
.pg-pos-TE{background:var(--TE)} .pg-pos-K{background:var(--K)}  .pg-pos-DEF{background:var(--DEF)}
.pg-pos-DL{background:var(--DL)} .pg-pos-LB{background:var(--LB)} .pg-pos-DB{background:var(--DB)}

.pg-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.pg-chip{appearance:none;background:transparent;border:1px solid var(--line2);border-radius:20px;
  color:var(--fg2);font-family:inherit;font-weight:700;font-size:10.5px;line-height:1;
  letter-spacing:.05em;padding:6px 11px;cursor:pointer}
.pg-chip:hover{border-color:var(--fg3);color:var(--fg)}
.pg-chip-on{background:var(--fg);border-color:var(--fg);color:var(--bg)}

.pg-badge{display:inline-block;border-radius:4px;padding:1px 6px;
  font-weight:700;font-size:9.5px;line-height:1.6;letter-spacing:.05em}
.pg-badge-keep{background:rgba(255,181,69,.18);color:var(--warn)}
.pg-badge-div{background:rgba(77,163,255,.16);color:var(--acc)}
.pg-badge-in{background:rgba(53,208,127,.16);color:var(--good)}

@media(max-width:640px){
  .pg-wrap{padding:0 12px}
  /* Same specificity as .pg-wrap above and later in the file, so this is what
     keeps the header bar from collapsing to zero vertical padding. */
  .pg-top-in{padding:12px}
  .pg-main{padding:16px 12px 48px}
  .pg-t th,.pg-t td{padding:8px 7px;font-size:12.5px}
  /* Safe areas. .pg-main is both the wrap and the padded element, so the inset
     has to land on it; this repeats the 12px above and only widens it where a
     notch or a home indicator actually intrudes. (Merged up from the standings
     section, which was simply the first view to need it - it is site-level.) */
  .pg-main{padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right))}
}

/* budget: proportion-remaining bar in the "$ left" cell */
.pg-budget-bar{width:100%;min-width:54px;height:3px;margin-top:5px;border-radius:2px;
  background:var(--line2);overflow:hidden}
.pg-budget-bar>i{display:block;height:100%;border-radius:2px;background:var(--good)}
.pg-budget-bar-warn>i{background:var(--warn)}
.pg-budget-bar-bad>i{background:var(--bad)}

/* draft: 12-wide board. Sticky round column, per-cell pick stack, filter dim. */
.pg-draft-b{width:auto;min-width:100%}
.pg-draft-b th,.pg-draft-b td{text-align:left;vertical-align:top;white-space:normal}
.pg-draft-b tr>:first-child{position:sticky;left:0;z-index:2;
  width:46px;min-width:46px;background:var(--bg3)}
.pg-draft-b thead th:not(:first-child){min-width:146px}
.pg-draft-b th .pg-team{font-weight:600;font-size:11.5px;line-height:1.3;letter-spacing:0}
.pg-draft-rd{font-size:12px;color:var(--fg2)}
.pg-draft-cell{line-height:1.35}
.pg-draft-meta{display:flex;align-items:center;gap:5px;margin-bottom:2px}
.pg-draft-no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;color:var(--fg3);letter-spacing:.03em}
.pg-draft-name{font-size:12.5px;font-weight:600;color:var(--fg)}
.pg-draft-nfl{font-size:10.5px;color:var(--fg3);letter-spacing:.04em}
.pg-draft-swap{color:var(--acc);font-size:11px;cursor:help}
.pg-draft-off{opacity:.14}
.pg-draft-legend{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin:0 0 14px}
.pg-draft-lg{display:inline-flex;align-items:center;gap:5px;color:var(--fg2)}

/* ---------------------------------------------------------------- matchups
   Appended for js/matchups.js: the head-to-head cards and the expanded
   starter-by-starter grid. Every rule is prefixed pg-mu-. Colour comes from
   the variables at the top of this file; none of these rules set a colour on
   an element that also takes pg-good / pg-bad / pg-dim, so those keep winning. */
.pg-mu-week{color:var(--fg2);font-size:12.5px;margin:0 0 12px}
.pg-mu-week b{color:var(--fg);font-weight:600}
.pg-mu-note{display:block;color:var(--fg3);font-size:12px;margin-top:4px;max-width:62ch}
.pg-mu-retry{margin-top:12px}

.pg-mu-high{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;margin-bottom:14px}
.pg-mu-hs{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}

.pg-mu{margin-bottom:9px}
.pg-mu-head{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;gap:10px;
  width:100%;padding:12px 14px;background:none;border:0;font:inherit;text-align:left;
  cursor:pointer;color:var(--fg2)}
.pg-mu-head:hover{background:rgba(255,255,255,.03)}
.pg-mu-side{min-width:0}
.pg-mu-cue{display:block;font-size:10px;color:var(--fg3);transition:transform .12s}
.pg-mu-open .pg-mu-cue{color:var(--fg2);transform:rotate(180deg)}

.pg-mu-body{border-top:1px solid var(--line);background:rgba(0,0,0,.16)}
.pg-mu-body[hidden]{display:none}
.pg-mu-grid{min-width:540px;padding:5px 0}
.pg-mu-row{display:grid;grid-template-columns:1fr 60px 62px 60px 1fr;align-items:center;
  gap:8px;padding:5px 14px;color:var(--fg2)}
.pg-mu-row:hover{background:rgba(255,255,255,.022)}
.pg-mu-tot{border-top:1px solid var(--line);margin-top:5px;padding-top:8px;padding-bottom:9px}
.pg-mu-p{display:flex;align-items:center;gap:7px;min-width:0}
.pg-mu-p-r{flex-direction:row-reverse}
.pg-mu-pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--fg)}
.pg-mu-posx{background:var(--fg3)}
.pg-mu-pt{text-align:right;font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pg-mu-pt-r{text-align:left}
.pg-mu-slot{text-align:center;font-weight:700;font-size:9px;line-height:1.5;
  letter-spacing:.07em;color:var(--fg3)}
.pg-mu-foot{padding:9px 14px 11px;border-top:1px solid var(--line);
  color:var(--fg3);font-size:11.5px}

/* rules: key-date strip, filter bar and collapsible constitution entries */
.pg-rules-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* Ring rather than gap, so an odd number of dates leaves card-coloured space
   instead of a lit-up empty cell when the grid wraps to two columns. */
.pg-rules-date{padding:11px 13px;box-shadow:0 0 0 1px var(--line)}
.pg-rules-next{box-shadow:inset 2px 0 0 var(--acc)}
.pg-rules-date-k{font-weight:700;font-size:9.5px;line-height:1.4;letter-spacing:.07em;
  color:var(--fg3);text-transform:uppercase}
.pg-rules-date-v{font-weight:600;font-size:13.5px;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.pg-rules-date-m{font-size:11px}
.pg-rules-date-s{color:var(--fg3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}

.pg-rules-find{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.pg-rules-in{flex:1 1 250px;min-width:0;background:var(--bg2);border:1px solid var(--line2);
  border-radius:8px;color:var(--fg);font-family:inherit;font-size:13px;line-height:1.4;
  padding:9px 11px;appearance:none}
.pg-rules-in::placeholder{color:var(--fg3)}
.pg-rules-in:focus{outline:none;border-color:var(--acc)}
.pg-rules-count{color:var(--fg3);font-size:11.5px;font-variant-numeric:tabular-nums;margin-left:auto}

.pg-rules-grp{margin-bottom:20px}
.pg-rules-grp[hidden]{display:none}
.pg-rules-grp-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 7px;font-weight:400}
.pg-rules-grp-h b{font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg2)}
.pg-rules-grp-h span{font-size:11.5px;color:var(--fg3)}

.pg-rules-item{border-bottom:1px solid var(--line)}
.pg-rules-item:last-child{border-bottom:0}
.pg-rules-item[hidden]{display:none}
.pg-rules-item>summary{display:flex;align-items:baseline;gap:10px;padding:11px 13px;
  cursor:pointer;list-style:none;user-select:none}
.pg-rules-item>summary::-webkit-details-marker{display:none}
.pg-rules-item>summary:hover{background:rgba(255,255,255,.025)}
.pg-rules-item>summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pg-rules-item>summary::after{content:"+";flex:none;margin-left:auto;color:var(--fg3);
  font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.pg-rules-item[open]>summary::after{content:"\2212"}
.pg-rules-s{flex:none;min-width:52px;color:var(--acc);
  font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.pg-rules-t{flex:none;font-weight:600}
.pg-rules-one{flex:1 1 120px;min-width:0;color:var(--fg3);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pg-rules-body{padding:2px 13px 15px 75px}
.pg-rules-body p{margin:0 0 9px;max-width:74ch;color:var(--fg2);font-size:13px}
.pg-rules-body .pg-card{background:var(--bg)}
.pg-rules-ul{margin:0 0 9px;padding-left:18px;max-width:74ch;color:var(--fg2);font-size:13px}
.pg-rules-ul li{margin-bottom:4px}
.pg-rules-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}
.pg-rules-fact{background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;font-size:11.5px;color:var(--fg3)}
.pg-rules-fact b{margin-left:7px;color:var(--fg);font-variant-numeric:tabular-nums}
.pg-rules-tbl{max-width:520px;margin:0 0 11px}
.pg-rules-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:14px;align-items:start;max-width:660px;margin:0 0 11px}
.pg-rules-tables .pg-rules-tbl{max-width:none;margin:0}
.pg-rules-cap{color:var(--fg3);font-size:11px;margin:0 0 5px}
.pg-rules-tbl .pg-rules-cap+.pg-card+.pg-rules-cap,.pg-rules-tbl .pg-card+.pg-rules-cap{margin:5px 0 0}
.pg-rules-tot td{border-top:1px solid var(--line2)}
.pg-rules-note{color:var(--fg3)!important;font-size:12px!important;border-left:2px solid var(--line2);
  padding-left:10px;margin-bottom:0!important}
.pg-rules-none{color:var(--fg3);font-size:13px;padding:18px 2px}

/* ------------------------------------------------------------- integration
   Added when the six section modules were merged into one site. Two things
   every section needs and none of them owned:

   .pg-l     opt a cell out of the table's right-alignment. pg-t right-aligns
             everything but the first column, which left the team name in the
             standings tables floating at the right edge while the same name
             sits hard left on every other tab. Any cell carrying a team name
             takes this instead.
   .pg-empty a settled "there is nothing here" card. Matchups had this as
             .pg-mu-empty and Budgets was borrowing .pg-loading for it, which
             says "still fetching" to anyone reading the class list. */
.pg-t .pg-l{text-align:left}
/* The footer disclaimer is meta prose and reads as it: dimmed, small, ruled off
   and given room underneath. The vertical padding sits here rather than on the
   inner .pg-wrap, which would lose to the media-query rule the same way
   .pg-top-in did. */
.pg-foot{border-top:1px solid var(--line);color:var(--fg3);font-size:12px;
  padding:20px 0 34px}
.pg-empty{padding:26px 16px;text-align:center;color:var(--fg3);font-size:13px}
.pg-empty .pg-sub{margin:6px auto 0;max-width:62ch}

/* (A shared @media(max-width:640px) block sat here, left over from the
   pre-restyle markup: two rules for classes that no longer exist, three that
   the matchups and rules sections now set themselves further down, and a
   .pg-rules-one{display:none} that deleted the one line of each rule which
   settles most arguments - the rules section had to fight it back with a
   higher-specificity override. All six are gone; the narrow shape changes are
   stated once per section, at the same 640px, and the site-wide narrow rules
   are in the base block near the top of this file.) */


/* ================================================================ broadcast

   The scoreboard layer: condensed display type, club identity on every player
   row, and numerals that read at a glance. Everything below is additive - the
   base tables still work if a club is unknown or a logo fails to load. */

h2.pg-h{font-family:var(--cond);font-size:22px;font-weight:700;
  letter-spacing:.01em;text-transform:uppercase}
.pg-brand{font-family:var(--cond);font-size:26px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase}
.pg-brand b{font-weight:700}
.pg-season{font-family:var(--cond);font-size:17px;font-weight:600}
.pg-tab{font-family:var(--cond);font-size:15px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:12px 14px 10px}
.pg-t th{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.09em}
.pg-num{font-family:var(--cond);font-size:15px;font-weight:600;
  letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* Club identity ------------------------------------------------------- */

.pg-logo{display:block;object-fit:contain;flex:none}
.pg-avatar{display:block;border-radius:50%;flex:none;background:var(--bg3)}

/* A manager's face -----------------------------------------------------
   Five of the twelve managers have never set a Sleeper avatar, and PG.avatar
   deletes its <img> on a 404, so an avatar alone leaves a hole that ragged-edges
   whatever column it is in. The monogram is always in the DOM underneath and
   the disc is the same footprint whatever loads, so a missing avatar and an
   unreachable CDN land on the same tidy circle and nothing beside it moves.

   Five sections had each invented their own copy of this (.pg-st-av,
   .pg-prz-av, .pg-dr-face, .pg-mux-face - and Budgets had none at all, which
   is why the same manager was a different object depending on the tab). One
   primitive now, sized by --face: a caller that wants a different size sets
   that one property and nothing else. */
.pg-face{position:relative;display:inline-block;flex:none;overflow:hidden;
  border-radius:50%;width:var(--face,26px);height:var(--face,26px);
  background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line2)}
.pg-face-i{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-style:normal;color:var(--fg3);
  font-family:var(--cond);font-weight:700;line-height:1;
  /* .56 of the disc, floored at 12px: the smallest face on the site is the
     22px one in a draft team chip, and nothing prints type under 12px. */
  font-size:max(12px,calc(var(--face,26px) * .56))}
.pg-face>.pg-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.pg-club{display:inline-flex;align-items:center;gap:5px;
  padding:2px 7px 2px 5px;border-radius:4px;
  background:color-mix(in srgb,var(--club) 22%,transparent);
  box-shadow:inset 2px 0 0 var(--club)}
.pg-club-t{font-family:var(--cond);font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--fg2)}

/* A player row carries its club colour as a rail, the way a lower-third does. */
.pg-rail{box-shadow:inset 3px 0 0 var(--club,var(--line2))}

/* Scoreboard ---------------------------------------------------------- */

.pg-score{font-family:var(--cond);font-size:34px;font-weight:700;
  line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pg-score-lo{color:var(--fg3)}
.pg-score-hi{color:var(--fg)}

.pg-mu{border:1px solid var(--line);border-radius:10px;background:var(--bg2);
  overflow:hidden}
.pg-mu-side{display:flex;align-items:center;gap:10px;padding:11px 13px}
.pg-mu-side+.pg-mu-side{border-top:1px solid var(--chalk)}
.pg-mu-win{background:linear-gradient(90deg,rgba(53,208,127,.09),transparent 60%)}
.pg-mu-name{font-family:var(--cond);font-size:19px;font-weight:600;
  letter-spacing:.01em;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Team cell with avatar ----------------------------------------------- */

.pg-team-cell{display:flex;align-items:center;gap:8px;min-width:0}
.pg-team{font-family:var(--cond);font-size:16px;font-weight:600;letter-spacing:.01em}
.pg-mgr{font-size:11px}

/* Section rule: a chalk line, not a border ---------------------------- */

.pg-sec>h2.pg-h{padding-bottom:5px;border-bottom:2px solid var(--chalk)}

/* League crest: same footprint as the painted mark it replaces, so the header
   does not shift when it loads. */
.pg-crest{width:30px;height:30px;border-radius:7px;flex:none;object-fit:cover;
  background:var(--bg3)}

@media(max-width:640px){
  .pg-brand{font-size:21px}
  h2.pg-h{font-size:18px}
  .pg-score{font-size:26px}
  .pg-mu-name{font-size:16px}
  .pg-crest{width:26px;height:26px}
}

/* ==================================================== prizes  (pg-prz-)

   The Prize Pool tab. Every selector below is prefixed pg-prz-. (--cond and
   --chalk used to be backfilled here; they are declared once at the top of
   this file now.) */

/* Nothing on a phone drops below 12px. The two shared labels that do are
   nudged up here rather than site-wide, so no other tab shifts. */
#view-prizes .pg-mgr{font-size:12px}
#view-prizes .pg-pos{font-size:12px;min-width:34px;line-height:1.35}

/* -- awards: the hero row -------------------------------------------------
   Four cards, fluid. auto-fit puts four across a wide page, three at 1024,
   two around 640 and one on a phone, with no breakpoint doing the deciding -
   min(240px,100%) is what keeps the track from ever exceeding the viewport. */
.pg-prz-awards{display:grid;gap:10px;margin:0 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr))}
.pg-prz-a{display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:13px 14px 14px}
.pg-prz-a-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pg-prz-a-lead{display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  flex:1 1 auto;min-width:0}
.pg-prz-a-kick{font-family:var(--cond);font-size:13.5px;font-weight:600;line-height:1.15;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);overflow-wrap:anywhere}
.pg-prz-a-tag{font-family:var(--cond);font-size:12px;font-weight:700;line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bad);
  background:rgba(255,109,128,.12);border-radius:4px;padding:1px 7px}
/* Bigger than .pg-score's fixed 34px on a wide card, and it stays big on a
   phone instead of the broadcast layer's 26px - this figure is the point. */
.pg-prz-a-fig{flex:none;font-size:clamp(29px,7.6vw,38px)}

.pg-prz-a-hold{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:28px}
.pg-prz-a-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.pg-prz-a-avs{display:flex;align-items:center;gap:3px;flex:none}
.pg-prz-a-name{font-family:var(--cond);font-size:17px;font-weight:600;letter-spacing:.01em;
  color:var(--fg);line-height:1.2;min-width:0;overflow-wrap:anywhere}
.pg-prz-a-dash{width:26px;height:26px;border-radius:50%;background:var(--bg3);flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--fg3)}
.pg-prz-a-open{font-family:var(--cond);font-size:17px;font-weight:600;letter-spacing:.01em;
  color:var(--fg3);line-height:1.2}
.pg-prz-a-det{margin:auto 0 0;color:var(--fg3);font-size:12px;line-height:1.45;
  overflow-wrap:anywhere}

/* -- earnings table -------------------------------------------------------
   Six columns wide, two columns narrow. .pg-prz-fold is the four that go;
   .pg-prz-fold-line is where they go to. */
/* .pg-t td is a class AND a type selector, so these two have to be written the
   same way or the base table rules win on specificity and the team cell stays
   nowrap while the total stays 12.5px. */
.pg-prz-earn td{padding-top:10px;padding-bottom:10px;vertical-align:middle}
.pg-t td.pg-prz-team{white-space:normal;min-width:0}
.pg-prz-tm{min-width:0;flex:1 1 auto}
.pg-t td.pg-prz-total{font-family:var(--cond);font-size:clamp(16px,4.4vw,19px);
  font-weight:700;letter-spacing:0}
.pg-prz-fold-line{display:none;flex-wrap:wrap;gap:2px 12px;margin-top:3px}
.pg-prz-fi{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.pg-prz-fi-k{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg3)}
.pg-prz-fi-v{font-family:var(--cond);font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums}

/* -- pool breakdown -------------------------------------------------------
   Was a five-column table whose second column ran to a full sentence. Same
   five figures per pool, laid out as a card so the sentence has somewhere to
   live at 390px and the totals read as money at 1600px. */
.pg-prz-pools{display:grid;gap:10px;margin:0 0 10px;
  grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr))}
.pg-prz-p{display:flex;flex-direction:column;gap:5px;min-width:0;padding:13px 14px 14px}
.pg-prz-p-kick{font-family:var(--cond);font-size:13.5px;font-weight:600;line-height:1.15;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);overflow-wrap:anywhere}
.pg-prz-p-fig{font-size:clamp(25px,6.2vw,31px);font-weight:700;line-height:1;
  letter-spacing:-.01em;color:var(--fg)}
.pg-prz-p-pays{margin:2px 0 0;color:var(--fg3);font-size:12px;line-height:1.45;
  overflow-wrap:anywhere}
.pg-prz-p-foot{margin-top:auto;padding-top:10px}
.pg-prz-meter{height:4px;border-radius:2px;background:var(--line);overflow:hidden;
  margin-bottom:9px}
.pg-prz-meter>i{display:block;height:100%;border-radius:2px;background:var(--good)}
.pg-prz-p-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.pg-prz-st{display:flex;align-items:baseline;gap:6px;min-width:0}
.pg-prz-st-k{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg3)}
.pg-prz-st-v{font-family:var(--cond);font-size:14.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.pg-prz-p-tag{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--fg3);background:var(--bg3);border-radius:4px;
  padding:2px 8px;margin-left:auto;white-space:nowrap}

.pg-prz-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px clamp(18px,5vw,42px);
  padding:13px 14px}
.pg-prz-sum-i{display:flex;align-items:baseline;gap:8px;min-width:0}
.pg-prz-sum-v{font-family:var(--cond);font-size:clamp(20px,5.4vw,26px);font-weight:700;
  line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* The one shape change. Above this width the earnings table shows all six
   columns and the fold line is inert; below it the four folding columns are
   gone and the fold line carries them. */
@media(max-width:640px){
  .pg-prz-earn .pg-prz-fold{display:none}
  .pg-prz-fold-line{display:flex}
  .pg-prz-earn td{padding-top:9px;padding-bottom:9px}
}


/* ==================================================== budgets (js/budget.js)

   Appended for the Budgets tab. Every selector below is either a .pg-bud-
   class or scoped inside .pg-bud-t / .pg-bud-feed, so nothing here can reach
   another section.

   (--cond and --chalk used to be backfilled here too; they are declared once
   at the top of this file now.) */

/* Both budget tables ------------------------------------------------------
   One markup at every width. The per-cell column label is off while the header
   row is there to say it, and the header itself is allowed to wrap so that a
   run of narrow-but-not-phone widths (a half-screen window, a small laptop)
   sizes columns off the longest word rather than off "Sleeper FAAB Used". */
.pg-bud-k{display:none}
.pg-bud-t th,.pg-bud-feed th{white-space:normal}
/* Only the feed. The funds table wants its numerals on a shared baseline -
   a scoreboard row does not stagger - and the feed wants its in/out lists
   starting level with the timestamp they belong to. */
.pg-bud-feed td{vertical-align:top}
/* A feed row's team name is the one thing here that regularly wraps - the
   timestamp and the price hold the middle column to about 12 characters on a
   360px phone - and a centred avatar next to two lines of name floats between
   them. Top-aligned, it reads as one block. The funds table keeps its avatar
   centred: that cell has the whole card width and does not wrap. */
.pg-bud-feed .pg-team-cell{align-items:flex-start}
.pg-bud-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;min-width:0}
.pg-bud-who .pg-mgr{margin-left:0}
/* The team cell is the widest thing in either table, and pg-t holds every cell
   on one line. Letting this one wrap costs nothing on a wide screen - the
   browser only breaks when it has to - and is what stops five feed columns
   from needing a horizontal scroll in a half-screen window. */
.pg-bud-t td[data-c=team],.pg-bud-feed td[data-c=team]{white-space:normal}
.pg-bud-t .pg-team,.pg-bud-feed .pg-team{overflow-wrap:break-word}
.pg-bud-sub{font-size:12px;line-height:1.4;margin-top:2px}

/* Transaction funds table */
.pg-bud-left{font-size:21px;line-height:1.15;letter-spacing:-.01em}
.pg-bud-out{margin-left:6px;font-family:var(--cond);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}

/* Totals strip. The same three numbers the summary sentence carried, at a size
   that reads from across the room, wrapping to one, two or three across. */
.pg-bud-tot{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pg-bud-fact{flex:1 1 10rem;min-width:0;background:var(--bg2);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px}
.pg-bud-fact-k{display:block;font-family:var(--cond);font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)}
.pg-bud-fact-v{display:block;font-family:var(--cond);font-size:22px;font-weight:700;
  letter-spacing:.01em;line-height:1.15;font-variant-numeric:tabular-nums}
.pg-bud-after{margin-top:12px}

/* Transaction feed --------------------------------------------------------
   A player is a chip, a badge and a name on one line, and every name is free
   to wrap: nothing in this table is allowed to widen the row past the card. */
.pg-bud-feed td[data-c=in],.pg-bud-feed td[data-c=out]{white-space:normal;min-width:7.5rem}
/* Chip, badge, name. It wraps rather than compresses: when the column is too
   narrow for all three the name drops onto its own line under the chips, which
   is how a lower-third would do it anyway. The alternative - letting the name
   shrink - breaks it mid-word into a column of single letters. */
.pg-bud-p{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding:1px 0;min-width:0}
.pg-bud-p+.pg-bud-p{margin-top:3px}
.pg-bud-p .pg-club,.pg-bud-p .pg-pos{flex:none}
.pg-bud-posx{background:var(--fg3)}
.pg-bud-pn{font-family:var(--cond);font-size:15px;font-weight:600;letter-spacing:.01em;
  line-height:1.3;min-width:0;overflow-wrap:break-word}
.pg-bud-faab{font-family:var(--cond);font-size:14px;font-weight:600;letter-spacing:.03em;
  margin-top:3px}

.pg-bud-cost{white-space:nowrap}
.pg-bud-price{display:flex;align-items:baseline;justify-content:flex-end;gap:5px}
.pg-bud-plus{color:var(--fg3);font-size:12px}
.pg-bud-type{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg3);margin-top:2px}
.pg-bud-note{font-size:12px;line-height:1.4;color:var(--fg3)}

/* The club rail. It is painted on the first cell rather than on the <tr>,
   because a row in a border-collapse table does not reliably paint a box
   shadow in every engine; below 640px the <tr> is a grid card and paints it
   itself. Both use the same custom property, and both fall back to the plain
   rule colour when the row has no player and therefore no club. */
.pg-bud-tx>td:first-child{box-shadow:inset 3px 0 0 var(--club,var(--line2))}

/* Empty state: the league's own crest, at the size the empty state can carry.
   Later in the file than .pg-crest's own sizing, so this wins at every width. */
.pg-bud-crest{width:56px;height:56px;border-radius:14px;margin:0 auto 10px}

/* ---- phones -------------------------------------------------------------
   640px, the site-wide shape change. Both tables stop being tables and become
   one card per row: the header disappears, every cell carries its own label,
   and the cells are placed by the data-c key the module set. Nothing is
   dropped and nothing is duplicated - a cell only moves.

   The budget card leads with the team, then $ LEFT as the scoreboard numeral
   with its proportion bar full width beside FAAB LEFT, then the three smaller
   figures underneath. The feed card is the timestamp and the team on one line
   with the cost right-aligned against them, then IN and OUT beneath, each
   labelled down the left so a stack of chips never becomes ambiguous. */
@media(max-width:640px){
  .pg-bud-t,.pg-bud-feed,
  .pg-bud-t tbody,.pg-bud-feed tbody{display:block;width:100%}
  .pg-bud-t thead,.pg-bud-feed thead{display:none}
  .pg-bud-t tr,.pg-bud-feed tr{display:grid;text-align:left;padding:12px;
    border-bottom:1px solid var(--line)}
  .pg-bud-t tr:last-child,.pg-bud-feed tr:last-child{border-bottom:0}
  .pg-bud-t td,.pg-bud-feed td{display:block;padding:0;border:0;text-align:left;
    white-space:normal;min-width:0}
  .pg-bud-t .pg-bud-k,
  .pg-bud-feed td[data-c=in] .pg-bud-k,.pg-bud-feed td[data-c=out] .pg-bud-k{
    display:block;font-family:var(--cond);font-size:12px;font-weight:600;
    line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)}

  .pg-bud-t tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
    grid-template-areas:
      "team team team"
      "left left faab"
      "adds spent check"}
  .pg-bud-t td[data-c=team]{grid-area:team}
  .pg-bud-t td[data-c=left]{grid-area:left}
  .pg-bud-t td[data-c=faab]{grid-area:faab}
  .pg-bud-t td[data-c=adds]{grid-area:adds}
  .pg-bud-t td[data-c=spent]{grid-area:spent}
  .pg-bud-t td[data-c=check]{grid-area:check}
  .pg-bud-left{font-size:28px}
  .pg-bud-t .pg-mgr{font-size:12px}

  .pg-bud-feed tr{grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
    gap:4px 10px;align-items:start;
    box-shadow:inset 3px 0 0 var(--club,var(--line2));
    grid-template-areas:
      "when team cost"
      "in   in   in"
      "out  out  out"}
  .pg-bud-tx>td:first-child{box-shadow:none}
  .pg-bud-feed td[data-c=when]{grid-area:when}
  .pg-bud-feed td[data-c=team]{grid-area:team}
  .pg-bud-feed td[data-c=in]{grid-area:in}
  .pg-bud-feed td[data-c=out]{grid-area:out}
  .pg-bud-feed td[data-c=cost]{grid-area:cost;text-align:right}
  .pg-bud-feed td[data-c=in],.pg-bud-feed td[data-c=out]{
    display:grid;grid-template-columns:4.6ch minmax(0,1fr);gap:0 8px;
    align-items:start;min-width:0;margin-top:2px}
  .pg-bud-feed td[data-c=in] .pg-bud-k{grid-column:1;color:var(--good)}
  .pg-bud-feed td[data-c=out] .pg-bud-k{grid-column:1}
  .pg-bud-moves>:not(.pg-bud-k){grid-column:2}
  .pg-bud-feed .pg-mgr{font-size:12px}
  /* The shared position badge is a 9.5px desktop size. Nothing on a phone is
     allowed under 12px, so it grows here - and a chunkier badge is what a
     lower-third does anyway. Scoped to the feed's player lines. */
  .pg-bud-p .pg-pos{font-size:12px;min-width:34px;padding:2px 6px;line-height:1.35}
  .pg-bud-crest{width:48px;height:48px}
}


/* ================================================= standings (js/standings.js)

   Appended for the Standings front page. Every selector is prefixed pg-st-
   except the three site-level items called out below, which the front page is
   simply the first view to need. The 640px shape change is the site's single
   phone breakpoint; every other size here is fluid (auto-fit tracks, min(),
   fr and ch), so the page holds together at 360, 390, 430, 640, 768, 1024,
   1280 and 1600 rather than at two chosen widths. */

/* Three site-level items lived here, because Standings was the first view to
   need each of them. All three have moved: the --cond / --chalk backfill to the
   :root at the top of this file, the narrow-viewport safe-area inset to the
   base @media block up there beside the padding it repeats, and the nav-tab
   touch height to the one @media(hover:none) block at the end - where it now
   applies on a tablet as well as a phone. The two wide-viewport safe-area
   insets stay, because there is nowhere better for them. */
.pg-main{padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right))}
.pg-foot{padding-bottom:max(34px,env(safe-area-inset-bottom))}

.pg-st-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Name plate ---------------------------------------------------------------
   Manager avatar, condensed team name, manager handle underneath - the
   lower-third stack, and the same markup at every width. */

.pg-st-cell{gap:9px;width:100%}
.pg-st-plate{flex:1 1 auto;min-width:0;line-height:1.25}
.pg-st-nameline{display:flex;align-items:center;gap:6px;min-width:0}
.pg-st-nameline>.pg-team{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-st-nameline>.pg-badge{flex:none}
/* 12px is the floor on a phone and the manager handle was the one thing under
   it, so it sits at 12px everywhere rather than shrinking on the small screen. */
.pg-st-plate>.pg-mgr{display:block;margin-left:0;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tables -------------------------------------------------------------------
   The team column absorbs the slack so the numerals stay hard right. */

.pg-t .pg-st-team{width:100%}
/* The narrow-viewport rule near the top of this file sets a font-size on
   .pg-t td, and .pg-num is a class ON that td - so it loses on specificity and
   the scoreboard numerals quietly drop to 12.5px on the device that most needs
   them big. Two classes beat one class plus an element, so this restores them.
   It is a no-op on a wide screen, where .pg-t td sets no size at all. */
.pg-st-t .pg-num{font-size:15px}
.pg-st-rk{color:var(--fg2)}
.pg-st-seed{color:var(--acc)}

/* The shared badge is a 9.5px desktop micro-label. On this page DIV / IN is not
   a footnote - it is the answer to "am I in", the whole point of the seed table
   - so it carries the 12px floor at EVERY width rather than only on the phone.
   Scoped to this page's tables; the Draft and Matchups sections already do the
   same inside their own scopes. */
.pg-st-t .pg-badge{font-size:12px;padding:2px 7px}

/* A rail on every team holding a berth. On a phone the BERTH column has folded
   away, so this is what still says who is in. */
.pg-t .pg-st-in>td:first-child,
.pg-t .pg-st-in+.pg-st-more>td:first-child{box-shadow:inset 3px 0 0 var(--acc)}

/* The fold. A pri:2 column is a normal cell on a wide screen and gone below
   640px, where its value is re-served in the drawer under its own row. Both
   halves are display-only: the same markup, the same nodes, no second code
   path and nothing a wide screen shows that a narrow one cannot reach. */
.pg-st-xc{display:none}
.pg-st-more{display:none}

.pg-st-x{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  color:var(--fg3);font:inherit;cursor:pointer}
.pg-st-x:focus-visible{outline:2px solid var(--acc);outline-offset:-3px;border-radius:10px}
.pg-st-chev{display:block;font-size:15px;line-height:1;color:var(--fg2);
  transition:transform .14s ease}
.pg-st-open .pg-st-chev{transform:rotate(180deg);color:var(--fg)}

.pg-t .pg-st-more-c{padding:0;white-space:normal;background:var(--bg)}
.pg-st-kvs{display:flex;flex-wrap:wrap;gap:6px;padding:9px 10px 11px}
/* 40px, not 34: the drawer only ever exists on a phone, where every chip on the
   page is thumb-sized. It also makes the chip row match the 40px expander that
   opened it instead of sitting a notch under it. */
.pg-st-kv{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 11px;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;color:var(--fg)}
.pg-st-kv-k{font:600 12px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg3)}
/* No colour here on purpose: the value span inherits the cell's own pg-good /
   pg-bad / pg-warn / pg-dim class, and setting a colour would outrank it. */
.pg-st-kv-v{font:600 15px/1.2 var(--cond);font-variant-numeric:tabular-nums}

/* Bracket ladder -----------------------------------------------------------
   One column per round, one card per game, two slots per card. auto-fit means
   three columns from about 700px, two in the middle and one on a phone with no
   breakpoint of its own; min() keeps the track from outgrowing a 360px screen. */

.pg-st-ladder{display:grid;gap:14px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,206px),1fr))}
.pg-st-round{min-width:0}
.pg-st-round-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;margin:0 0 7px;font-weight:400}
.pg-st-round-n{font:700 14px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg2)}
.pg-st-round-w{font:600 13px/1.2 var(--cond);letter-spacing:.06em;color:var(--fg3)}
.pg-st-game{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;margin-bottom:9px}
.pg-st-round>.pg-st-game:last-child{margin-bottom:0}
.pg-st-slot{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:9px 11px}
.pg-st-slot+.pg-st-slot{border-top:1px solid var(--chalk)}
.pg-st-seedno{flex:none;min-width:24px;color:var(--fg3)}
.pg-st-slot-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-st-slot-t.pg-dim{font-size:13px}

/* Recent moves -------------------------------------------------------------
   Events, not measurements, so a list of cards rather than a table: a player
   name plus a club chip needs room a five-column grid cannot give it at 390px.
   One grid, five tracks across on a wide screen and four stacked areas on a
   phone, so no field is dropped at any width. */

.pg-st-moves{list-style:none;margin:0;padding:0}
.pg-st-move{display:grid;align-items:center;gap:5px 14px;padding:11px 14px;
  border-bottom:1px solid var(--line);
  grid-template-columns:max-content minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.25fr) max-content}
.pg-st-moves>li:last-child{border-bottom:0}
.pg-st-mv-when{font-size:12px;white-space:nowrap}
.pg-st-mv-team{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-st-mv-side{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.pg-st-mv-sign{flex:none;font:700 16px/1 var(--cond)}
.pg-st-pl{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.pg-st-pl-n{min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-st-mv-cost{text-align:right;white-space:nowrap}

/* Empty states -------------------------------------------------------------
   Zero games played is the default view of this site, not an edge case, so it
   gets the league crest and a headline that says which thing is missing and
   why - never a blank table that reads as a result. */

.pg-st-empty{padding:30px 18px 32px}
.pg-st-empty .pg-crest{display:block;width:46px;height:46px;border-radius:12px;
  margin:0 auto 12px}
.pg-st-empty-h{margin:0;font:700 19px/1.2 var(--cond);letter-spacing:.05em;
  text-transform:uppercase;color:var(--fg2)}

/* Phone --------------------------------------------------------------------
   The site's one shape change. Nothing here shrinks type; it changes layout. */

@media(max-width:640px){
  /* Fold the secondary columns out and the drawer toggle in. */
  .pg-st-t .pg-st-p2{display:none}
  .pg-t .pg-st-xc{display:table-cell;width:40px;padding:0}
  .pg-st-more:not([hidden]){display:table-row}
  .pg-st-row{cursor:pointer}
  .pg-st-t tbody tr.pg-st-open{background:var(--bg3)}

  /* A long team name wraps to two lines rather than forcing the table wider
     than the card; overflow-wrap:anywhere is what actually lets the column
     shrink, because it drops the longest word out of the min-content width. */
  .pg-t .pg-st-team{white-space:normal}
  .pg-st-nameline>.pg-team{white-space:normal;overflow-wrap:anywhere;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

  /* Badges and club chips are the only type left under 12px, and both are
     all-caps micro labels sitting next to a thumb. */
  .pg-st-kv .pg-badge{font-size:12px;padding:2px 7px}
  .pg-st-move .pg-club-t{font-size:12px}
  .pg-st-move .pg-club{padding:4px 8px 4px 6px}
  /* A club chip is a label, not a control: nothing on this page answers a tap
     on it, and a 40px-tall badge beside a 13px name would read as a button that
     does nothing. What gets thumb-sized is the line that HOLDS it, so every
     player in a move is a 40px row with the chip proportionate inside it. */
  .pg-st-move .pg-st-pl{min-height:40px}

  .pg-st-move{align-items:start;gap:5px 10px;padding:12px;
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-areas:"team cost" "when when" "in in" "out out"}
  .pg-st-mv-team{grid-area:team}
  .pg-st-mv-when{grid-area:when}
  .pg-st-mv-in{grid-area:in}
  .pg-st-mv-out{grid-area:out}
  .pg-st-mv-cost{grid-area:cost;align-self:center}
  .pg-st-pl-n{font-size:13px}

  .pg-st-empty{padding:26px 14px 28px}
}

/* =============================================== draft board (js/draft.js)
   The broadcast + phone pass on the Draft tab. Every new class is prefixed
   .pg-dr-; the few rules that retune existing .pg-draft-* classes are scoped
   under .pg-dr or .pg-draft-b so nothing on another tab moves. One breakpoint,
   640px, the same one the rest of this file uses.

   Shape, in one sentence: above 640px the 12-column grid is the board and the
   team chips dim it, exactly as before; below 640px the chips pick a roster and
   the board becomes that roster's 22 picks, with the grid one tap away. Same
   markup, same state, same numbers - CSS decides which shape is on screen. */

/* (A --cond / --chalk backfill lived here; both are declared once at the top
   of this file now. The scroll-margin this section used to set is in the
   site-wide sticky-nav rule at the end of the file.) */

/* Summary as a scoreboard strip -------------------------------------------
   The same three numbers the old one-line summary carried. auto-fit reflows
   3 -> 2 -> 1 across every width on its own; no breakpoint decides it. */
.pg-dr-strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 13px}
/* flex rather than auto-fit grid so the tile that wraps onto its own line
   stretches to fill it - an auto-fit grid leaves a lit hole beside it at
   exactly the width a phone is. */
.pg-dr-stat{flex:1 1 158px;min-width:0;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:9px 13px;box-shadow:inset 3px 0 0 var(--line2)}
.pg-dr-stat-v{font-family:var(--cond);font-weight:700;line-height:1;color:var(--fg);
  font-size:clamp(26px,7vw,32px);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pg-dr-stat-l{font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg3);margin-top:3px}

.pg-dr-ok{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  color:var(--fg3);font-size:12px;margin:0 0 13px}
.pg-dr-ok b{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--good)}

.pg-dr-note{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  box-shadow:inset 3px 0 0 var(--warn);padding:11px 13px;margin:0 0 13px;
  color:var(--fg2);font-size:12.5px;line-height:1.5}
.pg-dr-note strong{color:var(--fg)}

/* Team chips: the primary control ----------------------------------------
   A face on every chip, because managers are known by their avatar long before
   their team name. They wrap on a desk and become one snapping row on a phone,
   which keeps the board itself above the fold instead of five rows down. */
.pg-dr-chips{gap:6px}
.pg-dr-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;
  padding:4px 12px 4px 5px;font-size:12px;text-align:left}
.pg-dr-chip-bare{padding-left:12px}
.pg-dr-chip-t{font-family:var(--cond);font-size:14px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}

/* Narrow-only layout switch ---------------------------------------------- */
.pg-dr-seg{display:none}
.pg-dr-list{display:none}
.pg-dr-hint{display:none}

/* Single-team board ------------------------------------------------------- */
.pg-dr-lh{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--bg2);border:1px solid var(--line);border-bottom:0;
  border-radius:10px 10px 0 0}
.pg-dr-lh-t{flex:1 1 auto;min-width:0}
.pg-dr-lh-n{font-family:var(--cond);font-size:19px;font-weight:600;letter-spacing:.01em;
  color:var(--fg);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-dr-lh-m{font-size:12px;color:var(--fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-dr-lh-s{flex:none;font-family:var(--cond);font-size:13px;font-weight:700;
  line-height:1.25;letter-spacing:.05em;text-transform:uppercase;color:var(--fg3);
  text-align:right}
.pg-dr-lh-s b{display:block;font-weight:700;color:var(--fg2)}

.pg-dr-picks{list-style:none;margin:0;padding:0;background:var(--bg2);
  border:1px solid var(--line);border-radius:0 0 10px 10px}
.pg-dr-pk{display:flex;gap:11px;align-items:flex-start;
  padding:9px 12px 9px 14px;border-bottom:1px solid var(--line);min-height:56px}
.pg-dr-picks>.pg-dr-pk:last-child{border-bottom:0;border-radius:0 0 9px 9px}
.pg-dr-pk-l{flex:0 0 46px;padding-top:1px}
.pg-dr-pk-rd{display:block;font-family:var(--cond);font-size:18px;font-weight:700;
  line-height:1.05;letter-spacing:.02em;color:var(--fg)}
.pg-dr-pk-ov{display:block;font-family:var(--cond);font-size:12px;font-weight:600;
  letter-spacing:.05em;color:var(--fg3);font-variant-numeric:tabular-nums}
.pg-dr-pk-m{flex:1 1 auto;min-width:0}
.pg-dr-pk-n{font-family:var(--cond);font-size:18px;font-weight:600;letter-spacing:.01em;
  line-height:1.2;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-dr-pk-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
.pg-dr-pk-swap{margin-top:6px;padding-left:8px;border-left:2px solid var(--acc);
  color:var(--fg2);font-size:12px;line-height:1.45}
.pg-dr-lempty{padding:20px 14px;text-align:center;color:var(--fg3);font-size:12.5px;
  background:var(--bg2);border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px}
.pg-dr-lh+.pg-dr-lempty{border-top:1px solid var(--line)}

/* Grid: broadcast dressing ------------------------------------------------ */
.pg-dr .pg-scroll:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pg-draft-b tbody td{padding-left:12px}
.pg-dr-hd{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-dr-hd-top{display:flex;align-items:center;gap:6px}
/* Beats .pg-draft-b th .pg-team by arriving later at equal specificity. */
.pg-draft-b th .pg-dr-hd-name{font-family:var(--cond);font-size:14px;font-weight:600;
  letter-spacing:.02em;line-height:1.15;color:var(--fg);white-space:normal}

.pg-dr-namerow{display:flex;align-items:center;gap:6px;min-width:0}
.pg-dr-namerow .pg-logo{width:18px;height:18px}
.pg-draft-name{font-family:var(--cond);font-size:14.5px;font-weight:600;letter-spacing:.01em}
.pg-dr-empty .pg-draft-cell{opacity:.62}

.pg-draft-rd{text-align:left}
.pg-dr-rdn{display:block;font-family:var(--cond);font-size:20px;font-weight:700;
  line-height:1;color:var(--fg2);font-variant-numeric:tabular-nums}
.pg-dr-rdk{display:block;font-size:12px;line-height:1.2;color:var(--acc)}
.pg-dr-rd-rev>td{background:rgba(77,163,255,.035)}

/* The swap marker is a control now, not a tooltip: a phone cannot hover, and
   this cell is the difference between two managers' money. */
.pg-dr-swap{appearance:none;border:0;border-radius:5px;padding:0 4px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;min-height:26px;font:inherit;font-size:13px;line-height:1;
  background:rgba(77,163,255,.14);color:var(--acc)}
.pg-dr-swap:hover{background:rgba(77,163,255,.26)}
.pg-dr-swap[aria-expanded="true"]{background:var(--acc);color:var(--bg)}
.pg-dr-swapnote{margin-top:5px;padding-left:7px;border-left:2px solid var(--acc);
  color:var(--fg2);font-size:12px;line-height:1.4;max-width:24ch}
.pg-dr-swapnote[hidden]{display:none}
/* Beats .pg-draft-off, so a note you opened is legible even in a filtered-out
   column. Nothing else about the filter changes. */
.pg-draft-off.pg-dr-lit{opacity:1}

@media(max-width:640px){
  /* One snapping row rather than five wrapped ones. The page never scrolls
     sideways; this strip does, the way the section nav above it already does. */
  .pg-dr-chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scroll-padding-inline:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-bottom:10px;padding-bottom:2px}
  .pg-dr-chips::-webkit-scrollbar{display:none}
  .pg-dr-chip{flex:none;scroll-snap-align:center;min-height:44px}

  .pg-dr-seg{display:flex;margin:0 0 11px;border:1px solid var(--line2);
    border-radius:10px;overflow:hidden}
  .pg-dr-seg button{flex:1 1 0;min-width:0;min-height:44px;padding:0 10px;
    appearance:none;background:transparent;border:0;cursor:pointer;
    font-family:var(--cond);font-size:14px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--fg2)}
  .pg-dr-seg button+button{border-left:1px solid var(--line2)}
  .pg-dr-seg button[aria-pressed="true"]{background:var(--bg3);color:var(--fg)}

  /* Team picked and not overridden -> the roster board replaces the grid.
     "All teams", or an explicit Full grid, -> the grid, exactly as on a desk. */
  .pg-dr-team:not(.pg-dr-gridmode) .pg-dr-list{display:block}
  .pg-dr-team:not(.pg-dr-gridmode) .pg-dr-gridcard{display:none}
  .pg-dr-all .pg-dr-hint-all{display:block}
  .pg-dr-team.pg-dr-gridmode .pg-dr-hint-grid{display:block}

  /* Nothing in this section drops below 12px on a phone. Where that makes a
     column wider, the column gets wider - the grid already scrolls. */
  .pg-dr .pg-draft-no{font-size:12px}
  .pg-dr .pg-draft-nfl{font-size:12px}
  .pg-dr .pg-draft-name{font-size:13.5px}
  .pg-dr .pg-pos{font-size:12px;min-width:34px;padding:2px 6px;line-height:1.35}
  .pg-dr .pg-badge{font-size:12px;padding:2px 7px;line-height:1.35}
  .pg-dr .pg-club-t{font-size:12px}
  .pg-dr .pg-draft-lg{gap:6px}
  .pg-draft-b thead th:not(:first-child){min-width:162px}
  .pg-dr-swap{min-width:40px;min-height:40px;font-size:15px}
  .pg-dr-swapnote{max-width:none}
  .pg-dr-lh-s{font-size:12px}
}

/* ===================================================== rules  (pg-rules-)

   The Rules tab, restyled. Two jobs: the key-date strip reads as a broadcast
   lower third rather than a list, and the five constitution headings take the
   same chalk rule every h2 on the site takes. Everything else here is about
   the phone, because this is the tab that gets opened mid-argument on a couch
   and the old layout answered a 390px screen by hiding the one line of each
   rule that settles most of them.

   Presentation only: nothing below changes a rule, a citation, the match
   count or what the filter matches. --cond and --chalk are the shared
   broadcast tokens; every reference carries a fallback so this section still
   renders if the block that declares them ever moves.

   No breakpoint is invented here. The strip, the filter bar, the rule rows
   and the prize tables all reflow on their own content; the single
   @media(max-width:640px) at the end exists because the page gutter changes
   there and the sticky bar has to stay flush with it. */

/* -- key dates: the broadcast strip ---------------------------------------
   Small tracked label, the date itself large and condensed, state and
   citation underneath. auto-fit does the reflow: five across at 1080, four
   around 820, three at 640, two at every phone width from 360 up, and one
   below 320 instead of overflowing. */
.pg-rules-dates{grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr))}
.pg-rules-date{display:flex;flex-direction:column;min-width:0;
  padding:clamp(11px,2.6vw,14px) clamp(12px,3vw,15px)}
.pg-rules-date-k{font-family:var(--cond,"PG Cond",sans-serif);font-size:12px;
  font-weight:700;line-height:1.25;letter-spacing:.1em}
.pg-rules-date-v{font-family:var(--cond,"PG Cond",sans-serif);font-weight:700;
  font-size:clamp(21px,5.4vw,27px);line-height:1.05;letter-spacing:.005em;
  color:var(--fg);margin:3px 0 4px;overflow-wrap:break-word}
/* A date that has been and gone still reads, it just stops shouting. */
.pg-rules-past .pg-rules-date-v{color:var(--fg2)}
.pg-rules-date-m{font-family:var(--cond,"PG Cond",sans-serif);font-size:13px;
  font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;
  margin-top:auto}
.pg-rules-date-s{font-size:12px;letter-spacing:0}
/* The next date up keeps the ring the rest of the strip has - the shared rule
   replaced it - and takes an accent bar along the top edge with it. */
.pg-rules-next{box-shadow:inset 0 3px 0 var(--acc),0 0 0 1px var(--line);
  background:color-mix(in srgb,var(--acc) 9%,transparent)}

/* -- filter bar: a sticky control strip -----------------------------------
   The single most-used control on the tab, so it stays put. --pg-nav-h is
   measured by js/rules.js and set on #view-rules; the fallback is the height
   of one row of condensed tabs. The negative margin lets the strip's
   background reach the page gutter, so nothing scrolls through the 12px at
   either edge; env() keeps it clear of a notch in landscape. */
.pg-rules-bar{position:sticky;top:var(--pg-nav-h,40px);z-index:4;
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
  margin:0 -18px;padding:9px 18px 10px;background:var(--bg);
  border-bottom:1px solid var(--line)}
.pg-rules-bar{padding-right:max(18px,env(safe-area-inset-right,0px));
  padding-left:max(18px,env(safe-area-inset-left,0px))}
.pg-rules-in{flex:1 1 auto;min-width:0;min-height:44px;padding:10px 13px;
  border-radius:9px;line-height:1.25;
  /* 16px is not a style choice: iOS zooms the whole page in on focus below
     it, and a zoomed page scrolls sideways. */
  font-size:16px}
.pg-rules-bar .pg-rules-count{flex:none;margin-left:auto;font-size:12.5px;
  line-height:1.2;white-space:nowrap}

/* -- expand / collapse ----------------------------------------------------
   Below the sticky strip, out of the way, and thumb-sized. */
.pg-rules-tools{gap:8px;margin:12px 0 16px}
.pg-rules-tools .pg-chip{display:inline-flex;align-items:center;min-height:42px;
  padding:0 16px;font-family:var(--cond,"PG Cond",sans-serif);font-size:13.5px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent}
.pg-rules-tools .pg-chip:active{background:var(--bg3);border-color:var(--fg3);
  color:var(--fg)}

/* -- section headings -----------------------------------------------------
   The five constitution sections get the chalk rule that h2.pg-h gets, so a
   heading reads the same whether it came from the page or from a module. */
.pg-rules-grp{margin-bottom:clamp(18px,3vw,26px)}
.pg-rules-grp-h{align-items:baseline;gap:2px 10px;margin:0 0 10px;
  padding-bottom:6px;border-bottom:2px solid var(--chalk,var(--line2))}
.pg-rules-grp-h b{font-family:var(--cond,"PG Cond",sans-serif);font-weight:700;
  font-size:clamp(17px,4.4vw,20px);line-height:1.1;letter-spacing:.03em;
  color:var(--fg)}
.pg-rules-grp-h span{font-size:12.5px;line-height:1.35}

/* -- rule rows ------------------------------------------------------------
   The row is the phone layout. Wide, it is one line: citation, title, gist.
   Narrow, the gist wraps under the title and the row becomes a two-line card
   - it is never truncated and never hidden, because for most of these rules
   the gist IS the answer and opening the row is the fallback, not the point.
   flex-wrap decides which of the two happens, so every width in between gets
   whichever one fits. */
.pg-rules-item>summary{display:flex;align-items:flex-start;gap:9px;
  min-height:44px;padding:11px 13px;-webkit-tap-highlight-color:transparent}
.pg-rules-item>summary:active{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.pg-rules-item[open]{box-shadow:inset 3px 0 0 var(--acc)}
.pg-rules-item[open]>summary{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.pg-rules-s{flex:none;min-width:5ch;margin-top:1px;padding:3px 6px 2px;
  border-radius:4px;font-size:12px;line-height:1.35;text-align:center;
  background:color-mix(in srgb,var(--acc) 13%,transparent)}
.pg-rules-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 9px;
  flex:1 1 auto;min-width:0}
.pg-rules-t{flex:0 1 auto;font-family:var(--cond,"PG Cond",sans-serif);
  font-size:17px;font-weight:700;line-height:1.3;letter-spacing:.02em;
  text-transform:uppercase;color:var(--fg)}
/* The gist. Wide it sits inline after the title; narrow it wraps under it.
   Never truncated, never hidden - see the rule-row note above. */
.pg-rules-item .pg-rules-one{display:block;flex:1 1 22ch;min-width:0;
  white-space:normal;overflow:visible;text-overflow:clip;
  font-size:12.5px;line-height:1.4}
.pg-rules-item>summary::after{flex:none;align-self:flex-start;margin-left:auto;
  display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  font:700 20px/1 var(--cond,"PG Cond",sans-serif)}
.pg-rules-item>summary:hover::after{color:var(--fg2)}

/* -- opened body ----------------------------------------------------------
   The deep left indent went: it bought alignment on a wide screen and cost
   62px of table width on a narrow one. Paragraphs keep their own measure. */
.pg-rules-item>.pg-rules-body{padding:3px 13px 16px}
.pg-rules-body p{font-size:13.5px;line-height:1.55}
.pg-rules-ul{font-size:13.5px;line-height:1.55}
.pg-rules-ul li{margin-bottom:6px}
.pg-rules-note{font-size:12.5px!important;line-height:1.5;
  border-left-color:var(--acc);padding-left:11px}

/* Facts as scoreboard pills: label tracked and small, figure condensed. */
.pg-rules-facts{gap:7px;margin-bottom:13px}
.pg-rules-fact{display:inline-flex;align-items:baseline;gap:8px;
  padding:6px 11px;border-radius:7px;font-size:12.5px}
.pg-rules-fact>span{font-family:var(--cond,"PG Cond",sans-serif);font-size:12px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pg-rules-fact b{margin-left:0;font-family:var(--cond,"PG Cond",sans-serif);
  font-size:15px;font-weight:700;letter-spacing:.01em}

/* -- tables ---------------------------------------------------------------
   The four prize tables in S1.3 are the widest thing on the tab, and min()
   against 100% is what keeps any of them from setting a floor wider than a
   360px phone. Anything still too wide scrolls inside its own card - the
   page itself never scrolls sideways at any width.

   272px is measured, not picked: the widest of the eight tables on this tab
   (Regular season, three columns) lays out at 268px with nothing wrapped. A
   column narrower than that would put two tables side by side in less room
   than one of them needs, and hand the reader a scrollbar inside a card for
   no reason. At this width the pair drops to one-up at around 620px instead,
   and no table on the tab ever has to scroll. */
.pg-rules-tbl{max-width:min(100%,60ch);min-width:0;margin:0 0 12px}
/* Columns, not a grid. Four tables of two, ten, three and five rows in a
   two-track grid leave a 700px hole under the shortest one, because a grid
   row is as tall as its tallest cell. Multi-column balances them instead,
   and column-width does the same job auto-fit was doing: two columns wherever
   272px fits twice, one column below that, nothing in between to decide. */
.pg-rules-tables{display:block;columns:272px;column-gap:16px;
  max-width:min(100%,680px)}
.pg-rules-tables>.pg-rules-tbl{min-width:0;max-width:none;margin:0 0 14px;
  break-inside:avoid;-webkit-column-break-inside:avoid}
.pg-rules-tbl .pg-scroll{overscroll-behavior-x:contain}
.pg-rules-cap{font-family:var(--cond,"PG Cond",sans-serif);font-size:12.5px;
  font-weight:600;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg2);margin:0 0 6px}
/* The note under a table is a sentence, not a label. */
.pg-rules-tnote{color:var(--fg3);font-size:12px;line-height:1.45;margin:6px 0 0}
.pg-rules-tot td{border-top:1px solid var(--line2);color:var(--fg)}
.pg-rules-tot .pg-num{font-size:16px;font-weight:700}

/* -- no matches -----------------------------------------------------------
   Deliberate, not an accident of an empty container. No display here: the
   [hidden] attribute has to keep working. */
.pg-rules-none{padding:26px 16px;text-align:center;font-size:13.5px;
  line-height:1.5;background:var(--bg2);border:1px dashed var(--line2);
  border-radius:10px}

@media(max-width:640px){
  /* The page gutter is 12px here, so the sticky strip's bleed has to be too,
     or its background stops short of the edge and content scrolls through
     the gap. */
  .pg-rules-bar{margin-inline:-12px}
  .pg-rules-bar{padding-right:max(12px,env(safe-area-inset-right,0px));
    padding-left:max(12px,env(safe-area-inset-left,0px))}
}

/* ================================================= matchups (js/matchups.js)

   The scorebug restyle of the Matchups tab. Every selector below is scoped to
   .pg-mux - the class on this tab's own <section> - or to #view-matchups, so
   even the rules that re-size a shared class (.pg-chip, .pg-pos, .pg-score)
   cannot reach another module. --cond and --chalk are declared by the sections
   above and are used, not redeclared, here.

   One breakpoint, 640px, the site's single phone/desktop shape change: the
   week picker changes control and the starter comparison changes grid. Every
   other size is fluid - clamp() type and spacing, ch numerals, auto-fill
   tracks, minmax(0,1fr) columns - so this tab holds its shape at 360, 390,
   430, 640, 768, 1024, 1280 and 1600 rather than at two chosen widths.

   Nothing here reads a score, a margin or an ordering. */

/* -- week picker: one control, two shapes ----------------------------------
   Wide: seventeen chips wrap into a block and the stepper is not rendered.
   Narrow: that strip is a cramped seventeen-wide scroll, so it folds into a
   tap-open four-across panel driven by a < WEEK n > stepper. Both halves are
   in the DOM and wired at every width - CSS decides which one is the picker,
   so no capability is width-dependent and there is no second code path. */

.pg-mux-nav{margin:0 0 14px}
.pg-mux .pg-chips{margin:0;gap:6px}
.pg-mux .pg-chip{display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 12px;border-radius:8px;white-space:nowrap;
  font:600 14px/1 var(--cond);letter-spacing:.06em}
.pg-mux .pg-chip-on{font-weight:700}

.pg-mux-step{display:none;gap:8px}
.pg-mux-arrow{flex:none;appearance:none;-webkit-appearance:none;
  width:48px;min-height:48px;padding:0;cursor:pointer;
  border:1px solid var(--line2);border-radius:10px;background:var(--bg2);
  color:var(--fg);font-family:inherit;font-size:22px;line-height:1}
.pg-mux-arrow[disabled]{opacity:.34;cursor:default;color:var(--fg3)}
.pg-mux-cur{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;
  appearance:none;-webkit-appearance:none;min-height:48px;padding:0 12px;
  cursor:pointer;text-align:left;
  border:1px solid var(--line2);border-radius:10px;background:var(--bg2);color:var(--fg)}
.pg-mux-cur-w{flex:none;font:700 19px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase}
.pg-mux-cur-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 13px/1 var(--cond);letter-spacing:.09em;color:var(--acc)}
.pg-mux-cur .pg-mu-cue{margin-left:auto;flex:none;font-size:12px;color:var(--fg2)}
.pg-mux-open .pg-mux-cur .pg-mu-cue{transform:rotate(180deg)}

.pg-mux .pg-chip:focus-visible,.pg-mux-arrow:focus-visible,.pg-mux-cur:focus-visible,
.pg-mux .pg-mu-head:focus-visible,#view-matchups .pg-mu-retry:focus-visible{
  outline:2px solid var(--acc);outline-offset:-2px}

#view-matchups .pg-mu-retry{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:8px;
  font:700 13px/1 var(--cond);letter-spacing:.1em}

/* -- the caption over the board ------------------------------------------- */
.pg-mux .pg-mu-week{font-size:13px}
.pg-mux .pg-mu-note{font-size:12.5px;margin-top:6px;padding-left:10px;
  border-left:2px solid var(--line2)}

/* -- week high / bracket note --------------------------------------------- */
.pg-mux .pg-mu-high{gap:8px 12px;padding:12px 13px;border-radius:12px}
.pg-mux .pg-mu-high .pg-badge{font:700 12px/1.5 var(--cond);letter-spacing:.11em;padding:2px 8px}
.pg-mux .pg-mu-high>.pg-dim{font-size:12.5px}
.pg-mux .pg-team-cell{gap:9px}
.pg-mux .pg-team{font-size:17px}
.pg-mux .pg-mu-hs{font:700 22px/1 var(--cond);letter-spacing:.01em;
  font-variant-numeric:tabular-nums}

/* -- the scorebug ----------------------------------------------------------
   Two stacked sides split by a chalk rule, a strap along the bottom carrying
   what the number between the scores means and the tap target for the
   starters. The whole card is the button, so the touch target is the card. */

.pg-mux .pg-mu{margin:0 0 10px;border-radius:12px}
.pg-mux .pg-mu-head{display:block;width:100%;padding:0;background:none;border:0;
  color:var(--fg2);text-align:left;cursor:pointer}
.pg-mux .pg-mu-head:hover{background:none}
.pg-mux .pg-mu-head:hover .pg-mu-side{background-color:rgba(255,255,255,.028)}

.pg-mux .pg-mu-side{align-items:center;gap:clamp(9px,2vw,12px);
  padding:clamp(10px,2.4vw,14px) clamp(11px,2.6vw,16px)}

/* The scorebug's face is the one that is not a fixed size: it grows with the
   card. Sizing only - the disc itself is the shared .pg-face primitive. */
.pg-mux .pg-face{--face:clamp(28px,7vw,34px)}

.pg-mux-id{flex:1 1 auto;min-width:0;line-height:1.2}
.pg-mux .pg-mu-name{display:block;color:var(--fg);letter-spacing:.01em;
  font-size:clamp(17px,3.4vw,21px)}
.pg-mux-id>.pg-mgr{display:block;margin:2px 0 0;font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Three states, three weights of numeral: won, played and lost, nothing yet.
   The :not() keeps the middle one from outranking .pg-score-hi / -lo. */
.pg-mux .pg-score{flex:none;text-align:right;min-width:5.5ch;
  font-size:clamp(30px,6.4vw,40px)}
.pg-mux .pg-score:not(.pg-score-hi):not(.pg-score-lo){color:var(--fg2)}

/* A bye keeps the shape of a game: same two sides, one of them saying so. */
.pg-mux-none .pg-mu-name{color:var(--fg3);letter-spacing:.06em;text-transform:uppercase;
  font-size:clamp(14px,3vw,16px)}

.pg-mux-strap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  padding:9px clamp(11px,2.6vw,16px);
  border-top:1px solid var(--chalk);background:rgba(0,0,0,.22)}
.pg-mux-stat{display:flex;align-items:baseline;gap:8px;min-width:0}
.pg-mux-slab{font:700 12px/1.4 var(--cond);letter-spacing:.12em;color:var(--fg3)}
.pg-mux-sval{font:700 17px/1.2 var(--cond);letter-spacing:.01em;color:var(--fg);
  font-variant-numeric:tabular-nums}
.pg-mux-cue{order:3;margin-left:auto;display:flex;align-items:center;gap:7px;
  font:700 12px/1.4 var(--cond);letter-spacing:.12em;color:var(--fg2)}
.pg-mux-cue .pg-mu-cue{font-size:12px}
/* The sentence that stops 0.00 - 0.00 reading as a draw. It sits between the
   label and the expander while there is room for a readable measure of it, and
   drops to its own full-width line when there is not - flex-basis doing the
   deciding, so there is no width at which it is squeezed to two words a line.
   The max-width is above the basis on purpose: it caps the measure once the
   line is wide, without ever suppressing the break. */
.pg-mux-snote{order:2;flex:1 1 320px;max-width:64ch;
  font-size:12px;line-height:1.45;color:var(--fg3)}
.pg-mux-strap-idle .pg-mux-slab,.pg-mux-strap-idle .pg-mux-sval{color:var(--fg3)}
.pg-mux-strap-tie .pg-mux-slab{color:var(--warn)}

/* -- starter comparison ----------------------------------------------------
   A diff, so it stays side by side at every width: two players either side of
   a slot spine, which is the only arrangement in which "who lost you the
   week" is one glance. Wide screens get the five-column row; see the phone
   block for how the same five nodes re-place onto two rows. */

.pg-mux .pg-mu-body{border-top:0;background:rgba(0,0,0,.24)}
.pg-mux .pg-mu-grid{min-width:520px;padding:4px 0 6px}
.pg-mux .pg-mu-row{align-items:stretch;gap:10px;padding:5px clamp(11px,2.6vw,16px);
  grid-template-columns:minmax(0,1fr) 58px 58px 58px minmax(0,1fr)}

/* Club identity on every player: the rail carries the colour, the chip carries
   the logo and the abbreviation. Both, because either alone fails somewhere -
   a rail is unreadable for a colour-blind reader and the logo is absent for a
   free agent. The rail mirrors on the right-hand cell. */
.pg-mux .pg-mu-p{align-items:center;align-content:center;flex-wrap:wrap;gap:2px 8px;
  padding:5px 0 5px 9px}
.pg-mux .pg-mu-p.pg-mu-p-r{padding:5px 9px 5px 0}
.pg-mux .pg-mu-p.pg-mu-p-r.pg-rail{box-shadow:inset -3px 0 0 var(--club,var(--line2))}
/* The name is ordered last and given a basis wider than the longest name in
   the league. Where the column can spare that much it sits inline after the
   position and club chips; where it cannot the flex line breaks and the name
   takes the row underneath at full width. That is one rule doing the work of a
   breakpoint: no name is ever ellipsised at any width, on a 360px phone or in
   the 641-760px band where the five-column row is at its tightest. */
.pg-mux .pg-mu-pn{order:5;flex:1 1 120px;min-width:0;color:var(--fg);
  font:500 15px/1.25 var(--cond);letter-spacing:.01em}
.pg-mux .pg-mu-p-r .pg-mu-pn{text-align:right}
.pg-mux .pg-pos{flex:none;min-width:34px;padding:2px 6px;
  font:700 12px/1.4 var(--cond);letter-spacing:.05em}
.pg-mux .pg-club{flex:none}
.pg-mux .pg-mu-pt{display:flex;align-items:center;justify-content:flex-end;
  font:600 15px/1 var(--cond);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pg-mux .pg-mu-pt.pg-mu-pt-r{justify-content:flex-start}
.pg-mux .pg-mu-slot{display:flex;align-items:center;justify-content:center;
  font:600 12px/1.3 var(--cond);letter-spacing:.1em}
.pg-mux .pg-mu-tot{margin-top:6px;padding-top:9px;padding-bottom:10px;
  border-top:1px solid var(--chalk)}
.pg-mux .pg-mu-tot .pg-mu-p{font:600 13px/1.3 var(--cond);letter-spacing:.09em;
  text-transform:uppercase}
.pg-mux .pg-mu-foot{border-top:1px solid var(--line);font-size:12px;line-height:1.5}

/* -- phones ----------------------------------------------------------------
   The scorebug already reflows on its own; these are the two places the shape
   genuinely has to change. */
@media(max-width:640px){
  /* 1. The picker becomes the stepper plus a tap-open panel. */
  .pg-mux-step{display:flex}
  .pg-mux .pg-chips{display:none}
  /* auto-fill, so the panel is three across at 360-414 and four from 430 up
     rather than a fixed count - and the track never falls under the width of
     the longest label, which is what makes "13 . INTER" break in half. */
  .pg-mux-nav.pg-mux-open .pg-chips{display:grid;margin-top:8px;
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .pg-mux .pg-chip{min-height:44px}

  /* 2. The comparison keeps its spine but re-places the same five nodes onto
     two rows: player blocks either side of the slot, their two numerals
     directly underneath and still flanking it. Nothing is dropped and nothing
     scrolls sideways - the inner min-width goes with it. */
  .pg-mux .pg-mu-grid{min-width:0;padding:2px 0 4px}
  .pg-mux .pg-mu-row{gap:2px 9px;padding:7px 10px;
    grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
    grid-template-areas:"pa slot pb" "pta slot ptb"}
  .pg-mux .pg-mu-p{grid-area:pa;padding:0 0 0 9px}
  .pg-mux .pg-mu-p.pg-mu-p-r{grid-area:pb;padding:0 9px 0 0}
  .pg-mux .pg-mu-pt{grid-area:pta;padding-left:9px;font-size:16px}
  .pg-mux .pg-mu-pt.pg-mu-pt-r{grid-area:ptb;padding:0 9px 0 0}
  .pg-mux .pg-mu-slot{grid-area:slot;
    border-left:1px solid var(--chalk);border-right:1px solid var(--chalk)}
  .pg-mux .pg-mu-tot{padding-top:8px;padding-bottom:9px}

  /* 3. The strap. Wide, the sentence sits between the label and the expander;
     narrow there is no room for all three, so it takes its own full-width line
     underneath rather than stranding STARTERS on a line of its own. Ordered
     last and basis 100% with no max-width, so the break is certain. */
  .pg-mux-snote{order:5;flex:1 1 100%;max-width:none;margin-top:1px}
}

/* ============================================ rules addendum (pg-rules-)

   Two additions to the rules block higher up this file. They live at the end
   rather than beside it because the matchups section was appended after that
   block, and the site's convention is that new CSS goes last. Both are about
   the filter box, which is the control this tab is actually used through.

   Nothing here changes what the filter matches or what the count reports. */

/* The tap equivalent of Escape. js/rules.js renders the button only while the
   box has content, so an empty bar is unchanged; [hidden] has to keep winning
   over the display here, hence the second rule. 40x44 is the thumb, not the
   glyph. */
.pg-rules-clear{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;min-height:44px;padding:0;margin:0;
  appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:9px;
  color:var(--fg3);cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:600 23px/1 var(--cond,"PG Cond",ui-sans-serif,sans-serif)}
.pg-rules-clear[hidden]{display:none}
.pg-rules-clear:hover{color:var(--fg)}
.pg-rules-clear:active{background:var(--bg3);color:var(--fg)}
.pg-rules-clear:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}

/* iOS below 15.4 ignores the unprefixed appearance and renders a native search
   field, which brings its own height and its own corners - the 44px box and
   the 9px radius stop being ours. One prefixed line and the box is the box
   everywhere. The focus ring is a ring again: the base rule drops the outline
   and leaves a 1px border colour change as the only cue, which is not enough
   on the one control that gets used with a keyboard. */
.pg-rules-in{-webkit-appearance:none}
/* RECONCILIATION FIX. appearance:none on an input[type=search] does NOT remove
   ::-webkit-search-cancel-button in Blink - only in WebKit - so Chrome was
   painting its own bright white clear button INSIDE the box while the tab's
   own 40x44 clear button sat immediately outside it. Two clear affordances
   an inch apart, and the louder of the two was the 14px one that is under the
   40px touch floor and absent on iOS. The pseudo-element has to be addressed
   directly; the tab's own button is the clear control at every width. */
.pg-rules-in::-webkit-search-cancel-button,
.pg-rules-in::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.pg-rules-in:focus-visible{border-color:var(--acc);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 32%,transparent)}

/* ============================================ budgets, second pass (pg-bud-)

   Three fixes found by rendering js/budget.js with a seeded feed at 360, 390,
   414, 430, 540, 640, 641, 700, 768, 900, 1024, 1180, 1280 and 1600. Every
   selector is either a .pg-bud- class or scoped inside .pg-bud-t / .pg-bud-tx,
   so none of it can reach the rails and bars the other sections draw.
   Appended rather than edited into the budgets block above, so that block
   still reads as one piece. Nothing here touches a tally, a sort or a rule:
   the fill width of the bar is still whatever budget.js computed. */

/* 1. THE RAIL ON A NEAR-BLACK CLUB. Five clubs carry an identity colour darker
   than the card it sits on - DAL #041e42, NE #002244, HOU #03202f, CHI #0b162a,
   GB #203731 - and a Dallas row was rendering with no visible rail at all,
   directly above a Kansas City row in full red. Two changes, neither of which
   invents a colour: a hairline of the ordinary rule colour outboard of the club
   band so the rail always reads AS a rail, and the club band itself lifted a
   fifth of the way towards the neutral grey, which separates navy from black
   and leaves a bright club recognisably itself.

   The lift is gated on @supports rather than written as a second declaration.
   color-mix() carrying a var() cannot be rejected at parse time - it fails at
   computed-value time instead, which resolves box-shadow to unset, i.e. to no
   rail at all rather than to the plain declaration above it. @supports is
   evaluated up front, so an engine without color-mix() never sees this rule
   and keeps a correct, if dark, rail. */
.pg-bud-tx>td:first-child{
  box-shadow:inset 3px 0 0 var(--club,var(--line2)),inset 4px 0 0 var(--line2)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .pg-bud-tx>td:first-child{
    box-shadow:inset 3px 0 0 color-mix(in srgb,var(--club,var(--line2)) 82%,var(--DEF)),
               inset 4px 0 0 var(--line2)}
}

/* 2. THE PROPORTION BAR HAD TO BE A BAR. At $32 of $35 the fill is 91% of a
   3px line, so what a reader saw was an underline beneath the numeral with a
   speck of grey on the end - the one part of it that carries meaning, the
   unspent remainder, was the part too small to see. Taller, with the track
   brought up to the card-surface colour and given an edge, so the empty end is
   a visible channel rather than a rule. Scoped to the funds table. */
.pg-bud-t .pg-budget-bar{height:5px;border-radius:3px;background:var(--bg3);
  box-shadow:inset 0 0 0 1px var(--line2)}
.pg-bud-t .pg-budget-bar>i{border-radius:3px}

/* 3. An id we could not resolve is not a name. In the same condensed green as
   every other incoming player, a bare "1439201" reads as somebody called
   1439201; in the numeral face and the dim colour it reads as the id it is. */
.pg-bud-unk{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:0;color:var(--fg3)}

@media(max-width:640px){
  /* On a phone the bar is the whole story of the $ LEFT cell - it is the only
     thing on the card that shows 33 as a proportion of 35 rather than as a
     bare number - so it gets the height to be read at arm's length. */
  .pg-bud-t .pg-budget-bar{height:7px;margin-top:7px}

  /* Down here the <tr> is a grid card and paints its own rail, so the first
     cell has to give the rail up again: fix 1 is later in the file than the
     rule in the block above that did that. */
  .pg-bud-tx>td:first-child{box-shadow:none}
  .pg-bud-feed tr{box-shadow:inset 3px 0 0 var(--club,var(--line2)),
                             inset 4px 0 0 var(--line2)}
  @supports (color:color-mix(in srgb,red 50%,blue)){
    .pg-bud-feed tr{
      box-shadow:inset 3px 0 0 color-mix(in srgb,var(--club,var(--line2)) 82%,var(--DEF)),
                 inset 4px 0 0 var(--line2)}
  }
}


/* ========================================= reconciliation (site-wide)

   THE LAST BLOCK IN THIS FILE, and the only place left that is not owned by a
   single section. Six sections were restyled in parallel and each solved three
   site-wide problems in its own words; this is those three answers, stated
   once. Nothing here is new behaviour - every rule below is a rule that
   already existed in two to five copies, or the missing sixth copy of one.

   Merged in from the section blocks above:
     - four identical :root backfills of --cond / --chalk -> the :root at the
       top of this file, beside the @font-face rules that define the family
     - five copies of the sticky-nav scroll-margin (Budgets had none) -> (1)
     - two @media(hover:none) touch blocks, one from Matchups and one from
       Draft, plus the four sections that had no touch handling at all -> (2)
     - four copies of the avatar-over-monogram disc (.pg-st-av, .pg-prz-av,
       .pg-dr-face, .pg-mux-face; Budgets had none) -> the .pg-face primitive
       in the broadcast layer, sized by one custom property
   Also removed: a stale shared @media(max-width:640px) block and seven
   pre-restyle .pg-mu-* rules with no reference in any module.

   ONE 640px block per owner now, and the site-level narrow rules are in the
   base block at the top rather than inside whichever section happened to need
   them first. The single exception is Budgets, which keeps two: its second-pass
   block has to stay LATER in the file than the block above it, because a media
   query adds no specificity and its rail override would otherwise lose to the
   non-media rule it exists to override. That is stated where it lives.

   Two breakpoints in the whole file and no others: 640px for the phone shape
   change, and (hover:none) - which is a capability, not a width, and is what
   makes an iPad at 768px and a touch laptop at 1600px get thumb-sized
   controls instead of falling into the desk layout with no hover to fall back
   on. Presentation only: no tally, sort or rule is touched by anything here. */

/* 1. STICKY-NAV CLEARANCE -------------------------------------------------
   .pg-nav is position:sticky;top:0, so anything scrolled to - a view opened
   from a URL hash, a row taking keyboard focus, a details element the browser
   scrolls into view - lands underneath it unless it reserves the height. One
   rule for all six views; the two Rules selectors are more specific and stay
   more specific, because that tab has a second sticky strip below the nav and
   reads its measured height (js/rules.js sets --pg-nav-h on the view). */
.pg-view,.pg-view .pg-sec,.pg-st-row,.pg-st-x{scroll-margin-top:64px}
#view-rules .pg-sec{scroll-margin-top:calc(var(--pg-nav-h,40px) + 10px)}
.pg-rules-item{scroll-margin-top:calc(var(--pg-nav-h,40px) + 74px)}

/* 2. THE NAV ---------------------------------------------------------------
   .pg-tab is 39px tall, which is a mouse target, and it carries the whole
   site. NARROW OR TOUCH gets the thumb, so a phone-width desktop window and a
   full-width tablet both land on 45px; a wide mouse-driven screen is unchanged.

   Both triggers have to live down here rather than beside the base 640px block
   at the top of the file: the broadcast layer re-declares .pg-tab's padding at
   equal specificity further down, and a media query adds no specificity, so a
   narrow rule written above it is simply overruled. This was the bug in having
   it inside a section block - it happened to work only because that section
   was appended late enough. */
@media(max-width:640px){
  .pg-tab{padding-top:15px;padding-bottom:13px}
}

/* 3. TOUCH ----------------------------------------------------------------
   Every control on the site is mouse-sized by default. On a device whose
   primary input cannot hover, they carry a thumb - at whatever width that
   device happens to be, which is the point: an iPad in portrait is 768px and
   in landscape 1024px, and both were getting 26px targets and 9.5px labels
   out of the desk layout with no hover available to reveal anything.

   Nothing here is width-gated, so a tablet rotating across 640px does not
   change target size mid-session, and a mouse-driven desktop is untouched. */
@media(hover:none){
  /* The nav again, on device rather than on width - see (2). */
  .pg-tab{padding-top:15px;padding-bottom:13px}

  /* Chips, steppers and expanders. */
  .pg-mux .pg-chip{min-height:44px}
  .pg-dr .pg-dr-chip{min-height:44px}
  .pg-rules-tools .pg-chip{min-height:44px}

  /* The one control that carried information nothing else did: the draft
     board's swap marker names which of two managers actually owns a pick. */
  .pg-dr .pg-dr-swap{min-width:40px;min-height:40px;font-size:15px}

  /* The 12px type floor, applied on touch at every width. These are the
     shared micro-labels - .pg-pos is 9.5px, .pg-badge 9.5px, .pg-club-t 12px
     already, the draft board's pick number 10px and its club line 10.5px.
     Scoped per section so a section that already lifted them site-wide
     (Matchups, Prize Pool) is not re-declared, and so nothing reaches a
     module that is not on screen. */
  .pg-dr .pg-draft-no,.pg-dr .pg-draft-nfl{font-size:12px}
  .pg-dr .pg-draft-name{font-size:13.5px}
  .pg-dr .pg-pos,.pg-bud-p .pg-pos{font-size:12px;min-width:34px;
    padding:2px 6px;line-height:1.35}
  .pg-dr .pg-badge{font-size:12px;padding:2px 7px;line-height:1.35}
  .pg-dr .pg-club-t,.pg-st-move .pg-club-t{font-size:12px}
  .pg-bud-t .pg-mgr,.pg-bud-feed .pg-mgr{font-size:12px}

  /* Bigger type needs a little more column, or a name wraps to three lines.
     The grid is already a scroller inside .pg-scroll, so the page still never
     scrolls sideways. */
  .pg-dr .pg-draft-b thead th:not(:first-child){min-width:162px}
}

/* ============================================================ league clock

   Persistent deadline strip under the nav. Fluid by construction: the row
   wraps and each cell has a min width, so it goes 4-up, 2-up or 1-up on its
   own without a breakpoint deciding for it. */

.pg-clock{padding:0 0 4px}
.pg-clk-row{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 4px}
.pg-clk{flex:1 1 150px;min-width:0;background:var(--bg2);border:1px solid var(--line);
  border-left:3px solid var(--line2);border-radius:8px;padding:9px 11px}
.pg-clk-lead{border-left-color:var(--acc);background:var(--bg3)}
.pg-clk-lab{display:flex;align-items:baseline;gap:6px;margin-bottom:3px}
.pg-clk-lab>span:first-child{font-family:var(--cond);font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fg2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-clk-lead .pg-clk-lab>span:first-child{color:var(--fg)}
.pg-clk-sec{font-size:9.5px;font-weight:700;color:var(--fg3);flex:none;cursor:help}
.pg-clk-val{font-family:var(--cond);font-size:21px;font-weight:700;line-height:1.05;
  color:var(--fg);font-variant-numeric:tabular-nums}
.pg-clk-lead .pg-clk-val{color:var(--acc)}
.pg-clk-when{font-size:10.5px;color:var(--fg3);margin-top:1px}

@media(max-width:640px){
  .pg-clk{flex:1 1 132px;padding:8px 9px}
  .pg-clk-val{font-size:18px}
  .pg-clk-lead .pg-clk-val{font-size:22px}
  /* Nothing under 12px on a phone -- the same rule the modules were held to. */
  .pg-clk-sec,.pg-clk-when{font-size:12px}
}

/* ============================================================ draft grades */

.pg-gr-caveat{font-size:11.5px;line-height:1.6;color:var(--fg3);
  border-left:2px solid var(--line2);padding-left:10px;margin:10px 0}
.pg-gr-tier{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;
  padding-bottom:4px;border-bottom:2px solid var(--chalk)}
.pg-gr-tlab{font-family:var(--cond);font-size:15px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--fg)}
.pg-gr-tn{font-size:11px;color:var(--fg3)}

.pg-gr-card{background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  margin-bottom:7px;overflow:hidden}
.pg-gr-card[open]{border-color:var(--line2)}
.pg-gr-sum{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
  min-height:44px;list-style:none}
.pg-gr-sum::-webkit-details-marker{display:none}
.pg-gr-sum:hover{background:rgba(255,255,255,.022)}
.pg-gr-grade{font-family:var(--cond);font-size:27px;font-weight:700;line-height:1;
  flex:none;min-width:42px}
.pg-gr-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.pg-gr-head{font-size:11.5px;color:var(--fg3);line-height:1.45}
.pg-gr-score{flex:none;font-size:17px;color:var(--fg2)}

.pg-gr-body{padding:0 13px 13px;border-top:1px solid var(--chalk)}
.pg-gr-verdict{font-size:12.5px;line-height:1.65;color:var(--fg2);margin:11px 0}
.pg-gr-facts{display:flex;flex-wrap:wrap;gap:9px;margin:11px 0 0}
.pg-gr-fact{flex:1 1 210px;min-width:0;background:var(--bg3);border-radius:7px;padding:8px 10px}
.pg-gr-flab{font-family:var(--cond);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg3);margin-bottom:3px}
.pg-gr-pick{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pg-gr-pl{font-weight:600;font-size:12.5px}
.pg-gr-meta{font-size:10.5px;color:var(--fg3)}
.pg-gr-pts{font-family:var(--cond);font-size:13px;font-weight:600;color:var(--fg2)}
.pg-gr-dead{font-size:11px;color:var(--bad);font-weight:600}
.pg-gr-flaw{font-size:11.5px;line-height:1.6;color:var(--warn);margin:11px 0 0;
  background:rgba(255,181,69,.07);border-radius:6px;padding:8px 10px}

.pg-gr-method{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.pg-gr-mrow{display:flex;gap:10px;align-items:baseline}
.pg-gr-mw{flex:none;min-width:44px;color:var(--acc);font-size:15px}
.pg-gr-mt{font-size:12px;line-height:1.6;color:var(--fg2)}
.pg-gr-mdesc{color:var(--fg3)}
.pg-gr-gen{font-size:10.5px;color:var(--fg3);margin-top:10px}

@media(max-width:640px){
  .pg-gr-grade{font-size:23px;min-width:34px}
  .pg-gr-sum{gap:8px;padding:10px 11px}
  .pg-gr-fact{flex:1 1 100%}
  .pg-gr-flab,.pg-gr-meta,.pg-gr-gen,.pg-gr-head{font-size:12px}
}

/* ==================================================== budget spend detail

   A team row opens into the adds that spent its money. Fluid: each item is a
   wrapping flex row, so it goes one line on a desktop and stacks on a phone
   without a breakpoint deciding. */

.pg-bud-open{cursor:pointer}
.pg-bud-open:hover{background:rgba(255,255,255,.03)}
.pg-bud-open:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pg-bud-on{background:rgba(77,163,255,.07)}

.pg-bud-detail>td{padding:0 0 12px;background:var(--bg3);border-bottom:1px solid var(--line)}
.pg-bud-dhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  padding:11px 12px 8px}
.pg-bud-dtitle{font-family:var(--cond);font-size:16px;font-weight:700;color:var(--fg)}
.pg-bud-dnote{font-size:11px;color:var(--fg3)}

.pg-bud-items{display:flex;flex-direction:column;gap:3px;padding:0 12px}
.pg-bud-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--bg2);border-radius:6px;padding:7px 9px}
.pg-bud-inum{flex:none;min-width:26px;color:var(--fg3);font-size:12px}
.pg-bud-iwho{display:flex;align-items:center;gap:6px;flex:1 1 200px;min-width:0}
.pg-bud-iname{font-weight:600;font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pg-bud-ipos{font-size:10.5px;color:var(--fg3)}
.pg-bud-iwhen{flex:none;font-size:11px}
.pg-bud-itype{flex:none;font-size:11px}
.pg-bud-icost{flex:none;margin-left:auto;font-size:13px;color:var(--fg2)}

@media(max-width:640px){
  .pg-bud-iwhen,.pg-bud-itype,.pg-bud-ipos{font-size:12px}
  .pg-bud-icost{margin-left:0}
  .pg-bud-iwho{flex:1 1 100%}
}