/* ui.css — NFL views. Layout and composition only, built from the primitives in
   tokens.css (.p .card .sub .cell .strip .banner .gpill .chip .tag table.t …).
   Surfaces, fonts, borders and radii are never defined here; the few hsl() tones
   that remain are one-off view tints (rank rails, depth-chart slots) with no
   shared equivalent yet. Scoped under #v-* so nothing fights. */

/* ---- slate ---- */
#v-slate .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:16px}
#v-slate .gp-t{font-family:var(--font-num);font-size:9px;color:var(--ac);letter-spacing:.08em}
#v-slate .gp-t em{font-style:normal;color:var(--d2);margin-left:6px}
#v-slate .mt{font-size:15px;font-weight:700;margin-top:5px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px}
#v-slate .mt em{font-style:normal;color:var(--d2);font-weight:400;font-size:12px}
#v-slate .mt .fin{margin-left:auto;font-family:var(--font-num);font-size:11px;color:var(--d1);font-weight:400}
#v-slate .mk{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px}
#v-slate .fl{margin-top:8px;min-height:14px}
#v-slate .strip .dn-key{margin-left:auto}

/* ---- games ---- */
#v-games .hero{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:14px}
#v-games .hero .tm{font-size:22px;font-weight:800;letter-spacing:-.03em}
#v-games .hero .tm small{display:block;font-family:var(--font-num);font-size:10px;color:var(--d2);font-weight:400;letter-spacing:.04em;margin-top:3px}
#v-games .hero .tm.r{text-align:right}
#v-games .hero .sc{text-align:center}
#v-games .hero .sc b{font-family:var(--font-num);font-size:30px;letter-spacing:-.02em}
#v-games .hero .sc i{display:block;font-style:normal;font-family:var(--font-num);font-size:9.5px;color:var(--d2);letter-spacing:.08em;text-transform:uppercase}
#v-games .parts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
#v-games .parts .cell{padding:8px 10px}
#v-games .parts .cell>b{font-size:15px}
#v-games .hist{width:100%;height:120px;display:block}
#v-games .units td.v{width:64px}
#v-games .qb{font-family:var(--font-num);font-size:11px;line-height:1.7}
#v-games .qb b{color:var(--ac2)}
/* who matters — two .sub boxes side by side */
#v-games .kpwrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
@media(max-width:800px){#v-games .kpwrap{grid-template-columns:1fr}}
#v-games .kp{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;padding:5px 0;border-top:1px solid var(--ln-soft)}
#v-games .kp:first-of-type{border-top:0}
#v-games .kp small{font-family:var(--font-ui);font-size:10px;color:var(--d2)}
#v-games .kpc{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
/* team profile — left-anchored rank bars */
#v-games table.tstats td{padding:6px 7px}
#v-games table.tstats th{cursor:default}
#v-games .rkn{font-family:var(--font-num);font-size:13px;text-align:right;white-space:nowrap}
#v-games .rkn small{font-size:8.5px;color:var(--d2);font-style:italic}
#v-games .rkb{width:34%;min-width:90px}
#v-games .rb{height:9px;border-radius:5px;background:hsl(var(--h) calc(12% * var(--si)) 18% / .9);overflow:hidden}
#v-games .rb i{display:block;height:100%;border-radius:5px}

/* ---- teams: Team Ranks | Standings ---- */
.tr-hdr,.tr-row{display:grid;grid-template-columns:40px minmax(150px,1fr) 72px 150px 56px 56px 56px 56px minmax(150px,1fr);gap:8px;align-items:center;padding:0 12px}
.tr-hdr .r,.tr-row .r{text-align:right}.tr-hdr .c,.tr-row .c{text-align:center}
.st-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:12px}   /* two per row = the MLB panel width; four made the eight columns crowd */
.st-hdr,.st-row{display:grid;grid-template-columns:1fr 56px 48px 44px 44px 48px 44px 44px;gap:8px;padding:9px 10px;align-items:center}
@media(max-width:1100px){.tr-wrap{flex-direction:column}.tr-drawer{width:100%;position:static}}
@media(max-width:800px){.st-grid{grid-template-columns:1fr}}
#v-teams .bar-c{display:inline-block;width:56px;height:6px;border-radius:3px;background:hsl(var(--h) calc(20% * var(--si)) 20% / .5);position:relative;vertical-align:middle;margin-left:6px}
#v-teams .bar-c i{position:absolute;top:0;bottom:0;border-radius:3px}
.team-h{display:flex;justify-content:space-between;align-items:center;gap:12px}.team-h a{font-size:12px;text-decoration:none}
.units{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.unit{padding:10px 12px}
.unit .r{font-size:24px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-ui)}
.unit .r small{font-size:11px;color:var(--d1);font-weight:500;margin-left:4px}
.unit .n{color:var(--d1);font-size:12px}
.unit.proj .r{color:var(--d1)}.unit .r .pj{font-size:10px;font-style:italic;color:var(--d2);margin-right:5px;font-weight:500}
@media(max-width:800px){.units{grid-template-columns:repeat(2,1fr)}}
.field{margin:0 0 12px;padding:16px 16px 10px;overflow-x:auto}
.field .row{display:grid;gap:8px;margin-bottom:10px}
.field .row.skill,.field .row.line{grid-template-columns:repeat(5,minmax(140px,1fr))}
.field .row.qb{grid-template-columns:minmax(140px,1fr);max-width:220px;margin-left:auto;margin-right:auto}
.slot{background:hsl(var(--h) calc(12% * var(--si)) 14% / .7);border-radius:8px;padding:8px 10px;min-height:78px;border-top:3px solid hsl(var(--h) calc(10% * var(--si)) 24%)}
.slot.line{border-top-color:hsl(var(--h) calc(18% * var(--si)) 34%)}
.slot .lab{font-size:10px;color:var(--d1);margin-bottom:3px;letter-spacing:.04em}
.slot .ln{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:13px}
.slot .ln.bk{font-size:11.5px;color:var(--d1);margin-top:2px}.slot .ln.bk a.pl{color:var(--d1);font-weight:500}.slot .ln.bk a.pl:hover{color:var(--ac)}
.legend{display:flex;gap:12px;color:var(--d1);font-size:11px;flex-wrap:wrap;margin-top:4px}
.norank{margin-top:10px;padding:10px 12px;color:var(--d1);font-size:12px}
#v-teams .dchip{font-family:var(--font-num);font-size:9.5px;color:var(--tx);opacity:.75;margin-left:6px;padding:0 5px;border-radius:4px;background:hsl(var(--h) calc(12% * var(--si)) 18% / .9)}
#v-teams .dchip i{font-style:normal;font-size:8px;color:var(--d2)}
#v-teams .dchip.proj{opacity:.5;font-style:italic}
#v-teams .sidetg{display:flex;gap:3px;padding:3px;border-radius:var(--r-ctl);margin:0 0 10px;width:max-content;background:var(--field);border:1px solid var(--ln)}
#v-teams .p .sidetg{margin:-2px 0 11px}
#v-teams .sidetg button{font-family:var(--font-ui);font-size:11.5px;font-weight:600;padding:6px 14px;border-radius:7px;color:var(--d1);background:none;border:0;cursor:pointer;transition:.15s}
#v-teams .sidetg button:hover:not(:disabled){color:var(--tx)}
#v-teams .sidetg button.on{background:var(--ac);color:var(--ink)}
#v-teams .sidetg button:disabled{opacity:.35;cursor:default}
/* player page (pp-*) */
#v-teams .pp-hd{display:flex;justify-content:space-between;align-items:center;gap:22px}
#v-teams .pp-hd>div:nth-child(2){flex:1;min-width:0}
#v-teams .pp-hd h1{font-size:30px;font-weight:800;letter-spacing:-.035em;margin:0}
#v-teams .pp-shot{position:relative;width:104px;height:104px;flex-shrink:0;border-radius:12px;overflow:hidden;background:linear-gradient(168deg,hsl(var(--h) calc(14% * var(--si)) 20%),hsl(var(--h) calc(14% * var(--si)) 11%));border:1px solid hsl(var(--h) calc(10% * var(--si)) 22% / .8)}
#v-teams .pp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}
#v-teams .pp-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-num);font-size:30px;font-weight:500;color:hsl(var(--h) calc(10% * var(--si)) 34%);letter-spacing:.04em}
#v-teams .pp-tm{position:absolute;top:5px;right:7px;font-family:var(--font-num);font-size:9px;color:var(--d1);z-index:1;text-shadow:0 1px 3px #000}
#v-teams .pp-no{position:absolute;bottom:3px;left:7px;font-family:var(--font-num);font-size:13px;color:var(--tx);z-index:1;text-shadow:0 1px 3px #000}
#v-teams .pp-sub2{font-family:var(--font-num);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--d2)}
#v-teams .pp-fls{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:9px}
#v-teams .pp-rk{padding:3px 9px}
#v-teams .pp-rk b{font-size:13px}
#v-teams .pp-mt{font-family:var(--font-ui);font-size:11px;color:var(--d1);margin-top:8px}
#v-teams .pp-big{text-align:right;flex-shrink:0}
#v-teams .pp-big b{font-family:var(--font-num);font-size:40px;color:var(--ac);display:block;line-height:1}
#v-teams .pp-big span{font-family:var(--font-ui);font-size:9.5px;color:var(--d2);display:block;margin-top:3px}
#v-teams .pp-seas{margin-top:18px;border-top:1px solid var(--ln-soft);padding-top:4px}
#v-teams .pp-sr{display:flex;align-items:baseline;gap:0;flex-wrap:wrap;font-family:var(--font-num);font-size:12px;padding:7px 0;border-top:1px solid var(--ln-soft)}
#v-teams .pp-sr>span:not(.pp-yr):not(.pp-gs){min-width:104px}
#v-teams .pp-yr{color:var(--wrn);width:42px;flex-shrink:0}
#v-teams .pp-yr.dim{color:var(--d2)}
#v-teams .pp-gs{color:var(--d2);font-size:10.5px;width:70px;flex-shrink:0}
#v-teams .pp-sr u{text-decoration:none;color:var(--d2);font-size:9px;letter-spacing:.05em;text-transform:uppercase;margin-right:4px}
#v-teams .pp-sr i{font-style:normal;font-size:13px}
#v-teams .pp-hint{color:var(--d2);font-size:10.5px;font-family:var(--font-ui);margin-top:8px;line-height:1.6}
#v-teams .pp-sts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}
#v-teams .pp-st{padding:11px 13px}
#v-teams .pp-st>b{font-family:var(--font-ui);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:5px;line-height:1}
#v-teams .pp-st>em{font-style:normal;font-family:var(--font-num);font-size:9.5px;color:var(--d2);display:block;margin-top:5px}
#v-teams .pp-oppr{font-family:var(--font-num);font-size:9px;padding:1px 6px;border-radius:4px;margin-left:4px}
#v-teams .pp-oppr.tough{background:hsl(352 70% 50% / .18);color:#ff8fa3}
#v-teams .pp-oppr.soft{background:hsl(160 60% 45% / .16);color:var(--pos)}
#v-teams .pp-oppr.mid{background:hsl(var(--h) calc(12% * var(--si)) 24% / .8);color:var(--d1)}
@media(max-width:800px){#v-teams .pp-sts{grid-template-columns:repeat(2,1fr)}#v-teams .pp-hd{flex-wrap:wrap}}

/* ---- grading ---- */
#v-grading .kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
#v-grading .kpi .cell{padding:10px 12px}
#v-grading .kpi .cell>b{font-size:16px;margin-top:3px}
#v-grading .cal{display:flex;gap:4px;align-items:stretch;height:90px;margin:8px 0 4px}
#v-grading .cal div{flex:1;position:relative;height:100%;background:hsl(var(--h) calc(20% * var(--si)) 20% / .4);border-radius:3px 3px 0 0}
#v-grading .cal div i{position:absolute;left:0;right:0;bottom:0;background:var(--ac);border-radius:3px 3px 0 0;opacity:.75}
#v-grading .cal div u{position:absolute;left:0;right:0;border-top:2px solid var(--ac2)}
#v-grading .cal-l{display:flex;gap:4px;font-family:var(--font-num);font-size:8px;color:var(--d2)}
#v-grading .cal-l span{flex:1;text-align:center}
#v-grading .how .st{padding:10px 0;border:0;border-bottom:1px solid var(--ln-soft);border-radius:0;font-size:inherit;white-space:normal;color:inherit}
#v-grading .how .st b{display:block;font-size:12.5px;margin-bottom:3px}
#v-grading .how .st p{margin:2px 0;font-size:11.5px;color:var(--d1);line-height:1.5}
#v-grading .how .st .k{font-family:var(--font-num);font-size:10px;color:var(--ac);margin-top:4px}
#v-grading .const{font-family:var(--font-num);font-size:10.5px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px}
#v-grading .const b{color:var(--ac)}
#v-grading .const em{font-style:normal;color:var(--d2);display:block;font-size:9.5px;line-height:1.4}

/* ---- edge ---- */
#v-edge .eh{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--font-ui);font-size:11px;color:var(--d2)}

/* ---- games (header + panels come from .gameview in tokens.css) ---- */
#v-games .bar+.p{margin-top:0}
/* ---- props: Games layout + EV column + slip; geometry lives under .gameview ---- */
#v-props .two .p{min-width:0}