/* R399: compact shared layout. One set of alignment tokens on every static page. */
:root{--tl-shell-width:940px;--tl-shell-gutter:20px;--tl-header-title-gap:6px;--tl-nav-height:52px}
@media(max-width:359px){:root{--tl-shell-gutter:16px}}
@media(min-width:601px){:root{--tl-shell-gutter:24px}}
@media(min-width:901px){:root{--tl-shell-gutter:32px}}
/* Header row, beat strip and tabs share an identical width and edge. */
.tlScreenMast,.tlScreenBeats,.tlScreenNav{box-sizing:border-box;width:calc(100% - 2*var(--tl-shell-gutter));max-width:var(--tl-shell-width);margin-inline:auto}
.tlScreenHeader{padding-top:12px;padding-bottom:18px}
.tlScreenMast{min-height:108px}
.tlScreenBeats{margin-top:0}
.tlScreenNav{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);border-color:var(--tl-line)}
.tlScreenNav a{min-height:var(--tl-nav-height);display:flex!important;align-items:center;justify-content:center;gap:8px;font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:750;letter-spacing:.035em;white-space:nowrap;text-align:center;padding:10px 3px}
.tlScreenNav svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tlScreenWordmark{font-family:'Big Shoulders Display','Arial Narrow',Impact,sans-serif}
/* No surprise extra intro gaps before article titles. */
body:has(.siteFooter) .hero:not(.card){padding-top:36px;padding-bottom:32px}
body:has(.siteFooter) .pageShell{padding-top:32px}
body:has(#playerName) main{padding-top:20px}
body.tl-dashboard main{padding-top:0}
/* Re-use the same gutter for dashboard controls instead of negative margins. */
body.tl-dashboard .sticky-toolbar{margin-left:0;margin-right:0}
body.tl-dashboard main,body:has(#playerName) main{
 max-width:calc(var(--tl-shell-width) + 2*var(--tl-shell-gutter));
 padding-inline:var(--tl-shell-gutter)}
/* The homepage has different markup but must match the exact same edges. */
.app{max-width:var(--tl-shell-width)!important;width:calc(100% - 2 * var(--tl-shell-gutter))!important;margin-inline:auto!important;box-sizing:border-box}
.app>.top{width:100%!important;max-width:none!important;box-sizing:border-box;margin-inline:0!important}
.app>.homeUtilityTabs{width:100%!important;max-width:none!important}
.app>.editorialScale{width:100%!important;max-width:none!important}
/* When on the Home view, the same visual height as secondary header, without an extra inner gutter. */
.app>.top{min-height:108px!important}
/* The clickable homepage nav and linked secondary nav share spacing and type. */
.app>.homeUtilityTabs{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr)!important}
.app>.homeUtilityTabs .homeUtilityTab{min-height:var(--tl-nav-height)!important;font-family:'IBM Plex Sans',system-ui,sans-serif!important;font-weight:750!important;letter-spacing:.035em!important}
@media(max-width:600px){
 .tlScreenHeader{padding-top:11px;padding-bottom:18px}
 .tlScreenMast{min-height:106px;display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);gap:8px}
 .tlScreenWordmark{font-size:clamp(24px,7.6vw,39px)}
 .tlScreenTagline{font-size:clamp(8px,2.35vw,11px)}
 .tlScreenPlayerCopy b{margin-left:8px}
 .tlScreenNav a{font-size:clamp(9px,2.5vw,12px);gap:5px}
 .tlScreenNav svg{width:15px;height:15px}
 body:has(.siteFooter) .hero:not(.card){padding-top:32px;padding-bottom:27px}
 body:has(.siteFooter) .pageShell{padding-top:25px}
 .app>.top{min-height:106px!important}
}
@media(max-width:355px){.tlScreenNav a{font-size:9px;letter-spacing:0}.tlScreenNav svg{width:13px;height:13px}}
/* R396: the homepage had a SECOND padding inset and a 60px masthead.
   These high-specificity rules normalize its shell against all secondary pages. */
@media(max-width:600px){
 html[data-theme] body:has(.app>.top){padding:11px 0 max(12px,env(safe-area-inset-bottom))!important}
 html[data-theme] body .app{width:calc(100% - 2*var(--tl-shell-gutter))!important;max-width:var(--tl-shell-width)!important;padding:0!important}
 html[data-theme] body .app>.top{
  margin:0!important;padding:0!important;min-height:106px!important;
  height:106px!important;align-items:center!important;box-sizing:border-box!important;
 }
 html[data-theme] body .app>.top .brand h1{
  font-family:'Big Shoulders Display','Arial Narrow',Impact,sans-serif!important;
  font-size:clamp(26px,7.9vw,38px)!important;line-height:.94!important;
 }
 html[data-theme] body .app>.editorialScale{margin:0!important;height:17px!important;max-height:17px!important}
 html[data-theme] body .app>.homeUtilityTabs{min-height:var(--tl-nav-height)!important;margin:0!important}
 html[data-theme] body .app>.homeUtilityTabs .homeUtilityTab{
  min-height:var(--tl-nav-height)!important;height:var(--tl-nav-height)!important;
  gap:6px!important;font-size:clamp(9px,2.5vw,12px)!important;
  padding:8px 2px!important;letter-spacing:.035em!important
 }
 html[data-theme] body .app>.homeUtilityTabs svg{width:15px!important;height:15px!important}
 .tlScreenNav{min-height:var(--tl-nav-height)}
}
@media(min-width:601px){
 html[data-theme] body .app{width:calc(100% - 2*var(--tl-shell-gutter))!important;max-width:var(--tl-shell-width)!important;padding-inline:0!important}
}
/* Secondary content opens at consistent distance under the primary navigation. */
body:has(.siteFooter) .hero:not(.card){padding-top:25px}
body:has(#playerName) main{padding-top:22px}
body.tl-dashboard .sticky-toolbar .topbar{display:none}
body.tl-dashboard .sticky-toolbar{padding:10px 0;margin-bottom:18px;background:var(--tl-bg);box-shadow:none}
@media(max-width:600px){body:has(.siteFooter) .hero:not(.card){padding-top:24px}}
/* Finish matching desktop/tablet shell as well as the phone shell. */
@media(min-width:601px){
 html[data-theme] body:has(.app>.top){padding-top:12px!important;padding-left:0!important;padding-right:0!important}
 html[data-theme] body .app{width:calc(100% - 2*var(--tl-shell-gutter))!important;padding:0!important;margin-inline:auto!important}
 html[data-theme] body .app>.top{min-height:108px!important;height:108px!important;margin:0!important;padding:0!important}
 html[data-theme] body .app>.editorialScale{margin:0!important;height:17px!important;max-height:17px!important}
 html[data-theme] body .app>.homeUtilityTabs{width:100%!important;min-height:var(--tl-nav-height)!important;margin:0!important}
 html[data-theme] body .app>.homeUtilityTabs .homeUtilityTab{min-height:var(--tl-nav-height)!important;height:var(--tl-nav-height)!important}
}
@media(min-width:601px){
 html[data-theme] body .app>.top,
 html[data-theme] body .app>.editorialScale,
 html[data-theme] body .app>.homeUtilityTabs{
  width:100%!important;max-width:none!important;box-sizing:border-box!important;margin-inline:0!important;
 }
}

/* R399: the single masthead owns its own height on all pages. */
body .tlh .tlh-mast {box-sizing:border-box!important;}
@media(max-width:600px){body .tlh .tlh-mast{height:86px!important;min-height:86px!important;max-height:86px!important}}
@media(min-width:601px){body .tlh .tlh-mast{height:92px!important;min-height:92px!important;max-height:92px!important}}

/* R399: homepage must not inherit old Editorial body side padding on top
   of the shared 20px shell gutter. Without this, Home is 16px narrower. */
html[data-theme] body:has(.app > .tlh), body:has(.app > .tlh) {
 padding-left:0!important; padding-right:0!important;
}
html[data-theme] body .app:has(> .tlh){
 width:calc(100% - 2*var(--tl-shell-gutter))!important;
 max-width:var(--tl-shell-width)!important; margin-inline:auto!important; padding-inline:0!important;
}