/* ==========================================================================
   Terminal Light — shell glue. Loaded LAST in base.html (after page CSS) so
   the new shell wins over the legacy sheets that still load during the
   migration (base.css fixed nav + body padding, theme-light.css canvas,
   site-rail/cbar/wire offsets). Delete the overrides here as each legacy
   sheet is removed (plan phase 6).
   ========================================================================== */

/* ---- Neutralise legacy shell offsets ---- */
html body { padding: 0 !important; margin: 0; background: var(--tl-page) !important; color: var(--tl-ink); overflow-x: clip; }
html body main.tl-main { max-width: none; width: auto; margin: 0; padding: 0; }
html body header.tl-topbar.top-nav-bar {
  position: sticky; top: 0; left: auto; right: auto; z-index: 40;
  padding: 0 20px; transition: none;
  background: var(--tl-header-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tl-line-07);
}

/* Pico transitions every link and button colour (0.2s). The design never
   animates link colour, and the stale value lingers across a theme flip.
   Class rules that want a transition (lift cards, segments) outrank this. */
html body a, html body button { transition-property: none; }

/* ---- Search: the gsx ambient search in the design's 300x34 box ---- */
.tl-search-wrap { position: relative; }
.tl-topbar .gsx-box.tl-search { height: 34px; padding: 0 8px 0 11px; border: 1px solid var(--tl-line-10); background: var(--tl-fill-03); box-shadow: none; }
.tl-topbar .gsx-box.tl-search.is-open { border-color: var(--tl-line-18); background: var(--tl-control); box-shadow: 0 0 0 3px var(--tl-fill-05); }
.tl-topbar .gsx-icon { margin-right: 0; color: var(--tl-ink-50); }
.tl-topbar .gsx-input { font-size: 13px !important; color: var(--tl-ink) !important; }
.tl-topbar .gsx-type { font-size: 13px; color: var(--tl-ink-50); }
.tl-topbar .gsx-caret { height: 14px; background: var(--tl-ink-50); }
.tl-topbar .gsx-ghost-rest { color: var(--tl-ink-35); }
.tl-topbar .gsx-key.tl-kbd { min-width: 0; height: 20px; margin-left: 0; padding: 0 6px; border-color: var(--tl-line-12); font: 400 10.5px var(--tl-mono); color: var(--tl-ink-50); }
.tl-topbar .gsx-panel { top: 42px; left: auto; right: 0; transform: none; width: min(520px, calc(100vw - 24px)); animation-name: tl-drop; }
.gsx-scrim { top: var(--tl-topbar-h); }
@keyframes tl-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Theme toggle icons: moon in light (switch to dark), sun in dark ---- */
#navThemeBtn .si-icon-sun { display: none; }
html:not(.si-light) #navThemeBtn .si-icon-moon { display: none; }
html:not(.si-light) #navThemeBtn .si-icon-sun { display: block; }

/* ---- Account menu ---- */
.tl-account { position: relative; }
.tl-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 200px; padding: 6px;
  display: none; flex-direction: column;
  border-radius: var(--tl-r-card); background: var(--tl-card);
  box-shadow: var(--tl-float-shadow);
}
.tl-menu.show { display: flex; animation: tl-drop 0.18s var(--tl-ease) both; }
.tl-menu-item {
  height: 32px; padding: 0 10px; display: flex; align-items: center;
  border-radius: var(--tl-r-seg-in); font-size: 13px; color: var(--tl-ink-70);
}
.tl-menu-item:hover { background: var(--tl-fill-04); color: var(--tl-ink); }
.tl-menu-rule { height: 1px; margin: 5px 4px; background: var(--tl-line-07); }
#navSignIn, #navSignUp { display: inline-flex; }
#navSignIn[style*="none"], #navSignUp[style*="none"] { display: none !important; }

/* ---- Sidebar details ---- */
.tl-side-link { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--tl-font); }
.tl-side-confs .tl-side-link.is-on { background: var(--tl-fill-07); }
.tl-earn-wrap { position: relative; }
.tl-earn-wrap .tl-earn { width: 100%; border: 1px dashed var(--tl-line-14); background: transparent; color: var(--tl-ink); text-align: left; cursor: pointer; }
.tl-earn-wrap:not(.is-ghost) .tl-earn { border-style: solid; border-color: var(--tl-line-10); }
.tl-earn-wrap .sclvl-label { font-size: 12.5px; font-weight: 600; }
.tl-earn-wrap .sclvl-label.is-up { color: var(--tl-up); }
.tl-earn-wrap .sclvl-panel {
  position: absolute; left: calc(100% + 18px); bottom: 0; z-index: 50; width: 340px;
  border-radius: var(--tl-r-card); background: var(--tl-card); box-shadow: var(--tl-float-shadow);
}
@media (max-width: 1279px) { .tl-earn-wrap .sclvl-panel { left: 0; bottom: calc(100% + 8px); width: 100%; } }
.tl-promo { margin-bottom: 12px; }
.tl-side-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 0 6px; font-size: 11.5px; color: var(--tl-ink-45);
}
.tl-side-foot a:hover, .tl-side-foot button:hover { color: var(--tl-ink); }
.tl-side-foot button {
  margin: 0; padding: 0; border: 0; background: transparent; width: auto;
  font: inherit; color: inherit; cursor: pointer;
}

/* ---- Skip link ---- */
.tl-skip:focus { position: fixed !important; left: 12px; top: 10px; z-index: 100; width: auto; height: auto; padding: 8px 12px; margin: 0; clip: auto; border-radius: var(--tl-r-btn); background: var(--tl-ink); color: var(--tl-on-ink); }

/* ---- Bare shell (auth, onboarding): no sidebar ---- */
.tl-shell.is-bare .tl-sidebar, .tl-shell.is-bare .tl-scrim { display: none; }
body:has(.tl-shell.is-bare) .tl-menu-btn { display: none; }

/* ---- Phone top bar: search fills the space, Sign up stays, Log in moves
   into the drawer's account row via the Sign up page's own link. ---- */
@media (max-width: 720px) {
  .tl-topbar .tl-topbar-right { flex: 1; min-width: 0; }
  .tl-topbar .tl-search-wrap { flex: 1; min-width: 0; }
  .tl-topbar .gsx-box.tl-search { width: 100%; }
  .tl-topbar .tl-topbar-spacer { display: none; }
  .tl-topbar #navThemeBtn { display: none; }
  .tl-topbar #navSignIn, .tl-topbar #navSignUp { padding: 0 10px; font-size: 13px; }
  .tl-topbar .tl-topbar-actions .tl-btn-outline-lg:not([style*="none"]) { display: inline-flex; }
}

/* ---- Sidebar bottom spacing: the Earn card's own margin is zeroed by the
   shared button reset, so the gaps live on the wrapper and the foot. ---- */
.tl-sidebar .tl-earn-wrap { margin-bottom: 12px; }
.tl-sidebar .tl-earn-wrap .tl-earn { margin-bottom: 0; }
.tl-sidebar .tl-promo { margin-bottom: 14px; }
.tl-sidebar .tl-side-foot { padding-top: 2px; }

/* ---- Theme toggle: icon only, no outline box ---- */
.tl-topbar #navThemeBtn { border-color: transparent; }
.tl-topbar #navThemeBtn:hover { border-color: transparent; background: var(--tl-fill-05); }

/* ---- Top bar never overflows: the search shrinks first (300px max), and
   under 1240px the wordmark gives up its room (the logo stays). ---- */
.tl-topbar .tl-topbar-right { min-width: 0; flex: 0 1 auto; }
.tl-topbar .tl-search-wrap { flex: 0 1 300px; min-width: 120px; }
.tl-topbar .gsx-box.tl-search { width: 100%; }
.tl-topbar .tl-topbar-actions { flex: none; }
@media (max-width: 1240px) {
  .tl-topbar { gap: 16px; }
  .tl-topbar .tl-brand span { display: none; }
}
/* Nine nav items: tighten them before the nav moves into the drawer (<1024). */
@media (max-width: 1180px) {
  .tl-topbar { gap: 12px; }
  .tl-topbar .tl-nav a { padding: 0 8px; }
  .tl-topbar .tl-topbar-right { gap: 10px; }
  .tl-topbar .tl-topbar-actions { gap: 6px; }
}

/* ---- Signed-in account button: the ink "Sign up" treatment, icon only ---- */
.tl-topbar .tl-iconbtn.is-ink { border-color: var(--tl-ink); background: var(--tl-ink); color: var(--tl-on-ink); }
.tl-topbar .tl-iconbtn.is-ink:hover,
.tl-topbar .tl-iconbtn.is-ink[aria-expanded="true"] { border-color: var(--tl-ink-hover); background: var(--tl-ink-hover); color: var(--tl-on-ink); }

/* ---- Conference switch in flight (body.tl-scoping, set by shell.js): a thin
   indeterminate bar under the top bar, and the page dims until the next one
   paints. Pages with their own skeletons (Home) opt out of the dim. ---- */
@keyframes tl-progress { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
body.tl-scoping .tl-topbar::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 40%; height: 2px;
  background: var(--tl-ink); animation: tl-progress 1.1s var(--tl-ease) infinite;
}
body.tl-scoping:not(.page-explore) .tl-main { opacity: 0.55; transition: opacity 0.2s var(--tl-ease); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.tl-scoping .tl-topbar::after { animation: none; width: 100%; opacity: 0.4; } }

/* ---- Sidebar sport picker (services/sports.py): live sports select, the
   rest wait with a SOON tag. ---- */
.tl-side-sports { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.tl-side-sports .tl-side-link.is-on { background: var(--tl-fill-07); color: var(--tl-ink); font-weight: 500; cursor: default; }
.tl-side-sports .tl-side-link.is-soon { color: var(--tl-ink-40); cursor: default; justify-content: space-between; }
.tl-side-sports .tl-side-link.is-soon:hover { background: transparent; color: var(--tl-ink-40); }