/* MSJFFL Clubhouse app (signed in). Colors and type follow the prototype clubhouse. */
body.app{
  --bg:#edf1ec; --surface:#fff; --sunk:#e3e9e3; --ink:#15211a; --muted:#5a6a60; --line:#d2dbd3;
  --pine:#1d4a33; --pine-ink:#1d4a33; --gold:#d3a21f; --gold-ink:#86620c; --gold-soft:#f6ecc9;
  --win:#2c7a3c; --loss:#b03e2c; --live:#c88a0a; --on-pine:#f4f1e4;
  --head:"Graduate","Rockwell",serif; --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  display:block; padding:0; min-height:100vh; background:var(--bg); color:var(--ink); font:15px/1.45 var(--body);
}
@media (prefers-color-scheme:dark){ body.app{
  --bg:#0e1511; --surface:#16201a; --sunk:#111a15; --ink:#e7eee9; --muted:#97a89d; --line:#2a3a31;
  --pine:#24573d; --pine-ink:#8fd0ab; --gold:#e3b43c; --gold-ink:#e8bf55; --gold-soft:#3a3114;
  --win:#6cc27d; --loss:#ee8a76; --live:#f0b43c; color-scheme:dark }}
body.app button{display:inline;width:auto;margin:0;min-height:0;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:inherit;border-radius:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.top{position:sticky;top:0;z-index:5;background:var(--pine);color:var(--on-pine)}
.top .bar{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 16px 6px}
.top img{width:34px;height:34px;border-radius:8px}
.top .brand{font-family:var(--head);-webkit-text-stroke:.045em currentColor;font-size:19px;letter-spacing:.03em;line-height:1}
.top .wk{font-size:12.5px;opacity:.8;margin-top:2px}
.top .sp{flex:1}
body.app .top .out{font-size:13px;font-weight:600;opacity:.85;padding:8px 4px;text-decoration:underline}
.tabs{max-width:880px;margin:0 auto;display:flex;padding:0 8px}
body.app .tabs button{flex:1;text-align:center;padding:10px 4px 11px;font-weight:700;font-size:14.5px;letter-spacing:.02em;opacity:.75;border-bottom:3px solid transparent}
body.app .tabs button[aria-selected="true"]{opacity:1;border-bottom-color:var(--gold)}
body.app main.view{max-width:880px;width:auto;text-align:left;margin:0 auto;padding:16px 16px 96px}
h2.sec{font-family:var(--head);font-weight:400;-webkit-text-stroke:.045em currentColor;font-size:17px;color:var(--pine-ink);margin:22px 0 8px;text-transform:uppercase;letter-spacing:.02em}
h2.sec:first-child{margin-top:4px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden}
.note{color:var(--muted);font-size:13px;margin:8px 2px 0}
.chip{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.chip.live{background:color-mix(in srgb,var(--live) 18%,transparent);color:var(--live)}
.chip.final{background:color-mix(in srgb,var(--pine-ink) 14%,transparent);color:var(--pine-ink)}
.weekpick{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
body.app .weekpick button{width:44px;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:18px;text-align:center}
body.app .weekpick button:disabled{opacity:.35;cursor:default}
.weekpick b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.02em}
/* Scoreboard */
.games{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
body.app .game{display:block;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
body.app .game.mine{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 30%,transparent)}
.game .row{display:flex;align-items:center;gap:8px;padding:3px 0}
.game .tn{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game .sc{font-family:var(--display);font-weight:900;font-size:26px;line-height:1;min-width:44px;text-align:right}
.game .row.lose{opacity:.6}
.game .foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12.5px;color:var(--muted)}
/* Standings */
table.st{width:100%;border-collapse:collapse;font-size:14.5px}
table.st th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;text-align:right;padding:9px 8px;background:var(--sunk)}
table.st td{padding:9px 8px;border-top:1px solid var(--line);text-align:right}
table.st th:nth-child(2),table.st td:nth-child(2){text-align:left}
table.st td:first-child{color:var(--muted);width:30px;text-align:center}
table.st tr.me td{background:var(--gold-soft)}
table.st .own{display:block;font-size:12px;color:var(--muted)}
/* Matchup */
.mhead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:14px 12px;text-align:center}
.mhead .tn{overflow-wrap:anywhere;font-family:var(--head);-webkit-text-stroke:.045em currentColor;font-size:clamp(13px,3.6vw,19px);text-transform:uppercase;line-height:1.1}
.mhead .own{font-size:12px;color:var(--muted);margin-top:3px}
.mhead .big{font-family:var(--display);font-weight:900;font-size:clamp(44px,12vw,68px);line-height:.95}
.mhead .big.win{color:var(--gold-ink)}
.mhead .mid{display:flex;flex-direction:column;align-items:center;gap:6px}
body.app select{font:inherit;font-size:15px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);width:100%;margin-bottom:10px}
.mt{width:100%;border-collapse:collapse;table-layout:fixed}
.mt td{padding:8px 6px;border-top:1px solid var(--line);vertical-align:middle}
.mt .slot{width:44px;text-align:center;font-family:var(--display);font-weight:800;font-size:13px;color:var(--muted);background:var(--sunk);padding:8px 2px}
.mt .pts{width:42px;font-family:var(--mono);font-weight:600;font-size:15px;text-align:center}
.mt .pts.tb{color:var(--muted);font-weight:500}
.mt .pl{overflow:hidden}
.mt .pl.r{text-align:right}
.pname{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pline{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pline.live{color:var(--live)}
.mt tr.click{cursor:pointer}
.mt tr.click:hover td:not(.slot){background:color-mix(in srgb,var(--gold) 7%,transparent)}
.mt tr.det td{background:var(--sunk);font-size:12.5px;padding:6px 8px;vertical-align:top}
.det .ln{display:flex;justify-content:space-between;gap:8px}
.det .ln span:last-child{font-family:var(--mono)}
.det .h{font-weight:700;margin:4px 0 2px}
.mt tr.sum td{font-weight:700;background:color-mix(in srgb,var(--pine-ink) 6%,transparent)}
.mt tr.divider td{padding:4px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--sunk);text-align:center}
.empty{color:var(--muted);font-style:italic}
/* My Team */
.teamhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.teamhead h1{font-family:var(--head);font-weight:400;-webkit-text-stroke:.045em currentColor;font-size:clamp(20px,5vw,28px);color:var(--pine-ink);margin:0;text-transform:uppercase;line-height:1.05}
.teamhead .rec{font-family:var(--mono);color:var(--muted)}
.lu{width:100%;border-collapse:collapse}
.lu td{padding:9px 8px;border-top:1px solid var(--line);vertical-align:middle}
.lu tr:first-child td{border-top:0}
.lu .slot{width:50px;text-align:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--pine-ink);background:var(--sunk)}
.lu .pts{width:48px;text-align:right;font-family:var(--mono);font-weight:600}
.lu tr.edit{cursor:pointer}
.lu tr.edit:hover td:not(.slot){background:color-mix(in srgb,var(--gold) 7%,transparent)}
.lu tr.changed td:not(.slot){background:var(--gold-soft)}
.lock{font-size:12px;color:var(--muted);white-space:nowrap}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:1px 5px;border-radius:4px;background:var(--gold-soft);color:var(--gold-ink);margin-left:5px;vertical-align:1px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list .pos{width:40px;text-align:center;font-family:var(--display);font-weight:800;font-size:14px;border-radius:6px;padding:3px 0;background:var(--sunk);color:var(--pine-ink)}
.list .grow{flex:1;min-width:0}
.res-W{color:var(--win);font-weight:700}.res-L{color:var(--loss);font-weight:700}.res-T{color:var(--muted);font-weight:700}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.savebar .in{max-width:880px;margin:0 auto;display:flex;gap:10px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.savebar .msg2{flex:1;font-size:13.5px}
body.app .btn2{background:var(--pine);color:var(--on-pine);font-weight:700;padding:11px 18px;border-radius:9px;min-height:44px}
body.app .btn3{border:1px solid var(--line);font-weight:700;padding:11px 14px;border-radius:9px;min-height:44px;background:var(--surface)}
body.app .btn2:disabled{opacity:.55}
/* Picker sheet */
.sheet{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet .panel{background:var(--surface);width:100%;max-width:520px;max-height:80vh;overflow:auto;border-radius:14px 14px 0 0;padding:6px 0 calc(12px + env(safe-area-inset-bottom))}
@media (min-width:700px){ .sheet{align-items:center} .sheet .panel{border-radius:14px} }
.sheet h3{font-family:var(--head);font-weight:400;font-size:16px;margin:10px 16px 6px;color:var(--pine-ink);text-transform:uppercase}
body.app .sheet li button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:2px 0}
body.app .sheet li button:disabled{opacity:.45;cursor:default}
.banner{background:var(--gold-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.loading{padding:40px 0;text-align:center;color:var(--muted)}
.err{background:color-mix(in srgb,var(--loss) 14%,transparent);border-radius:10px;padding:12px;margin:16px}
@media (max-width:420px){ .mt .slot{width:36px;font-size:11.5px} .mt .pts{width:34px;font-size:13.5px} .mt td{padding:7px 4px} .pname{font-size:13px} .pline{font-size:11.5px} }

/* Meeting */
.mhero{background:var(--pine);color:var(--on-pine);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.mhero .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.mhero .clock{font-size:18px;margin-top:4px}.mhero .clock b{font-family:var(--head);font-weight:400;-webkit-text-stroke:.045em currentColor;text-transform:uppercase}
.mhero .mmeta{font-size:13px;opacity:.85}
.row2{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
body.app .chip2{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13.5px;min-height:40px}
body.app .chip2[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body.app .chip2:disabled{opacity:.4}
.mform{padding:12px}
.mf-h{font-size:14px}
.mstep{margin-top:12px}
.mstep > b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mstep .list,.cols2 .list{border:1px solid var(--line);border-radius:10px}
.list.cols2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.list.cols2 li{border-top:1px solid var(--line)}
div.cols2{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:10px}
body.app .opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left}
body.app .opt[aria-pressed="true"]{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px;background:var(--gold-soft)}
.list li.now{background:var(--gold-soft)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
body.app .filters input,body.app .filters select{width:auto;flex:1;min-width:140px;margin:0;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
body.app .filters label{display:flex;gap:6px;align-items:center;font-size:14px;margin:0}
body.app .filters label input{flex:none;min-width:0}
body.app li select{width:auto;margin:4px 0}
.ipill{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font:700 11px/1.5 var(--body);background:color-mix(in srgb,var(--loss) 16%,transparent);color:var(--loss);vertical-align:1px}
.ipill.q{background:color-mix(in srgb,var(--live) 18%,transparent);color:var(--live)}
.txgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.txteam{padding:10px 12px}
.tx{display:grid;grid-template-columns:52px 1fr;gap:8px;font-size:13.5px;padding:2px 0}
.tx .k{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--muted)}
.tx .k.CUT{color:var(--loss)} .tx .k.PU{color:var(--win)} .tx .k.FA,.tx .k.TRADE{color:var(--gold-ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;z-index:20;max-width:calc(100% - 32px)}

/* Clubhouse */
.subtabs2{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:12px}
.subtabs2::-webkit-scrollbar{display:none}
body.app .subtabs2 button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13.5px;color:var(--muted);min-height:40px;white-space:nowrap}
body.app .subtabs2 button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
body.app .btn3.sm{padding:6px 11px;min-height:36px;font-size:13px}
body.app .btn3[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-ink)}
.pill2{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pill2.gold{background:var(--gold-soft);color:var(--gold-ink)} .pill2.win{color:var(--win)} .pill2.loss{color:var(--loss)}
b.h{font-family:var(--head);font-weight:400;-webkit-text-stroke:.045em currentColor;text-transform:uppercase;font-size:16px;color:var(--pine-ink)}
.ph{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
/* Gazette */
.paper{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:16px;margin-top:4px}
.paper p{margin:6px 0 0;max-width:70ch}
.flag{text-align:center;border-bottom:3px double var(--ink);padding-bottom:10px}
.flag .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.flag .nm{font-family:var(--head);-webkit-text-stroke:.045em currentColor;font-size:clamp(24px,6.4vw,44px);letter-spacing:.03em;line-height:1;text-transform:uppercase}
.flag .dl2{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);border-top:1px solid var(--ink);margin-top:8px;padding-top:5px;text-transform:uppercase;letter-spacing:.08em}
.lead-story h3{font-family:var(--head);font-weight:400;-webkit-text-stroke:.045em currentColor;font-size:clamp(26px,6vw,38px);line-height:1;margin:2px 0;text-transform:uppercase}
.cols{display:grid;gap:16px 22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.story{border-top:1px solid var(--line);padding-top:10px}
.story h4{margin:0;font-family:var(--head);font-weight:400;-webkit-text-stroke:.045em currentColor;font-size:17px;text-transform:uppercase;line-height:1.05}
.kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.web ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.web a{color:var(--pine-ink);font-weight:700}
/* Report */
.rmast{background:var(--pine);color:var(--on-pine);border-radius:12px;padding:14px 16px;margin:4px 0 10px}
.rmast .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.rtitle{font-family:var(--head);-webkit-text-stroke:.045em currentColor;font-size:24px;text-transform:uppercase;margin-top:4px}
.owed{color:var(--loss);font-weight:700;font-size:13px;margin-top:4px}
.tx .k.ACT,.tx .k.REPUP{color:var(--pine-ink)} .tx .k.IR,.tx .k.PUP{color:var(--live)}
/* Rules */
.rules{display:grid;gap:8px}
details.rule{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0 14px}
details.rule summary{cursor:pointer;padding:12px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
details.rule summary::-webkit-details-marker{display:none}
details.rule summary::after{content:"+";font-family:var(--mono);color:var(--muted)}
details.rule[open] summary::after{content:"–"}
.rbody{padding:0 0 14px;max-width:68ch}.rbody p{margin:0 0 8px}.rbody ul{margin:6px 0;padding-left:18px}
/* Inbox */
.split{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
.inbox{display:grid;gap:10px}
.prop{padding:12px;display:grid;gap:8px}
.pbody{white-space:pre-wrap}
.pform{padding:14px;display:grid;gap:8px}
body.app .pform label{display:grid;gap:5px;font-weight:700;font-size:13px}
body.app .pform input,body.app .pform textarea{font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);width:100%}
body.app .prop select{width:auto;margin:0;padding:6px 8px}
/* Champions */
.champ-wrap{padding:14px}
.dyn{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:12px 0}
.dyn-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;border:2px solid var(--gold);border-radius:10px;padding:10px 12px;background:var(--surface)}
.dyn-n{font-family:var(--display);font-weight:900;font-size:32px;line-height:1;color:var(--gold-ink);text-align:center}
.dyn-n small{display:block;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.champ-wrap .list{border:1px solid var(--line);border-radius:10px}
.champ-wrap .yr{font-family:var(--display);font-weight:900;font-size:19px;color:var(--gold-ink);width:52px}
.champ-wrap li.here{background:color-mix(in srgb,var(--gold) 10%,transparent)}

.mv-cols{display:grid;gap:4px 22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:6px}
.mover{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.mv-n{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;text-align:center;color:var(--muted)}
.mover.up .mv-n{color:var(--win)} .mover.down .mv-n{color:var(--loss)}
.mv-path{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:2px}
details.ladder{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:0 12px}
details.ladder summary{cursor:pointer;padding:10px 0;font-weight:700;font-size:14px}
.lad > div{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:14px}

.backpool{border:2px solid var(--gold);border-radius:10px;padding:8px;margin:8px 0;background:var(--gold-soft)}
.backpool > b{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 6px 4px}
body.app [hidden]{display:none!important}

.pos .rk{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--muted)}