/* =====================================================================================================
   Analytics & Insights: the phone app. Loaded with media="(max-width:900px)" and switched on by app.js
   (html.app), so computers never see it. Builds on the Liquid Light glass: an iOS-style nav bar with big titles
   that shrink into it, five tabs (Home, Games, Standings, Teams, More), sheets for games, teams and players,
   a week strip on Games, team cards for standings and the search within thumb reach on Home.
   ===================================================================================================== */
html.app{--tabh:64px;--dock:calc(var(--tabh) + 14px + env(safe-area-inset-bottom,0px))}
html.app body{overscroll-behavior-y:none}

/* ---------- nav bar: clear at the top, frosted with the page title once you scroll ---------- */
html.app .bar{top:0!important;margin:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background .25s ease,box-shadow .25s ease;
  padding-top:env(safe-area-inset-top,0px)}
html.app .bar .in{padding:10px 16px!important;min-height:52px}
html.app .bar .modesw,html.app #signOut,html.app .bar .who{display:none!important}
html.app .bar .me{display:flex!important;align-items:center}
html.app .apptitle{position:absolute;left:64px;right:64px;top:calc(env(safe-area-inset-top,0px) + 15px);text-align:center;font:650 17px/1.2 var(--body);letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
html.app .appme{width:34px;height:34px;border-radius:50%;border:0;background:#0B0B0F;color:#fff;font:700 13px/34px var(--body);text-align:center;padding:0;cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
html.app .appid.bh{transition:opacity .2s ease}
html.app.scrolled .bar{background:rgba(246,247,250,.78)!important;-webkit-backdrop-filter:blur(24px) saturate(190%)!important;backdrop-filter:blur(24px) saturate(190%)!important;box-shadow:0 .5px 0 rgba(60,60,67,.18)!important}
html.app.scrolled .apptitle{opacity:1;transform:none}
html.app.scrolled .appid.bh{opacity:0}

/* ---------- big titles ---------- */
html.app .wrap{padding:6px 16px calc(var(--dock) + 24px)!important}
html.app .hero{margin:4px 0 14px}
html.app .hero h1{font:800 34px/1.06 var(--display)!important;letter-spacing:-.035em!important}
html.app .hero p{font-size:15px;margin-top:6px}
html.app .hero .tools{margin-top:12px}
html.app .subnav{margin:0 -16px 12px!important;padding:2px 16px 4px!important;gap:6px}
html.app .subnav a{padding:8px 14px;font-size:14px}

/* ---------- the tab bar: five tabs on a floating glass dock ---------- */
html.app .side{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;height:var(--tabh);padding:6px 6px!important;border-radius:26px!important;
  background:rgba(255,255,255,.8)!important;-webkit-backdrop-filter:blur(30px) saturate(190%)!important;backdrop-filter:blur(30px) saturate(190%)!important;
  border:1px solid rgba(255,255,255,.95)!important;box-shadow:inset 0 1px 0 #fff,0 18px 40px -16px rgba(16,24,40,.45)!important}
html.app .side .tab.apphide{display:none!important}
html.app .side .tab{font:600 10.5px/1 var(--body);letter-spacing:-.005em;color:#8A8A90;gap:4px;padding:5px 0}
html.app .side .tab .ic{width:30px;height:28px;border-radius:10px}
html.app .side .tab .ic svg{width:21px;height:21px;stroke-width:1.9}
html.app .side .tab[aria-selected=true]{color:#0B0B0F!important;background:none!important;box-shadow:none!important}
html.app .side .tab[aria-selected=true] .ic{background:none!important;color:#0B0B0F!important;box-shadow:none!important}
html.app .side .tab[aria-selected=true] .ic svg{stroke-width:2.4}
html.app .side .tab[aria-selected=true]::after{content:"";position:absolute;top:-3px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:var(--red)}
html.app .side .tab:active .ic{transform:scale(.9);transition:transform .08s}

/* ---------- Home: the search sits above the tab bar, in thumb reach ---------- */
html.app .hsearch.appdock{position:fixed;left:16px;right:16px;bottom:calc(var(--dock) + 6px);z-index:29;margin:0}
html.app .hsearch.appdock input{height:46px!important;background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:blur(26px) saturate(190%)!important;backdrop-filter:blur(26px) saturate(190%)!important;
  box-shadow:inset 0 1px 0 #fff,0 14px 32px -14px rgba(16,24,40,.45)!important}
html.app .hsearch.appdock .hres{top:auto;bottom:calc(100% + 8px);max-height:55vh}
html.app[data-page=home] .wrap{padding-bottom:calc(var(--dock) + 84px)!important}

/* ---------- Games: a week strip instead of Previous / Next ---------- */
html.app .wk{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:2px -16px 0;padding:4px 16px 6px;scroll-snap-type:x mandatory}
html.app .wk::-webkit-scrollbar{display:none}
html.app .wk a{flex:none;scroll-snap-align:center;width:48px;padding:8px 0 9px;border-radius:16px;text-align:center;text-decoration:none;color:var(--ink-2);
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 16px -12px rgba(16,24,40,.4)}
html.app .wk a small{display:block;font:600 11px/1 var(--body);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
html.app .wk a b{display:block;font:700 19px/1 var(--display);margin-top:6px;letter-spacing:-.03em}
html.app .wk a.on{background:#0B0B0F;color:#fff;border-color:transparent}
html.app .wk a.on small{color:rgba(255,255,255,.65)}
html.app .wk a.td:not(.on) b{color:var(--red)}
html.app[data-page=today] .hero .tools{display:none}

/* ---------- Standings: one card per team (no sideways scrolling) ---------- */
html.app[data-page=div] .wrap .tscroll{overflow:visible;background:none!important;border:0!important;box-shadow:none!important}
html.app[data-page=div] .wrap .tscroll>.tbl{background:none!important;border:0!important;box-shadow:none!important;display:block}
html.app[data-page=div] .wrap .tscroll>.tbl thead{display:none}
html.app[data-page=div] .wrap .tscroll>.tbl tbody{display:flex;flex-direction:column;gap:10px}
html.app[data-page=div] .wrap .tscroll>.tbl tr{display:grid;grid-template-columns:30px repeat(4,minmax(0,1fr)) 62px;grid-template-rows:auto auto auto;column-gap:6px;row-gap:6px;align-items:center;
  padding:14px 14px 13px 10px;border-radius:22px;background:var(--lg-fill);border:1px solid var(--lg-edge);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
html.app[data-page=div] .wrap .tscroll>.tbl td{border:0!important;padding:0!important;background:none!important;font-size:13px}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(1){grid-row:1/4;grid-column:1;align-self:start;text-align:center;font:800 20px/1.2 var(--display);color:var(--ink-3)}
html.app[data-page=div] .wrap .tscroll>.tbl tr:nth-child(-n+4) td:nth-child(1){color:var(--ink)}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(2){grid-row:1;grid-column:2/6;font:700 17px/1.2 var(--display);letter-spacing:-.02em}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(2) a{text-decoration:none;color:var(--ink)}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(8){grid-row:1/3;grid-column:6;text-align:right}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(8) b{display:block;font:800 30px/1 var(--display);letter-spacing:-.04em}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(8)::after{content:"PTS";display:block;font:600 10.5px/1 var(--body);color:var(--ink-3);margin-top:3px;letter-spacing:.06em}
html.app[data-page=div] .wrap .tscroll>.tbl td:is(:nth-child(3),:nth-child(7),:nth-child(9),:nth-child(10)){display:none}
html.app[data-page=div] .wrap .tscroll>.tbl td:is(:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(11)){grid-row:2;text-align:left!important;font:650 15px/1 var(--body)}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(4){grid-column:2}html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(5){grid-column:3}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(6){grid-column:4}html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(11){grid-column:5}
html.app[data-page=div] .wrap .tscroll>.tbl td:is(:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(11))::before{display:block;font:600 10.5px/1 var(--body);color:var(--ink-3);margin-bottom:4px;letter-spacing:.04em}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(4)::before{content:"W"}html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(5)::before{content:"L"}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(6)::before{content:"OTL"}html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(11)::before{content:"DIFF"}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(12){grid-row:3;grid-column:2/5}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(13){grid-row:3;grid-column:5/7;text-align:right!important;font:600 12px/1 var(--body);color:var(--ink-3)}
html.app[data-page=div] .wrap .tscroll>.tbl td:nth-child(13)::before{content:"Model "}
html.app[data-page=div] .wrap .tscroll>.tbl td[colspan]{grid-column:1/-1;grid-row:1}

/* ---------- sheets: games, teams and players slide up over the page ---------- */
html.app .appdim{position:fixed;inset:0;z-index:58;background:rgba(10,12,18,.32);opacity:0;pointer-events:none;transition:opacity .3s ease}
html.app.sheeted .appdim{opacity:1;pointer-events:auto}
html.app .wrap,html.app .bar{transition:transform .38s cubic-bezier(.2,.8,.2,1),border-radius .38s,filter .38s}
html.app.sheeted .wrap{transform:scale(.93) translateY(6px);transform-origin:50% 0;border-radius:24px;overflow:hidden;filter:saturate(.9)}
html.app.sheeted .bar{transform:scale(.93);transform-origin:50% 0;opacity:.6}
html.app .appsheet{position:fixed;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + 34px);z-index:60;display:flex;flex-direction:column;
  border-radius:28px 28px 0 0;background:rgba(246,247,250,.94);-webkit-backdrop-filter:blur(40px) saturate(190%);backdrop-filter:blur(40px) saturate(190%);
  box-shadow:0 -1px 0 rgba(255,255,255,.9) inset,0 -20px 60px -20px rgba(16,24,40,.45);transform:translateY(100%);transition:transform .42s cubic-bezier(.2,.85,.2,1)}
html.app.sheeted .appsheet{transform:none}
html.app .appsheet .grab{flex:none;height:22px;display:grid;place-items:center;cursor:grab}
html.app .appsheet .grab::before{content:"";width:38px;height:5px;border-radius:5px;background:rgba(60,60,67,.3)}
html.app .appsheet .shead{flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px 6px}
html.app .appsheet .shead button{border:0;background:rgba(118,118,128,.14);color:var(--ink-2);height:32px;min-width:32px;border-radius:16px;font:600 15px/32px var(--body);padding:0 12px;cursor:pointer}
html.app .appsheet .shead .x{padding:0;width:32px;font-size:20px;line-height:30px}
html.app .appsheet .sbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px))}
html.app .appsheet .sbody .hero h1{font-size:28px!important}
/* the game's scoreboard stays at the top of the sheet while the lineups scroll */
html.app .appsheet .sb-board{position:sticky;top:0;z-index:3;background:rgba(255,255,255,.9)!important}
html.app .appsheet .subnav,html.app .appsheet .gm-nav{display:none}

/* ---------- More: everything else, in a sheet ---------- */
html.app .more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 16px}
html.app .more-grid button{border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.72);border-radius:20px;padding:16px 6px 13px;display:flex;flex-direction:column;align-items:center;gap:9px;
  font:600 13px/1.15 var(--body);color:var(--ink);cursor:pointer;box-shadow:0 8px 20px -14px rgba(16,24,40,.45)}
html.app .more-grid button .mi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#0B0B0F;color:#fff}
html.app .more-grid button .mi svg{width:22px;height:22px}
html.app .more-grid button{position:relative}
html.app .more-grid button .badge{position:absolute;top:8px;right:8px;margin:0;background:var(--red);color:#fff;font:700 11px/18px var(--body);min-width:18px;height:18px;padding:0 6px;border-radius:9px}
html.app .more-list{border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);overflow:hidden;margin-bottom:14px}
html.app .more-list>*{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font:500 15.5px/1.2 var(--body);color:var(--ink);border-top:.5px solid rgba(60,60,67,.14)}
html.app .more-list>*:first-child{border-top:0}
html.app .more-list .seg2{display:inline-flex;background:rgba(118,118,128,.14);border-radius:10px;padding:2px}
html.app .more-list .seg2 button{border:0;background:none;font:600 13px/1 var(--body);padding:7px 12px;border-radius:8px;color:var(--ink-2);cursor:pointer}
html.app .more-list .seg2 button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.12)}
html.app .more-list button.out{border:0;background:none;color:var(--red);font:600 15.5px var(--body);padding:14px 16px;width:100%;justify-content:center;cursor:pointer}
html.app .more-health{margin:0 0 6px;padding:16px 16px 8px;border-radius:20px;background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.95)!important;box-shadow:0 8px 20px -14px rgba(16,24,40,.45)!important}
html.app .more-health h3{margin:0;font:700 17px/1.2 var(--display);letter-spacing:-.02em}
html.app .more-health .sub{margin:3px 0 6px;font-size:13px;color:var(--ink-3)}
html.app .more-health .hr{padding:11px 0;font-size:14.5px}
html.app .more-health .hr .s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
html.app .more-note{font:500 12.5px/1.45 var(--body);color:var(--ink-3);margin:0 4px 14px}
html.app .more-who{font:500 13px/1.4 var(--body);color:var(--ink-3);text-align:center;margin:4px 0 10px}

/* ---------- touch feedback ---------- */
html.app .game[data-gm]:active,html.app .hr[data-gm]:active,html.app .card:active{transform:scale(.985);transition:transform .08s}
@media (prefers-reduced-motion:reduce){html.app .appsheet,html.app .wrap,html.app .bar{transition:none!important}}

/* ---------- Home: headlines, and fewer words ---------- */
html.app[data-page=home] .habout{display:none}
html.app[data-page=home] .wrap .hhead p,html.app[data-page=home] .wrap .hcard .sub:not(:last-child){display:none}
html.app[data-page=home] #hTiles,html.app[data-page=home] #hPlace .tscroll{display:none}
/* standings predictions on Home: team, points, projected points and the chance of first */
html.app[data-page=home] #hProj .tbl :is(th,td):not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(5)):not(:nth-child(8)){display:none}
html.app[data-page=home] #hProj .tbl{width:100%}
html.app[data-page=home] .hero p{font-size:15px}
html.app .hl{margin:0 -16px 18px}
html.app .hl-head{display:flex;align-items:baseline;gap:8px;padding:0 16px;margin:0 0 10px}
html.app .hl-head h2{margin:0;font:800 22px/1.1 var(--display);letter-spacing:-.03em}
html.app .hl-head span{font:700 12px/1 var(--body);color:var(--ink-3)}
html.app .hl-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 16px 14px;scroll-padding:0 16px}
html.app .hl-row::-webkit-scrollbar{display:none}
html.app .hl-card{flex:none;width:78%;max-width:320px;min-height:168px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:16px 18px 16px;border-radius:26px;text-decoration:none;color:var(--ink);
  background:var(--lg-fill);border:1px solid var(--lg-edge);box-shadow:var(--lg-sh);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
html.app .hl-card.sk{background:rgba(255,255,255,.45);box-shadow:none}
html.app .hl-k{align-self:flex-start;font:800 11px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:#0B0B0F;color:#fff}
html.app .hl-card.red .hl-k{background:var(--red)}
html.app .hl-card.green .hl-k{background:#1F8A4C}
html.app .hl-card.amber .hl-k{background:#B86E00}
html.app .hl-card.blue .hl-k{background:#0A64D8}
html.app .hl-card b{font:800 22px/1.15 var(--display);letter-spacing:-.03em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.app .hl-s{margin-top:auto;font:500 13px/1.35 var(--body);color:var(--ink-3)}
html.app .hl-card:active{transform:scale(.98);transition:transform .08s}
html.app .hfoot{margin:22px 4px 0;font:500 12.5px/1.45 var(--body);color:var(--ink-3)}
html.app .hfoot button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink-2);text-decoration:underline;cursor:pointer}
html.app .more-about{margin:0 0 14px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);padding:14px 16px}
html.app .more-about summary{font:600 15.5px/1.2 var(--body);cursor:pointer;list-style:none}
html.app .more-about summary::-webkit-details-marker{display:none}
html.app .more-about summary::after{content:"›";float:right;color:var(--ink-3);transition:transform .2s}
html.app .more-about[open] summary::after{transform:rotate(90deg)}
html.app .more-about p{font:400 14px/1.5 var(--body);color:var(--ink-2);margin:10px 0 0}
