/* Clubhouse theme (chosen 2026-10-29; design: docs/design/mockups/restyle/clubhouse-pool-home-b.html). Loaded after
   site.css, auth.css and pools.css: it remaps the named colours to a linen page with white panels, deep green bars and a
   brass accent, and styles the top bar, the pool switcher, the pool banner and tabs, and the pool Overview. */
:root{
  --black:#EEF1EA;      /* page, inset fields: linen */
  --graphite:#FFFFFF;   /* raised surfaces */
  --rail:#D8DED6;       /* dividers, empty cells */
  --steel:#5E6F66;      /* secondary text: sage */
  --silver:#17523D;     /* the accent as text and lines: felt green */
  --white:#1E2A24;      /* text and primary buttons: ink */
  --green:#0E3B2C;--felt:#17523D;--felt-hi:#1E6A4F;--brass:#C8A24A;--brass-dk:#8A6A12;--win-bg:#E3EEE6;--warn-tint:#FBF6E8;
  --danger:#9B3B2F;--danger-bg:#F6E4E0;--ok:#1E6B47;--ok-bg:#E3EEE6;--warn:#8A6A12;--warn-bg:#FBF0D6;
  --r-lg:6px;--r-md:8px;--r-sm:4px;
}

/* Dark areas: the top bar, the auth header, the sign-in art panel and the pool banner are green with white text. */
.topbar,.auth-top,.art,.poolbanner,.pooltabs-strip{
  --black:#0E3B2C;--graphite:#17523D;--rail:#245F48;--steel:#B9C9BF;--silver:#C8A24A;--white:#FFFFFF;
}
.topbar,.auth-top{border-bottom-color:var(--green)}
.art svg g:nth-of-type(1){stroke:#C8A24A}
.art svg g:nth-of-type(1) line{stroke-opacity:.7}
.art svg g:nth-of-type(1) line:nth-child(even){stroke-opacity:.45}
.art svg g:nth-of-type(2){stroke:#C8A24A;stroke-opacity:.9}
.art svg g:nth-of-type(3){fill:#C8A24A;fill-opacity:.7}

/* Panels: white with a brass top edge. */
.card{border:0;border-top:3px solid var(--brass);border-radius:var(--r-sm);box-shadow:0 1px 0 var(--rail)}
a{color:var(--felt)}
a:hover{color:var(--green)}
:focus-visible{outline-color:var(--brass)}

/* Buttons: felt green primary (pill shaped), outlined secondary. */
.btn{border-radius:999px}
.btn-pri{background:var(--felt);color:#FFFFFF}
.btn-pri:hover{background:var(--green);color:#FFFFFF}
.btn-sec{color:var(--felt);border-color:var(--rail);background:var(--graphite)}
.btn-sec:hover{border-color:var(--felt);color:var(--felt);background:var(--graphite)}
.btn-brass{background:var(--brass);color:var(--green)}
.btn-brass:hover{background:#D9B55C;color:var(--green)}
.btn-ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#FFFFFF;color:#FFFFFF}

/* Text on brass reads green; brass is a fill, never text on the light page. */
.steps>li::before,.dot,.avatar,.wizard-steps li[aria-current="step"]{color:var(--green)}
.avatar{background:var(--brass)}
/* The board's "you" tag: gold with white text, deep enough for the white to read. */
.you-tag{background:#A67C1B;color:#FFFFFF}
.wizard-steps li[aria-current="step"]{color:#FFFFFF}
.cell.lost .cell-mark{color:#FFFFFF}
.switch input:checked::after{background:#FFFFFF}
.field,.otp-field,.p-blue{color:var(--white)}
.poolhead-line strong,.pick-day-title,.sched-title,.divider td b,.gfoot .imp.out,.cell-mark{color:var(--felt)}
.feed time{color:var(--brass-dk)}
.feed span{color:var(--white)}
.row-link:hover,.kpi:hover,.tile:hover,.entry-row:hover{background:#F5F7F3}
.otp-box.is-active{box-shadow:0 0 0 3px rgba(23,82,61,.18)}

/* ---- Top bar: logo, pool switcher, site links, admin and account; one menu icon on phones ---- */
.topbar{background:var(--green)}
.tbar{gap:12px}
.poolnav{display:flex;gap:2px;margin-left:auto}
.poolnav a{color:#B9C9BF;text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:500;font-size:14px;white-space:nowrap}
.poolnav a:hover{color:#FFFFFF;background:var(--felt)}
.poolnav a[aria-current="page"]{color:#FFFFFF;box-shadow:inset 0 0 0 1px var(--brass)}
.rightside{margin-left:0}
.ngbtn{border-radius:999px}
.ngbtn.on{box-shadow:inset 0 0 0 1px var(--brass);border-radius:999px}
/* Drop-down panels are green too, with a brass top edge. */
.menu{background:var(--green);color:#FFFFFF;border:0;border-top:3px solid var(--brass);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.menu .mi{color:#FFFFFF}
.menu .mi:hover{background:var(--felt);color:#FFFFFF}
.menu .mi[aria-current="page"]{background:var(--felt);box-shadow:inset 3px 0 0 var(--brass)}
.menu .mh,.menu .acct-email{color:#B9C9BF}
.menu .sep{background:var(--felt)}

.sw{position:relative;flex:none}
.swbtn{display:flex;align-items:center;gap:8px;max-width:240px;min-height:40px;padding:0 12px 0 14px;border-radius:10px;border:1px solid rgba(200,162,74,.55);background:rgba(255,255,255,.06);color:#FFFFFF;font:500 14px var(--font);cursor:pointer}
.swbtn:hover,.swbtn[aria-expanded="true"]{background:var(--felt);border-color:var(--brass)}
.swbtn .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swbtn .pip{width:8px;height:8px;border-radius:50%;background:var(--brass);flex:none;box-shadow:0 0 0 3px rgba(200,162,74,.25)}
.swbtn svg{flex:none;transition:transform .15s}
.swbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.swmenu{left:0;width:360px;padding:8px}
.swmenu .mh{display:flex;justify-content:space-between;text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;padding:6px 10px 8px}
.pl{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;text-decoration:none;color:#FFFFFF}
.pl:hover{background:var(--felt);color:#FFFFFF}
.pl[aria-current="page"]{background:var(--felt);box-shadow:inset 3px 0 0 var(--brass)}
.pl .mono{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:400 15px var(--display);color:#FFFFFF;background:var(--felt-hi);flex:none}
.pl .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pl .tx b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .tx small{color:#B9C9BF;font-size:12px}
.st{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.st.need{background:var(--brass);color:var(--green)}
.st.done{background:rgba(227,238,230,.15);color:#CFE6D6}
.st.gone{background:rgba(255,255,255,.1);color:#B9C9BF}
.st.here{color:var(--brass)}
.swmenu .ft{display:flex;gap:6px;border-top:1px solid var(--felt);margin-top:6px;padding-top:8px}
.swmenu .ft a{flex:1;text-align:center;padding:9px;border-radius:8px;text-decoration:none;font-weight:700;font-size:14px;color:var(--brass)}
.swmenu .ft a:hover{background:var(--felt);color:var(--brass)}

.menu-btn{border-color:rgba(200,162,74,.55);border-radius:10px;background:rgba(255,255,255,.06);color:#FFFFFF}
.menu-btn[aria-expanded="true"]{background:var(--felt);border-color:var(--brass)}
.mobilenav{background:var(--green);border-top:1px solid var(--felt);border-bottom:3px solid var(--brass)}
.mobilenav a,.mobilenav .mi-btn{display:block;color:#FFFFFF;text-decoration:none;padding:12px 10px;border-radius:8px;font-weight:500}
.mobilenav a:hover,.mobilenav .mi-btn:hover{background:var(--felt)}
.mobilenav a[aria-current="page"]{background:var(--felt);box-shadow:inset 3px 0 0 var(--brass)}
.mobilenav .who{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;color:#FFFFFF;font-weight:700}
.mobilenav .sep{height:1px;background:var(--felt);margin:6px 0}
@media (max-width:860px){
  .poolnav,.rightside{display:none}
  .sw{margin-right:auto}
  .swbtn{max-width:calc(100vw - 236px)}
  .brandlogo{height:24px}
  .swmenu{width:auto}
}
@media (min-width:861px){.mobilenav{display:none !important}}

/* ---- Pool banner: the felt table, with the pot chip ---- */
.poolbanner{background:radial-gradient(ellipse at 50% 0%,var(--felt-hi) 0%,var(--felt) 45%,var(--green) 100%);color:#FFFFFF}
.poolbanner-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;max-width:1240px;margin:0 auto;padding:22px 24px 24px}
.poolbanner h1{margin:0;font-size:34px;line-height:1.1;overflow-wrap:anywhere}
.poolbanner .msg{margin:4px 0 0;color:#CFE0D5;max-width:60ch}
.poolbanner .winner{margin:4px 0 0;color:var(--brass);font-weight:700}
.poolbanner .below{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin-top:14px}
.poolbanner .stats{display:flex;flex-wrap:wrap;gap:12px 30px}
.poolbanner .stats b{display:block;font:400 24px/1 var(--display);color:var(--brass)}
.poolbanner .stats span{font-size:13px;color:#CFE0D5}
.poolbanner .acts{display:flex;flex-wrap:wrap;gap:10px}
.chip{width:128px;height:128px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--green);border:7px dashed var(--brass);box-shadow:0 0 0 4px var(--green),0 8px 20px rgba(0,0,0,.3)}
.chip b{font:400 32px/1 var(--display)}
.chip b.word{font-size:22px}
.chip span{font-size:12px;color:#CFE0D5}
.chip small{font-size:11px;line-height:1.25;color:#9FB8A9;margin:3px auto 0;max-width:92px}

.pooltabs-strip{background:var(--green);border-bottom:3px solid var(--brass)}
.pooltabs{max-width:1240px;margin:0 auto;padding:0 24px;border-bottom:0;gap:2px}
.pooltab{color:#B9C9BF;min-height:46px;padding:0 14px;font-weight:500;border-bottom:3px solid transparent;margin-bottom:-3px}
.pooltab:hover{color:#FFFFFF}
.pooltab[aria-current="page"]{color:#FFFFFF;border-bottom-color:var(--brass)}
.pgpick{display:none;position:relative;padding:8px 12px}
.pgbtn{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(200,162,74,.55);background:var(--felt);color:#FFFFFF;font:500 15px var(--font);cursor:pointer;text-align:left}
.pgbtn small{display:block;font-size:11px;color:#B9C9BF;line-height:1.1}
.pgbtn svg{transition:transform .15s}
.pgbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.pgmenu{position:absolute;left:12px;right:12px;top:calc(100% - 2px);display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px}
.pgmenu[hidden]{display:none}
@media (max-width:860px){
  .pooltabs{display:none}
  .pgpick{display:block}
  .poolbanner-in{padding:18px 16px 20px;gap:14px;align-items:start}
  .poolbanner h1{font-size:28px}
  .chip{width:96px;height:96px;border-width:5px}
  .chip b{font-size:24px}
  .chip b.word{font-size:17px}
  .chip small{display:none}
}

/* ---- Pool Overview: narrow left column of panels, wide right column with the board and chart ---- */
.poolmain{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
.poolmain-left,.poolmain-right{display:flex;flex-direction:column;gap:24px;min-width:0}
.poolpanel{background:var(--graphite);border-radius:var(--r-sm);border-top:3px solid var(--brass);padding:20px 22px;box-shadow:0 1px 0 var(--rail);min-width:0}
.poolpanel .sect{font-size:22px;margin:0 0 4px}
.poolpanel>p.small{margin:0 0 12px}
.poolpanel .games{grid-template-columns:minmax(0,1fr);gap:0}
.poolpanel .game{border:0;border-top:1px solid var(--rail);border-radius:0;padding:10px 0;background:transparent}
.poolpanel .game.hit{background:transparent}
.me-entry{border:1px solid var(--rail);border-radius:var(--r-sm);background:var(--graphite)}
.me-entry:hover{border-color:var(--felt);background:var(--graphite)}
.me-entry.needs{border-color:var(--brass);background:var(--warn-tint)}
.panel-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.d .fill{background:var(--felt)}
.d .track{background:var(--black)}
.chart-line{stroke:var(--felt)}
.chart-area{fill:var(--win-bg)}
.chart-dot{fill:var(--brass)}
@media (max-width:980px){.poolmain{grid-template-columns:minmax(0,1fr)}}

/* ---- My picks: entry tabs, the ranked team list, the period side panel ---- */
.picks-banner{margin:0;color:var(--steel)}
.picks-banner b{color:var(--white)}
.entrytabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.entrytab{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--rail);border-radius:var(--r-md);background:var(--graphite);color:var(--white);text-decoration:none;min-width:0}
.entrytab:hover{border-color:var(--felt);color:var(--white)}
.entrytab small{color:var(--steel);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entrytab b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:14px}
.entrytab-state{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px}
.entrytab.is-selected{border-color:var(--felt);box-shadow:inset 0 -3px 0 var(--brass);background:#F7FAF6}
.entrytab.need::after{content:"";position:absolute;top:13px;right:13px;width:9px;height:9px;border-radius:50%;background:var(--brass)}
.entrytab.out{opacity:.6}
.pickgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
@media (max-width:980px){.pickgrid{grid-template-columns:minmax(0,1fr)}}
.tl-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.tl-head p{margin:2px 0 0}
.seg{display:inline-flex;border:1px solid var(--rail);border-radius:999px;padding:3px;background:var(--black)}
.seg a{padding:6px 12px;border-radius:999px;color:var(--steel);text-decoration:none;font-size:13px;font-weight:500}
.seg a[aria-current="true"]{background:var(--graphite);color:var(--felt);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tl-note{margin:0 0 6px;padding:8px 12px;background:var(--black);border-radius:6px;font-size:14px}
.tl{list-style:none;margin:0;padding:0}
.tl-row{display:grid;grid-template-columns:24px auto minmax(0,1fr) 120px auto;align-items:center;column-gap:12px;row-gap:0;padding:10px 6px;border-top:1px solid var(--rail)}
.tl-row.is-picked{background:linear-gradient(90deg,var(--win-bg),transparent);border-radius:6px}
.tl-rank{color:var(--steel);font-size:13px;text-align:right}
.tl-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.tl-name{font-weight:700;overflow-wrap:anywhere}
.tl-str{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--steel)}
.tl-bar{flex:1;height:8px;border-radius:99px;background:var(--black);overflow:hidden}
.tl-bar i{display:block;height:100%;background:var(--felt);border-radius:99px}
.tl-form{margin:0}
.tl-btn{display:inline-flex;align-items:center;justify-content:center;min-width:86px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--rail);background:var(--graphite);color:var(--felt);font:700 13px var(--font);cursor:pointer}
.tl-btn:hover:not([aria-disabled="true"]){border-color:var(--felt)}
.tl-btn.is-other{border:2px dashed var(--brass)}
.tl-btn[aria-disabled="true"]{cursor:not-allowed;color:var(--steel);opacity:.8}
.tl-btn.is-pick{background:var(--brass);border-color:var(--brass);color:var(--green)}
.tl-btn.is-pick .off{display:none}
.tl-btn.is-pick:not([aria-disabled="true"]):hover,.tl-btn.is-pick:not([aria-disabled="true"]):focus-visible{background:var(--graphite);border-color:var(--danger);color:var(--danger)}
.tl-btn.is-pick:not([aria-disabled="true"]):hover .on,.tl-btn.is-pick:not([aria-disabled="true"]):focus-visible .on{display:none}
.tl-btn.is-pick:not([aria-disabled="true"]):hover .off,.tl-btn.is-pick:not([aria-disabled="true"]):focus-visible .off{display:inline}
@media (max-width:640px){.tl-row{grid-template-columns:auto minmax(0,1fr) auto}.tl-rank,.tl-str{display:none}}
.tl-used{margin-top:14px;border-top:1px solid var(--rail);padding-top:10px}
.tl-used summary{cursor:pointer;color:var(--steel);font-weight:500}
.tl-used ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tl-used li{display:flex;align-items:center;gap:10px;color:var(--steel)}
.tl-used .tl-btn{margin-left:auto;min-width:0;border-style:solid}
.pickside p{margin:0 0 10px;font-size:14px}
.side-count{font:400 40px/1 var(--display) !important;color:var(--felt);margin:10px 0 6px !important}
.side-facts{display:grid;grid-template-columns:1fr auto;margin:6px 0 14px;font-size:14px}
.side-facts dt,.side-facts dd{padding:8px 0;border-top:1px solid var(--rail);margin:0}
.side-facts dd{text-align:right;font-weight:700}
.side-facts dd.need{color:var(--brass-dk)}
.tl-row>*:not(.tl-text):not(.tl-more){grid-row:1/span 2}
.tl-text{grid-row:1}
.tl-more{grid-column:3;grid-row:2;font-size:13px;color:var(--steel)}
.tl-more-hint{color:var(--felt)}
.tl-more summary{cursor:pointer}
.tl-more form{display:inline-block;margin:8px 8px 0 0}
.tl-more .tl-btn{min-height:34px;font-weight:500}
@media (max-width:640px){.tl-more{grid-column:2}}

/* My picks: the pool name band at the top of the pick panel, the view switch, and the Matchups view */
.pickpanel{padding-top:0;overflow:hidden}
.pp-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 -22px 14px;padding:14px 22px;background:var(--green);color:#FFFFFF}
.pp-band h2{margin:0;font-size:24px;line-height:1.15}
.pp-band h2 a{color:var(--brass);text-decoration:none}
.pp-band h2 a:hover{color:#E0C06A;text-decoration:underline}
.pp-band-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-band-text span{font-size:13px;color:#CFE0D5}
.pp-views{display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(200,162,74,.45)}
.pp-views a{padding:7px 14px;border-radius:999px;color:#CFE0D5;text-decoration:none;font-size:13px;font-weight:700}
.pp-views a:hover{color:#FFFFFF}
.pp-views a[aria-current="page"]{background:var(--brass);color:var(--green)}
.mu-day{margin:18px 0 8px;font-size:17px;color:var(--felt);padding-bottom:6px;border-bottom:1px solid var(--rail)}
.mu-day:first-of-type{margin-top:4px}
.mu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.mu{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);border:1px solid var(--rail);border-radius:8px;overflow:hidden;background:var(--graphite)}
.mu-form{display:flex;margin:0}
.mu-side{position:relative;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:118px;padding:22px 8px 12px;border:0;background:var(--graphite);color:var(--white);font:inherit;cursor:pointer;text-align:center}
.mu-side:hover:not([aria-disabled="true"]){background:#F5F8F4}
.mu-side b{font-weight:700;font-size:14px;line-height:1.2}
.mu-side small{color:var(--steel);font-size:12px}
.mu-tag{position:absolute;top:6px;left:0;right:0;font-size:10px;font-weight:700;color:var(--steel)}
.mu-side.is-pick{background:var(--felt);color:#FFFFFF}
.mu-side.is-pick small{color:#CFE0D5}
.mu-side.is-pick .mu-tag{color:var(--brass)}
.mu-side.is-pick .off{display:none}
.mu-side.is-pick:not([aria-disabled="true"]):hover,.mu-side.is-pick:not([aria-disabled="true"]):focus-visible{background:var(--danger-bg);color:var(--danger)}
.mu-side.is-pick:not([aria-disabled="true"]):hover .mu-tag,.mu-side.is-pick:not([aria-disabled="true"]):focus-visible .mu-tag{color:var(--danger)}
.mu-side.is-pick:not([aria-disabled="true"]):hover .on,.mu-side.is-pick:not([aria-disabled="true"]):focus-visible .on{display:none}
.mu-side.is-pick:not([aria-disabled="true"]):hover .off,.mu-side.is-pick:not([aria-disabled="true"]):focus-visible .off{display:inline}
.mu-side.is-other{box-shadow:inset 0 0 0 2px var(--brass)}
.mu-side.is-other .mu-tag{color:var(--brass-dk)}
.mu-side[aria-disabled="true"]{cursor:not-allowed;color:var(--steel)}
.mu-side.is-used b{text-decoration:line-through}
.mu-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 10px;background:var(--black);font-size:12px;color:var(--steel)}
.mu-vs b{font:400 15px var(--display);color:var(--white)}
@media (max-width:640px){.mu-grid{grid-template-columns:minmax(0,1fr)}}
/* Entry cards on My picks: the pool name in a green band across the top */
.entrytab{padding:0;overflow:hidden;gap:0}
.entrytab-pool{display:block;padding:7px 30px 7px 14px;background:var(--green);color:var(--brass);font:400 14px/1.3 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entrytab-body{display:flex;flex-direction:column;gap:2px;padding:10px 14px 12px;min-width:0}
.entrytab.need::after{top:12px;right:12px;box-shadow:0 0 0 2px var(--green)}
.entrytab.is-selected .entrytab-pool{background:var(--felt)}
.entrytab.out .entrytab-pool{background:#5E6F66;color:#E8ECE6}

/* ---- Schedule tab: Matchups cards, a heading per day; your picks in gold ---- */
.sched{display:flex;flex-direction:column}
.sched-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.sched-head .sect{font-size:26px}
.sched-dayhead{display:flex;align-items:baseline;gap:10px;margin:22px 0 12px}
.sched-dayhead::after{content:"";flex:1;height:2px;background:var(--rail);align-self:center}
.sched-dayhead .sched-title{margin:0;font-size:20px;color:var(--white)}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.sg-card{background:var(--graphite);border:1px solid #C9D1C6;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(14,59,44,.08)}
.sg-strip{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;background:var(--green);color:#FFFFFF;font-size:13px;font-weight:700}
.sg-card.final .sg-strip{background:#3F5249}
.sg-card.live .sg-strip{background:var(--brass);color:var(--green)}
.sg-card.pp .sg-strip{background:#8D958F}
.sg-card.pp{opacity:.75}
.sg-card.picked{border:3px solid var(--brass);box-shadow:0 4px 14px rgba(200,162,74,.35)}
.sg-card.picked .sg-strip{background:var(--brass);color:var(--green)}
.sg-mine{display:inline-flex;align-items:center;background:var(--green);color:var(--brass);border-radius:999px;padding:2px 10px;font-size:12px;text-align:right}
.sg-team{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px}
.sg-team + .sg-team{border-top:1px solid var(--rail)}
.sg-team.yours{background:var(--warn-tint);box-shadow:inset 5px 0 0 var(--brass)}
.sg-text{min-width:0;line-height:1.25}
.sg-text b{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.sg-text small{display:block;color:var(--steel);font-size:12px;margin-top:2px}
.sg-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--green);background:var(--brass);border-radius:999px;padding:1px 9px;margin-left:6px;vertical-align:middle}
.sg-score{font:400 28px/1 var(--display);min-width:28px;text-align:right}
.sg-team.won .sg-score{color:var(--felt)}
.sg-team.won b::after{content:" ✓";color:var(--felt);font-size:13px}
.sg-team.lost b,.sg-team.lost .sg-score{color:#7C8781}
.sg-team.lost{cursor:help}
.cell[title],.tl-btn[title],.mu-side[title],.tl-used li{cursor:help}
.tl-form .tl-btn:not([aria-disabled="true"]),.mu-form .mu-side:not([aria-disabled="true"]){cursor:pointer}

/* Explanation bubbles (shell.js turns titles into these): green with a brass edge, an arrow to what they explain */
.tipbox{position:absolute;z-index:60;max-width:min(300px,calc(100vw - 16px));padding:10px 12px;border-radius:8px;background:var(--green);color:#FFFFFF;border-top:3px solid var(--brass);box-shadow:0 10px 26px rgba(0,0,0,.28);font:400 13px/1.45 var(--font);pointer-events:none}
.tipbox::after{content:"";position:absolute;left:var(--arrow,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;background:var(--green);transform:rotate(45deg)}
.tipbox.below::after{bottom:auto;top:-8px;background:var(--brass)}
[data-tip]{cursor:help}
a[data-tip],button[data-tip]:not([aria-disabled="true"]){cursor:pointer}

/* ---- Picks by week: a week at a time, three views (By team, Survived & lost, Table) ---- */
.pbw{display:flex;flex-direction:column}
.pbw-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.pbw-head .sect{font-size:26px;margin:0}
.pbw-switches{display:flex;flex-wrap:wrap;gap:8px}
.pbw-views a[aria-current="true"]{background:var(--green);color:#FFFFFF}
.pbw-note{margin:0 0 14px;padding:12px 14px;background:var(--warn-tint);border-left:4px solid var(--brass);border-radius:6px;font-size:14px}
.pbw-sum{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 14px;font-size:14px;color:var(--steel)}
.pbw-sum b{color:var(--white)}
.pbw-sum b.won{color:var(--felt)}.pbw-sum b.lost{color:var(--danger)}
.res{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.res.won{background:var(--win-bg);color:var(--felt)}
.res.lost{background:var(--danger-bg);color:var(--danger)}
.res.void{background:#EEEEEE;color:var(--steel)}
.res.play{background:#E6EEF2;color:#2F5D73}
.pbw-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pbw-team{background:var(--graphite);border:1px solid #C9D1C6;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(14,59,44,.06)}
.pbw-team-h{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--rail)}
.pbw-team.won .pbw-team-h{background:#F3F8F4}
.pbw-team.lost .pbw-team-h{background:#FBF1EF}
.pbw-team-h .nm{flex:1;min-width:0;line-height:1.3}
.pbw-team-h b{display:block;font-size:16px}
.pbw-team-h small{color:var(--steel);font-size:12px}
.pbw-team-h .count{font:400 26px/1 var(--display);text-align:right}
.pbw-team-h .count small{display:block;font:400 11px var(--font)}
.pbw-chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px}
.pbw-chip{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--black)}
.pbw-chip.mine{background:#A67C1B;color:#FFFFFF;font-weight:700}
.pbw-team.lost .pbw-chip{text-decoration:line-through;text-decoration-color:rgba(155,59,47,.5)}
.pbw-team.lost .pbw-chip.mine{text-decoration-color:rgba(255,255,255,.7)}
.pbw-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.pbw-col{background:var(--graphite);border:1px solid #C9D1C6;border-radius:8px;overflow:hidden}
.pbw-col h3{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:12px 16px;color:#FFFFFF;font-size:18px}
.pbw-col h3 span{font:400 22px var(--display)}
.pbw-col.won h3{background:var(--felt)}
.pbw-col.lost h3{background:var(--danger)}
.pbw-col.play h3{background:#2F5D73}
.pbw-col.void h3{background:#8D958F}
.pbw-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:9px 16px;border-top:1px solid var(--rail);font-size:14px}
.pbw-col h3 + .pbw-line{border-top:0}
.pbw-line .who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbw-line .t{display:flex;align-items:center;gap:8px;color:var(--steel);font-size:13px;justify-self:end}
.pbw-line .note{grid-column:1/-1;font-size:11px;color:var(--steel)}
.pbw-line .note:empty{display:none}
.pbw-line.mine{background:var(--warn-tint);box-shadow:inset 4px 0 0 var(--brass)}
.pbw-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.pbw-tools .seg a span{opacity:.7;font-weight:400}
.pbw-tools .seg a[aria-current="true"]{background:var(--felt);color:#FFFFFF}
.pbw-search{margin-left:auto}
.pbw-search input{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--rail);font:inherit;min-width:220px;background:var(--graphite);color:var(--white)}
.pbw-table{background:var(--graphite);border-radius:8px;border-top:3px solid var(--brass);overflow-x:auto}
.pbw-table table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
.pbw-table th{text-align:left;font-size:12px;font-weight:700;color:var(--steel);padding:10px 14px;border-bottom:2px solid var(--rail)}
.pbw-table th a{color:inherit;text-decoration:none}
.pbw-table th a::after{content:" ↕";opacity:.5}
.pbw-table th a[aria-current="true"]{color:var(--felt)}
.pbw-table td{padding:9px 14px;border-bottom:1px solid var(--rail)}
.pbw-pick{display:inline-flex;align-items:center;gap:8px}
.pbw-table tr.mine td{background:var(--warn-tint)}
.pbw-table tr.mine td:first-child{box-shadow:inset 4px 0 0 var(--brass)}
.pbw-table tr.lost td:first-child b{color:#7C8781}
.pbw-foot{margin:0;padding:10px 14px;color:var(--steel);font-size:13px}
@media (max-width:640px){.pbw-search{margin-left:0;width:100%}.pbw-search input{width:100%;min-width:0}}