:root{
  color-scheme:light;
  --ground:#F7F8F8; --panel:#FFFFFF; --raise:#F1F2F4;
  --text:#08090A; --dim:#62666D; --faint:#8A8F98;
  --line:#E0E2E6; --hair:#ECEEF0;
  --accent:#1F5FD1; --accent-soft:#E3EDFD; --accent-ink:#1A4FAF;
  --cta:#1F5FD1; --on-cta:#FFFFFF;
  --logo:#141A20; --logo-em:#B06D0E;
  --focus:#08090A;
  --pip-off:#D9DCE1;
  --shadow:rgba(8,9,10,.12) 0 4px 32px;
  --ease:cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#08090A; --panel:#0F1011; --raise:#161718;
    --text:#E5E5E6; --dim:#8A8F98; --faint:#62666D;
    --line:#23252A; --hair:#1A1B1E;
    --accent:#5B9BFF; --accent-soft:rgba(91,155,255,.12); --accent-ink:#5B9BFF;
    --cta:#5B9BFF; --on-cta:#08090A;
    --logo:#E5E5E6; --logo-em:#E8A33D;
    --focus:#D0D6E0;
    --pip-off:#23252A;
    --shadow:rgba(8,9,10,.6) 0 4px 32px;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#08090A; --panel:#0F1011; --raise:#161718;
  --text:#E5E5E6; --dim:#8A8F98; --faint:#62666D;
  --line:#23252A; --hair:#1A1B1E;
  --accent:#5B9BFF; --accent-soft:rgba(91,155,255,.12); --accent-ink:#5B9BFF;
  --cta:#5B9BFF; --on-cta:#08090A;
  --logo:#E5E5E6; --logo-em:#E8A33D;
  --focus:#D0D6E0;
  --pip-off:#23252A;
  --shadow:rgba(8,9,10,.6) 0 4px 32px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.wide{font-family:Inter,sans-serif;}

/* ---------- masthead ---------- */
.masthead{
  padding:26px 22px 0; max-width:1500px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 26px;
}
.wordmark{
  font-family:Inter,sans-serif; font-weight:510;
  font-size:clamp(36px,5.6vw,60px); line-height:.95; letter-spacing:-.015em;
  margin:0; text-wrap:balance;
}
.wordmark{color:var(--logo)}
/* logo colors come from the favicon: slate #141A20 and amber #E8A33D (deeper amber in light mode for contrast) */
.wordmark em{font-style:normal;color:var(--logo-em)}

/* ---------- controls ---------- */
.rail{
  position:sticky; top:0; z-index:30; background:var(--ground);
  border-bottom:1px solid var(--line); margin-top:20px;
}
.rail-in{max-width:1500px; margin:0 auto; padding:11px 22px;
  display:flex; flex-wrap:wrap; gap:9px 14px; align-items:center}
.search{
  flex:0 1 250px; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--panel); padding:6px 10px;
}
.search input{
  border:0; outline:0; background:transparent; color:var(--text);
  font:inherit; width:100%; min-width:0;
}
.search input::placeholder{color:var(--faint)}
.search:focus-within{border-color:var(--accent)}
.search svg{flex:none; color:var(--faint)}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{
  font:inherit; font-size:11.5px; letter-spacing:.03em;
  border:1px solid var(--line); background:transparent; color:var(--dim);
  padding:4px 9px; cursor:pointer; white-space:nowrap;
}
.chip:hover{color:var(--text); border-color:var(--dim)}
.chip[aria-pressed="true"]{
  background:var(--cta); border-color:var(--cta);
  color:var(--on-cta); font-weight:590;
}
.spacer{flex:1 1 auto}
/* Secondary buttons: tinted blue so they read as clickable; .ghost.pri is the solid primary. */
.ghost{
  font:inherit; font-size:11.5px; font-weight:510; background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding:4px 9px; cursor:pointer;
}
.ghost:hover{border-color:var(--accent); color:var(--accent-ink)}
.ghost:disabled{opacity:.45; cursor:default}

/* ---------- table ---------- */
.sheet{max-width:1500px; margin:0 auto; padding:0 22px 80px}
.scroller{}
/* an overflow ancestor would become the sticky containing block and kill the
   sticky header, so only create one on viewports narrow enough to need it */
@media (max-width:980px){
  .scroller{overflow-x:auto}
  thead th{position:static}
}
table{border-collapse:collapse; width:100%; min-width:880px}
thead th{
  position:sticky; top:var(--railh,47px); z-index:20; background:var(--ground);
  text-align:right; font-weight:510; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint);
  padding:12px 10px 8px; border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none; white-space:nowrap;
}
thead th:first-child,thead th.l{text-align:left}
thead th:hover{color:var(--text)}
thead th[aria-sort]{color:var(--accent)}
th .car{opacity:.5; font-size:9px; padding-left:2px}
tbody tr{border-bottom:1px solid var(--hair); cursor:pointer}
tbody tr:hover{background:var(--raise)}
tbody tr:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
tbody tr[aria-selected="true"]{background:var(--accent-soft)}
td{padding:8px 10px; text-align:right; white-space:nowrap}
td.l{text-align:left}
.rk{color:var(--faint); font-size:12px; width:42px}
.team{font-weight:590; font-size:14.5px; letter-spacing:-.005em}
.sub{color:var(--faint); font-size:11.5px; font-weight:400; letter-spacing:.01em}
.big{font-size:15px; font-weight:590}
.mut{color:var(--dim)}
.zero{color:var(--faint)}

/* prestige stars */
.stars{display:inline-flex; gap:2px; vertical-align:-2px}
.stars i{
  width:13px; height:13px; display:block; background:var(--pip-off);
  clip-path:polygon(50% 0%,61.8% 35.5%,98.8% 35.5%,68.8% 57.5%,80.4% 93%,
                    50% 71%,19.6% 93%,31.2% 57.5%,1.2% 35.5%,38.2% 35.5%);
}
.stars i.f{background:var(--accent)}
.stars i.h{background:linear-gradient(90deg,var(--accent) 50%,var(--pip-off) 50%)}

/* nil bar */
.nil{display:inline-flex; align-items:center; gap:7px; justify-content:flex-end}
.nilbar{width:56px; height:5px; background:var(--pip-off); position:relative}
.nilbar i{position:absolute; inset:0 auto 0 0; background:var(--accent)}

/* ---------- dossier ---------- */
.scrim{position:fixed; inset:0; background:rgba(8,9,10,.6); opacity:0; pointer-events:none;
  transition:opacity .18s ease; z-index:40}
.scrim.on{opacity:1; pointer-events:auto}
.dossier{
  position:fixed; top:0; right:0; bottom:0; width:min(640px,100vw);
  background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.4,.0,.2,1);
  z-index:50; display:flex; flex-direction:column;
}
.dossier.on{transform:none}
.dhead{padding:20px 22px 15px; border-bottom:1px solid var(--line); position:relative}
.dclose{position:absolute; top:14px; right:14px; background:transparent; border:1px solid var(--line);
  color:var(--dim); width:26px; height:26px; cursor:pointer; font-size:15px; line-height:1}
.dclose:hover{color:var(--text); border-color:var(--dim)}
.dname{
  font-family:Inter,sans-serif;
  font-weight:590; font-size:27px; line-height:1; margin:0 34px 6px 0;
  letter-spacing:-.01em; text-wrap:balance;
}
.dmeta{color:var(--dim); font-size:12px}
.dmeta b{color:var(--text); font-weight:510}
.motto{margin-top:9px; font-size:12.5px; color:var(--dim); font-style:italic}
.tags{margin-top:7px; display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:10.5px; letter-spacing:.03em; color:var(--accent-ink); background:var(--accent-soft);
  padding:2px 6px}
.dbody{overflow-y:auto; padding:0 22px 30px}
.pchips{margin:0 0 10px}
.pchips .chip{font-size:11px; padding:3px 7px}
.pchips .chip .mono{opacity:.65; font-size:10px}
.pchips .chip:disabled{opacity:.35; cursor:default}
h3{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
  font-weight:510; margin:24px 0 9px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.grades{display:grid; gap:6px}
.grow{display:grid; grid-template-columns:130px 1fr 26px; align-items:center; gap:9px; font-size:12px}
.grow em{font-style:normal; color:var(--dim)}
.gbar{height:6px; background:var(--pip-off); position:relative}
.gbar i{position:absolute; inset:0 auto 0 0; background:var(--accent)}
.glet{text-align:right; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:590}
.rost{width:100%; border-collapse:collapse; min-width:0}
.rost thead th{position:static; background:transparent; cursor:default; padding:4px 4px 5px; font-size:9.5px; color:var(--faint); text-align:right}
.rost thead th.l{text-align:left}
.rost thead th:hover{color:var(--faint)}
.rost thead th.srt{cursor:pointer; white-space:nowrap}
.rost thead th.srt:hover{color:var(--text)}
.rost thead th.srt[aria-sort]{color:var(--accent)}
.rost thead th.srt .car{opacity:.7; padding-left:3px}
.rost td{padding:5px 4px; border-bottom:1px solid var(--hair); font-size:12.5px}
.rost td:first-child{color:var(--faint); font-family:"JetBrains Mono",monospace; width:34px; text-align:left}
.rost td.nm{text-align:left; white-space:normal; line-height:1.25}
.staff td.l{text-align:left; white-space:normal}
.staff td:first-child{width:30px}
.rost td.yr{color:var(--faint); font-family:"JetBrains Mono",monospace; width:34px; text-align:left}
.dev{display:inline-block; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:1px 4px; margin-left:5px; vertical-align:1px; border:1px solid transparent}
.dev.d3{background:var(--cta); color:var(--on-cta); font-weight:590}
.dev.d2{border-color:var(--accent); color:var(--accent-ink)}
.dev.d1{border-color:var(--line); color:var(--faint)}
.dev.d0{display:none}
.rmore{margin-top:10px; width:100%; font:inherit; font-size:11.5px; background:transparent;
  border:1px solid var(--line); color:var(--dim); padding:6px; cursor:pointer}
.rmore:hover{color:var(--text); border-color:var(--dim)}

/* ---------- tabs + randomizer ---------- */
.tabs{max-width:1500px; margin:18px auto 0; padding:0 22px; display:flex; gap:4px; border-bottom:1px solid var(--line)}
.tab{font:inherit; font-family:Inter,sans-serif;
  font-weight:590; font-size:12.5px; letter-spacing:-.011em;
  background:transparent; border:0; border-bottom:3px solid transparent; color:var(--faint);
  padding:9px 14px 8px; cursor:pointer; margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text); border-bottom-color:var(--accent)}
.tabs .tab{font-size:13.5px; padding:11px 12px 10px}
.tab:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
#viewBoard .rail, #viewCoach .rail, #viewPlay .rail{margin-top:0}
.plsel{display:flex; flex-wrap:wrap; gap:6px}
.plsel select{font:inherit; font-size:12.5px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); padding:5px 8px}
.ptab .yr{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--dim)}
#plmore{display:block; margin:14px auto 0}
.plsrc{margin-top:16px}
/* Player Database: one scroll box (both directions) so the header row and the Pos + Player columns stay pinned */
.plscroll{overflow:auto; max-height:max(60vh, calc(100vh - var(--railh,47px) - 40px)); border-bottom:1px solid var(--line)}
#viewPlay thead th{position:sticky; top:0}
.ptab th:nth-child(1), .ptab td:nth-child(1){position:sticky; left:0; width:56px; min-width:56px; max-width:56px; background:var(--ground); z-index:2}
.ptab th:nth-child(2), .ptab td:nth-child(2){position:sticky; left:56px; min-width:210px; background:var(--ground); z-index:2; box-shadow:1px 0 0 var(--line)}
#viewPlay thead th:nth-child(-n+2){z-index:22}
@media (max-width:600px){.ptab th:nth-child(2), .ptab td:nth-child(2){min-width:140px; max-width:140px; white-space:normal} .ptab th:nth-child(1), .ptab td:nth-child(1){width:44px; min-width:44px; max-width:44px} .ptab th:nth-child(2), .ptab td:nth-child(2){left:44px}}
.ptab tbody tr:hover td{background:var(--raise)}
.ptab th.gs0, .ptab td.gs0{border-left:1px solid var(--line)}
.ptab td.rt{color:var(--dim)}
/* player card */
.gs.plc{width:min(720px,calc(100% - 32px)); padding:6px 18px 18px; margin-top:40px; max-height:calc(100vh - 80px); overflow:auto}
.plc-sub{color:var(--dim); font-size:13px; margin:0 0 12px}
.plc-top{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:flex-end; padding:10px 0 14px; border-bottom:1px solid var(--line)}
.plc-top div{display:flex; flex-direction:column}
.plc-top b{font:590 22px "JetBrains Mono",monospace}
.plc-top span{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.plc-top .plc-go{margin-left:auto}
.plc-g{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:4px 22px}
.plc h3{grid-column:1 / -1; margin:16px 0 4px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:510}
.plc-r{display:grid; grid-template-columns:1fr 28px 64px; align-items:center; gap:8px; font-size:12.5px; padding:2px 0}
.plc-r b{font:510 12.5px "JetBrains Mono",monospace; text-align:right}
.plc-r i{height:5px; border-radius:3px; background:var(--hair); position:relative; overflow:hidden}
.plc-r i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--v); background:var(--accent)}
.plc-none{color:var(--dim); font-size:13px; padding:14px 0}
.ctab{min-width:760px}
.ctab .role{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--dim); width:64px}
.ctab td.l{white-space:normal}
.rand{max-width:1500px; margin:0 auto; padding:24px 22px 80px; display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:34px; align-items:start}
@media (max-width:860px){.rand{grid-template-columns:1fr; gap:26px}}
.rand h2{font-family:Inter,sans-serif;
  font-weight:590; font-size:20px; letter-spacing:-.005em; margin:0 0 4px}
.rand .hint{color:var(--dim); font-size:12.5px; margin:0 0 18px; max-width:52ch}
.seg{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line)}
.seg button{font:inherit; font-size:12.5px; font-weight:590; padding:9px 8px; background:transparent;
  color:var(--dim); border:0; cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--text); color:var(--ground)}
.fgroup{margin-top:18px}
.fgroup .lbl{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:7px}
.fgroup .chip{font-size:12px; padding:6px 10px}
.fgroup .chip small{opacity:.65; font-size:10.5px; padding-left:3px}
.poolline{margin:18px 0 10px; font-size:12.5px; color:var(--dim)}
.poolline b{color:var(--text); font-family:"JetBrains Mono",monospace; font-size:15px}
.roll{width:100%; font:inherit; font-family:Inter,sans-serif; font-weight:590; font-size:15px; letter-spacing:-.011em;
  background:var(--cta); color:var(--on-cta); border:0; padding:14px; cursor:pointer}
.roll:hover{filter:brightness(1.06)}
.roll{margin-bottom:6px}
.roll:disabled{opacity:.4; cursor:default; filter:none}
.result{border:1px solid var(--line); background:var(--panel); padding:26px 26px 24px; min-height:330px;
  display:flex; flex-direction:column}
.result.idle{align-items:center; justify-content:center; color:var(--faint); text-align:center; font-size:13px}
.result .kick{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.result .rname{font-family:Inter,sans-serif;
  font-weight:590; font-size:clamp(30px,5vw,52px); line-height:.95;
  letter-spacing:-.015em; margin:8px 0 6px; text-wrap:balance; overflow-wrap:anywhere}
.result.spin .rname{color:var(--faint)}
.result .rsub{color:var(--dim); font-size:13px}
.result .rsub b{color:var(--text); font-weight:510}
.rstats{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:20px}
@media (max-width:560px){.rstats{grid-template-columns:repeat(2,minmax(0,1fr))} .rstats div:last-child{grid-column:1/-1}}
.rstats div{background:var(--panel); padding:10px 12px; display:flex; flex-direction:column; gap:4px}
.rstats span{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.rstats b{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; font-size:20px; font-weight:590; line-height:1}
.rmeta{margin-top:14px; font-size:12.5px; color:var(--dim); line-height:1.7}
.rmeta b{color:var(--text); font-weight:510}
.ract{margin-top:auto; padding-top:20px; display:flex; gap:8px; flex-wrap:wrap}
.ract .ghost{font-size:12.5px; padding:8px 14px}
.hist{margin-top:16px; font-size:12px; color:var(--faint)}
.hist button{font:inherit; background:transparent; border:0; color:var(--dim); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px}
.hist button:hover{color:var(--text)}

/* ---------- program pipelines ---------- */
.pipe{max-width:1500px; margin:0 auto; padding:22px 22px 80px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start}
@media (max-width:900px){.pipe{grid-template-columns:1fr}}
#viewPipe .rail{margin-top:0}
.pmap{border:1px solid var(--line); background:var(--panel); padding:10px; position:relative}
.pmap svg{width:100%; height:auto; display:block}
.pmap .st{fill:var(--pip-off); stroke:none; opacity:.55; cursor:pointer}
.pmap .sub{stroke:none; cursor:pointer; fill:var(--pip-off); opacity:0}
.pmap .sub[data-tier]{opacity:1}
.pmap .bd path{stroke:var(--panel); stroke-width:1; fill:none}
.pmap [data-tier="0"]{fill:var(--t0)} .pmap [data-tier="1"]{fill:var(--t1)} .pmap [data-tier="2"]{fill:var(--t2)}
.pmap [data-tier="3"]{fill:var(--t3)} .pmap [data-tier="4"]{fill:var(--t4)} .pmap [data-tier="5"]{fill:var(--t5)}
.pmap .st[data-tier]{opacity:1}
.pmap .st.hi, .pmap .sub.hi{stroke:var(--focus); stroke-width:2.5}
.pmap .lbl{pointer-events:none}
.pmap .lbl rect{fill:#141A20; opacity:.9}
.pmap .lbl text{fill:#F4F6F8; font:590 9.5px Inter,ui-sans-serif,system-ui,sans-serif}
:root{--t0:#D9DEE3; --t1:#8C5A2E; --t2:#9EA2A6; --t3:#C0902F; --t4:#5FAFC2; --t5:#B44FA5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--t0:#2E3941}}
:root[data-theme="dark"]{--t0:#2E3941}
.pside{display:flex; flex-direction:column; gap:16px; position:sticky; top:calc(var(--railh,47px) + 16px)}
@media (max-width:900px){.pside{position:static}}
#prank .scrollbox{max-height:min(46vh,420px); overflow-y:auto; margin-top:8px}
#prank h3{margin:0}
.pcard{border:1px solid var(--line); background:var(--panel); padding:16px 18px}
.pcard .pname{font-family:Inter,sans-serif; font-weight:590; font-size:22px; line-height:1; letter-spacing:-.01em; margin:0 0 4px; text-wrap:balance}
.pcard .psub{color:var(--dim); font-size:12px}
.pcard h3{margin-top:16px}
.tiers{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; color:var(--dim); margin:0 0 10px}
.tiers div{display:flex; align-items:center; gap:6px}
.tiers i{width:14px; height:14px; display:inline-block; border:1px solid var(--line); flex:none}
.plist{width:100%; min-width:0; border-collapse:collapse; font-size:12.5px; table-layout:auto}
.plist td{padding:5px 4px; border-bottom:1px solid var(--hair); text-align:left}
.plist td.r{text-align:right; font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; color:var(--dim); white-space:nowrap}
.plist td i{width:11px; height:11px; display:inline-block; vertical-align:-1px; margin-right:7px; border:1px solid var(--line)}
.plist tr{cursor:pointer} .plist tr:hover td{background:var(--raise)}
.plist tr.hi td{background:var(--accent-soft)}
.pmode{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.pmode select{font:inherit; font-size:12.5px; border:1px solid var(--line); background:var(--panel); color:var(--text); padding:6px 8px; min-width:180px}
.pnav{display:flex; gap:4px}
.pnote{color:var(--faint); font-size:11.5px; margin-top:12px; line-height:1.5; max-width:78ch}

[hidden]{display:none !important}
.tab{white-space:nowrap}
.tabs{overflow-x:auto; scrollbar-width:none}
@media (max-width:480px){.tabs{padding:0 16px; gap:0}
  .tabs .tab{padding:10px 10px 9px; font-size:13px}}
@media (max-width:980px){thead th{position:static}}
/* ---------- house rules ---------- */
.house{max-width:1500px; margin:0 auto; padding:24px 22px 80px; display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:34px; align-items:start}
@media (max-width:860px){.house{grid-template-columns:1fr; gap:26px}}
.house .hh{font-family:Inter,sans-serif;
  font-weight:590; font-size:20px; letter-spacing:-.005em; margin:0 0 4px}
.house .hint{color:var(--dim); font-size:12.5px; margin:0; max-width:52ch}

.hprog{display:flex; gap:8px; flex-wrap:wrap}
.hprog .search{flex:1 1 180px}
.hprog .ghost{font-size:12px; padding:6px 10px}
#hseg{margin-top:18px}
.presets{display:grid; gap:6px; margin-top:14px}
.pre{font:inherit; text-align:left; background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; align-items:center}
.pre:hover{border-color:var(--dim)}
.pre[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.pre b{font-family:Inter,sans-serif; font-weight:590; font-size:13.5px; letter-spacing:-.011em}
.pre .pb{grid-column:1/-1; color:var(--dim); font-size:12px; line-height:1.4}
.meter{display:inline-flex; gap:2px; align-items:center}
.meter i{width:12px; height:5px; background:var(--pip-off); display:block}
.meter i.f{background:var(--accent)}
.pips{display:inline-flex; gap:2px; vertical-align:1px}
.pips i{width:6px; height:6px; background:var(--pip-off); display:block}
.pips i.f{background:var(--accent)}
.hsmall{color:var(--faint); font-size:11.5px; margin:10px 0 0}
.book{border:1px solid var(--line); background:var(--panel)}
.bhead{padding:22px 24px 18px; border-bottom:1px solid var(--line)}
.bhead .kick{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.bname{font-family:Inter,sans-serif;
  font-weight:590; font-size:clamp(28px,4.4vw,44px); line-height:.95;
  letter-spacing:-.015em; margin:8px 0 6px; text-wrap:balance; overflow-wrap:anywhere}
.bsub{color:var(--dim); font-size:13px}
.bsub b{color:var(--text); font-weight:510}
.bgoal{margin-top:6px}
.strain{display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; font-size:12.5px}
.strain .lbl{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.strain b{font-weight:590}
.rules{list-style:none; margin:0; padding:0}
.rule{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; padding:16px 24px;
  border-bottom:1px solid var(--hair); animation:hin .28s ease}
@keyframes hin{from{opacity:.35; transform:translateY(3px)} to{opacity:1; transform:none}}
.rcat{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.rttl{font-weight:590; font-size:15px; margin:3px 0 4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rule p{margin:0; color:var(--dim); font-size:13px; max-width:68ch}
.lkt{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:1px 5px; border:1px solid var(--accent); color:var(--accent-ink); font-weight:510}
.racts{display:flex; gap:4px; align-items:flex-start}
.ib{width:30px; height:30px; display:grid; place-items:center; background:transparent; border:1px solid var(--line);
  color:var(--dim); cursor:pointer; padding:0}
.ib:hover{color:var(--text); border-color:var(--dim)}
.ib[aria-pressed="true"]{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft)}
.ib:disabled{opacity:.35; cursor:default}
.hmap{margin-top:12px; max-width:480px}
.hmap svg{width:100%; height:auto; display:block}
.hmap .hs, .hmap .hp{fill:var(--pip-off)}
.hmap .hs.on, .hmap .hp.on{fill:var(--accent)}
.hmap .bd path{stroke:var(--panel); stroke-width:1; fill:none}
.hmap figcaption{font-size:11px; color:var(--faint); margin-top:4px}
.bfoot{padding:14px 24px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.bfoot:not(:last-child){border-bottom:1px solid var(--line)}
.bfoot .ghost{font-size:12.5px; padding:7px 13px}
.bnote{font-size:12px; color:var(--faint)}
.bempty{padding:46px 24px; color:var(--faint); text-align:center; font-size:13px}
#hcopyta{display:block; width:100%; min-height:150px; margin:0 24px 16px; width:calc(100% - 48px);
  font:12px/1.5 "JetBrains Mono",ui-monospace,Menlo,monospace; background:var(--raise); color:var(--text);
  border:1px solid var(--line); padding:10px}
.lib{margin-top:16px; border:1px solid var(--line); background:var(--panel)}
.lib summary{cursor:pointer; padding:13px 18px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.lib summary:hover{color:var(--text)}
.lgrp{padding:0 18px 10px}
.lgrp h3{margin-top:14px}
.lrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:8px 0; border-bottom:1px solid var(--hair); align-items:start}
.lrow:last-child{border-bottom:0}
.lrow b{font-weight:590; font-size:13px}
.lrow p{margin:2px 0 0; font-size:12px; color:var(--dim); max-width:72ch}
.lrow .chip{font-size:11px}
.lrow .chip:disabled{opacity:.4; cursor:default}
@media (max-width:560px){
  .rule{grid-template-columns:1fr; padding:14px 16px}
  .bhead,.bfoot{padding-left:16px; padding-right:16px}
  #hcopyta{margin:0 16px 16px; width:calc(100% - 32px)}
}
.ghost.pri{background:var(--cta); border-color:var(--cta); color:var(--on-cta); font-weight:590}
.ghost.pri:hover{filter:brightness(1.06); color:var(--on-cta)}
.ctag{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:1px 5px; background:var(--accent-soft); color:var(--accent-ink); font-weight:510; margin-left:6px; vertical-align:1px}
.rttl .ctag{margin-left:0}
.uph{margin:14px 0 2px}
.uprow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:start}
.updel{display:flex; flex-direction:column; gap:4px}
.updel .chip{font-size:11px}
.hbuild{margin-top:8px; width:100%; padding:9px 12px; font-size:12.5px; font-weight:590; border-style:dashed; color:var(--text)}
.lact{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.lnew{padding:4px 18px 12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.lnew .ghost{font-size:12.5px; padding:7px 13px}
.hf{margin:0 18px 8px; padding:4px 18px 18px; border:1px solid var(--line); background:var(--raise); display:grid; gap:14px}
.hf h3{margin:14px 0 0}
.hfgrid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:12px}
@media (max-width:560px){.hfgrid{grid-template-columns:1fr} .hf{margin:0 12px 8px; padding:4px 12px 14px}}
.hfrow{display:flex; flex-direction:column; gap:6px; min-width:0}
.hfl{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.hfl span{text-transform:none; letter-spacing:0}
.hfi{font:inherit; font-size:13.5px; color:var(--text); background:var(--panel); border:1px solid var(--line); padding:7px 9px; width:100%; min-width:0}
.hfi:focus{outline:0; border-color:var(--accent)}
textarea.hfi{resize:vertical; line-height:1.45}
.hfseg{max-width:380px; grid-template-columns:repeat(3,1fr)}
.hfseg button{display:flex; align-items:center; justify-content:center; gap:6px; background:var(--panel)}
.hfseg button[aria-pressed="true"] .pips i{background:var(--pip-off)}
.hfseg button[aria-pressed="true"] .pips i.f{background:var(--accent)}
.toks{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.toks .chip{font-size:11px; padding:3px 7px}
.hfprev{border:1px solid var(--line); background:var(--panel)}
.hfprev .hfl{display:block; padding:10px 16px 0}
.hfprev .rule{border-bottom:0; grid-template-columns:1fr; padding:8px 16px 14px}
.herr{margin:0; color:#B3261E; font-size:12.5px; min-height:0}
.herr:empty{display:none}
:root[data-theme="dark"] .herr{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .herr{color:#FF8A80}}
.hfbtn{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.hfbtn .ghost{font-size:12.5px; padding:7px 13px}
.psave{margin:0 24px 18px; padding:14px 16px; border:1px solid var(--line); background:var(--raise); display:grid; gap:12px}
@media (max-width:560px){.psave{margin:0 16px 16px}}
.empty{padding:50px 0; color:var(--faint); text-align:center}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- program picker ---------- */
.search{position:relative}
input[type=search]::-webkit-search-cancel-button{display:none}
.cb{position:absolute; z-index:60; top:calc(100% + 6px); left:-1px; right:-1px; min-width:260px;
  max-height:min(360px,60vh); overflow-y:auto; margin:0; padding:4px 0; list-style:none;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow)}
.cb li{display:flex; align-items:baseline; gap:10px; padding:8px 12px; cursor:pointer; border-left:2px solid transparent}
.cb li[aria-selected="true"]{background:var(--raise); border-left-color:var(--accent)}
.cb li.cur .cb-n::after{content:"current"; margin-left:8px; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); font-weight:510}
.cb-n{font-weight:590; font-size:13.5px; color:var(--text); white-space:nowrap}
.cb-s{margin-left:auto; font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
mark.hit{background:none; color:var(--accent-ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}
.cb li.cb-none{cursor:default; color:var(--faint); font-size:12.5px}
/* global search (Cmd+K) */
.gs{width:min(560px,calc(100% - 32px)); margin:12vh auto auto; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text)}
.gs::backdrop{background:rgba(8,9,10,.5)}
@media (max-width:600px){.coachbtn.gsbtn{font-size:0; gap:0} .gsbtn kbd{display:none} .syncbtn #syncLbl{font-size:12px}}
.gs .search{border:0; border-bottom:1px solid var(--line); padding:12px 14px}
.gs .cb{position:static; min-width:0; max-height:55vh; overflow:auto; border:0; margin:0}
.ks{padding:6px 18px 16px; max-height:calc(88vh - 20px); overflow:auto}
.ks-h{display:flex; align-items:center; justify-content:space-between; padding:10px 0 4px}
.ks-h h2{margin:0; font-size:15px; font-weight:590}
.ks-h .ib{background:none; border:0; padding:4px; cursor:pointer}
.ks h3{margin:14px 0 4px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:510}
.ks dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:baseline; font-size:13px}
.ks dt{white-space:nowrap} .ks dd{margin:0; color:var(--dim)}
.ks dt kbd + kbd{margin-left:3px}
.gs kbd,.gsbtn kbd{font:11px "JetBrains Mono",monospace; color:var(--faint); border:1px solid var(--line); border-radius:4px; padding:1px 5px}


/* ---------- recruiting & NIL ---------- */
.rec-ctl{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; flex:0 1 480px; justify-content:flex-end}
.rec-q{flex:1 1 240px}
.tgl{font:inherit; font-size:12.5px; color:var(--dim); background:transparent; border:0; padding:4px 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.tgl:hover{color:var(--text)}
.tgl:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.tgl .trk{width:32px; height:18px; border-radius:9px; background:var(--pip-off); position:relative; flex:none; transition:background .15s}
.tgl .trk i{position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--panel);
  box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s}
.tgl[aria-checked="true"]{color:var(--text)}
.tgl[aria-checked="true"] .trk{background:var(--accent)}
.tgl[aria-checked="true"] .trk i{transform:translateX(14px)}
@media (prefers-reduced-motion:reduce){.tgl .trk, .tgl .trk i{transition:none}}
.sw{width:12px; height:12px; display:inline-block; vertical-align:-1px; border:1px solid var(--line); flex:none}
.hleg{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:11.5px; color:var(--dim)}
.hleg span{display:inline-flex; align-items:center; gap:6px}
.rec td.swc{width:12px; padding-right:0}
.rec .arch{font-family:Inter,sans-serif; font-weight:590; font-size:22px; letter-spacing:-.005em}
.rec-grid{margin-top:8px}
.rec-sec{margin-top:30px}
.rec-sh{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0 0 10px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:590}
.rec-sh b{font-family:"JetBrains Mono",monospace; color:var(--accent); font-weight:590; letter-spacing:0}
.rec-sh span{text-transform:none; letter-spacing:0; font-weight:400}
.rec-2{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
.rec-hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0}
.rec-hero > div{padding:18px 20px}
.rec-hero > div + div{border-left:1px solid var(--line)}
.rec-hero .kpis{grid-template-columns:1fr 1fr; gap:18px 20px}
.rec-where{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center}
.rec-where > div{padding:14px 16px}
.rec-where table{margin-top:6px}
.rec-pitch{display:grid; grid-template-columns:repeat(3,1fr)}
.rec-pitch .grp{border-top:0; border-left:1px solid var(--hair); padding:14px 16px}
.rec-pitch .grp:first-child{border-left:0}
.rec .earned{border-top:1px solid var(--line); padding:12px 16px; display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline}
.rec .earned h4{margin:0 8px 0 0; font-size:12px; font-weight:590}
.rec-costs{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); padding:6px 4px}
.rec-costs div{display:flex; justify-content:space-between; gap:12px; padding:7px 12px; font-size:13px; border-bottom:1px solid var(--hair)}
.rec-costs b{font-family:"JetBrains Mono",monospace; font-weight:510}
.rec .sl-card{height:100%}
@media (max-width:860px){.rec-2,.rec-hero,.rec-where,.rec-pitch{grid-template-columns:1fr}
  .rec-hero > div + div{border-left:0; border-top:1px solid var(--line)}
  .rec-pitch .grp{border-left:0; border-top:1px solid var(--hair)} .rec-pitch .grp:first-child{border-top:0}}
.rec .body{padding:12px}
.rec .big{font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:590; line-height:1.1}
.rec .kpis{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.rec .kpis span{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:3px}
.rec .note{font-size:12.5px; color:var(--dim); margin:12px 0 0; line-height:1.5}
.rec .note b{color:var(--text)}
.rec .bar{height:6px; background:var(--pip-off); margin-top:10px}
.rec .bar i{display:block; height:100%; background:var(--accent)}
.rec .grp{padding:10px 12px; border-top:1px solid var(--hair)}
.rec .grp:first-child{border-top:0}
.rec .grp h4{margin:0 0 6px; font-size:12px; font-weight:590}
.rec .grp h4 small{font-weight:400; color:var(--faint); margin-left:6px}
.rec .gr{display:inline-flex; gap:6px; align-items:baseline; margin:0 12px 4px 0; font-size:13px}
.rec .gr b{font-family:"JetBrains Mono",monospace}
.rec ul.tips{margin:0; padding:12px 12px 12px 28px; font-size:12.5px; color:var(--dim); line-height:1.55}
.rec ul.tips li + li{margin-top:6px}
.rec ul.tips b{color:var(--text)}
.rec .hmap{max-width:none; margin:0}
.rec .hmap figcaption{font-size:11.5px; color:var(--faint); margin-top:6px}
.rec td.need{color:var(--accent-ink); font-weight:590}
.rec-src{font-size:11.5px; color:var(--faint); margin:22px 0 0; max-width:100ch}
.rec-src a{color:var(--dim)}

/* ---------- my dynasty ---------- */
.dlist{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line)}
.dbak{margin-top:22px; padding-top:16px; border-top:1px solid var(--line)}
.dbak-b{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.dbak-b .ghost{flex:1 1 140px}
.dbak-msg{margin-top:10px; color:var(--text)}
.dbak-msg.err,.sync-err{color:#B3261E}
.sync-h{margin:16px 0 6px; font-size:13px; font-weight:590}
.sy{max-height:calc(100vh - 40px); overflow:auto; margin-top:20px}
.sy .ks-h .ib{font-size:20px; line-height:1; color:var(--dim)}
.sync-lede{margin:0 0 14px}
.sync-txt{min-width:0}
.sync-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.sync-what{margin:0; padding-left:18px; font-size:13px; line-height:1.5}
.sync-what li{margin:0 0 4px}
.sync-more{display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:14px}
.sync-link{background:none; border:0; padding:0; font:12px Inter,sans-serif; color:var(--dim); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.sync-link:hover{color:var(--text)}
.sync-tip{margin:12px 0 0; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:12.5px; line-height:1.5; color:var(--dim)}
.sync-tip b{color:var(--text); font-weight:590}
.sync-alt{margin-top:12px}
.sync-foot{display:flex; justify-content:flex-end; margin-top:16px; padding-top:12px; border-top:1px solid var(--line)}
.sync-join{display:flex; gap:8px; margin-top:10px}
.sync-join input{flex:1; min-width:0; font:13px "JetBrains Mono",monospace; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); padding:7px 9px}
.sync-on{display:flex; gap:16px; align-items:flex-start}
@media (max-width:480px){.sync-on{flex-direction:column}}
.sync-qr{width:148px; padding:6px; background:#fff; border-radius:6px; line-height:0}
.sync-qr svg{width:100%; height:auto}
.sync-code{display:block; margin:6px 0 8px; font:590 15px "JetBrains Mono",monospace; letter-spacing:.04em; color:var(--text); user-select:all; overflow-wrap:anywhere}
.sync-st{color:var(--dim)}
:root[data-theme="dark"] .dbak-msg.err{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dbak-msg.err{color:#FF8A80}}
.dlist button{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; width:100%; text-align:left; font:inherit; color:var(--text);
  background:transparent; border:0; border-bottom:1px solid var(--line); border-left:3px solid transparent; padding:12px 14px; cursor:pointer}
.dlist button:hover{background:var(--raise)}
.dlist button[aria-pressed="true"]{background:var(--panel); border-left-color:var(--accent)}
.dlist b{font-weight:590; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dlist span{font-size:12px; color:var(--dim)}
.dlist small{grid-column:2; grid-row:1; white-space:nowrap; font:11px "JetBrains Mono",monospace; color:var(--faint)}
.dlist .bempty{padding:30px 14px}
.dname{display:block; width:100%; background:transparent; border:0; border-bottom:1px dashed transparent; color:var(--text); padding:0;
  font-family:Inter,sans-serif; font-weight:590;
  font-size:clamp(26px,4vw,40px); line-height:1.05; letter-spacing:-.015em; margin:8px 0 6px}
.dname:hover{border-bottom-color:var(--line)}
.dname:focus{outline:0; border-bottom-color:var(--accent)}
.dyn .sl{padding:0; max-width:none}
.dyn .rec-sec:first-child{margin-top:26px}
.dyn .rec-where .ghost{margin-top:12px; font-size:12.5px; padding:7px 13px}

/* ---------- sliders ---------- */
.sl{max-width:1500px; margin:0 auto; padding:24px 22px 80px}
.sl .hh{font-family:Inter,sans-serif;
  font-weight:590; font-size:20px; letter-spacing:-.005em; margin:0 0 4px}
.sl .hint{color:var(--dim); font-size:12.5px; margin:0; max-width:70ch}
.sl .hint a{color:var(--accent-ink); font-weight:590}
.sl-v{color:var(--accent)}
.ab-q{font:inherit; font-size:13px; padding:8px 10px; min-width:240px; max-width:100%; background:var(--panel); color:var(--text); border:1px solid var(--line)}
.ab-list{list-style:none; margin:0; padding:2px 12px 10px}
.ab-list li{display:grid; grid-template-columns:minmax(110px,34%) 1fr auto; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:12.5px}
.ab-list li:first-child{border-top:0}
.ab-clist li{grid-template-columns:28px 1fr auto; align-items:center; gap:12px; padding:12px 0}
.ab-clist.noico li{grid-template-columns:1fr auto}
.ab-clist .ab-slot{width:28px}
.ab-clist .ab-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.ab-clist .ab-tier{font:510 10.5px "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.ab-clist .ab-nm{font:590 14px/1.2 Inter,sans-serif; letter-spacing:-.011em; color:var(--text)}
.ab-clist .ab-ds{color:var(--dim); font-size:12.5px}
.ab-coin{display:inline-flex; align-items:center; gap:6px; font:590 16px Inter,sans-serif; color:var(--accent)}
.ab-coin::before{content:""; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#F6DC96,#C9962E 60%,#8A6417); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25)}
.ab-cost{font:590 12px "JetBrains Mono",monospace; font-style:normal; color:var(--accent-ink); white-space:nowrap; text-align:right}
.ab-cost small{display:block; font-weight:400; font-size:10px; color:var(--dim)}
.ab-list li span{color:var(--dim)}
.ab-ment{padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); column-gap:24px; max-width:1500px}
.ab-ment li:first-child{border-top:1px solid var(--line)}
@media (max-width:420px){.ab-ment{grid-template-columns:1fr}}
.ab-list li b{display:flex; align-items:center; gap:8px}
.ab-ico{width:28px; height:28px; flex:none; background:#161718; border-radius:6px; padding:3px; box-sizing:border-box}
.ab-ico.ab-badge{background:none; padding:0}
.ab-ah{display:flex; align-items:center; gap:8px}
.ab-ah .ab-badge{width:44px; height:44px}
.ab-cchip{display:inline-flex; align-items:center; gap:4px}
.ab-cchip .ab-badge{width:22px; height:22px; margin:-3px 0}
.ab-arch + .ab-arch{margin-top:34px}
.ab-ah{margin:0 0 10px; font-size:17px}
.ab-ah span{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); font-weight:400; padding-left:6px}
.ab-meta dl{display:flex; flex-wrap:wrap; gap:8px 28px; margin:0 0 18px; font-size:12.5px}
.ab-meta dt{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.ab-meta dd{margin:2px 0 0; max-width:48ch}
.ab-list b small{font-weight:400; color:var(--dim); font-size:10.5px}
.sl .ab-src{margin-top:30px}
/* ability tier metals (CollegeFootball.gg tier colors, solid with black text): meaning colors, deliberately outside the design system; same in both themes */
.mt0{--mt:#CD7F32} .mt1{--mt:#C0C0C0} .mt2{--mt:#FFD700} .mt3{--mt:#A93BCB}
.mt{display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:4px; border:1px solid var(--mt);
  background:var(--mt); color:#000; font:590 13px "JetBrains Mono",monospace; white-space:nowrap}
.ab-list .mt,.ab-legend .mt{color:#000}
/* platinum purple is too dark for black text (4.2:1); white reads at 5:1 */
.ab-list .mt3,.ab-legend .mt3{color:#fff} .mt.mt3 small{color:rgba(255,255,255,.85)}
.mt small{display:inline-flex; align-items:center; gap:2px; font-size:11.5px; color:rgba(0,0,0,.65)}
/* skill point icon: the game's gold helmet diamond, clipped to the diamond so no background shows */
.spi{display:inline-block; width:14px; height:14px; background:url(../ab/sp.png) center/cover; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); vertical-align:-1px}
.ab-gate{grid-column:1 / -1; display:flex; flex-direction:column; gap:6px; margin-top:-2px}
.ab-gl{display:flex; flex-wrap:wrap; align-items:center; gap:3px}
.ab-list .ab-gr{font-size:11px; color:var(--faint); margin-right:2px; width:100%}
.ab-gr em{font-style:normal; font-weight:590; color:var(--dim)}
.ab-legend .mt{margin-right:8px}
.sl .ab-legend{margin:18px 0 0}

.sl-head{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end; justify-content:space-between}
.sl-new{font-size:12.5px; color:var(--dim); margin:16px 0 20px; padding:10px 12px;
  background:var(--panel); border-left:3px solid var(--accent); max-width:100ch}
.sl-new b{color:var(--text)}
.sl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; align-items:start}
.sl-card{background:var(--panel); border:1px solid var(--line)}
.sl-card h3{margin:0; padding:10px 12px 8px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); font-weight:590; border-bottom:1px solid var(--line); display:flex; justify-content:space-between}
.sl-card h3 span{letter-spacing:.02em; text-transform:none; font-weight:400}
.sl-card h3 .h3n{display:flex; align-items:center; gap:8px}
.sl-card h3 .ab-ico{width:20px; height:20px; padding:2px}
.sl-card h3 span .abfav{margin-left:8px; padding:0 2px; border:0; background:none; color:var(--faint); font-size:14px; line-height:1; cursor:pointer; vertical-align:-1px}
.sl-card h3 span .abfav:hover,.sl-card h3 span .abfav[aria-pressed="true"]{color:var(--accent)}
.abfn{margin-left:4px; color:var(--accent); font-size:11px}
[aria-pressed="true"] .abfn{color:inherit}
.pc-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:16px}
.pc-form label{display:flex; flex-direction:column; gap:4px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.pc-form select,.pc-form input,.pc-form textarea{font:inherit; font-size:12.5px; letter-spacing:0; text-transform:none; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--text); padding:6px 8px; min-width:120px}
.pc-form .pc-note{flex:1; min-width:200px}
.pc-arrow{color:var(--faint); padding-bottom:7px}
.pc-form button:disabled{opacity:.45; cursor:not-allowed}
.pc-del{border:0; background:none; color:var(--faint); font-size:16px; line-height:1; cursor:pointer; padding:0 2px}
.pc-del:hover{color:var(--text)}
.pc-move{margin:0; padding:12px; font-size:14px}
.pc-move span{color:var(--dim); font-size:12px}
.pc-move i{font-style:normal; color:var(--faint); margin:0 4px}
.pc-unk{color:var(--dim); font-weight:400}
.pc-form textarea,.pc-n{resize:none; overflow:hidden; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere}
.pc-n{display:block; width:calc(100% - 24px); margin:0 12px 12px; font:inherit; font-size:12.5px; color:var(--dim); background:transparent; border:1px solid transparent; border-radius:6px; padding:5px 8px}
.ab-n{margin:10px 12px 12px; border-color:var(--line)}
.pc-n:hover{border-color:var(--line)}
.pc-n:focus{border-color:var(--accent); color:var(--text); outline:none}
@media (max-width:600px){.pc-arrow{display:none} .pc-form label{flex:1 1 45%}}
.sl table{min-width:0}
.sl th{position:static; cursor:default; padding:8px 12px 6px; background:transparent}
.sl th:hover{color:var(--faint)}
.sl tbody tr{cursor:default}
.sl tbody tr:hover{background:transparent}
.sl td{padding:6px 12px}
.sl td.l{color:var(--text)}
.sl td.mono{font-size:13px}
.sl-chg{color:var(--accent-ink); font-weight:590; background:var(--accent-soft); padding:0 4px}
.sl td.chg{color:var(--accent-ink); font-weight:590; background:var(--accent-soft)}
/* ---------- dynasty planner (chat) ---------- */
.masthead{position:relative}
.mhact{position:absolute; top:22px; right:22px; display:flex; gap:8px}
/* Narrower than this, the floating buttons would cover the intro text or the logo: give them their own row on top. */
@media (max-width:1199px){.mhact{position:static; order:-1; width:100%; justify-content:flex-end; margin-top:-12px}}
.themebtn{padding:8px}
.coachbtn{display:flex; align-items:center; gap:7px; background:var(--panel); color:var(--text);
  border:1px solid var(--line); padding:8px 12px 8px 10px; font:590 13px Inter,sans-serif; cursor:pointer}
.coachbtn:hover,.coachbtn[aria-expanded="true"]{border-color:var(--accent); color:var(--accent-ink)}
.coachbtn svg{display:block}
/* Sync is the masthead's call to action until it's on, then it quiets down to a status button. */
.syncbtn{background:var(--cta); border-color:var(--cta); color:var(--on-cta)}
.syncbtn:hover{filter:brightness(1.06); border-color:var(--cta); color:var(--on-cta)}
.syncbtn.on{background:var(--panel); border-color:var(--line); color:var(--text)}
.syncbtn.on:hover{filter:none; border-color:var(--accent); color:var(--accent-ink)}

body{transition:margin-right .24s cubic-bezier(.4,0,.2,1)}
body.coach-on{margin-right:400px}
.pchat{position:fixed; top:0; right:0; bottom:0; z-index:45; width:400px; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden;
  transition:transform .24s cubic-bezier(.4,0,.2,1), visibility 0s .24s; padding-bottom:env(safe-area-inset-bottom,0px)}
.pchat.on{transform:none; visibility:visible; transition:transform .24s cubic-bezier(.4,0,.2,1)}
.phead{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line)}
.phead h2{margin:0; flex:1; font:590 15px/1 Inter,sans-serif; letter-spacing:-.011em}
.pai{font:510 12px Inter,sans-serif; background:transparent; color:var(--dim); border:1px solid var(--line); padding:5px 9px; cursor:pointer}
.pai[aria-pressed="true"]{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft)}
.pai:disabled{opacity:.5; cursor:not-allowed}
.plog{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px}
.pm{max-width:92%; font-size:13.5px; line-height:1.5}
.pm.me{align-self:flex-end; background:var(--accent-soft); color:var(--text); padding:8px 11px}
.pm.bot{align-self:flex-start}
.pm.bot p{margin:0 0 8px}
.pm.bot .pguess,.pm.bot .pthink{color:var(--dim); font-size:12px}
.pm.bot h4{margin:12px 0 4px; font:590 11px "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink)}
.pm.bot h4:first-child{margin-top:0}
.pm.bot ul{margin:0 0 6px; padding-left:18px}
.pm.bot li{margin:0 0 4px}
.pcopy{display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin:4px 0 -4px auto; padding:0; border:0; border-radius:4px;
  background:none; color:var(--faint); cursor:pointer; opacity:.6}
.pm.bot .pcopy{margin-left:-5px}
.pdyn{display:block; margin:12px 0 2px; font:510 12.5px Inter,sans-serif; padding:7px 12px; border:1px solid var(--accent); border-radius:6px;
  background:transparent; color:var(--accent); cursor:pointer}
.pdyn:hover{background:var(--accent-soft)}
.pdyn[data-did]{border-color:var(--line); color:var(--dim)}
.pcopy svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.pm:hover .pcopy,.pcopy:focus-visible{opacity:1}
.pcopy:hover{color:var(--text); background:var(--line)}
@media (hover:none){.pcopy{opacity:1}}
.pstat{margin:0; padding:6px 14px 0; font-size:11px; color:var(--faint)}
.pform{display:flex; gap:8px; padding:10px 14px 14px; border-top:1px solid var(--line)}
.pform{align-items:flex-end}
.pform textarea{flex:1; min-width:0; resize:none; overflow-y:auto; max-height:140px; line-height:1.4; font:14px Inter,sans-serif; padding:9px 10px; border:1px solid var(--line); background:var(--ground); color:var(--text)}
.pform button{font:590 13px Inter,sans-serif; border:0; background:var(--cta); color:var(--on-cta); padding:0 14px; height:38px; cursor:pointer}
/* With Coach open, the dossier docks to Coach's left edge and slides out from under it. */
body.coach-on .dossier{right:400px; width:min(640px,calc(100vw - 400px)); z-index:44}
/* Phones: no room to push the page, so Coach takes the full screen and the page behind stops scrolling. */
@media (max-width:900px){
  body.coach-on{margin-right:0; overflow:hidden}
  body.coach-on .dossier{right:0; width:100vw; z-index:50}
  .pchat{width:100vw; border-left:0; padding-top:env(safe-area-inset-top,0px)}
  .mhact{top:18px; right:16px}
  .coachbtn{padding:7px 10px}
  .pform textarea{font-size:16px}
}

/* ---------- Linear design system layer ---------- */
body{font-feature-settings:"cv01","ss03","zero"; letter-spacing:-.011em}
.mono,code,kbd{font-feature-settings:"cv01","ss03"; letter-spacing:-.013em}
.wordmark,.dname,.bname,.result .rname{font-weight:510; letter-spacing:-.022em}
.wordmark em{color:var(--logo-em)}
.rand h2,.house .hh,.sl .hh,.pcard .pname,.rec .arch{font-weight:590; letter-spacing:-.012em}
.pre b,.ab-clist .ab-nm,.phead h2{letter-spacing:-.011em}
.tab{font-weight:510}
.tab[aria-selected="true"]{font-weight:590}
/* radii: 4 badges, 6 controls, 12 cards (the ceiling) */
.tag,.dev,.lkt,.ctag,.sl-chg,mark.hit{border-radius:4px}
.search,.chip,.ghost,.ib,.dclose,.seg,.hfi,.ab-q,.pmode select,.coachbtn,.pai,.pform textarea,.pform button,
.roll,.rmore,.pre,.cb,.pm.me,.hbuild,.tgl .trk{border-radius:6px}
.tgl .trk{border-radius:9px}
.result,.pmap,.pcard,.book,.lib,.sl-card,.hfprev,.hf,.psave,.rstats,.sl-new{border-radius:12px}
.seg,.rstats,.book,.sl-card,.lib{overflow:hidden}
.sl-new{border-left:0; box-shadow:inset 3px 0 0 var(--accent); border-radius:6px}
.nilbar,.gbar,.rec .bar,.meter i{border-radius:2px}
.nilbar i,.gbar i,.rec .bar i{border-radius:2px}
/* hairlines in place of shadows; overlays keep the one floating shadow */
.dossier{box-shadow:var(--shadow)}
/* motion: short, no bounce */
.chip,.ghost,.ib,.tab,.pre,.search,.coachbtn,.rmore,tbody tr{transition:color 120ms var(--ease),background-color 120ms var(--ease),border-color 120ms var(--ease)}
:focus-visible{outline:1px solid var(--focus); outline-offset:2px}

/* ---- Phone tab bar (tabs.js, under 768px): floating pill of four tabs + More, round Coach button, menu panel above ---- */
.mbar{display:none}
@media (max-width:767px){
  .tabs, .mhact{display:none}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .mbar{display:flex; align-items:flex-end; gap:10px; position:fixed; z-index:42; left:12px; right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  body.coach-on .mbar{display:none}
  .mpill{flex:1; display:flex; height:64px; padding:4px; border-radius:32px; background:color-mix(in srgb,var(--panel) 82%,transparent);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--line)}
  .mpill button{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border:0; border-radius:28px; background:none; color:var(--dim); font:510 11px/1.1 Inter,sans-serif; cursor:pointer}
  .mpill button.on{background:var(--raise); color:var(--text)}
  .mpill svg, .mcoach svg{width:23px; height:23px}
  .mpill button:focus-visible, .mcoach:focus-visible, .mmenu button:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
  .mcoach{flex:none; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
    background:color-mix(in srgb,var(--panel) 82%,transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border:1px solid var(--line); color:var(--accent); cursor:pointer}
  .mmenu{position:absolute; left:0; bottom:74px; width:min(280px,calc(100vw - 24px)); max-height:calc(100vh - 140px); overflow-y:auto;
    padding:6px; border-radius:12px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow);
    animation:mup .16s var(--ease)}
  .mmenu button{display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:0 12px; border:0; border-radius:6px;
    background:none; color:var(--text); font:400 15px Inter,sans-serif; text-align:left; cursor:pointer}
  .mmenu button svg{color:var(--dim)}
  .mmenu button.on{background:var(--raise)}
  .mmenu hr{border:0; border-top:1px solid var(--line); margin:6px 4px}
}
@keyframes mup{from{opacity:0; transform:translateY(8px)}}
@media (max-width:767px){
  .mhead{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 6px 8px 12px; color:var(--dim); font-size:13px}
  .mhead b{font:510 12px "JetBrains Mono",monospace; color:var(--text); margin-left:4px}
  .mmenu .mdone{width:auto; min-height:32px; padding:0 14px; background:var(--cta); color:var(--on-cta); font-weight:510; font-size:13px}
  .mmenu button.off{opacity:.45}
  .mchk{margin-left:auto; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center;
    font:590 11px Inter,sans-serif; color:var(--on-cta)}
  .mchk.on{background:var(--cta); border-color:var(--cta)}
}

/* ---- Phone bottom sheets (tabs.js sheet()): dialogs and the dossier dock to the bottom, grab handle on top ---- */
.grab{display:none}
@media (max-width:767px){
  .grab{display:block; position:sticky; top:0; z-index:3; height:22px; margin-bottom:-6px; background:var(--panel); cursor:grab; touch-action:none}
  .grab::before{content:""; position:absolute; left:50%; top:8px; width:36px; height:5px; margin-left:-18px; border-radius:3px; background:var(--line)}
  dialog.gs, dialog.gs.plc, dialog.gs.sy{width:100%; max-width:100%; margin:auto 0 0; max-height:88vh; overflow:auto; overscroll-behavior:contain;
    border-radius:12px 12px 0 0; border-width:1px 0 0; padding-bottom:env(safe-area-inset-bottom,0px);
    transition:transform .2s var(--ease); animation:sheetup .26s var(--ease)}
  dialog.gs.ks, dialog.gs.plc, dialog.gs.sy{padding-left:16px; padding-right:16px}
  dialog.gs.ks .grab, dialog.gs.plc .grab, dialog.gs.sy .grab{margin:0 -16px -6px}
  #gs{height:88vh; flex-direction:column; overflow:hidden}
  #gs[open]{display:flex}
  #gs .search{flex:none}
  #gs .cb{max-height:none; flex:1}
  .dossier{top:auto; left:0; width:100%; height:92vh; border-left:0; border-top:1px solid var(--line); border-radius:12px 12px 0 0;
    overflow:hidden; transform:translateY(100%); padding-bottom:env(safe-area-inset-bottom,0px)}
  .dossier.on{transform:none}
  .dossier .grab{position:static; flex:none}
  .dhead{padding-top:8px}
}
@keyframes sheetup{from{transform:translateY(100%)}}
@media (max-width:767px){
  .gs .search kbd{display:none}
  .ks-h .ib:has(kbd){font-size:20px; line-height:1; color:var(--dim)}
  .ks-h .ib:has(kbd)::after{content:"\00d7"}
  .ks-h .ib kbd{display:none}
}

/* ---- Phone card lists: Program, Coach and Player Database rows become cards; the header row becomes sort chips ---- */
@media (max-width:767px){
  #viewBoard table, .ctab{display:block; min-width:0 !important; width:100%}
  #viewBoard thead, .ctab thead, #viewBoard tbody, .ctab tbody{display:block}
  #viewBoard thead tr, .ctab thead tr{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:10px 16px; border-bottom:1px solid var(--line)}
  #viewBoard thead th, .ctab thead th{position:static !important; flex:none; width:auto !important; min-width:0 !important; max-width:none !important;
    padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--panel); box-shadow:none !important; white-space:nowrap; font-size:12px}
  #viewBoard thead th[aria-sort], .ctab thead th[aria-sort]{border-color:var(--accent); background:var(--accent-soft)}
  #viewBoard thead th[data-k="rk"]{display:none}
  #viewBoard tbody tr, .ctab tbody tr{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:12px 16px; border-bottom:1px solid var(--hair)}
  #viewBoard tbody td, .ctab tbody td{display:block; position:static !important; width:auto !important; min-width:0 !important; max-width:none !important;
    padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; text-align:left; white-space:normal}
  /* line 1: lead cell (hangs in the left gutter), name (grows), big number on the right; then the school/conference line, then labelled stats */
  #viewBoard tbody tr, .ctab tbody tr{padding-left:56px}
  #viewBoard tbody td, .ctab tbody td{order:3}
  #viewBoard tbody td:nth-child(1), .ctab tbody td:nth-child(1){order:0; width:26px !important; margin-left:-40px; color:var(--faint); font-size:12.5px}
  #viewBoard tbody td:nth-child(2), .ctab tbody td:nth-child(2){order:1; flex:1 1 0; font-size:15px}
  #viewBoard tbody td:nth-child(4), #viewCoach tbody td:nth-child(4), #viewPlay tbody td:nth-child(6){order:1; font-size:20px}
  #viewBoard tbody td:nth-child(3), .ctab tbody td:nth-child(3){order:2; flex-basis:100%}
  #viewBoard tbody td:nth-child(n+3), .ctab tbody td:nth-child(n+3){font-size:12.5px}
  #viewBoard tbody td:nth-child(4), #viewCoach tbody td:nth-child(4), #viewPlay tbody td:nth-child(6){font-size:20px}
  #viewBoard tbody td::before, .ctab tbody td::before{font:510 10px Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-right:5px}
  #viewBoard tbody td:nth-child(5)::before{content:"Off"} #viewBoard tbody td:nth-child(6)::before{content:"Def"}
  #viewBoard tbody td:nth-child(8)::before{content:"Titles"} #viewBoard tbody td:nth-child(9)::before{content:"NIL"}
  #viewBoard tbody td:nth-child(10)::before{content:"Avg"} #viewBoard .nilbar{display:none}
  #viewCoach tbody td:nth-child(5)::before{content:"Grade"}
  #viewPlay tbody td:nth-child(7)::before{content:"Spd"}
  #viewPlay tbody td.rt{display:none}
  .plscroll{overflow:visible; max-height:none}
}
/* Team sheet coaching staff on phones: two tight lines per coach. Line 1 role, name, level; line 2 grade · archetype · pipeline. */
@media (max-width:767px){
  .rost.staff, .rost.staff tbody{display:block; width:100%}
  .rost.staff thead{display:none}
  .rost.staff tr{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; padding:7px 0 7px 34px; border-bottom:1px solid var(--hair)}
  .rost.staff td{display:block; padding:0 !important; border:0 !important; text-align:left; order:3; font-size:12px; color:var(--dim)}
  .rost.staff td:nth-child(1){order:0; width:26px; margin-left:-34px; color:var(--faint)}
  .rost.staff td:nth-child(2){order:1; flex:1 1 0; font-size:14px; color:var(--text)}
  .rost.staff td:nth-child(3){order:1; font-size:14px; color:var(--text)}
  .rost.staff tr::after{content:""; order:2; flex-basis:100%; height:0}
  .rost.staff td:nth-child(n+5)::before{content:"\00b7"; margin-right:8px; color:var(--faint)}
}


/* ---- Coach card (coaches.js ccCard), shown in the player card sheet ---- */
.cc-h{display:flex; align-items:center; gap:8px; margin:20px 0 6px !important; font-size:15px !important; text-transform:none !important; letter-spacing:0 !important; color:var(--text) !important; font-weight:590 !important}
.cc-h span{font-size:12px; font-weight:400; color:var(--dim)}
.cc-h .ab-badge{width:28px; height:28px}
.cc-p{margin:4px 0; font-size:13px; color:var(--dim)} .cc-p b{color:var(--text); font-weight:510; margin-right:4px}
.cc-b{margin:14px 0 4px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:510}
.cc-l{margin:0; padding:0; list-style:none} .cc-l li{padding:5px 0; font-size:13px; color:var(--dim); border-bottom:1px solid var(--hair)} .cc-l b{color:var(--text); font-weight:510; margin-right:4px}
.cc-more{margin-top:12px}
.cc-st{display:grid; grid-template-columns:30px 1fr auto 30px; gap:10px; align-items:baseline; width:100%; padding:10px 6px; border:0; border-bottom:1px solid var(--hair);
  background:none; color:var(--text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; border-radius:6px}
.cc-st:hover, .cc-st.on{background:var(--raise)} .cc-st span{color:var(--dim); font-size:12.5px} .cc-st .mono:last-child{text-align:right; color:var(--text)}
.rost tbody tr[data-pl], .rost.staff tbody tr{cursor:pointer} .rost tbody tr[data-pl]:hover, .rost.staff tbody tr:hover{background:var(--raise)}
.cc-sum{margin-top:22px !important}
.cc-arch{margin-top:6px; padding-top:4px; border-top:1px solid var(--line)}
.cc-own{margin:6px 0 0; padding:0}
.cc-pos{display:flex; flex-wrap:wrap; gap:3px}
.cc-pos i{font:510 10px "JetBrains Mono",monospace; font-style:normal; padding:1px 5px; border:1px solid var(--line); border-radius:4px; color:var(--dim)}
.cc-arch summary{cursor:pointer; list-style:none; padding:4px 0}
.cc-arch summary::-webkit-details-marker{display:none}
.cc-arch summary::after{content:"\25BE"; margin-left:auto; color:var(--faint); font-size:12px; transition:transform .15s var(--ease)}
.cc-arch:not([open]) summary::after{transform:rotate(-90deg)}
.cc-arch:not([open]){padding-bottom:4px}

/* ---- Pop-ups own the scroll: while a dialog or the dossier is open the page behind can't scroll, and scrolling
   inside a pop-up never spills over to the page. ---- */
html:has(dialog[open]), html:has(.dossier.on){overflow:hidden}
dialog, .dossier .dbody{overscroll-behavior:contain}

/* ---- Dossier header stats strip (board.js facts) ---- */
.dfacts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:14px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.dfacts div{display:flex; flex-direction:column; gap:2px; min-width:0; padding:8px 12px; background:var(--panel)}
.dfacts .lbl{font-family:Inter,sans-serif; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.dfacts b{font-weight:590; font-size:18px; line-height:1.25; overflow-wrap:anywhere}
.dfacts .mono b{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}
.dfacts .dstad b{font-size:13.5px; line-height:1.35; margin-top:2px}
.dfacts .sub{font-size:11.5px; color:var(--dim); overflow-wrap:anywhere}
.dfacts .stars{font-size:13px}
.dbody > h3:first-child{margin-top:18px}
@media (max-width:480px){.dfacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Desktop: the dossier is a centered card like the player and coach cards (phones keep the bottom sheet). */
@media (min-width:768px){
  .dossier{top:40px; bottom:40px; left:50%; right:auto; width:min(760px,calc(100vw - 48px)); border:1px solid var(--line); border-radius:12px; overflow:hidden;
    transform:translate(-50%,12px); opacity:0; transition:transform .2s var(--ease), opacity .2s var(--ease)}
  .dossier.on{transform:translate(-50%,0); opacity:1}
  .dossier .grades{display:grid; grid-template-columns:1fr 1fr; column-gap:28px}
}
@media (min-width:901px){
  body.coach-on .dossier{right:auto; left:calc((100vw - 400px) / 2); width:min(760px,calc(100vw - 448px))}
}

/* ---- Recruiting board (recruiting.js rbDraw): defense on top facing the offense, special teams below; cards placed at --g (desktop) or --m (phone) cells from RBXY ---- */
#recMode{margin:4px 0 14px}
.rb-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-bottom:12px}
.rb-bar .hint{margin:0}
.rb{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:6px 14px 14px}
.rb-side h3{margin:10px 0 8px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:510}
.rb-f{display:grid; gap:8px; justify-content:center; grid-template-columns:repeat(9,minmax(0,108px))}
.rb-o{border-top:2px dashed var(--line); margin-top:14px}
.rb-s{border-top:1px solid var(--line); margin-top:14px}
.rb-s .rb-f{grid-template-columns:repeat(2,minmax(0,108px))}
.rb-c{grid-area:var(--g); display:flex; flex-direction:column; min-width:0; min-height:62px; padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--ground); color:var(--faint); font:inherit; cursor:pointer; text-align:center}
.rb-c b{background:var(--raise); color:var(--text); font:590 11px/1 "JetBrains Mono",monospace; padding:5px 2px; letter-spacing:.02em}
.rb-c span{flex:1; display:grid; place-items:center; padding:5px 4px; font-size:12px; line-height:1.2; overflow-wrap:anywhere}
.rb-c:hover{border-color:var(--accent)}
.rb-c:focus-visible{outline:2px solid var(--focus); outline-offset:1px}
.rb-c.on{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.rb-c.on b{background:var(--accent); color:var(--on-cta)}
.rb-c.on span{color:var(--text); font-weight:510}
.rb-c.sub b{box-shadow:inset 0 -2px 0 var(--accent)}
.rb-subs .chip{font-family:"JetBrains Mono",monospace}
.rb-pick{display:grid; gap:6px; margin-bottom:12px}
.rb-pick button{display:flex; flex-direction:column; gap:3px; text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:6px;
  background:var(--ground); color:var(--text); font:inherit; cursor:pointer}
.rb-pick button:hover{border-color:var(--accent)}
.rb-pick button[aria-pressed="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--ground))}
.rb-pick b{font-weight:590; font-size:14px; display:flex; align-items:center; gap:8px}
.rb-pick i{font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:var(--raise); color:var(--accent)}
.rb-pick span{font-size:12px; color:var(--dim)}
@media (max-width:767px){
  .rb{padding:2px 8px 10px}
  .rb-f{gap:5px}
  .rb-d .rb-f{grid-template-columns:repeat(5,minmax(0,1fr));}
  .rb-o .rb-f{grid-template-columns:repeat(6,minmax(0,1fr));}
  .rb-s .rb-f{grid-template-columns:repeat(2,minmax(0,96px))}
  .rb-c{grid-area:var(--m); min-height:56px}
  .rb-c span{font-size:9.5px; padding:4px 1px; letter-spacing:-.01em}
}
/* ---- Phones: tighter sizing (owner, Oct 2026) ---- */
@media (max-width:767px){
  /* logo on one line instead of two big ones */
  .masthead{padding-top:16px}
  .wordmark{font-size:24px; line-height:1.1}
  .wordmark br{display:none}
  .wordmark em{margin-left:.25em}
  .rail{margin-top:12px}
  /* filter chip rows: one row that scrolls sideways instead of three wrapped rows */
  #chips, #plpos, #cchips, #abPos, #abArch{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-left:-22px; margin-right:-22px; padding:0 22px; width:calc(100% + 44px); max-width:none}
  #chips::-webkit-scrollbar, #plpos::-webkit-scrollbar, #cchips::-webkit-scrollbar, #abPos::-webkit-scrollbar, #abArch::-webkit-scrollbar{display:none}
  #chips .chip, #plpos .chip, #cchips .chip, #abPos .chip, #abArch .chip{flex:none}
  #abPos, #abArch{margin:12px -22px !important}
  /* Programs: Reset sits beside the search box */
  .rail-in .search{flex:1 1 100%}
  #viewBoard .rail-in .search{flex:1 1 0; order:0}
  #reset{order:1}
  #viewBoard .rail-in .spacer{display:none}
  #chips{order:2}
  /* team card header: a compact 4-across stats strip instead of a tall 2-column grid */
  .dname{font-size:22px}
  .motto{margin-top:6px}
  .dfacts{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:10px; border-radius:6px}
  .dfacts div{padding:5px 8px; gap:0}
  .dfacts .lbl{font-size:9px}
  .dfacts b{font-size:15px}
  .dfacts .sub{font-size:10px; line-height:1.3}
  .dfacts .stars{display:none}
  .dfacts .mut{color:var(--text)}
  .dfacts div:nth-child(6){grid-column:span 2}
  .dfacts .dstad{grid-column:1/-1; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:0 8px}
  .dfacts .dstad b{font-size:13px; margin:0}
  /* ability unlock chips */
  .mt{font-size:11.5px; padding:1px 5px}
  .mt small{font-size:10.5px}
}
/* Phones: Abilities search collapses to a magnifying-glass button right of the mode chips; it opens full width on tap */
@media (max-width:767px){
  #viewAb .sl-head{display:grid; grid-template-columns:auto 1fr; gap:10px 8px; align-items:center}
  #viewAb .sl-head > div{display:contents}
  #viewAb .sl-head .hh{grid-column:1/-1}
  #abMode{margin-top:0 !important}
  #abQ{justify-self:start; min-width:0; width:36px; height:32px; padding:0; border-radius:6px; cursor:pointer; color:transparent;
    background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/16px no-repeat}
  #abQ::placeholder{color:transparent}
  #abQ:focus, #abQ:not(:placeholder-shown){grid-column:1/-1; width:100%; padding:8px 10px 8px 34px; color:var(--text); cursor:text; background-position:10px center}
  #abQ:focus::placeholder{color:var(--faint)}
}
/* Phones: My Dynasty's Back up / Restore block moves to the bottom of the page, under the open dynasty */
@media (max-width:767px){
  #viewDyn{display:flex; flex-direction:column; gap:0}
  #viewDyn > div:first-child{display:contents}
  #viewDyn #dView{margin-top:26px}
  #viewDyn .seg, #viewDyn .dlist{width:100%; box-sizing:border-box}
  #viewDyn .dbak{order:1; margin-top:30px}
}
/* Phones: Coach is a bottom-sheet card like the team card (rounded top, grab handle, page dimmed behind), not a full screen */
@media (max-width:767px){
  .pchat{top:auto; height:92vh; height:92dvh; padding-top:0; border-top:1px solid var(--line); border-radius:12px 12px 0 0;
    transform:translateY(100%); box-shadow:0 0 0 100vmax rgba(0,0,0,0)}
  .pchat.on{transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.5); transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s}
  .pchat .grab{position:static; flex:none; border-radius:12px 12px 0 0}
  .pchat .phead{padding-top:4px}
}
@media (max-width:767px){
  body.coach-lock{position:fixed; left:0; right:0; overflow:hidden}
  .plog{overscroll-behavior:contain}
}
/* Player archetype under the name (dossier roster, Player Database) and as a link on the player card */
.parch{display:block; font-size:11.5px; font-weight:400; color:var(--dim); margin-top:2px}
.plc-arch{font:inherit; color:var(--accent-ink); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
/* Phones: Physical abilities. Archetype cards collapse to their name and ability names (tap to open), ability rows
   stack (icon, name and description as one paragraph, then the rating and tier chips), and the position chips stay pinned. */
.ab-sum{display:none}
@media (max-width:767px){
  #abPos{position:sticky; top:0; z-index:6; background:var(--ground); padding-top:8px !important; padding-bottom:8px !important; margin-top:4px !important}
  .ab-card h3{cursor:pointer; position:relative; padding-right:36px}
  .ab-card h3::after{content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; margin-top:-5px; border:solid var(--faint); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); transition:transform .15s}
  .ab-card.open h3::after{transform:rotate(-135deg); margin-top:-1px}
  .ab-card:not(.open) .ab-list, .ab-card:not(.open) .ab-n{display:none}
  .ab-card:not(.open) .ab-sum{display:flex; flex-wrap:wrap; gap:6px 12px; margin:0; padding:0 12px 12px; cursor:pointer; font-size:12.5px; color:var(--dim)}
  .ab-sum span{display:inline-flex; align-items:center; gap:6px}
  .ab-sum .ab-ico{width:22px; height:22px; padding:2px}
  .ab-list:not(.ab-clist) li{display:block; position:relative; padding:8px 0 8px 38px; min-height:28px}
  .ab-list:not(.ab-clist) li b{display:inline}
  .ab-list:not(.ab-clist) li b .ab-ico{position:absolute; left:0; top:8px}
  .ab-list:not(.ab-clist) li > span{display:inline; margin-left:6px}
  .ab-list:not(.ab-clist) .ab-gate{margin-top:6px}
  .ab-list .ab-gr{width:auto; margin-right:4px}
}
/* An archetype card with a note shows a note icon in its header (on phones only while the card is closed) */
.ab-noted{display:none}
.ab-card.noted .ab-noted{display:inline-flex; vertical-align:-2px; margin-right:8px; color:var(--accent)}
@media (max-width:767px){.ab-card.noted.open .ab-noted{display:none}}
/* Recruiting board: second-choice archetype under the first on a card, and the 1st/2nd choice switch in the sheet */
.rb-c span small{display:block; margin-top:2px; font-size:10.5px; font-weight:400; color:var(--dim)}
.rb-w{margin:4px 0 12px}
.rb-pick i.rb-oth{color:var(--dim)}
@media (max-width:767px){.rb-c span small{font-size:8.5px}}
/* iPhone zooms into any text field under 16px and stays zoomed after typing (owner, Oct 2026), so phone fields are 16px. */
@media (max-width:767px){input,select,textarea{font-size:16px!important}}
/* Sliders title: "CFB27 Sliders by [Matt10 | Armor & Sword]", the author chips sit inside the heading. */
.sl-title{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:8px}
#viewSlide .sl-head{margin-bottom:20px}
.sl-seg{display:inline-flex; gap:6px}
/* Sliders: transfer portal tips under the slider cards. */
.sl-mode{margin-bottom:18px}
.sl-tp-h{margin:0 0 4px}
.sl-tp-sub{margin:0 0 16px}
.sl-tip p{margin:0; padding:0 12px 10px; font-size:13px; line-height:1.5; color:var(--dim)}
.sl-tip p:first-of-type{color:var(--text)}
.sl-tip .sl-tip-do{color:var(--text)}
.sl-tip-do b{color:var(--accent); font-weight:590}
.sl-tp td small{display:block; font-size:11.5px; color:var(--faint)}