/* =========================================================
   TACKLE MY STATS
   AUTHENTICATED PLAYERS
   FIT / RADAR / FOOTER CORRECTION PASS
   ========================================================= */


/* =========================================================
   FONTS
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("../assets/fonts/ArchivoNarrow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("../assets/fonts/ArchivoNarrow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("../assets/fonts/ArchivoNarrow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url("../assets/fonts/ArchivoNarrow-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --black: #000000;
  --near-black: #001000;
  --panel: #020d09;
  --panel-2: #03130d;

  --deep-green: #003010;
  --border: #0b3b25;

  --green: #00f0a0;
  --mint: #00f0b0;

  --white: #f0f0f0;
  --cool-white: #d0f0f0;

  --muted: #7e9b91;
  --muted-2: #5f786f;

  --amber: #f5b942;
  --red: #f05252;

  --sidebar-width: 0px;
  --topbar-height: 68px;

  --radius: 8px;

  --content-padding: 28px;
  --desktop-content-rail: max(
    var(--content-padding),
    calc((100vw - 1200px) / 2 + var(--content-padding))
  );
  --section-gap: 22px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  background: var(--black);
}

html {
  min-height: 100%;
}

body {
  min-width: 1180px;
  min-height: 100vh;

  color: var(--white);

  font-family: "Archivo", Arial, sans-serif;
  font-size: 14px;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

.tms-app {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 68% 0%,
      rgba(0, 240, 160, 0.025),
      transparent 34%
    ),
    var(--black);
}


/* =========================================================
   SHARED ICON BOXES
   ========================================================= */

.ui-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  overflow: hidden;
}

.ui-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
}

.ui-icon-glyph {
  display: inline-block;

  width: auto;
  height: auto;

  line-height: 1;

  transform-origin: center;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.tms-sidebar {
  display: none;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;

  width: var(--sidebar-width);
  height: 100vh;

  display: flex;
  flex-direction: column;

  padding: 14px 16px 16px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #020a07 0%,
      #010704 55%,
      #000402 100%
    );

  border-right: 1px solid var(--border);
}


/* =========================================================
   SIDEBAR BRAND
   ========================================================= */

.sidebar-brand {
  height: 103px;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  flex: 0 0 auto;
}

.sidebar-logo {
  display: block;

  width: 150px;
  height: 98px;

  object-fit: contain;
}


/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.sidebar-nav {
  display: flex;
  flex-direction: column;

  flex: 0 0 auto;

  gap: 2px;

  margin-top: 5px;
}

.nav-item {
  width: 100%;
  height: 42px;

  display: flex;
  align-items: center;

  flex: 0 0 auto;

  padding: 0 10px;

  color: #a9c5bb;
  background: transparent;

  border: 1px solid transparent;
  border-radius: 7px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;

  transition:
    color 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}

.nav-icon {
  width: 34px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;

  margin-right: 7px;

  overflow: hidden;

  color: #83aaa0;
}

.nav-glyph {
  display: inline-block;

  width: auto;
  height: auto;

  color: inherit;

  font-family: Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;

  transform-origin: center;
}


/* proportional icon corrections */

.nav-glyph-home {
  font-size: 22px;
  transform: scaleX(0.88);
}

.nav-glyph-players {
  font-size: 22px;
  transform: scaleX(0.82);
}

.nav-glyph-teams {
  font-size: 24px;
  transform: scale(0.92);
}

.nav-glyph-matchups {
  font-size: 21px;
  transform: scaleX(0.92);
}

.nav-glyph-briefing {
  font-size: 23px;
  transform: scale(0.90);
}

.nav-glyph-lab {
  font-size: 22px;
  transform: scaleX(0.90);
}

.nav-glyph-fantasy {
  font-size: 23px;
  transform: scale(0.92);
}

.nav-glyph-performance {
  font-size: 23px;
  transform: scale(0.92);
}

.nav-glyph-university {
  font-size: 24px;
  transform: scale(0.90);
}

.nav-label {
  min-width: 0;

  display: block;

  white-space: nowrap;
}

.nav-item:hover {
  color: var(--white);
  background: rgba(0, 240, 160, 0.035);
}

.nav-item:hover .nav-icon {
  color: var(--green);
}

.nav-item.active {
  color: var(--white);

  background:
    linear-gradient(
      90deg,
      rgba(0, 240, 160, 0.14),
      rgba(0, 240, 160, 0.035)
    );

  border-color: rgba(0, 240, 160, 0.28);
}

.nav-item.active .nav-icon {
  color: var(--green);
}


/* =========================================================
   SIDEBAR QUOTE
   ========================================================= */

.sidebar-after-nav {
  flex: 0 0 auto;
}

.sidebar-divider {
  width: calc(100% - 28px);
  height: 1px;

  margin: 12px 14px 11px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border) 12%,
      var(--border) 88%,
      transparent
    );
}

.sidebar-quote {
  position: relative;

  width: fit-content;

  margin-left: 29px;

  display: flex;
  flex-direction: column;

  color: var(--cool-white);

  font-family: "Archivo Narrow", Arial, sans-serif;

  font-size: 17px;
  font-weight: 700;
  line-height: 0.96;

  letter-spacing: 0.1px;
}

.sidebar-quote span,
.sidebar-quote strong {
  display: block;
}

.sidebar-quote strong {
  position: relative;

  width: fit-content;

  margin-top: 2px;

  color: var(--green);
  font-weight: 700;
}

.sidebar-quote strong::after {
  content: "";

  position: absolute;

  left: 1px;
  bottom: -6px;

  width: 60px;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--green),
      rgba(0, 240, 160, 0.08)
    );

  transform: rotate(-2deg);
  transform-origin: left center;
}


/* =========================================================
   MAIN SHELL
   ========================================================= */

.tms-main {
  min-height: 100vh;

  margin-left: var(--sidebar-width);
}


/* =========================================================
   TOP BAR
   ========================================================= */

.tms-topbar {
  position: sticky;
  top: 0;
  z-index: 20;

  height: var(--topbar-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-left: calc(var(--desktop-content-rail) - 6px);
  padding-right: calc(var(--desktop-content-rail) - 7px);

  background: rgba(0, 7, 4, 0.97);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--border);
}

.big-brain-search {
  width: min(470px, 45vw);
  height: 38px;

  display: flex;
  align-items: center;

  padding: 0 14px;

  color: #8ca89e;
  background: #020d09;

  border: 1px solid #0b3a25;
  border-radius: 8px;

  font-size: 12px;
  font-weight: 500;
}

.search-mark {
  margin-right: 10px;

  color: var(--green);

  font-size: 14px;
  line-height: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;

  gap: 8px;
}

.upgrade-button,
.week-selector,
.icon-button,
.profile-button {
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.upgrade-button {
  padding: 0 17px;

  color: #00150d;
  background: var(--green);
}

.week-selector {
  display: none;
}

.chevron {
  color: var(--green);

  font-size: 13px;
}

.icon-button {
  width: 36px;

  color: var(--cool-white);
  background: #03120d;

  border: 1px solid var(--border);

  font-size: 17px;
}

.profile-button {
  width: 36px;

  color: var(--green);
  background: rgba(0, 240, 160, 0.08);

  border: 1px solid rgba(0, 240, 160, 0.32);
}


/* =========================================================
   CONTENT
   ========================================================= */

.tms-content {
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--content-padding) 28px;
}


/* =========================================================
   HERO
   SAME SOURCE ASSET
   PULLED CLOSER TO TOP BAR
   ========================================================= */






/* =========================================================
   LEVEL 1 NAV BRAND TEST
   Horizontal TMS logo beside the established icon navigation.
   ========================================================= */

.level1-nav-row {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.level1-nav-brand {
  flex: 0 0 142px;
  min-width: 142px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  text-decoration: none;
  border-radius: 8px;
  transform: translateX(3px);
}

.level1-nav-brand img {
  transform: translateX(-6px);
}

.level1-nav-brand img {
  display: block;
  width: 100%;
  height: 44px;
  object-fit: cover;
  object-position: center;
}

.level1-nav-row .level1-primary-nav {
  flex: 1 1 auto;
  min-width: 0;
}


/* =========================================================
   LEVEL 1 PRIMARY NAV — CANONICAL COMPONENT
   Shared across every Level 1 page.
   Geometry is fixed so active state, carets, and submenu wrappers
   never move the Level 1 destinations.
   ========================================================= */

.level1-primary-nav {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  margin: 0 0 2px;
  padding: 4px 0;
  overflow: visible;
  background: #000b07;
  border: 0;
  border-radius: 0;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group,
.level1-primary-nav > .level1-nav-menu {
  min-width: 0;
  width: 100%;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
  justify-content: center;
}

.level1-primary-nav-item {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0 10px 0 8px;
  color: var(--white);
  background:
    radial-gradient(circle at 84% 28%, rgba(255,255,255,.045), transparent 31%),
    linear-gradient(135deg, #03120d, #010805 62%, #020d09);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    color 120ms ease,
    background 120ms ease;
}

.level1-primary-nav-item::before,
.level1-primary-nav-item::after {
  content: none;
  display: none;
}

.level1-primary-nav-item.active > span:nth-child(2) {
  text-decoration-line: underline;
  text-decoration-color: var(--white);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.level1-primary-nav-icon {
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
}

.level1-nav-chevron,
.level1-nav-caret {
  margin-left: 2px;
  color: var(--green);
  font-size: 9px;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}

.level1-primary-nav-item:hover {
  color: var(--white);
  background:
    radial-gradient(circle at 84% 28%, rgba(0, 240, 160, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(0,240,160,.12), #010805 68%, #020d09);
  box-shadow: 0 0 14px rgba(0, 240, 160, 0.10);
}

.level1-primary-nav-item:hover .level1-primary-nav-icon,
.level1-primary-nav-item.active .level1-primary-nav-icon {
  color: var(--green);
}

@media (max-width: 1100px) {
  .level1-primary-nav {
    grid-template-columns: repeat(7, minmax(145px, 1fr));
    overflow-x: auto;
    overflow-y: visible;
  }
}


/* =========================================================
   LEVEL 1 HERO — CANONICAL COMPONENT
   One source of truth. No decal. No footer separator.
   ========================================================= */

.tms-hero {
  position: relative;
  width: 100%;
  height: 81px;
  margin-top: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border: 1px solid rgba(0, 240, 160, 0.22);
  border-radius: inherit;
  box-sizing: border-box;
}


.tms-hero-artwork {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Canonical Level 1 Hero artwork system.
   The cover layer fills the full hero width.
   The foreground image remains proportional so the player is never stretched.
   Each Level 1 page can replace --hero-artwork with its own scene. */
.tms-hero {
  --hero-artwork: url("../assets/tms-players-hero-artwork.png");
}

.tms-hero-artwork::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hero-artwork);
  background-size: auto 110%;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(.72);
}

.tms-hero-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 16, 0, 0.64) 24%,
    rgba(0, 16, 0, 0.06) 48%,
    rgba(0, 16, 0, 0.18) 67%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.tms-hero-artwork-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  transform: scale(1.7706);
  transform-origin: center center;
  z-index: 1;
}

.tms-hero-content {
  position: relative;
  z-index: 2;
  height: calc(100% - 30px);
  display: grid;
  grid-template-columns: 31% 43% 26%;
  align-items: center;
  padding: 0 18px 0 0;
}

.tms-hero-left,
.tms-hero-right {
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.tms-hero-left {
  grid-column: 1;
  align-self: center;
  position: relative;
  top: 15px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 15px;
  line-height: 0.96;
  letter-spacing: -0.25px;
  margin-left: 18px;
}

.tms-hero-left span,
.tms-hero-right span {
  display: block;
  white-space: nowrap;
}

.tms-hero-left span:nth-child(1),
.tms-hero-right span:nth-child(1) {
  color: var(--green);
}

.tms-hero-left span:nth-child(2),
.tms-hero-right span:nth-child(2) {
  color: var(--white);
}

.tms-hero-left span:nth-child(3),
.tms-hero-right span:nth-child(3) {
  color: var(--green);
}

.tms-hero-right {
  grid-column: 3;
  justify-self: end;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 6px;
  font-size: 14.3333px;
  line-height: 0.94;
  text-align: right;
  letter-spacing: -0.25px;
  transform: translateY(4px);
}

.tms-hero-big-brain {
  right: 18px;
  bottom: -1px;
  left: auto;
  text-align: right;
  position: absolute;
  z-index: 3;
  height: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border: 0;
  font-family: "Archivo", sans-serif;
  font-size: 8px;
}

.tms-hero-big-brain strong,
.tms-hero-big-brain span {
  display: block;
}

.tms-hero-big-brain strong {
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.35px;
}

.tms-hero-big-brain span {
  color: var(--cool-white);
  font-weight: 400;
}

@media (max-width: 1100px) {
  .tms-hero-left { font-size: 18px; }
  .tms-hero-right { font-size: 20px; }
}


/* =========================================================
   PLAYERS PAGE
   ========================================================= */

.players-page {
  padding-top: 17px;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 12px;
}

.page-header-copy {
  min-width: 0;
}

.page-header h1 {
  margin: 0;

  color: var(--white);

  font-size: 24px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: -0.45px;
}

.page-header p {
  max-width: 610px;

  margin: 5px 0 0;

  color: #9db8ae;

  font-size: 12px;
  line-height: 1.35;
}

.players-tools {
  display: flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 9px;
}

.player-search {
  width: 245px;
  height: 38px;

  display: flex;
  align-items: center;

  padding: 0 12px;

  color: var(--green);
  background: #020d09;

  border: 1px solid var(--border);
  border-radius: 7px;
}

.player-search > span {
  margin-right: 8px;

  font-size: 16px;
}

.player-search input {
  width: 100%;

  color: var(--white);
  background: transparent;

  border: 0;
  outline: 0;

  font-size: 12px;
}

.player-search input::placeholder {
  color: #6f8b81;
}

.filter-button {
  height: 38px;

  padding: 0 16px;

  color: var(--cool-white);
  background: #03120d;

  border: 1px solid var(--border);
  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.section-heading {
  min-height: 30px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 8px;
}

.section-kicker {
  display: block;

  margin-bottom: 4px;

  color: var(--green);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1px;
}

.section-heading h2 {
  margin: 0;

  color: var(--white);

  font-family: "Archivo", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
}

.section-heading .view-all-link {
  color: #D0F0F0;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.section-hint {
  padding-bottom: 2px;

  color: #78958a;

  font-size: 9px;
  font-weight: 500;

  white-space: nowrap;
}

.view-all {
  padding-bottom: 2px;

  color: var(--green);

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;
}


/* =========================================================
   EXPLORE BY POSITION
   ========================================================= */

.tms-explore {
  margin-bottom: var(--section-gap);
}

.players-explore {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.explore-heading {
  margin-bottom: 9px;
}

.explore-grid {
  display: grid;

  grid-template-columns:
    repeat(var(--explore-count, 7), minmax(0, 1fr));

  gap: 7px;
}

.explore-card {
  --position-accent: var(--green);
  --position-soft: rgba(0, 240, 160, 0.08);

  position: relative;

  min-width: 0;
  height: 82px;

  overflow: hidden;

  display: flex;
  align-items: flex-end;

  padding: 9px;

  background:
    radial-gradient(
      circle at 74% 28%,
      var(--position-soft),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #03130d,
      #010805
    );

  border: 1px solid color-mix(in srgb, var(--position-accent) 24%, transparent);
  border-radius: 7px;
}

.explore-qb {
  --position-accent: #38a9ff;
  --position-soft: rgba(56, 169, 255, 0.12);
}

.explore-rb {
  --position-accent: #00f0a0;
  --position-soft: rgba(0, 240, 160, 0.11);
}

.explore-wr {
  --position-accent: #f0a044;
  --position-soft: rgba(240, 160, 68, 0.11);
}

.explore-te {
  --position-accent: #ad83ff;
  --position-soft: rgba(173, 131, 255, 0.11);
}

.explore-k {
  --position-accent: #e3bd54;
  --position-soft: rgba(227, 189, 84, 0.11);
}

.explore-dst {
  --position-accent: #5a94ff;
  --position-soft: rgba(90, 148, 255, 0.11);
}

.explore-idp {
  --position-accent: #de6d6d;
  --position-soft: rgba(222, 109, 109, 0.10);
}


/* Explore artwork */

.explore-player-art {
  position: absolute;

  right: 3px;
  top: 4px;

  width: 46px;
  height: 69px;

  opacity: 0.8;

  pointer-events: none;
}

.explore-helmet {
  position: absolute;

  top: 2px;
  left: 14px;

  width: 21px;
  height: 20px;

  border-radius: 55% 55% 48% 45%;

  background:
    linear-gradient(
      145deg,
      rgba(240, 240, 240, 0.36),
      rgba(240, 240, 240, 0.08)
    );

  border: 1px solid rgba(240, 240, 240, 0.16);
}

.explore-helmet::after {
  content: "";

  position: absolute;

  right: -6px;
  bottom: 2px;

  width: 9px;
  height: 7px;

  border-right: 2px solid rgba(240, 240, 240, 0.34);
  border-bottom: 2px solid rgba(240, 240, 240, 0.34);

  border-radius: 0 0 6px 0;
}

.explore-body {
  position: absolute;

  left: 5px;
  bottom: -6px;

  width: 41px;
  height: 50px;

  display: flex;
  justify-content: center;

  padding-top: 16px;

  color: var(--position-accent);

  background:
    linear-gradient(
      180deg,
      rgba(240, 240, 240, 0.20),
      rgba(240, 240, 240, 0.035)
    );

  clip-path:
    polygon(
      26% 0,
      74% 0,
      100% 22%,
      88% 100%,
      12% 100%,
      0 22%
    );
}

.explore-body b {
  font-family: "Archivo Narrow", Arial, sans-serif;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.explore-ball {
  position: absolute;

  right: -1px;
  top: 35px;

  width: 13px;
  height: 8px;

  border: 1px solid var(--position-accent);
  border-radius: 50%;

  transform: rotate(-27deg);

  opacity: 0.8;
}

.explore-copy {
  position: relative;
  z-index: 2;

  min-width: 0;

  display: flex;
  flex-direction: column;

  padding-right: 27px;
}

.explore-position-name {
  display: block;

  max-width: 78px;

  overflow: hidden;

  color: #93ada4;

  font-size: 7px;
  font-weight: 600;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.explore-copy strong {
  margin-top: 2px;

  color: var(--white);

  font-family: "Archivo Narrow", Arial, sans-serif;

  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.explore-arrow {
  position: absolute;

  right: 7px;
  bottom: 7px;

  z-index: 3;

  color: var(--position-accent);

  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   PLAYER SPOTLIGHT
   ========================================================= */

.player-spotlight {
  position: relative;

  margin-bottom: var(--section-gap);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 31% 50%,
      rgba(0, 240, 160, 0.045),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #03120d,
      #010805 58%,
      #020d09
    );

  border: 1px solid #0b4029;
  border-radius: var(--radius);
}

.spotlight-accent {
  position: absolute;
  inset: 0 auto 0 0;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      var(--green),
      rgba(0, 240, 160, 0.10)
    );
}

.spotlight-header {
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 0 15px 0 18px;

  border-bottom: 1px solid rgba(0, 48, 16, 0.85);
}

.spotlight-heading {
  display: flex;
  align-items: center;

  gap: 9px;
}

.spotlight-header-icon {
  width: 24px;
  height: 24px;

  color: var(--green);
  background: rgba(0, 240, 160, 0.07);

  border: 1px solid rgba(0, 240, 160, 0.22);
  border-radius: 50%;

  font-size: 12px;
}

.spotlight-title-line {
  display: flex;
  align-items: center;

  gap: 7px;
}

.spotlight-kicker {
  color: var(--green);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1px;
}

.spotlight-week {
  padding: 2px 5px;

  color: #8eaaa0;
  background: rgba(255, 255, 255, 0.025);

  border: 1px solid #173c2c;
  border-radius: 4px;

  font-size: 7px;
  font-weight: 700;
}

.spotlight-subtitle {
  display: block;

  margin-top: 2px;

  color: #718d83;

  font-size: 8px;
}

.spotlight-header-prompt {
  color: #718e83;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.8px;

  white-space: nowrap;
}


/* Spotlight columns */

.spotlight-main-compact {
  min-height: 142px;

  display: grid;

  grid-template-columns:
    minmax(215px, 0.88fr)
    minmax(380px, 1.55fr)
    minmax(230px, 0.92fr);
}

.spotlight-identity,
.spotlight-read,
.spotlight-reality {
  min-width: 0;
}

.spotlight-identity {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 13px 15px 13px 18px;
}

.spotlight-player-image {
  position: relative;

  overflow: hidden;

  flex: 0 0 auto;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(0, 240, 160, 0.10),
      transparent 47%
    ),
    #03110c;

  border: 1px solid #0b3d28;
  border-radius: 7px;
}

.spotlight-player-image-compact {
  width: 76px;
  height: 108px;
}

.player-silhouette {
  position: absolute;
  inset: 0;

  overflow: hidden;
}

.silhouette-head {
  position: absolute;

  top: 17px;
  left: 50%;

  width: 32px;
  height: 35px;

  border-radius: 48%;

  background:
    linear-gradient(
      145deg,
      rgba(216, 240, 232, 0.24),
      rgba(216, 240, 232, 0.06)
    );

  transform: translateX(-50%);
}

.silhouette-body {
  position: absolute;

  left: 50%;
  bottom: -11px;

  width: 82px;
  height: 69px;

  background:
    linear-gradient(
      180deg,
      rgba(0, 240, 160, 0.18),
      rgba(0, 240, 160, 0.025)
    );

  clip-path:
    polygon(
      25% 0,
      75% 0,
      100% 23%,
      90% 100%,
      10% 100%,
      0 23%
    );

  transform: translateX(-50%);
}

.spotlight-player-copy {
  min-width: 0;
}

.spotlight-position-label {
  display: inline-flex;
  align-items: center;

  height: 18px;

  padding: 0 6px;

  color: #00160e;
  background: var(--green);

  border-radius: 4px;

  font-size: 7px;
  font-weight: 700;
}

.spotlight-player-copy h2 {
  margin: 7px 0 3px;

  color: var(--white);

  font-size: 16px;
  font-weight: 700;
  line-height: 1.05;
}

.player-meta {
  margin: 0;

  color: #78968b;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.5px;
}


/* =========================================================
   SPOTLIGHT READ
   ========================================================= */

.spotlight-read {
  padding: 14px 17px;

  border-right: 1px solid rgba(0, 48, 16, 0.85);
}

.spotlight-read-heading {
  display: flex;
  align-items: center;

  gap: 6px;
}

.read-icon {
  color: var(--green);

  font-size: 11px;
}

.eyebrow {
  color: #88a69b;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.85px;
}

.spotlight-read h3 {
  margin: 6px 0 5px;

  color: var(--white);

  font-size: 13px;
  font-weight: 600;
  line-height: 1.22;
}

.spotlight-read-copy {
  margin: 0;

  color: #91aca2;

  font-size: 9px;
  line-height: 1.4;
}

.spotlight-facts {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px;

  margin-top: 8px;
}

.spotlight-fact {
  min-width: 0;
  min-height: 35px;

  display: flex;
  align-items: flex-start;

  gap: 6px;

  padding: 6px 7px;

  color: #9bb7ad;
  background: rgba(0, 240, 160, 0.025);

  border: 1px solid #103725;
  border-radius: 6px;

  font-size: 7px;
  line-height: 1.3;
}

.fact-marker {
  flex: 0 0 auto;

  color: var(--green);

  font-family: "Archivo Narrow", Arial, sans-serif;

  font-size: 9px;
  font-weight: 700;
}


/* =========================================================
   REALITY CHECK
   ========================================================= */

.spotlight-reality {
  padding: 14px 15px;
}

.reality-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
}
.reality-heading strong {
  display: block;

  margin-top: 3px;

  color: var(--white);

  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
}

.spotlight-reality > p {
  margin: 8px 0 0;

  color: #89a59a;

  font-size: 8px;
  line-height: 1.45;
}


/* =========================================================
   SPOTLIGHT FOOTER
   ========================================================= */

.spotlight-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  border-top: 1px solid rgba(0, 48, 16, 0.85);
}

.spotlight-footer-compact {
  min-height: 48px;

  padding: 7px 15px 7px 18px;
}

.spotlight-prompt {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

.spotlight-prompt strong {
  color: var(--white);

  font-size: 9px;
  font-weight: 600;
}

.spotlight-prompt span {
  color: #758f86;

  font-size: 7px;
}

.spotlight-actions {
  display: flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 6px;

  position: relative;
  top: 22px;
  font-size: 13px;
}

.why-button,
.primary-button,
.secondary-button {
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 11px;

  border-radius: 6px;

  font-size: 8px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;
}

.why-button {
  color: var(--green);
  background: transparent;

  border: 1px solid rgba(0, 240, 160, 0.32);
}

.secondary-button {
  color: var(--cool-white);
  background: #03120d;

  border: 1px solid #174332;
}

.primary-button {
  color: #00160e;
  background: var(--green);

  border: 1px solid var(--green);
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.players-section,
.players-to-know-section,
.player-radar-section {
  margin-bottom: var(--section-gap);
}



/* Spotlight analyst narrative */
.spotlight-story {
  margin-top: 14px;
  max-width: 100%;
}

.spotlight-story p {
  margin: 0;
  color: var(--cool-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.28;
}

/* =========================================================
   TOP PLAYERS TABS
   ========================================================= */

.position-tabs {
  height: 32px;

  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  gap: 6px;

  margin-bottom: 7px;

  border-bottom: 1px solid #0a3422;
}

.position-tab {
  position: relative;

  height: 31px;

  padding: 0 11px;

  color: #79968b;
  background: transparent;

  font-size: 9px;
  font-weight: 700;

  cursor: pointer;
}

.position-tab.active {
  color: var(--green);
}

.position-tab.active::after {
  content: "";

  position: absolute;

  left: 7px;
  right: 7px;
  bottom: -1px;

  height: 2px;

  background: var(--green);
}


/* =========================================================
   TOP PLAYERS
   ========================================================= */

.top-players-card {
  overflow: hidden;

  background: #020d09;

  border: 1px solid color-mix(in srgb, var(--tms-left-rail-green) 24%, transparent);
  border-radius: var(--radius);
}

.ranking-header,
.ranking-row {
  display: grid;

  grid-template-columns:
    42px
    minmax(220px, 2fr)
    minmax(75px, 0.7fr)
    minmax(75px, 0.7fr)
    minmax(65px, 0.55fr)
    minmax(70px, 0.6fr);

  align-items: center;

  column-gap: 10px;

  padding: 0 14px;
}

.ranking-header {
  height: 28px;

  color: #708d82;
  background: #03120d;

  border-bottom: 1px solid var(--border);

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.5px;
}

.ranking-row {
  min-height: 45px;

  color: #b3cbc2;

  border-bottom: 1px solid rgba(0, 48, 16, 0.65);

  font-size: 9px;
}

.ranking-row:last-child {
  border-bottom: 0;
}

.rank {
  color: #829e94;

  font-family: "Archivo Narrow", Arial, sans-serif;

  font-size: 12px;
  font-weight: 700;
}

.ranking-player {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}

.player-headshot {
  width: 29px;
  height: 29px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 29px;

  color: #4d7465;

  background:
    radial-gradient(
      circle,
      rgba(0, 240, 160, 0.08),
      rgba(0, 240, 160, 0.015)
    );

  border: 1px solid #164331;
  border-radius: 50%;

  font-size: 10px;
}

.ranking-player > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.ranking-player strong {
  overflow: hidden;

  color: var(--white);

  font-size: 9px;
  font-weight: 600;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.ranking-player span {
  color: #69867b;

  font-size: 7px;
}

.tms-score {
  width: 31px;
  height: 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--green);
  background: rgba(0, 240, 160, 0.055);

  border: 1px solid rgba(0, 240, 160, 0.18);
  border-radius: 5px;

  font-weight: 700;
}

.trend.neutral {
  color: #6f8b81;
}


/* =========================================================
   BIG BRAIN DISCOVERY
   3 ACROSS
   ========================================================= */

.players-to-know-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 9px;
}

.discovery-card {
  position: relative;

  min-width: 0;

  padding: 11px;

  background: transparent;

  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.discovery-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 7px;
}

.discovery-player-image {
  width: 32px;
  height: 32px;

  color: #547468;
  background: rgba(0, 240, 160, 0.035);

  border: 1px solid #164130;
  border-radius: 50%;

  font-size: 10px;
}

.discovery-number {
  color: #385a4d;

  font-family: "Archivo Narrow", Arial, sans-serif;

  font-size: 17px;
  font-weight: 700;
}

.discovery-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 7px;

  margin-bottom: 6px;
}

.discovery-type,
.discovery-signal {
  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.5px;

  white-space: nowrap;
}

.discovery-type {
  color: var(--green);
}

.discovery-down .discovery-type {
  color: var(--card-accent, #35A7FF);
}

.discovery-opportunity .discovery-type {
  color: var(--amber);
}

.discovery-signal {
  color: #617e73;
}

.discovery-player-meta h3 {
  margin: 0;

  overflow: hidden;

  color: var(--white);

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.discovery-player-meta > span {
  display: block;

  margin-top: 3px;

  color: #708c82;

  font-size: 7px;
  font-weight: 700;
}

.discovery-insight {
  min-height: 58px;

  margin-top: 8px;
  padding: 8px;

  background: rgba(0, 240, 160, 0.018);

  border: 1px solid #0d3424;
  border-radius: 6px;
}

.insight-heading {
  display: flex;
  align-items: center;

  gap: 5px;
}

.insight-icon {
  color: var(--green);

  font-size: 9px;
}

.discovery-down-icon {
  color: var(--red);
}

.insight-label {
  color: #79978c;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.65px;
}

.discovery-insight p {
  margin: 5px 0 0;

  color: #91ada2;

  font-size: 8px;
  line-height: 1.35;
}

.discovery-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-top: 8px;
}

.why-link {
  padding: 0;

  color: var(--green);
  background: transparent;

  font-size: 8px;
  font-weight: 700;

  cursor: pointer;
}

.view-player-link {
  color: #9ab5ab;

  font-size: 7px;
  font-weight: 700;

  white-space: nowrap;
}


/* =========================================================
   TMS PLAYER RADAR
   FIVE SUBJECT CARDS ACROSS
   ========================================================= */

.player-radar-section {
  margin-top: 1px;
}

.player-radar {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 8px;
}

/* semantic radar treatment */

/* =========================================================
   FOOTER
   COMPACT V4 — FITS AUTHENTICATED CONTENT WIDTH
   BRAND | FOUR PRINCIPLES | LINKS
   ========================================================= */

.tms-footer {
  width: calc(100% - var(--sidebar-width));
  margin-left: var(--sidebar-width);
  min-height: 108px;
  padding: 14px var(--desktop-content-rail);

  display: grid;
  grid-template-columns: 235px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;

  overflow: hidden;

  background: linear-gradient(180deg, #020a07, #010503);
  border-top: 1px solid var(--border);
}

.footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;

  color: #6f8b81;
  font-size: 8px;
  line-height: 1.1;
}

.footer-brand > strong {
  color: var(--white);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.footer-tagline {
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 1px;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;

  color: var(--green);
  font-family: "Archivo Narrow", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.footer-tagline span {
  display: inline;
  flex: 0 0 auto;
  white-space: nowrap;
}

.footer-principles {
  min-width: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}

.footer-principle {
  min-width: 0;

  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.footer-principle-icon {
  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  color: var(--green);
  background: rgba(0, 240, 160, 0.05);

  border: 1px solid rgba(0, 240, 160, 0.20);
  border-radius: 7px;

  font-size: 13px;
  line-height: 1;
}

.footer-principle-icon .ui-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: auto;

  font-size: 13px;
  line-height: 1;

  transform: none;
}

.footer-principle > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 2px;
}

.footer-principle strong {
  overflow: hidden;

  color: var(--white);

  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.footer-principle > div > span {
  display: -webkit-box;
  overflow: hidden;

  color: #718d83;

  font-size: 6.5px;
  line-height: 1.2;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 11px;

  padding: 0;

  color: #9ab5ab;

  font-size: 8px;
  font-weight: 600;

  white-space: nowrap;
}

.footer-links a {
  display: inline-flex;
  align-items: center;

  min-height: 24px;
}

.footer-links a:hover {
  color: var(--green);
}


/* =========================================================
   INTERACTION
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}


/* =========================================================
   RESPONSIVE SAFETY
   MASTER DESKTOP TARGET = 1440 x 900
   ========================================================= */

@media (max-width: 1180px) {

  body {
    min-width: 1000px;
  }

  .player-search {
    width: 210px;
  }

  .explore-card {
    padding: 7px;
  }

  .explore-position-name {
    max-width: 62px;

    font-size: 6px;
  }

  .explore-copy strong {
    font-size: 16px;
  }

  .explore-player-art {
    transform: scale(0.86);
    transform-origin: right top;
  }

  .spotlight-main-compact {
    grid-template-columns:
      minmax(185px, 0.8fr)
      minmax(310px, 1.45fr)
      minmax(190px, 0.85fr);
  }
}

@media (max-width: 1000px) {

  :root {
    --sidebar-width: 0px;
    --content-padding: 20px;
  }

  body {
    min-width: 850px;
  }

  .sidebar-logo {
    width: 140px;
  }

  .nav-item {
    height: 40px;
  }

  .nav-label {
    font-size: 11px;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 11px;
  }

  .players-tools {
    width: 100%;
  }

  .player-search {
    flex: 1;

    width: auto;
  }

  .tms-hero-compact,

  .explore-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .spotlight-main-compact {
    grid-template-columns: 1fr 1.4fr;
  }

  .spotlight-reality {
    grid-column: 1 / -1;

    border-top: 1px solid rgba(0, 48, 16, 0.85);
  }

  .players-to-know-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-radar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   PLAYERS DISCOVERY + RADAR REVISION — 2026-09-15
   Locked separation:
   Players to Know = Trending Up / Trending Down / Opportunity
   Radar = Usage Shift / Injury Impact / Role Change /
           Matchup Change / Under the Radar
   ========================================================= */

.players-to-know-grid {
  align-items: stretch;
}

.discovery-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 11px 9px;
}

.discovery-top {
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.discovery-topline {
  flex: 0 0 auto;
  margin-bottom: 5px;
}

.discovery-player-meta {
  flex: 0 0 auto;
}

.discovery-insight {
  flex: 1 1 auto;
  min-height: 54px;
  margin-top: 7px;
  padding: 7px 8px;
  overflow: hidden;
}

.discovery-insight p {
  margin-top: 4px;
  font-size: 7.5px;
  line-height: 1.3;
}

.discovery-actions {
  flex: 0 0 auto;
  margin-top: 7px;
}

.discovery-type,
.discovery-signal {
  overflow: hidden;
  text-overflow: ellipsis;
}

.discovery-opportunity .insight-icon {
  color: var(--amber);
}


/* Radar has a different job from Discovery. */

.player-radar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Keep all five Radar cards on one line at the desktop target. */

@media (max-width: 1180px) {
  .players-to-know-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .player-radar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .discovery-insight p {
    font-size: 7px;
  }
}

/* =========================================================
   VISUAL QA PASS — HERO / PAGE HEADER / RADAR / FOOTER
   2026-09-15
   ========================================================= */

/* HERO: reduce vertical footprint and tighten shell spacing. */

.players-page {
  padding-top: 12px;
}

/* PAGE HEADER: keep the purpose statement on one line at desktop. */
.page-header {
  min-height: 52px;
  margin-bottom: 13px;
}

.page-header p {
  max-width: none;
  white-space: nowrap;
  margin-top: 6px;
}

/* RADAR: align heading treatment with Players to Know. */
.player-radar-section .section-heading {
  justify-content: flex-start;
  align-items: flex-end;
}

.player-radar-section .section-hint {
  margin-left: 18px;
  margin-right: 0;
  text-align: left;
}

/* FOOTER: compact, correctly aligned, and back to TMS typography. */
.app-footer {
  box-sizing: border-box;
  width: calc(100% - var(--sidebar-width));
  margin-left: var(--sidebar-width);
  min-height: 104px;
  padding: 14px var(--content-padding);
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  overflow: hidden;
  font-family: "Archivo", Arial, sans-serif;
}

.footer-brand {
  min-width: 0;
  align-self: center;
}

.footer-brand strong {
  display: block;
  margin: 0 0 6px;
  color: var(--white);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}

.footer-tagline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
  color: var(--green);
  font-family: "Archivo Narrow", "Archivo", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}

.footer-tagline span {
  display: inline;
  white-space: nowrap;
}

.footer-rights {
  color: #718d83;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.15;
}

.footer-principles {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
}

.footer-principle {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.footer-principle-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  color: var(--green);
  background: rgba(0, 240, 160, 0.045);
  border: 1px solid rgba(0, 240, 160, 0.26);
  border-radius: 7px;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.footer-principle > div {
  min-width: 0;
}

.footer-principle strong {
  display: block;
  margin: 0 0 3px;
  color: var(--white);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.08;
  white-space: nowrap;
}

.footer-principle > div > span {
  display: block;
  max-width: 160px;
  color: #78978c;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 7px;
  font-weight: 400;
  line-height: 1.22;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
  color: #9ab5ab;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.footer-links a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 1180px) {
  .page-header p {
    white-space: normal;
  }

  .app-footer {
    grid-template-columns: 220px minmax(0, 1fr) auto;
    column-gap: 16px;
  }

  .footer-principles {
    gap: 10px;
  }

  .footer-principle {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
  }

  .footer-principle-icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    font-size: 15px;
  }
}



/* =========================================================
   RADAR ALIGNMENT + FOOTER TAGLINE PASS
   ========================================================= */

.footer-tagline {
  font-size: 12px;
}

/* Make Radar read like Players to Know: left-led hierarchy. */
.player-radar {
  align-items: stretch;
}

/* Header/hint use the same left-led relationship as Discovery. */
.player-radar-section .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 24px;
}

.player-radar-section .section-hint {
  margin: 0 0 3px;
  text-align: left;
}

/* =========================================================
   TMS PLAYER RADAR — FINAL ALIGNMENT PASS
   Players to Know is the visual benchmark.
   ========================================================= */

/* Remove category icons entirely. */
/* Match the Players to Know section-header relationship:
   title left, supporting sentence right. */
.player-radar-section .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.player-radar-section .section-hint {
  margin: 0 0 3px;
  margin-left: auto;
  text-align: right;
}

/* Keep player image at left, but give every text element one clean left edge. */
/* =========================================================
   SIDEBAR FIT PASS V2
   Explicit desktop geometry so quote is visible at 900px.
   ========================================================= */

.tms-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Reduce the actual brand block, not only the image max-height. */
.sidebar-brand {
  flex: 0 0 132px;
  min-height: 132px;
  height: 132px;
  padding: 10px 18px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-brand img,
.sidebar-logo {
  width: auto;
  height: 116px;
  max-width: 150px;
  max-height: 116px;
  object-fit: contain;
}

/* Nine nav rows: 39px each, compact but still easy to scan/click. */
.sidebar-nav {
  flex: 0 0 auto;
  margin: 6px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a,
.sidebar-nav .nav-item {
  box-sizing: border-box;
  min-height: 39px;
  height: 39px;
  margin: 0;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  font-size: 12px;
  line-height: 1;
}

.sidebar-nav .nav-icon,
.sidebar-nav a > span:first-child {
  width: 16px;
  min-width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Quote occupies the remaining sidebar space and is always visible. */
.sidebar-quote {
  position: relative;
  flex: 0 0 auto;
  margin: 12px 26px 14px;
  padding: 0;
  overflow: visible;
  font-family: "Archivo Narrow", "Archivo", Arial, sans-serif;
}

.sidebar-quote p,
.sidebar-quote .quote-copy {
  margin: 0;
  font-size: 17px;
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.15px;
}

.sidebar-quote .quote-green,
.sidebar-quote strong {
  color: var(--green);
}

.sidebar-quote::after,
.sidebar-quote .quote-underline {
  width: 78px;
  max-width: 78px;
  margin-top: 4px;
}


/* =========================================================
   TMS PLAYER RADAR ACCENT
   Same frame-pop principle used elsewhere on Players.
   ========================================================= */

/* Keep the other three as TMS green so color remains semantic, not decorative. */



/* =========================================================
   TOP PLAYERS — PROJECTED STATS + FRAME ACCENT
   ========================================================= */

.top-players-card {
  position: relative;
  overflow: hidden;
}

/* Add PROJECTED while preserving the existing ranking hierarchy. */
.ranking-header,
.ranking-row {
  grid-template-columns:
    52px
    minmax(250px, 2.5fr)
    minmax(80px, .8fr)
    minmax(80px, .8fr)
    minmax(150px, 1.35fr)
    minmax(72px, .65fr)
    minmax(72px, .65fr);
}

.projected-stats {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
  white-space: nowrap;
}

.projected-stats strong {
  color: var(--cool-white);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.05;
}

.projected-stats small {
  color: #6f9589;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 7px;
  font-weight: 500;
  line-height: 1;
}

/* Projection is a teaser. It stays compact instead of widening the table. */
@media (max-width: 1180px) {
  .ranking-header,
  .ranking-row {
    grid-template-columns:
      42px
      minmax(205px, 2.3fr)
      minmax(62px, .7fr)
      minmax(62px, .7fr)
      minmax(120px, 1.25fr)
      minmax(58px, .6fr)
      minmax(58px, .6fr);
  }

  .projected-stats strong {
    font-size: 8px;
  }

  .projected-stats small {
    font-size: 6.5px;
  }
}



/* =========================================================
   SECTION HEADER CONSISTENCY PASS
   Explore + Spotlight aligned to Players/Top Players/Discovery.
   ========================================================= */

/* Explore: left-align the title block and place the helper copy beside it,
   rather than visually pushing the section identity apart. */
.players-explore .section-heading,
.tms-explore .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 24px;
}

.players-explore .section-hint,
.tms-explore .section-hint {
  margin: 0 0 3px;
  margin-left: 0;
  text-align: left;
}

/* Spotlight header: same two-row typography hierarchy as other sections.
   Row 1 = green kicker. Row 2 = larger white section title. */
.player-spotlight .spotlight-header {
  min-height: 62px;
  align-items: center;
}

.player-spotlight .spotlight-heading {
  align-items: flex-start;
}

.player-spotlight .spotlight-header-icon {
  margin-top: 2px;
}

.player-spotlight .spotlight-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 3px;
}

.player-spotlight .spotlight-kicker {
  color: var(--green);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.player-spotlight .spotlight-week {
  margin: 0;
}

.player-spotlight .spotlight-subtitle {
  display: block;
  color: var(--white);
  font-family: "Archivo Narrow", "Archivo", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

/* The descriptive sentence becomes supporting copy beneath the two-row title. */
.player-spotlight .spotlight-heading > div::after {
  content: "One player Big Brain believes deserves your attention.";
  display: block;
  margin-top: 4px;
  color: #78978c;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.2;
}

/* Hide the old subtitle sentence because the same copy is now generated
   beneath the section-style title. */
.player-spotlight .spotlight-subtitle {
  font-size: 0;
}

.player-spotlight .spotlight-subtitle::before {
  content: "PLAYER SPOTLIGHT";
  display: block;
  color: var(--white);
  font-family: "Archivo Narrow", "Archivo", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
}

@media (max-width: 1180px) {
  .players-explore .section-heading,
  .tms-explore .section-heading {
    gap: 16px;
  }

  .player-spotlight .spotlight-subtitle::before {
    font-size: 16px;
  }
}



/* =========================================================
   PLAYER SPOTLIGHT HEADER — APPROVED COPY HIERARCHY
   ========================================================= */

/* Green kicker remains: BIG BRAIN PLAYER SPOTLIGHT */
.player-spotlight .spotlight-kicker {
  color: var(--green);
}

/* Large second row: ONE PLAYER WORTH A CLOSER LOOK */
.player-spotlight .spotlight-subtitle {
  font-size: 0;
}

.player-spotlight .spotlight-subtitle::before {
  content: "ONE PLAYER WORTH A CLOSER LOOK";
  display: block;
  color: var(--white);
  font-family: "Archivo Narrow", "Archivo", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
}

/* Supporting sentence under the two-row section title. */
.player-spotlight .spotlight-heading > div::after {
  content: "Big Brain finds the player story you should know this week.";
  display: block;
  margin-top: 4px;
  color: #78978c;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.2;
}

/* Remove the now-duplicated far-right header copy. */
.player-spotlight .spotlight-header-prompt {
  display: none;
}

@media (max-width: 1180px) {
  .player-spotlight .spotlight-subtitle::before {
    font-size: 16px;
  }
}



/* =========================================================
   PLAYERS PAGE ALIGNMENT + ACCENT CONSISTENCY PASS
   Benchmark: Top Players / Players to Know / TMS Player Radar
   ========================================================= */

/* One canonical Players-page accent treatment. */
:root {
  --players-frame-accent: #00F0A0;
  --players-frame-accent-width: 3px;
}

/* All major Players-page sections begin on the same left content edge. */
.players-page > .page-header,
.players-page > .tms-explore,
.players-page > .players-explore,
.players-page > .player-spotlight,
.players-page > .players-section,
.players-page > .players-to-know-section,
.players-page > .player-radar-section {
  margin-left: 0;
  margin-right: 0;
}

/* Explore header uses the exact same left origin as the section below it. */
.players-explore .section-heading,
.tms-explore .section-heading {
  padding-left: 0;
  margin-left: 0;
}

/* Spotlight header content no longer gets an extra horizontal inset. */
.player-spotlight .spotlight-header {
  padding-left: 20px;
}

.player-spotlight .spotlight-heading {
  margin-left: 0;
}

/* Remove the decorative icon to the left of BIG BRAIN ANALYSIS. */
.player-spotlight .spotlight-read-heading .read-icon {
  display: none !important;
}

.player-spotlight .spotlight-read-heading {
  gap: 0;
}

/* Canonical green left-frame accent: same color, width and geometry. */
.player-spotlight {
}

.player-spotlight .spotlight-accent {
  width: var(--players-frame-accent-width);
  background: var(--players-frame-accent);
}

.top-players-card::before,
/* Discovery retains semantic red/amber on Down/Opportunity,
   but its green Trending Up accent matches the canonical green exactly. */
.discovery-card.discovery-up {
}

/* Explore cards that use the TMS-green accent use the same canonical green. */


/* Radar semantic categories keep their meaning, but every GREEN Radar accent
   is now the exact same TMS green as Spotlight/Top Players/Discovery. */

/* Keep section-title blocks on one consistent visual axis. */
.players-section > .section-heading,
.players-to-know-section > .section-heading,
.player-radar-section > .section-heading,
.players-explore > .section-heading,
.tms-explore > .section-heading {
  margin-left: 0;
  padding-left: 0;
}



/* =========================================================
   SPOTLIGHT ICON + RADAR SEMANTIC ACCENT CORRECTION
   ========================================================= */

/* Remove the remaining Spotlight header icon at far left.
   BIG BRAIN ANALYSIS icon was already removed separately. */
.player-spotlight .spotlight-header-icon {
  display: none !important;
}

.player-spotlight .spotlight-heading {
  gap: 0;
}

/* Radar: each left frame now matches its category color. */
/* Same width/style for all five, only semantic color changes. */
/* =========================================================
   EXPLORE CARD + SPOTLIGHT HEADER ALIGNMENT PASS
   ========================================================= */

/* Explore: the POSITION CONTENT inside every card is left-led,
   matching the content hierarchy of sections below. */
.explore-card {
  position: relative;
  justify-items: start;
  text-align: left;
}

.explore-card .explore-copy {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  width: auto;
  max-width: 62%;
  align-items: flex-start;
  text-align: left;
}

.explore-card .explore-position-name,
.explore-card .explore-copy strong {
  display: block;
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

.explore-card .explore-arrow {
  right: 10px;
  bottom: 10px;
}

/* Keep the artwork to the right so it does not push the labels inward. */
.explore-card .explore-player-art {
  margin-left: auto;
  margin-right: 6px;
}


/* Spotlight: shrink the left accent to the header's two-row title block.
   The header text can now start on the same left axis as the other sections. */
.player-spotlight {
}

.player-spotlight .spotlight-accent {
  top: 10px;
  bottom: auto;
  left: 0;
  height: 50px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--players-frame-accent);
}

.player-spotlight .spotlight-header {
  padding-left: 20px;
}

.player-spotlight .spotlight-heading {
  margin-left: 0;
  padding-left: 0;
}



/* =========================================================
   SPOTLIGHT SECTION-STYLE FRAME PASS
   Benchmark: Top Players / Players to Know / Radar
   ========================================================= */

/* Remove the supporting sentence under the Spotlight title. */
.player-spotlight .spotlight-heading > div::after {
  content: none !important;
  display: none !important;
}

/* Spotlight accent begins with the section title, like the sections below.
   It does NOT run through the body/footer. */
.player-spotlight .spotlight-accent {
  top: 18px;
  left: 0;
  bottom: auto;
  width: 3px;
  height: 48px;
  background: var(--players-frame-accent);
  border-radius: 0 3px 3px 0;
}

/* Match the left inset used by the other section headers. */
.player-spotlight .spotlight-header {
  min-height: 72px;
  padding: 14px 20px 12px 30px;
  align-items: flex-start;
}

.player-spotlight .spotlight-heading {
  margin: 0;
  padding: 0;
}

/* Keep the two-row title compact and aligned to the accent. */
.player-spotlight .spotlight-title-line {
  margin: 0 0 5px;
}

.player-spotlight .spotlight-subtitle::before {
  line-height: 1;
}

/* No full-height green left border competing with the short section accent. */
.player-spotlight {
}



/* =========================================================
   TMS LEVEL-1 SECTION TEMPLATE
   Governing Level-1 visual architecture:
   SECTION KICKER
   SECTION TITLE
   optional helper copy
   ↓
   content frame/card with accent beginning at CONTENT, not heading
   ========================================================= */

:root {
  --level1-section-gap: 12px;
  --level1-accent-width: 3px;
  --level1-accent-green: #00F0A0;
}

/* Shared Level-1 section heading behavior. */
.players-explore > .section-heading,
.players-section > .section-heading,
.players-to-know-section > .section-heading,
.player-radar-section > .section-heading {
  margin: 0 0 var(--level1-section-gap);
  padding: 0;
}

/* No decorative vertical accent belongs beside a Level-1 section heading. */
.players-explore > .section-heading::before,
.players-section > .section-heading::before,
.players-to-know-section > .section-heading::before,
.player-radar-section > .section-heading::before {
  content: none !important;
}


/* =========================================================
   SPOTLIGHT: convert to the same Level-1 architecture.
   The existing outer article visually becomes the section wrapper.
   Header = section heading.
   Main/footer = content card.
   ========================================================= */

.player-spotlight {
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0 !important;
  border-radius: 0;
}

/* Remove every prior Spotlight accent implementation. */
.player-spotlight > .spotlight-accent {
  display: none !important;
}

/* Spotlight header now behaves like the headers of the sections below. */
.player-spotlight .spotlight-header {
  min-height: 0;
  margin: 0 0 var(--level1-section-gap);
  padding: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.player-spotlight .spotlight-heading {
  margin: 0;
  padding: 0;
  gap: 0;
}

.player-spotlight .spotlight-title-line {
  margin: 0 0 5px;
  padding: 0;
}

.player-spotlight .spotlight-kicker {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.1px;
  color: var(--green);
}

.player-spotlight .spotlight-subtitle {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.player-spotlight .spotlight-subtitle::before {
  content: "ONE PLAYER WORTH A CLOSER LOOK";
  display: block;
  margin: 0;
  color: var(--white);
  font-family: "Archivo Narrow", "Archivo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
}

.player-spotlight .spotlight-heading > div::after,
.player-spotlight .spotlight-header-prompt,
.player-spotlight .spotlight-header-icon {
  display: none !important;
  content: none !important;
}

/* Main Spotlight content becomes the framed content surface. */
.player-spotlight .spotlight-main-compact {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--near-black);
  border: 1px solid color-mix(in srgb, var(--tms-left-rail-green) 24%, transparent);
  border-radius: 8px;
}

/* Footer is visually the lower portion of the same content card. */
.player-spotlight .spotlight-footer {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--near-black);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
}


/* =========================================================
   CANONICAL CONTENT ACCENTS
   These rules establish the reusable Level-1 treatment.
   ========================================================= */

/* Top Players: green accent begins at rankings frame. */
.top-players-card::before {
  width: var(--level1-accent-width) !important;
  background: var(--level1-accent-green) !important;
}

/* Players to Know: accent begins at each discovery card. */
.discovery-card {
}

.discovery-card.discovery-up {
}

/* Radar: accent begins at each Radar card. */
/* Explore: accent begins at each Explore card. */



/* =========================================================
   LEVEL-1 ALIGNMENT AXIS
   Section headings and content frames share the same X origin.
   ========================================================= */

.players-explore,
.player-spotlight,
.players-section,
.players-to-know-section,
.player-radar-section {
  margin-left: 0;
  margin-right: 0;
}

.players-explore > .section-heading,
.player-spotlight > .spotlight-header,
.players-section > .section-heading,
.players-to-know-section > .section-heading,
.player-radar-section > .section-heading,
.players-explore > .explore-grid,
.player-spotlight > .spotlight-main-compact,
.player-spotlight > .spotlight-footer,
.players-section > .top-players-card,
.players-to-know-section > .players-to-know-grid,
.player-radar-section > .player-radar {
  margin-left: 0;
  margin-right: 0;
}



/* =========================================================
   LEVEL-1 SECTION GEOMETRY — CANONICAL
   Permanent rule:
   1) section heading is OUTSIDE the content frame
   2) heading and content frame share the exact same X origin
   3) accent begins at CONTENT frame, never beside section heading
   Applies to Explore, Spotlight, Top Players, Discovery and Radar.
   ========================================================= */

:root {
  --level1-x: 0px;
  --level1-heading-to-content: 12px;
}

/* Every Level-1 section wrapper owns no internal horizontal offset. */
.players-explore,
.player-spotlight,
.players-section,
.players-to-know-section,
.player-radar-section {
  box-sizing: border-box;
  margin-left: var(--level1-x) !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Every Level-1 heading starts on the SAME left axis. */
.players-explore > .section-heading,
.player-spotlight > .spotlight-header,
.players-section > .section-heading,
.players-to-know-section > .section-heading,
.player-radar-section > .section-heading {
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: var(--level1-heading-to-content) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Every Level-1 content surface starts on that exact same axis. */
.players-explore > .explore-grid,
.player-spotlight > .spotlight-main-compact,
.player-spotlight > .spotlight-footer,
.players-section > .top-players-card,
.players-to-know-section > .players-to-know-grid,
.player-radar-section > .player-radar {
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================================================
   EXPLORE — conform to canonical Level-1 architecture.
   The OUTER Explore section is no longer a framed card.
   Only the seven position cards are framed/accented content.
   ========================================================= */

.players-explore,
.tms-explore.players-explore {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Remove any inherited/decorative accent from the Explore SECTION wrapper. */
.players-explore::before,
.players-explore::after,
.tms-explore.players-explore::before,
.tms-explore.players-explore::after {
  content: none !important;
  display: none !important;
}

/* No inset inside the Explore section heading. */
.players-explore > .section-heading,
.players-explore > .explore-heading {
  width: 100%;
  padding: 0 !important;
}

/* Title/helper use the same header relationship as other Level-1 sections. */
.players-explore > .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 24px;
}

.players-explore > .section-heading .section-hint {
  margin: 0 0 3px !important;
  padding: 0 !important;
  text-align: left;
}

/* Position-card grid begins directly under the heading at the same X origin. */
.players-explore > .explore-grid {
  width: 100%;
  padding: 0 !important;
}

/* Accent belongs to each position CARD, matching Discovery/Radar behavior. */
.players-explore .explore-card {
  position: relative;
  overflow: hidden;
}

.players-explore 


/* =========================================================
   SPOTLIGHT — same Level-1 heading/content axis.
   ========================================================= */

.player-spotlight > .spotlight-header {
  padding: 0 !important;
}

.player-spotlight > .spotlight-main-compact,
.player-spotlight > .spotlight-footer {
  width: 100%;
}


/* =========================================================
   TOP PLAYERS / DISCOVERY / RADAR — explicit same-axis guard.
   ========================================================= */

.players-section > .section-heading,
.players-to-know-section > .section-heading,
.player-radar-section > .section-heading {
  width: 100%;
}

.players-section > .top-players-card,
.players-to-know-section > .players-to-know-grid,
.player-radar-section > .player-radar {
  width: 100%;
}



/* =========================================================
   LEVEL-1 COPY CLEANUP
   Approved removal of nonessential helper/tagline copy.
   ========================================================= */

/* Explore: remove "Choose a position to dig deeper." */
.players-explore .section-hint,
.tms-explore .section-hint {
  display: none !important;
}

/* Players to Know: remove "Three different stories worth investigating." */
.players-to-know-section .section-hint,
.players-to-know-section .section-helper,
.players-to-know-section .section-note {
  display: none !important;
}

/* TMS Player Radar: remove "Five different players. Five different signals." */
.player-radar-section .section-hint,
.player-radar-section .section-helper,
.player-radar-section .section-note {
  display: none !important;
}

/* Spotlight Reality Check: use the agreed wording. */
.player-spotlight .reality-check-title,
.player-spotlight .reality-title {
  font-size: 0 !important;
}

.player-spotlight .reality-check-title::before,
.player-spotlight .reality-title::before {
  content: "WHAT TO KEEP IN MIND";
  display: block;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}



/* =========================================================
   AUTHENTICATED SIDEBAR — FINAL VIEWPORT-FIT GEOMETRY
   Permanent desktop rule:
   logo + all 9 nav items + divider + quote must fit inside
   the initial 1440x900 viewport with NO sidebar scrolling.
   ========================================================= */

@media (min-width: 1001px) {
  .tms-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Compact the brand area itself. */
  .tms-sidebar .sidebar-brand {
    flex: 0 0 108px !important;
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    padding: 7px 14px 3px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tms-sidebar .sidebar-brand img,
  .tms-sidebar .sidebar-logo {
    width: auto !important;
    height: 96px !important;
    max-width: 142px !important;
    max-height: 96px !important;
    object-fit: contain !important;
  }

  /* Nine compact rows. This overrides every earlier nav-row rule. */
  .tms-sidebar .sidebar-nav {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 5px 12px 0 !important;
    padding: 0 !important;
    gap: 2px !important;
  }

  .tms-sidebar .sidebar-nav .nav-item,
  .tms-sidebar .sidebar-nav a.nav-item {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    display: grid !important;
    grid-template-columns: 17px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .tms-sidebar .sidebar-nav .nav-icon,
  .tms-sidebar .sidebar-nav a.nav-item > .nav-icon {
    box-sizing: border-box !important;
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    flex: none !important;
  }

  /* Divider stays directly below the final navigation item. */
  .tms-sidebar .sidebar-divider {
    flex: 0 0 1px !important;
    width: calc(100% - 40px) !important;
    height: 1px !important;
    margin: 11px 20px 10px !important;
  }

  /* Quote is part of the fixed first viewport, never below it. */
  .tms-sidebar .sidebar-quote {
    position: relative !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    margin: 0 0 16px 28px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    color: var(--cool-white) !important;
    font-family: "Archivo Narrow", "Archivo", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: .96 !important;
    letter-spacing: 0 !important;
  }

  .tms-sidebar .sidebar-quote span,
  .tms-sidebar .sidebar-quote strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    line-height: .96 !important;
  }

  .tms-sidebar .sidebar-quote strong {
    position: relative !important;
    width: fit-content !important;
    margin-top: 2px !important;
    color: var(--green) !important;
  }

  .tms-sidebar .sidebar-quote strong::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -5px !important;
    width: 58px !important;
    height: 2px !important;
    background: var(--green) !important;
    border-radius: 999px !important;
  }
}



/* =========================================================
   SIDEBAR QUOTE — FINAL VIEWPORT FIT
   Keep nav geometry; compact only the quote block enough
   to clear the bottom of a 900px desktop viewport.
   ========================================================= */

@media (min-width: 1001px) {
  .tms-sidebar .sidebar-divider {
    margin-top: 7px !important;
    margin-bottom: 7px !important;
  }

  .tms-sidebar .sidebar-quote {
    margin: 0 0 10px 28px !important;
    font-size: 14px !important;
    line-height: .91 !important;
  }

  .tms-sidebar .sidebar-quote span,
  .tms-sidebar .sidebar-quote strong {
    line-height: .91 !important;
  }

  .tms-sidebar .sidebar-quote strong {
    margin-top: 1px !important;
  }

  .tms-sidebar .sidebar-quote strong::after {
    bottom: -4px !important;
    width: 54px !important;
    height: 2px !important;
  }
}



/* =========================================================
   SIDEBAR NAV ICON SIZE — FINAL TUNING
   Increase icons only; preserve row height and quote fit.
   ========================================================= */

@media (min-width: 1001px) {
  .tms-sidebar .sidebar-nav .nav-icon,
  .tms-sidebar .sidebar-nav a.nav-item > .nav-icon {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }

  .tms-sidebar .sidebar-nav .nav-item,
  .tms-sidebar .sidebar-nav a.nav-item {
    grid-template-columns: 18px minmax(0, 1fr) !important;
  }
}


/* =========================================================
   PLAYER SPOTLIGHT — REALITY CHECK FINAL ALIGNMENT
   Structural alignment after icon removal.
   ========================================================= */

.spotlight-reality {
  text-align: left;
}

.spotlight-reality .reality-heading .eyebrow,
.spotlight-reality .reality-heading strong,
.spotlight-reality > p {
  width: 100%;
  text-align: left;
  margin-left: 0;
}




/* =========================================================
   LEVEL 1 CONTENT TYPOGRAPHY — CANONICAL
   Applies to authenticated Level 1 page content only.
   Hero, sidebar and footer are intentionally excluded.

   28px  Page title
   20px  Section title
   16px  Card/component title
   14px  Analytical statement + body/evidence
   13px  Table/player data
   12px  Labels, eyebrows, categories + metadata
   12px  Minimum meaningful text size
   ========================================================= */

/* Page hierarchy */
.players-page .page-heading h1 {
  font-size: 28px;
}

.players-page .page-purpose,
.players-page .section-heading p {
  font-size: 14px;
  line-height: 1.45;
}

.players-page .section-heading h2 {
  font-size: 20px;
}

/* Explore */
.players-page .explore-position-name {
  max-width: 96px;
  overflow: visible;
  font-size: 12px;
  line-height: 1.08;
  white-space: normal;
  text-overflow: clip;
}

.players-page .explore-copy strong {
  font-size: 18px;
}

.players-page .explore-arrow {
  font-size: 13px;
}

/* Keep all seven position cards readable, including IDP / Individual Player. */
.players-page .explore-card {
  min-height: 92px;
  height: 92px;
  padding: 10px;
}

.players-page .explore-copy {
  padding-right: 24px;
}

/* Spotlight */
.players-page .spotlight-kicker,
.players-page .spotlight-week,
.players-page .spotlight-position-label,
.players-page .player-meta,
.players-page .eyebrow {
  font-size: 12px;
  line-height: 1.2;
}

.players-page .spotlight-subtitle,
.players-page .spotlight-header-prompt {
  font-size: 12px;
  line-height: 1.35;
}

.players-page .spotlight-player-copy h2 {
  font-size: 16px;
}

.players-page .spotlight-read h3,
.players-page .reality-heading strong {
  font-size: 14px;
  line-height: 1.3;
}

.players-page .spotlight-read-copy,
.players-page .spotlight-reality > p,
.players-page .spotlight-fact {
  font-size: 14px;
  line-height: 1.4;
}

.players-page .fact-marker {
  font-size: 12px;
}

.players-page .spotlight-prompt strong,
.players-page .spotlight-prompt span {
  font-size: 12px;
  line-height: 1.3;
}

.players-page .why-button,
.players-page .primary-button,
.players-page .secondary-button {
  font-size: 12px;
}

/* Give the larger readable Spotlight copy enough room without crowding. */
.players-page .spotlight-main-compact {
  min-height: 176px;
}

.players-page .spotlight-fact {
  min-height: 48px;
}

/* Top Players */
.players-page .position-tab {
  font-size: 12px;
}

.players-page .ranking-header {
  font-size: 12px;
}

.players-page .ranking-row,
.players-page .ranking-player strong {
  font-size: 13px;
}

.players-page .ranking-player span {
  font-size: 12px;
}

.players-page .rank,
.players-page .tms-score,
.players-page .trend {
  font-size: 13px;
}

.players-page .ranking-header {
  height: 34px;
}

.players-page .ranking-row {
  min-height: 48px;
}

/* Players to Know */
.discovery-type,
.players-page .discovery-signal,
.players-page .insight-label,
.discovery-player-meta > span,
.players-page .view-player-link,
.players-page .why-link {
  font-size: 12px;
  line-height: 1.2;
}

.discovery-player-meta h3 {
  font-size: 16px;
}

.discovery-insight p {
  font-size: 14px;
  line-height: 1.4;
}

.players-page .insight-icon {
  font-size: 12px;
}

.discovery-insight {
  min-height: 76px;
}

/* TMS Player Radar */
/* Never let meaningful Level 1 card copy collapse below the readability floor. */
.players-page .spotlight-read-copy,
.players-page .spotlight-reality > p,
.players-page .spotlight-fact,
.discovery-insight p,
/* =========================================================
   BIG BRAIN NARRATIVE DENSITY — LEVEL 1 STANDARD
   Keep readable font sizes while allowing evidence-backed
   analysis to breathe horizontally rather than vertically.
   No arbitrary sentence limit.
   ========================================================= */

/* Primary Big Brain narrative */
.players-page .spotlight-read-copy,
.players-page .spotlight-reality > p,
.players-page .spotlight-fact,
.discovery-insight p,
/* Tighten spacing inside generated-analysis areas without
   reducing the established typography sizes. */
.players-page .spotlight-read-copy {
  margin-top: 6px;
  margin-bottom: 7px;
}

.players-page .spotlight-facts {
  gap: 6px;
}

.players-page .spotlight-fact {
  min-height: 42px;
}

.players-page .spotlight-reality > p {
  margin-top: 6px;
}

.discovery-insight p {
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Big Brain headings stay visually separated from narrative,
   but use a compact rhythm. */
.players-page .spotlight-read h3,
.players-page .reality-heading strong {
  line-height: 1.2;
}

.players-page .reality-heading {
  gap: 2px;
}

/* Preserve enough card capacity for variable-length Big Brain
   findings instead of clipping or forcing a sentence count. */
.players-page .spotlight-main-compact,
.discovery-card,
.players-page .spotlight-read,
.players-page .spotlight-reality,
.discovery-insight,
/* =========================================================
   BIG BRAIN NARRATIVE DENSITY — TIGHTER TEMPLATE
   Preserve 14px readability while increasing analysis capacity.
   ========================================================= */

.players-page .spotlight-read-copy,
.players-page .spotlight-reality > p,
.players-page .spotlight-fact,
.discovery-insight p,
.players-page .spotlight-read-copy {
  margin-top: 4px;
  margin-bottom: 5px;
}

.players-page .spotlight-facts {
  gap: 4px;
}

.players-page .spotlight-fact {
  min-height: 36px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.players-page .spotlight-reality > p {
  margin-top: 4px;
}

.discovery-insight p {
  margin-top: 3px;
  margin-bottom: 3px;
}

.players-page .spotlight-read h3,
.players-page .reality-heading strong {
  line-height: 1.12;
}

.players-page .reality-heading {
  gap: 1px;
}

/* =========================================================
   SIDEBAR QUOTE — CENTER BLOCK, LEFT-ALIGNED WORDING
   Center the quote as a unit beneath the centered TMS logo.
   ========================================================= */

.sidebar-quote {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.sidebar-quote > * {
  text-align: left;
}



/* =========================================================
   SIDEBAR QUOTE — FINAL CENTERING CORRECTION
   Earlier viewport-fit rules use !important and were overriding
   the previous centering rule. Center the quote BLOCK while
   preserving left-aligned wording.
   ========================================================= */

.tms-sidebar .sidebar-quote {
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  align-self: center !important;
}

.tms-sidebar .sidebar-quote span,
.tms-sidebar .sidebar-quote strong {
  text-align: left !important;
  align-self: flex-start !important;
}



/* =========================================================
   TMS PLAYER RADAR — FOUR-CARD LEVEL 1 TEMPLATE
   Show up to four of the strongest non-duplicative signals.
   Categories are evidence-selected rather than forced.
   ========================================================= */

.player-radar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* =========================================================
   EXPLORE — FRAME / PLAYER NUMBER COLOR SYNC
   Jersey number always inherits the exact visual identity
   of its card's positional left frame.
   ========================================================= */

.players-page .explore-grid > .explore-card:nth-child(1) .explore-body b { color: #00F0A0; }
.players-page .explore-grid > .explore-card:nth-child(2) .explore-body b { color: #3B82F6; }
.players-page .explore-grid > .explore-card:nth-child(3) .explore-body b { color: #FF9F1C; }
.players-page .explore-grid > .explore-card:nth-child(4) .explore-body b { color: #D946EF; }
.players-page .explore-grid > .explore-card:nth-child(5) .explore-body b { color: #E6C229; }
.players-page .explore-grid > .explore-card:nth-child(6) .explore-body b { color: #35C9FF; }
.players-page .explore-grid > .explore-card:nth-child(7) .explore-body b { color: #FF5A5F; }


/* =========================================================
   LEVEL 1 DISCOVERY CARD — FINAL CANONICAL SOURCE
   Players to Know + TMS Player Radar use the exact same
   anatomy, typography and vertical rhythm.
   ========================================================= */

/* SECTION GRIDS */
.players-to-know-grid,
.discovery-grid,
.player-radar,
.player-radar-grid {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.players-to-know-grid,
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.player-radar,
.player-radar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}


/* SHARED CARD */
.discovery-card,
.player-radar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 170px;
  box-sizing: border-box;
  padding: 10px 12px 8px 14px;
  border: 1px solid color-mix(in srgb, var(--card-accent, #00F0A0) 28%, transparent);
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}



/* Semantic Level-1 card anatomy.
   Used by Insights / Performance / University without page-specific CSS. */
.discovery-grid > .discovery-card,
.player-radar-grid > .player-radar-card {
  --card-accent: #00F0A0;
  border-left: 3px solid var(--card-accent);
}

.discovery-grid > .discovery-card:nth-child(1),
.player-radar-grid > .player-radar-card:nth-child(1) { --card-accent: #00F0A0; }
.discovery-grid > .discovery-card:nth-child(2),
.player-radar-grid > .player-radar-card:nth-child(2) { --card-accent: #35A7FF; }
.discovery-grid > .discovery-card:nth-child(3),
.player-radar-grid > .player-radar-card:nth-child(3) { --card-accent: #FFB000; }
.player-radar-grid > .player-radar-card:nth-child(4) { --card-accent: #D946EF; }

.discovery-grid > .discovery-card > .discovery-label,
.player-radar-grid > .player-radar-card > span {
  display: block;
  margin: 0 0 5px;
  color: var(--card-accent);
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.10;
  text-transform: uppercase;
}

.discovery-grid > .discovery-card > h3,
.player-radar-grid > .player-radar-card > h3 {
  margin: 0 0 3px;
  color: #F0F0F0;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.08;
}

.discovery-grid > .discovery-card > small,
.player-radar-grid > .player-radar-card > small {
  display: block;
  margin: 0 0 7px;
  color: #6A8F84;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.discovery-grid > .discovery-card > .discovery-reason,
.player-radar-grid > .player-radar-card > .player-radar-reason {
  flex: 1 1 auto;
  min-height: 54px;
  box-sizing: border-box;
  padding: 7px 10px;
  margin: 0 0 7px;
  border: 0;
  border-radius: 8px;
  background: rgba(0,16,0,.42);
  color: #8DBDB1;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  line-height: 1.18;
}

.discovery-grid > .discovery-card > .discovery-actions,
.player-radar-grid > .player-radar-card > .player-radar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: auto;
}

.discovery-grid .discovery-actions strong,
.player-radar-grid .player-radar-actions strong {
  color: var(--card-accent);
  font: 700 12px/1 "Archivo", sans-serif;
}

.discovery-grid .discovery-actions a,
.player-radar-grid .player-radar-actions a {
  margin-left: auto;
  color: #D0F0F0;
  font: 700 12px/1 "Archivo", sans-serif;
  text-decoration: none;
}

/* IMAGE — parked at upper right so it does not consume vertical flow */
.discovery-top {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  min-height: 0;
  margin: 0;
}

.discovery-player-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #003010;
  border-radius: 50%;
  color: #6A8F84;
  font-size: 12px;
}


/* LINE 1 — CATEGORY */
.discovery-topline {
  display: block;
  margin: 0 44px 3px 0;
  text-align: left;
}

.discovery-type {
  display: block;
  margin: 0;
  color: var(--card-accent);
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.10;
  text-align: left;
  text-transform: uppercase;
}


/* LINES 2 + 3 — PLAYER / TEAM · POS */
.discovery-player-meta {
  display: block;
  margin: 0 44px 6px 0;
  text-align: left;
}

.discovery-player-meta h3 {
  display: block;
  margin: 0 0 3px;
  color: #F0F0F0;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.08;
  text-align: left;
}

.discovery-player-meta > span {
  display: block;
  margin: 0;
  color: var(--card-accent);
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}


/* ANALYSIS */
.discovery-insight {
  flex: 1 1 auto;
  min-height: 54px;
  box-sizing: border-box;
  padding: 7px 10px;
  margin: 0 0 7px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 16, 0, 0.42);
}

.discovery-insight p {
  margin: 0;
  color: #8DBDB1;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.18;
  text-align: left;
}


/* ACTIONS */
.discovery-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: auto;
}

.discovery-card .why-link,
.discovery-card .view-player-link {
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.discovery-card .why-link {
  color: var(--card-accent);
}

.discovery-card .view-player-link {
  color: #D0F0F0;
  margin-left: auto;
}


/* PLAYERS TO KNOW ACCENTS */
.players-to-know-grid > .discovery-card:nth-child(1) { --card-accent: #00F0A0; }
.players-to-know-grid > .discovery-card:nth-child(2) { --card-accent: #FF4D57; }
.players-to-know-grid > .discovery-card:nth-child(3) { --card-accent: #FFB000; }

.discovery-card.accent-green .discovery-type,
.discovery-card.accent-green .why-link {
  color: #00F0A0;
}

.discovery-card.accent-amber .discovery-type,
.discovery-card.accent-amber .why-link {
  color: #FFB000;
}

.discovery-card.accent-magenta .discovery-type,
.discovery-card.accent-magenta .why-link {
  color: #D946EF;
}

.discovery-card.accent-blue .discovery-type,
.discovery-card.accent-blue .why-link {
  color: #35A7FF;
}


/* =========================================================
   PLAYER SPOTLIGHT — FINAL HEADER ACTION ARCHITECTURE
   Header: title/purpose left, PLAYER SPOTLIGHT + actions right.
   Main analysis frame has no footer/action row and grows with content.
   ========================================================= */

.players-page .spotlight-header {
  align-items: flex-start;
}

.players-page .spotlight-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 7px;
  margin-left: auto;
}

.players-page .spotlight-header-actions .spotlight-header-prompt {
  margin: 0;
  text-align: right;
}

.players-page .spotlight-header-actions .spotlight-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.players-page .spotlight-header-actions .spotlight-actions button {
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.players-page .spotlight-header-actions .why-button,
.players-page .spotlight-header-actions .secondary-button {
  color: #00F0A0;
}

.players-page .spotlight-header-actions .primary-button {
  color: #D0F0F0;
}

.players-page .spotlight-header-actions .primary-button::after {
  content: " →";
}

/* Identity area now contains only POS + TEAM · MATCHUP. */
.players-page .spotlight-player-copy .player-meta {
  margin-top: 8px;
}

/* Main Spotlight analysis is content-driven. No bottom frame and no height clamp. */
.players-page .spotlight-main-compact {
  grid-template-rows: auto;
  min-height: 0;
  height: auto;
  overflow: visible;
}

.players-page .spotlight-read,
.players-page .spotlight-read-copy,
.players-page .spotlight-facts,
.players-page .spotlight-reality {
  max-height: none;
  height: auto;
  overflow: visible;
}


/* =========================================================
   PLAYER SPOTLIGHT — LEVEL 1 HEADING RHYTHM
   Matches the kicker/title spacing used by TMS Rankings / Top Players.
   Helper subtitle removed from the component.
   ========================================================= */

.players-page .player-spotlight .spotlight-heading > div {
  display: flex;
  flex-direction: column;
}

.players-page .player-spotlight .spotlight-title-line {
  margin: 0 0 4px;
}

.players-page .player-spotlight .spotlight-header-prompt {
  margin: 0;
}

.players-page .player-spotlight .spotlight-subtitle {
  display: none;
}


/* Spotlight Level 1 heading: same kicker/title rhythm as TMS Rankings / Top Players. */
.players-page .player-spotlight .spotlight-section-title {
  display: block;
  margin: 2px 0 0;
  color: #F0F0F0;
  font-family: "Archivo", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  text-align: left;
}
/* =========================================================
   FINAL PLAYERS QA — MASTER FRAME + CLEAN ANALYSIS
   2026-09-16
   ========================================================= */

/* Active week belongs to the Master selector only. */
.players-page .spotlight-week {
  display: none !important;
}

/* TMS evidence is never artificially numbered 01 / 02 / 03. */
.players-page .fact-marker {
  display: none !important;
}

/* Explicitly removed Level-1 helper copy stays removed. */
.players-page .players-explore .section-hint,
.players-page .players-to-know-section .section-hint {
  display: none !important;
}

/* Big Brain Special uses text hierarchy only; no redundant header icon. */
.players-page .player-spotlight .spotlight-header-icon {
  display: none !important;
}

/*
   MASTER FRAME FOOTER ALIGNMENT
   The sidebar divider and authenticated footer top border share the
   same 108px footer boundary on desktop. This prevents page-by-page drift.
*/
@media (min-width: 1001px) {
  .tms-sidebar {
    position: fixed;
  }

  .tms-sidebar .sidebar-divider {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 108px !important;
    width: auto !important;
    height: 1px !important;
    margin: 0 !important;
  }

  .tms-sidebar .sidebar-quote {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    width: max-content !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    text-align: left !important;
  }
}

/*
   DESKTOP SCALE RULE
   The authenticated shell keeps one proportional coordinate system.
   Responsive reflow begins only when the viewport is genuinely compact;
   normal desktop zoom does not selectively resize Master components.
*/
@media (min-width: 1001px) {
  .tms-sidebar,
  .tms-main,
  .tms-topbar,
  .tms-hero,
  .players-page,
  .tms-footer {
    box-sizing: border-box;
  }
}

/* =========================================================
   FINAL MASTER FOOTER / SIDEBAR ALIGNMENT
   No faded divider. Quote and footer brand share one start line.
   ========================================================= */

/* Remove the faded divider completely across the Master Frame. */
.tms-sidebar .sidebar-divider {
  display: none !important;
}

.tms-footer,
.app-footer {
  border-top: 0 !important;
}

/* Desktop: center the quote block horizontally, while moving its
   first line up to the same visual start line as the footer brand. */
@media (min-width: 1001px) {
  .tms-sidebar .sidebar-quote {
    left: 50% !important;
    right: auto !important;
    bottom: 32px !important;
    width: max-content !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    text-align: left !important;
  }
}

/* =========================================================
   FINAL FOOTER TYPOGRAPHY + VERTICAL RHYTHM PASS
   2026-09-16
   ========================================================= */

/* Secondary footer copy shares one readable size. */
.footer-rights,
.footer-principle > div > span {
  font-size: 11px !important;
}

/* Keep the TMS brand block as one deliberate three-line unit. */
.footer-brand > strong,
.footer-brand strong {
  margin-bottom: 8px !important;
}

.footer-tagline {
  margin-bottom: 7px !important;
}

/* Nudge the complete footer and sidebar quote down together. */
@media (min-width: 1001px) {
  .app-footer,
  .tms-footer {
    position: relative;
    top: 12px;
  }

  .tms-sidebar .sidebar-quote {
    bottom: 20px !important;
  }
}

/* =========================================================
   FINAL FOOTER WIDTH / WRAP CORRECTION
   Footer layout only. No changes above the footer.
   ========================================================= */
@media (min-width: 1001px) {
  .app-footer {
    grid-template-columns: 340px minmax(0, 1fr) auto !important;
    column-gap: 18px !important;
  }

  .footer-principles {
    grid-template-columns:
      minmax(165px, 0.95fr)
      minmax(155px, 0.90fr)
      minmax(210px, 1.20fr)
      minmax(180px, 1fr) !important;
    gap: 14px !important;
  }

  .footer-principle {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .footer-principle-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  .footer-principle strong {
    font-size: 10px !important;
    line-height: 1.08 !important;
    margin-bottom: 4px !important;
  }

  .footer-principle > div > span {
    max-width: none !important;
    font-size: 11px !important;
    line-height: 1.18 !important;
  }

  .footer-links {
    gap: 11px !important;
    font-size: 8px !important;
  }
}

/* =========================================================
   FOOTER FINAL COMPOSITION PASS V6
   Tighten brand block and move utility links directly below it.
   ========================================================= */
@media (min-width: 1001px) {
  .app-footer,
  .tms-footer {
    grid-template-columns: 340px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 26px !important;
    row-gap: 5px !important;
    align-items: start !important;
  }

  .footer-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Tighten the three-line TMS identity block. */
  .footer-brand > strong,
  .footer-brand strong {
    margin-bottom: 5px !important;
  }

  .footer-tagline {
    margin-bottom: 4px !important;
  }

  .footer-rights {
    margin: 0 !important;
    line-height: 1.15 !important;
  }

  /* Utility links now live directly beneath the TMS identity block. */
  .footer-links {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
  }

  /* Principles use the remaining footer width without competing with links. */
  .footer-principles {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    grid-template-columns:
      minmax(170px, 1fr)
      minmax(160px, 0.95fr)
      minmax(225px, 1.25fr)
      minmax(190px, 1.05fr) !important;
    gap: 16px !important;
    align-self: start !important;
  }
}

/* =========================================================
   FINAL FOOTER MICRO-PASS V7
   1) Tagline only: 0.5px smaller
   2) Principle/footer content after the left brand block shifts left
   ========================================================= */

/* Tagline only. Preserve every other footer font size. */
.tms-footer .footer-tagline {
  font-size: calc(100% - 0.5px) !important;
}

/* Pull the principle group left without changing its internal anatomy. */
.tms-footer .footer-principles {
  transform: translateX(-52px);
}

/* =========================================================
   FOOTER SIGN-OFF PASS V8
   - explicit readable tagline size
   - principles start earlier and use fluid width
   - quote and footer brand share the same visual start line
   ========================================================= */
@media (min-width: 1001px) {
  .tms-footer {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: start !important;
  }

  .tms-footer .footer-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .tms-footer .footer-tagline {
    font-size: 12.5px !important;
    line-height: 1 !important;
  }

  .tms-footer .footer-links {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .tms-footer .footer-principles {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    transform: none !important;
    grid-template-columns: 1fr .9fr 1.25fr 1fr !important;
    gap: 12px !important;
    align-self: start !important;
  }

  .tms-footer .footer-principle {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .tms-footer .footer-principle > div > span {
    max-width: none !important;
  }

  /* The quote is centered as a block, but its first line starts on the
     same horizontal footer row as © 2026 Tackle My Stats. */
  .tms-sidebar .sidebar-quote {
    left: 50% !important;
    right: auto !important;
    bottom: 53px !important;
    width: max-content !important;
    max-width: calc(100% - 40px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    text-align: left !important;
  }
}

/* =========================================================
   PLAYERS SIGN-OFF SPACING PASS V9
   - one consistent Level-1 blackspace rhythm
   - footer + sidebar quote move down as one Master row
   - quote first line aligns with footer brand first line
   ========================================================= */

/* Starting at PLAYERS, use one deliberate vertical rhythm. */
.players-page {
  --section-gap: 28px;
  padding-top: 24px;
}

/* Every major Level-1 block uses the same space before the next block. */
.players-page > .page-header,
.players-page > .tms-explore,
.players-page > .players-explore,
.players-page > .player-spotlight,
.players-page > .players-section,
.players-page > .players-to-know-section,
.players-page > .player-radar-section {
  margin-bottom: var(--section-gap) !important;
}

@media (min-width: 1001px) {
  /* Shared downward move for the Master footer row. */
  .app-footer,
  .tms-footer {
    top: 22px !important;
  }

  /* Keep the quote centered under the logo. The extra 9px Y correction
     aligns "Better" with "© 2026 Tackle My Stats." before both move down. */
  .tms-sidebar .sidebar-quote {
    bottom: 43px !important;
    transform: translate(-50%, 9px) !important;
  }
}

/* =========================================================
   FINAL SIDEBAR QUOTE SPACING
   Give the quote the same deliberate breathing room beneath
   the final navigation item as the logo/navigation relationship.
   Footer remains untouched.
   ========================================================= */
.tms-sidebar .sidebar-quote {
  transform: translateY(14px);
}

/* =========================================================
   FINAL MASTER CLEANUP — SIDEBAR QUOTE + ESSENTIAL FRAMES ONLY
   ========================================================= */

/* Sidebar quote removed from the Master Frame. */
.sidebar-quote {
  display: none !important;
}

/* No replacement divider/separator where the quote was. */
.sidebar-divider {
  display: none !important;
}

/* Hero artwork defines the Hero surface; no faded outer frame. */
.tms-hero {
  border-color: transparent !important;
}

/* Level-1 section wrappers remain borderless; blackspace provides separation. */
.players-page,
.players-explore,
.player-spotlight,
.players-section,
.players-to-know-section,
.player-radar-section {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Keep frames only on true interactive/grouped surfaces. */
.player-search,
.filter-button,
.explore-card,
.top-players-card,
.discovery-card,
.player-radar .discovery-card,
.spotlight-main-compact {
  /* Existing component borders remain authoritative. */
}

/* Preserve TMS semantic/accent edges. */
.explore-card::before,
.top-players-card::before,
.player-spotlight .spotlight-main-compact::before {
  opacity: 1 !important;
}

/* =========================================================
   PLAYERS FINAL CLEAN FRAME PASS V12
   Quote is gone. Borders exist only where they communicate
   a control or active state. Card identity comes from blackspace
   and the approved semantic 3px accent edge.
   ========================================================= */

/* Force-remove the retired sidebar quote regardless of earlier Master rules. */
.tms-sidebar > .sidebar-quote,
.tms-sidebar .sidebar-quote,
.sidebar-quote {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.tms-sidebar .sidebar-divider,
.sidebar-divider {
  display: none !important;
}

/* Remove decorative shell lines. */
.tms-hero,
.tms-topbar,
.tms-footer,
.app-footer {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Level-1 cards keep their approved shape/accent but lose the faded green box. */
.players-explore .explore-card,
.player-spotlight .top-players-card,
.players-to-know-section .discovery-card {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Preserve each approved semantic left edge. */
.players-explore .explore-card,
.players-to-know-section .discovery-card,
.player-radar-section .discovery-card,
.player-radar .discovery-card {
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--tms-left-rail-green)) 28%, transparent) !important;
  border-left: var(--tms-left-rail-width) solid var(--card-accent, var(--tms-left-rail-green)) !important;
  background: transparent !important;
}

/* Spotlight and Top Players use their existing pseudo-element accent. */
.player-spotlight .spotlight-main-compact,
.top-players-card {
}

/* Controls and selected navigation still need visible boundaries. */
.player-search,
.filter-button,
.nav-item.active,
.week-selector,
.profile-button {
  box-shadow: none !important;
}

/* =========================================================
   PLAYERS FINAL ACCENT CLEANUP V13
   Discovery + Radar use the semantic ::before accent only.
   Remove the physical left border that creates the white highlight.
   ========================================================= */
.players-to-know-section .discovery-card,
.player-radar-section .discovery-card,
.player-radar .discovery-card {
}

.players-to-know-section .discovery-card::before,
.player-radar-section .discovery-card::before,
.player-radar .discovery-card::before {
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
}


/* =========================================================
   V39 — MASTER SIDEBAR POLISH
   Scope: full collapsed logo, larger nav icons in both states,
   and TMS hover labels in collapsed mode only.
   ========================================================= */

/* Larger navigation icons are now part of both sidebar states. */
.tms-sidebar .sidebar-nav .nav-item .nav-icon,
.tms-sidebar .sidebar-nav a.nav-item > .nav-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

/* Keep the complete TMS mark visible when the rail is collapsed. */


/* Icon rail geometry: same icon size as expanded navigation. */



/* TMS hover label. It overlays the page and never changes layout. */




/* =========================================================
   V40 — VIEWPORT-LEVEL COLLAPSED NAV TOOLTIPS
   Tooltips are mounted outside the sidebar so sidebar overflow
   can never clip them. No other Master/Players geometry changes.
   ========================================================= */

/* Disable the old sidebar-contained pseudo tooltips. */

/* Floating page-name label. */
.tms-nav-tooltip {
  position: fixed;
  z-index: 2147483000;
  transform: translate(6px, -50%);
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(0, 240, 160, .46);
  border-radius: 7px;
  background: #001008;
  color: #f0f0f0;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .52);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.tms-nav-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}


/* =========================================================
   V41 — COLLAPSED NAV HOVER CONNECTION
   Tightens tooltip-to-rail distance and highlights hovered icon.
   ========================================================= */

/* Bring the floating label closer to its navigation icon. */
.tms-nav-tooltip {
  margin-left: -10px;
}

/* Make the hovered destination visually connect to its label. */

/* Keep the effect quick and intentional. */
.tms-sidebar .nav-icon {
  transition:
    color 120ms ease,
    filter 120ms ease,
    transform 120ms ease;
}


/* =========================================================
   V42 — FILLED TMS GREEN COLLAPSED NAV TOOLTIPS
   Pulls tooltip tighter to rail and strengthens hover visibility.
   ========================================================= */

.tms-nav-tooltip {
  margin-left: -19px;
  background: #00F0A0;
  border-color: #00F0A0;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .48);
}

.tms-nav-tooltip::before {
  background: #00F0A0;
  border-bottom-color: #00F0A0;
}


/* V43 — black tooltip text */
.tms-nav-tooltip {
  color: #000000;
}


/* =========================================================
   V45B — LARGER SIDEBAR EXPAND / COLLAPSE CARETS
   Targets the actual caret span in both sidebar states.
   ========================================================= */



/* V46 — Explore cards: remove decorative football outline.
   Real player/team imagery will occupy the artwork area in production. */
.explore-card .explore-ball {
  display: none !important;
}


/* =========================================================
   TEAMS LEVEL 1 — FIRST PASS
   Inherits the locked V46 Master Frame and Level 1 system.
   ========================================================= */

.team-conference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.team-explore-card {
  position: relative;
  min-height: 108px;
  padding: 18px 18px 16px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--c, var(--team-accent, #00F0A0)) 24%, transparent);
  background:
    radial-gradient(circle at 86% 24%, rgba(255,255,255,.055), transparent 28%),
    linear-gradient(135deg, #00170f 0%, #000b07 100%);
  border-radius: 8px;
}

.team-explore-card .team-explore-kicker {
  color: #9ebfba;
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.team-explore-card strong {
  color: #f0f0f0;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
  margin-top: 2px;
}

.team-explore-card > span:last-of-type {
  margin-top: 7px;
  color: #7fa39d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.team-explore-card b {
  position: absolute;
  right: 16px;
  bottom: 13px;
  color: var(--team-accent, #00F0A0);
  font-size: 16px;
  font-weight: 500;
}

.team-explore-card:hover {
  transform: translateY(-1px);
  background:
    radial-gradient(circle at 86% 24%, rgba(255,255,255,.075), transparent 28%),
    linear-gradient(135deg, #002018 0%, #000d09 100%);
}

.team-explore-card.accent-green { --team-accent: #00F0A0; }
.team-explore-card.accent-blue { --team-accent: #3aa8ff; }
.team-explore-card.accent-amber { --team-accent: #ffb52e; }
.team-explore-card.accent-magenta { --team-accent: #e94ae8; }
.team-explore-card.accent-cyan { --team-accent: #38d7e8; }
.team-explore-card.accent-red { --team-accent: #ff5c66; }
.team-explore-card.accent-violet { --team-accent: #9b72ff; }
.team-explore-card.accent-mint { --team-accent: #75e6c4; }

.team-mark-placeholder {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,240,160,.32);
  background: radial-gradient(circle, rgba(0,240,160,.11), rgba(0,16,8,.2) 66%);
  color: rgba(208,240,240,.42);
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.team-ranking-grid {
  grid-template-columns: 42px 1.55fr .7fr .7fr 1.35fr .55fr .55fr;
}

.team-mini-mark,
.team-discovery-mark {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,240,160,.07);
  border: 1px solid rgba(0,240,160,.18);
  color: #6c938d;
}

.team-mini-mark {
  width: 34px;
  height: 34px;
}

.team-discovery-mark {
  width: 46px;
  height: 46px;
}

@media (max-width: 1050px) {
  .team-conference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   TMS LEVEL 1 — CANONICAL EXPLORE COMPONENT
   One permanent six-tile system for Players, Teams, Matchups,
   Fantasy Hub, Insights, Performance and University.
   ========================================================= */

.team-explore-six,
.matchup-explore-six {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.team-focus-card,
.matchup-focus-card {
  --c: #00F0A0;
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 9px 12px 9px 8px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--c, #00F0A0) 24%, transparent);
  border-radius: 7px;
  background:
    radial-gradient(circle at 84% 28%, rgba(255,255,255,.045), transparent 31%),
    linear-gradient(135deg, #00170f 0%, #000b07 100%);
  transition: transform 120ms ease, background 120ms ease;
}

.team-focus-card:hover,
.matchup-focus-card:hover {
  transform: translateY(-1px);
  background:
    radial-gradient(circle at 84% 28%, rgba(255,255,255,.07), transparent 31%),
    linear-gradient(135deg, #002018 0%, #000d09 100%);
}

.team-focus-card span,
.matchup-focus-card span {
  position: relative;
  text-transform: uppercase;
  z-index: 1;
  color: var(--c);
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-focus-card strong,
.matchup-focus-card strong {
  position: relative;
  z-index: 1;
  margin-top: 3px;
  color: #F0F0F0;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.35px;
  white-space: nowrap;
}

.team-focus-card small,
.matchup-focus-card small {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: var(--c);
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .075em;
  white-space: nowrap;
}

.team-focus-card.accent-green,
.matchup-focus-card.accent-green { --c:#00F0A0; }
.team-focus-card.accent-blue,
.matchup-focus-card.accent-blue { --c:#3AA8FF; }
.team-focus-card.accent-amber,
.matchup-focus-card.accent-amber { --c:#FFB52E; }
.team-focus-card.accent-magenta,
.matchup-focus-card.accent-magenta { --c:#E94AE8; }
.team-focus-card.accent-yellow,
.matchup-focus-card.accent-yellow { --c:#E6C229; }
.team-focus-card.accent-cyan,
.matchup-focus-card.accent-cyan { --c:#38D7E8; }
.team-focus-card.accent-red,
.matchup-focus-card.accent-red { --c:#FF5C66; }

@media (max-width: 1100px) {
  .team-explore-six,
  .matchup-explore-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}




/* V51 — ensure complete Team Profile secondary line remains visible */
.teams-ranking-section .projected-stats {
  overflow: visible;
}

.teams-ranking-section .projected-stats small {
  display: block;
  width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}


/* =========================================================
   MATCHUPS LEVEL 1 — FIRST PASS
   Inherits locked Master Frame and Level 1 system.
   ========================================================= */

.matchup-team-pair{display:flex;align-items:center;gap:8px}
.matchup-team-pair span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(0,240,160,.25);background:rgba(0,240,160,.06);color:#6f918c;font-family:"Archivo Narrow","Arial Narrow",sans-serif;font-size:9px;font-weight:800}
.matchup-team-pair b{color:#00F0A0;font-size:11px;letter-spacing:.08em}
.matchup-ranking-grid{grid-template-columns:1.15fr 1.15fr .6fr .7fr 1.7fr .55fr}
.edge-button{justify-self:start;border:1px solid rgba(0,240,160,.28);background:rgba(0,240,160,.06);color:#00F0A0;border-radius:5px;padding:5px 10px;font-family:"Archivo",Arial,sans-serif;font-weight:800;cursor:pointer}
.matchup-discovery-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(0,240,160,.18);background:rgba(0,240,160,.07);color:#6c938d;font-family:"Archivo Narrow","Arial Narrow",sans-serif;font-size:10px;font-weight:800}

/* Fantasy Hub V1 */
.fantasy-mode-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.fantasy-mode-card{--c:#00F0A0;position:relative;min-width:0;min-height:116px;padding:15px 14px 14px 17px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;border:1px solid color-mix(in srgb,var(--c,#00F0A0) 24%,transparent);border-radius:7px;background:radial-gradient(circle at 84% 28%,rgba(255,255,255,.045),transparent 31%),linear-gradient(135deg,#00170f,#000b07)}
.fantasy-mode-card span{color:#91aaa6;font:700 11px "Archivo Narrow","Arial Narrow",sans-serif}.fantasy-mode-card strong{margin-top:3px;color:#F0F0F0;font-size:22px}.fantasy-mode-card small{margin-top:8px;color:var(--c);font:800 9px "Archivo Narrow","Arial Narrow",sans-serif;letter-spacing:.05em}
.fantasy-mode-card.accent-green{--c:#00F0A0}.fantasy-mode-card.accent-blue{--c:#3AA8FF}.fantasy-mode-card.accent-amber{--c:#FFB52E}.fantasy-mode-card.accent-magenta{--c:#E94AE8}.fantasy-mode-card.accent-cyan{--c:#38D7E8}.fantasy-mode-card.accent-red{--c:#FF5C66}
.fantasy-decision-mark,.fantasy-signal-mark{border-radius:50%;display:grid;place-items:center;border:1px solid rgba(0,240,160,.22);background:rgba(0,240,160,.07);color:#00F0A0;font-weight:800}.fantasy-decision-mark{width:82px;height:82px;font-size:11px}.fantasy-signal-mark{width:46px;height:46px;font-size:11px}
.fantasy-decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.fantasy-decision-card{min-height:164px;padding:20px;display:flex;flex-direction:column;text-decoration:none;border-radius:8px;border:1px solid rgba(0,240,160,.13);background:linear-gradient(145deg,#00130d,#000906)}.fantasy-decision-card span{color:#00F0A0;font-size:11px;font-weight:800}.fantasy-decision-card strong{margin-top:5px;color:#F0F0F0;font-size:22px}.fantasy-decision-card p{margin:10px 0 16px;color:#8eaaa5;font-size:12px;line-height:1.45}.fantasy-decision-card b{margin-top:auto;color:#00F0A0;font-size:11px}
@media(max-width:1100px){.fantasy-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fantasy-decision-grid{grid-template-columns:1fr}}

/* =========================================================
   FANTASY HUB V2
   ========================================================= */
.fantasy-hub-page .fantasy-mode-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.fantasy-hub-page .fantasy-mode-card{
  min-height:122px;
}
.fantasy-hub-page .fantasy-mode-card strong{
  font-size:21px;
}
.fantasy-focus-art{
  width:82px;
  height:82px;
  flex:0 0 82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,240,160,.28);
  background:
    radial-gradient(circle at 50% 40%,rgba(0,240,160,.12),transparent 55%),
    rgba(0,240,160,.035);
}
.fantasy-focus-art span{
  color:#00F0A0;
  font-family:"Archivo Narrow","Arial Narrow",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.fantasy-hub-page .fantasy-identity h3{
  margin:5px 0 2px;
  color:#F0F0F0;
  font-size:18px;
}
.fantasy-hub-page .fantasy-signal-mark{
  color:#7fa39d;
}
@media(max-width:1100px){
  .fantasy-hub-page .fantasy-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* =========================================================
   TMS — SINGLE NAVIGATION ARROW
   2026-09-17
   The HTML already contains the right arrow on EXPLORE.
   Remove the CSS-generated duplicate arrow.
   ========================================================= */

.players-page .spotlight-header-actions .primary-button::after,
.teams-page .spotlight-header-actions .primary-button::after,
.matchups-page .spotlight-header-actions .primary-button::after,
.fantasy-hub-page .spotlight-header-actions .primary-button::after,
.spotlight-header-actions .primary-button::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   BIG BRAIN BRIEFING — FIRST BUILD
   ========================================================= */
.briefing-page{padding-top:17px}
.briefing-lead{display:grid;grid-template-columns:82px minmax(0,1fr) 180px;gap:18px;align-items:center;margin-bottom:22px;padding:18px;background:radial-gradient(circle at 8% 50%,rgba(0,240,160,.08),transparent 24%),linear-gradient(135deg,#03120d,#010805 62%,#020d09);border:1px solid #0b4029;border-radius:8px}
.briefing-lead-mark{width:66px;height:66px;display:grid;place-items:center;border-radius:50%;color:#00f0a0;background:rgba(0,240,160,.045);border:1px solid rgba(0,240,160,.28);font-family:"Archivo Narrow",Arial,sans-serif;font-size:17px;font-weight:800;letter-spacing:.1em}
.briefing-lead-copy h2{margin:4px 0 7px;color:#f0f0f0;font-size:20px;line-height:1.05}
.briefing-lead-copy p{max-width:690px;margin:0;color:#91aca2;font-size:10px;line-height:1.5}
.briefing-lead-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.briefing-lead-meta span{color:#00f0a0;font-size:9px;font-weight:800;letter-spacing:.08em}
.briefing-lead-meta strong{color:#d0f0f0;font-size:8px}
.briefing-lead-meta small{color:#67847a;font-size:7px}
.briefing-section{margin-bottom:22px}
.briefing-priority-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.briefing-priority-card{position:relative;min-width:0;min-height:178px;display:flex;flex-direction:column;padding:14px;background:linear-gradient(145deg,#03120d,#010806);border:1px solid #0b3b25;border-radius:8px;overflow:hidden}
.priority-green{--brief-accent:#00f0a0}.priority-amber{--brief-accent:#f5b942}.priority-blue{--brief-accent:#38a9ff}
.briefing-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.briefing-card-top span{color:#49695e;font-family:"Archivo Narrow",Arial,sans-serif;font-size:18px;font-weight:700}
.briefing-card-top b{color:var(--brief-accent);font-size:7px;letter-spacing:.08em}
.briefing-priority-card h3{margin:0;color:#f0f0f0;font-size:13px;line-height:1.25}
.briefing-priority-card p{margin:8px 0 14px;color:#89a59a;font-size:8px;line-height:1.45}
.briefing-card-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid rgba(0,48,16,.7)}
.briefing-card-footer span{color:#617e73;font-size:7px;font-weight:700}
.briefing-card-footer a{color:#d0f0f0;font-size:8px;font-weight:700;white-space:nowrap}
.briefing-two-column{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:10px}
.briefing-panel{padding:14px;background:#020d09;border:1px solid #0b3b25;border-radius:8px}
.briefing-panel .section-heading{min-height:auto;margin-bottom:10px}
.briefing-feed{display:flex;flex-direction:column}
.briefing-feed-row{display:grid;grid-template-columns:52px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:10px 2px;border-top:1px solid rgba(0,48,16,.65)}
.briefing-feed-row:first-child{border-top:0}
.feed-time{color:#00f0a0;font-size:7px;font-weight:800}
.briefing-feed-row strong{display:block;color:#d0f0f0;font-size:9px;font-weight:600}
.briefing-feed-row p{margin:3px 0 0;color:#708d82;font-size:7px;line-height:1.35}
.feed-arrow{justify-self:end;color:#00f0a0;font-size:11px}
.briefing-watch{display:flex;flex-direction:column}
.radar-item{display:grid;grid-template-columns:10px minmax(0,1fr);gap:9px;padding:10px 0;border-top:1px solid rgba(0,48,16,.65)}
.radar-item:first-of-type{border-top:0}
.radar-dot{width:7px;height:7px;margin-top:3px;border-radius:50%;background:#00f0a0}.radar-amber{background:#f5b942}.radar-blue{background:#38a9ff}.radar-purple{background:#ad83ff}
.radar-item strong{color:#d0f0f0;font-size:9px}.radar-item p{margin:3px 0 0;color:#708d82;font-size:7px;line-height:1.35}
.briefing-bottom-line{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px;padding:16px 18px;background:linear-gradient(90deg,rgba(0,240,160,.045),rgba(0,240,160,.012));border:1px solid #0b3b25;border-radius:8px}
.briefing-bottom-line h2{margin:4px 0 5px;color:#f0f0f0;font-size:16px}
.briefing-bottom-line p{max-width:760px;margin:0;color:#819d93;font-size:8px;line-height:1.4}
.briefing-bottom-line .primary-button{flex:0 0 auto;text-decoration:none}
.placeholder-page{padding-top:17px}
.placeholder-panel{min-height:220px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:28px;background:linear-gradient(145deg,#03120d,#010805);border:1px solid #0b3b25;border-radius:8px}
.placeholder-panel h2{margin:4px 0 8px;color:#f0f0f0;font-size:20px}.placeholder-panel p{max-width:620px;margin:0;color:#89a59a;font-size:10px;line-height:1.5}
@media(max-width:1100px){.briefing-priority-grid{grid-template-columns:1fr}.briefing-two-column{grid-template-columns:1fr}.briefing-lead{grid-template-columns:70px minmax(0,1fr)}.briefing-lead-meta{grid-column:1/-1;align-items:flex-start;text-align:left}}


/* Big Brain Special — section 2/3 top labels inherit the panel rail green */
.spotlight-read-heading .eyebrow,
.spotlight-reality .reality-heading .eyebrow {
  color: var(--tms-left-rail-green);
}



/* Big Brain Special — matching divider between sections 1 and 2 */
.spotlight-read {
  border-left: 1px solid color-mix(in srgb, var(--tms-left-rail-green) 18%, transparent);
}



/* =========================================================
   LEVEL 1 — GLOBAL REPEATED SECTION ACTION TYPOGRAPHY
   WHY? / VIEW / EXPLORE and equivalent utility actions use
   the same smaller size in every content section below.
   ========================================================= */
.players-page .level1-actions button,
.players-page .level1-actions a,
.players-page .why-button,
.players-page .why-link,
.players-page .secondary-button,
.players-page .primary-button,
.players-page .view-player-link,
.players-page .discovery-actions button,
.players-page .discovery-actions a {
  font-size: 10px;
}


/* =========================================================
   TMS ANALYSIS TRIGGER — CANONICAL HOVER PREVIEW
   Shared by Big Brain Special and all TMS card triggers.
   ========================================================= */

.tms-analysis-trigger {
  position: relative;
  z-index: 4;
  padding: 2px 5px;
  margin: -2px -5px;
  color: var(--card-accent, var(--green));
  background: color-mix(in srgb, var(--card-accent, var(--green)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--green)) 34%, transparent);
  border-radius: 4px;
  cursor: pointer;
}

.tms-analysis-trigger:hover,
.tms-analysis-trigger:focus-visible {
  background: color-mix(in srgb, var(--card-accent, var(--green)) 18%, transparent);
  border-color: color-mix(in srgb, var(--card-accent, var(--green)) 58%, transparent);
  outline: none;
}

.tms-analysis-trigger::after {
  content: attr(data-tms-preview);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 100;
  width: 290px;
  padding: 10px 12px;
  color: var(--cool-white);
  background: #020d09;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--green)) 38%, transparent);
  border-left: 3px solid var(--card-accent, var(--green));
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;
}

.tms-analysis-trigger:hover::after,
.tms-analysis-trigger:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE FOUNDATION — TABLET + MOBILE
   Desktop rules above remain the canonical baseline.
   ========================================================= */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 0px;
    --content-padding: 20px;
    --section-gap: 18px;
  }

  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .tms-sidebar {
    width: var(--sidebar-width);
    padding: 12px 9px;
  }

  .sidebar-brand {
    height: 74px;
  }

  .sidebar-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
  }

  .nav-item {
    justify-content: center;
    height: 44px;
    padding: 0;
  }

  .nav-icon {
    width: 40px;
    flex-basis: 40px;
    margin-right: 0;
  }

  .nav-label,
  .sidebar-after-nav,
  .sidebar-quote {
    display: none;
  }

  .tms-main {
    margin-left: var(--sidebar-width);
  }

  .tms-content {
    max-width: none;
  }

  .tms-footer {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    padding-left: 20px;
    padding-right: 20px;
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .footer-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tms-topbar {
    padding: 0 var(--content-padding);
  }

  .big-brain-search {
    width: min(390px, 48vw);
  }

  .tms-hero {
    height: 166px;
  }

  .tms-hero-content {
    grid-template-columns: 35% 35% 30%;
    padding-right: 16px;
  }

  .tms-hero-left {
    font-size: 18px;
  }

  .tms-hero-right {
    font-size: 19px;
  }

  .tms-hero-big-brain {
    right: 16px;
  }

  .page-header {
    align-items: flex-start;
  }

  .players-tools {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .player-search {
    width: 210px;
  }

  .explore-grid,
  .team-explore-six,
  .matchup-explore-six,
  .fantasy-mode-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .spotlight-main-compact {
    grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.35fr);
  }

  .spotlight-reality {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(0, 48, 16, 0.85);
  }

  .spotlight-read {
    border-right: 0;
  }

  .players-to-know-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-radar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ranking-header,
  .ranking-row {
    grid-template-columns: 36px minmax(170px, 2fr) repeat(4, minmax(58px, 0.7fr));
    column-gap: 7px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  :root {
    --sidebar-width: 0px;
    --topbar-height: 58px;
    --content-padding: 14px;
    --section-gap: 16px;
  }

  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .tms-app {
    width: 100%;
  }

  .tms-sidebar {
    position: sticky;
    top: 0;
    inset: auto;
    z-index: 40;
    width: 100%;
    height: auto;
    padding: 7px 10px;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 7, 4, 0.98);
    scrollbar-width: none;
  }

  .tms-sidebar::-webkit-scrollbar {
    display: none;
  }

  .sidebar-brand,
  .sidebar-after-nav,
  .sidebar-divider,
  .sidebar-quote {
    display: none;
  }

  .sidebar-nav {
    width: max-content;
    min-width: 100%;
    margin: 0;
    flex-direction: row;
    gap: 5px;
  }

  .nav-item {
    width: auto;
    min-width: 44px;
    height: 42px;
    flex: 0 0 auto;
    justify-content: center;
    padding: 0 10px;
  }

  .nav-icon {
    width: 26px;
    height: 28px;
    flex-basis: 26px;
    margin: 0;
  }

  .nav-label {
    display: none;
  }

  .tms-main {
    margin-left: 0;
  }

  .tms-topbar {
    top: 56px;
    height: var(--topbar-height);
    padding: 0 10px;
    gap: 8px;
  }

  .big-brain-search {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
    height: 36px;
    overflow: hidden;
    white-space: nowrap;
  }

  .topbar-actions {
    flex: 0 0 auto;
    gap: 5px;
  }

  .upgrade-button,
  .week-selector {
    display: none;
  }

  .icon-button,
  .profile-button {
    width: 34px;
    height: 34px;
  }

  .tms-content {
    width: 100%;
    max-width: none;
    padding: 0 var(--content-padding) 22px;
  }

  .tms-hero {
    height: 230px;
    margin-top: 10px;
  }

  .tms-hero-artwork-image {
    object-position: center center;
  }

  .tms-hero-content {
    height: calc(100% - 52px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 14px 8px;
  }

  .tms-hero-left {
    font-size: clamp(17px, 5.4vw, 22px);
    line-height: 0.98;
  }

  .tms-hero-right {
    align-self: flex-end;
    font-size: clamp(18px, 5.7vw, 23px);
    line-height: 0.96;
    padding-bottom: 8px;
  }

  .tms-hero-left span,
  .tms-hero-right span {
    white-space: normal;
  }

  .tms-hero-big-brain {
    left: 14px;
    right: 14px;
    height: 52px;
    font-size: 9px;
  }

  .players-page {
    padding-top: 14px;
  }

  .page-header {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 15px;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .page-header p {
    max-width: none;
    font-size: 12px;
  }

  .players-tools {
    width: 100%;
    justify-content: stretch;
  }

  .player-search {
    width: auto;
    min-width: 0;
    flex: 1 1 190px;
  }

  .filter-button {
    flex: 0 0 auto;
  }

  .section-heading {
    align-items: flex-start;
    gap: 10px;
  }

  .section-hint {
    display: none;
  }

  .explore-grid,
  .team-explore-six,
  .matchup-explore-six,
  .fantasy-mode-grid,
  .players-to-know-grid,
  .player-radar,
  .briefing-priority-grid,
  .briefing-two-column {
    grid-template-columns: 1fr !important;
  }

  .explore-card {
    height: 76px;
  }

  .spotlight-header {
    height: auto;
    min-height: 48px;
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .spotlight-header-prompt {
    display: none;
  }

  .spotlight-main-compact {
    display: block;
    min-height: 0;
  }

  .spotlight-identity,
  .spotlight-read,
  .spotlight-reality {
    padding: 14px;
  }

  .spotlight-read {
    border-right: 0;
    border-top: 1px solid rgba(0, 48, 16, 0.85);
  }

  .spotlight-reality {
    border-top: 1px solid rgba(0, 48, 16, 0.85);
  }

  .spotlight-story p {
    font-size: 13px;
    line-height: 1.4;
  }

  .spotlight-facts {
    grid-template-columns: 1fr;
  }

  .spotlight-footer,
  .spotlight-footer-compact {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
  }

  .spotlight-actions {
    position: static;
    top: auto;
    width: 100%;
    flex-wrap: wrap;
  }

  .spotlight-actions > * {
    flex: 1 1 auto;
  }

  .position-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .position-tabs::-webkit-scrollbar {
    display: none;
  }

  .position-tab {
    flex: 0 0 auto;
  }

  .top-players-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ranking-header,
  .ranking-row {
    min-width: 660px;
  }

  .tms-footer {
    width: 100%;
    margin-left: 0;
    min-height: 0;
    padding: 18px 14px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-brand > strong {
    white-space: normal;
  }

  .footer-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .footer-tagline {
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* Small phones */
@media (max-width: 430px) {
  .tms-hero {
    height: 218px;
  }

  .tms-hero-content {
    padding-left: 11px;
    padding-right: 11px;
  }

  .tms-hero-big-brain {
    left: 11px;
    right: 11px;
  }

  .footer-principles {
    grid-template-columns: 1fr;
  }

  .players-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .player-search,
  .filter-button {
    width: 100%;
  }
}
/* =========================================================
   MOBILE HERO REFINEMENT
   Phone only. Desktop and tablet hero remain unchanged.
   ========================================================= */
@media (max-width: 700px) {
  .tms-hero {
    height: 270px;
  }

  .tms-hero-artwork-image {
    object-position: 52% center;
  }

  .tms-hero-content {
    height: calc(100% - 54px);
    padding: 16px 14px 10px;
    justify-content: flex-start;
  }

  .tms-hero-left {
    position: relative;
    z-index: 3;
    max-width: 100%;
    font-size: clamp(17px, 5.4vw, 22px);
  }

  .tms-hero-right {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: 14px;
    align-self: auto;
    font-size: clamp(17px, 5.3vw, 22px);
    text-align: left;
  }

  .tms-hero-big-brain {
    left: 14px;
    right: auto;
    bottom: 0;
    width: calc(100% - 28px);
    height: 54px;
  }
}

@media (max-width: 430px) {
  .tms-hero {
    height: 268px;
  }

  .tms-hero-content {
    padding: 14px 11px 10px;
  }

  .tms-hero-right {
    right: 11px;
    bottom: 13px;
  }

  .tms-hero-big-brain {
    left: 11px;
    width: calc(100% - 22px);
  }
}
/* =========================================================
   MOBILE NAVIGATION — ALL DESTINATIONS + PAGE LABELS
   Phone only. Desktop/tablet navigation remains unchanged.
   ========================================================= */
@media (max-width: 700px) {
  .tms-sidebar {
    overflow: visible;
    padding: 8px 10px 10px;
  }

  .sidebar-nav {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  .nav-item {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0;
    overflow: visible;
  }

  .nav-item:nth-child(n+6) {
    grid-column: span 1;
  }

  .nav-item:nth-child(6) {
    grid-column: 1 / 2;
  }

  .nav-item:nth-child(9) {
    grid-column: 4 / 5;
  }

  .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 100;
    left: 50%;
    top: calc(100% + 7px);
    transform: translateX(-50%) translateY(-3px);
    width: max-content;
    max-width: min(210px, 82vw);
    padding: 6px 9px;
    border: 1px solid rgba(0, 230, 163, 0.42);
    border-radius: 7px;
    background: rgba(0, 12, 8, 0.98);
    color: #eef8f4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.035em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  }

  .nav-item:hover::after,
  .nav-item:focus::after,
  .nav-item:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .tms-topbar {
    top: 102px;
  }
}

@media (max-width: 430px) {
  .tms-sidebar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .sidebar-nav {
    gap: 5px;
  }

  .nav-item {
    height: 40px;
  }

  .nav-item::after {
    font-size: 9px;
    max-width: 78vw;
  }
}
/* =========================================================
   BASIC HOME — ONE STORY
   8 shared destination chapters for Basic.
   Elite personalization inserts above this story as chapter 00.
   The entire Home story uses one exact content rail and one type system.
   ========================================================= */

.basic-home-page {
  position: relative;
  width: 100%;
  padding-top: 22px;
}

.home-elite-personalization { display: none; }
body[data-tms-plan="elite"] .home-elite-personalization {
  display: block;
  margin-bottom: 28px;
}

.home-story-intro {
  width: 100%;
  margin-bottom: 16px;
}
.home-story-kicker,
.home-destination-kicker,
.home-mini-kicker {
  display: block;
  margin: 0 0 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.home-destination-section {
  position: relative;
  width: 100%;
  margin: 0 0 28px;
  padding: 0;
}
.home-destination-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,240,160,.28), rgba(0,240,160,.04) 62%, transparent);
}
.home-destination-heading {
  position: relative;
  width: 100%;
  margin: 0 0 11px;
  padding: 0;
}
.home-destination-heading h2 {
  margin: 0;
  color: var(--white);
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.2px;
}
.home-destination-heading p {
  max-width: 700px;
  margin: 6px 0 0;
  color: #9db8ae;
  font-size: 12px;
  line-height: 1.4;
}

.home-destination-frame {
  width: 100%;
  min-height: 250px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(255px, .72fr);
  background:
    radial-gradient(circle at 78% 26%, rgba(0,240,160,.055), transparent 34%),
    linear-gradient(135deg, #03120d, #010805 62%, #020d09);
  border: 1px solid #0b4029;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
}
.home-destination-main,
.home-destination-side { min-width: 0; }
.home-destination-main { padding: 18px; }
.home-destination-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0,240,160,.045), rgba(0,0,0,0)), #020b08;
}
.home-destination-block-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,48,16,.85);
}
.home-destination-block-heading h3,
.home-destination-side h3 {
  margin: 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.home-destination-block-heading > a,
.home-destination-side > a {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.home-destination-side > p {
  margin: 10px 0 16px;
  color: #9eb5ad;
  font-size: 11px;
  line-height: 1.5;
}

.home-teaser-grid,
.home-mode-grid,
.home-lab-grid,
.home-performance-grid,
.home-university-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
  margin-top: 14px;
}
.home-teaser-card,
.home-mode-card,
.home-concept-card {
  min-width: 0;
  background: rgba(0,18,12,.72);
  border: 1px solid #0b3d28;
  border-radius: 7px;
}
.home-teaser-card { min-height: 132px; padding: 13px; }
.home-teaser-label {
  display: block;
  margin-bottom: 10px;
  color: #789d91;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.home-teaser-identity {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
}
.home-teaser-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: rgba(0,240,160,.07);
  border: 1px solid rgba(0,240,160,.26);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}
.home-teaser-identity strong { display:block; color:var(--white); font-size:11px; line-height:1.18; }
.home-teaser-identity small { display:block; margin-top:3px; color:#78958a; font-size:8px; font-weight:600; }
.home-teaser-signal { color:var(--green); font-size:16px; font-weight:700; }
.home-teaser-card p { margin:11px 0 0; color:#9eb5ad; font-size:9px; line-height:1.4; }

.home-side-meter,
.home-side-stat {
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; margin-bottom:14px; padding:0 13px;
  background:rgba(0,240,160,.06); border:1px solid rgba(0,240,160,.26); border-radius:6px;
}
.home-side-meter span,.home-side-stat span { color:#9ab3aa; font-size:9px; font-weight:700; letter-spacing:.7px; }
.home-side-meter strong,.home-side-stat strong { color:var(--green); font-size:22px; line-height:1; }
.home-side-list { display:grid; gap:8px; margin:0 0 16px; }
.home-side-list span { display:flex; align-items:center; gap:8px; color:#c0d2cb; font-size:10px; line-height:1.3; }
.home-side-list span::before { content:"✦"; color:var(--green); font-size:9px; }
.home-primary-link {
  width:100%; min-height:36px; display:grid; place-items:center; margin-top:auto;
  color:var(--white); background:rgba(0,240,160,.11); border:1px solid rgba(0,240,160,.38);
  border-radius:6px; font-size:10px; font-weight:700; text-decoration:none;
}

.home-mode-card { min-height:66px; padding:11px 12px; }
.home-mode-card small { display:block; color:#78958a; font-size:8px; font-weight:700; text-transform:uppercase; }
.home-mode-card strong { display:block; margin-top:4px; color:var(--white); font-size:12px; }
.home-mode-card span { display:block; margin-top:4px; color:var(--green); font-size:8px; font-weight:700; }

.home-brief-list { display:grid; gap:8px; margin-top:14px; }
.home-brief-item {
  min-height:54px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center;
  gap:10px; padding:8px 10px; background:rgba(0,18,12,.72); border:1px solid #0b3d28; border-radius:6px;
}
.home-brief-item > span:first-child {
  width:40px; height:36px; display:grid; place-items:center; color:var(--green);
  background:rgba(0,240,160,.07); border:1px solid rgba(0,240,160,.22); border-radius:5px;
  font-size:8px; font-weight:700;
}
.home-brief-item strong { display:block; color:var(--white); font-size:10px; line-height:1.2; }
.home-brief-item small { display:block; margin-top:3px; color:#829f95; font-size:8px; line-height:1.25; }
.home-brief-item > b { color:var(--green); font-size:15px; }

.home-concept-card { min-height:118px; padding:13px; }
.home-concept-card strong { display:block; color:var(--white); font-size:11px; }
.home-concept-card span { display:block; margin-top:7px; color:var(--green); font-size:18px; font-weight:700; }
.home-concept-card p { margin:8px 0 0; color:#91aaa1; font-size:9px; line-height:1.4; }

/* Subtle chapter identity. One Home system, different destination meaning. */
.home-destination-fantasy .home-story-step,
.home-destination-fantasy .home-destination-frame { border-color: rgba(0,240,160,.34); }
.home-destination-briefing .home-destination-frame { background:radial-gradient(circle at 78% 26%,rgba(0,240,160,.07),transparent 34%),linear-gradient(135deg,#03120d,#010805 62%,#020d09); }

@media (max-width:1100px) {
  .home-destination-frame { grid-template-columns:1fr; }
  .home-destination-side { border-top:1px solid #0b4029;  }
}
@media (max-width:700px) {
  .basic-home-page { padding-top:16px; }
  .home-story-intro h1 { font-size:26px; }
  .home-destination-section { margin-bottom:24px; }
  .home-destination-heading { padding-left:0; }
  .home-destination-heading h2 { font-size:21px; }
  .home-destination-main,.home-destination-side { padding:14px; }
  .home-destination-block-heading { align-items:flex-start; flex-direction:column; }
  .home-teaser-grid,.home-mode-grid,.home-lab-grid,.home-performance-grid,.home-university-grid { grid-template-columns:1fr; }
}



/* =========================================================
   BASIC HOME — CANONICAL LEVEL 1 VERTICAL RHYTHM
   Exact page-start/header/first-section spacing.
   ========================================================= */

.basic-home-page {
  padding-top: 17px;
}

.basic-home-page > .page-header.home-story-intro {
  min-height: 60px;
  margin-bottom: 16px;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section {
  margin-top: 0;
}


/* =========================================================
   BASIC HOME — LEVEL 1 HEADER GAP CORRECTION
   Requested correction only: spacing + divider removal.
   ========================================================= */

.basic-home-page > .page-header.home-story-intro {
  margin-bottom: 38px;
  padding-bottom: 0;
  border-bottom: 0 !important;
}

.basic-home-page > .page-header.home-story-intro::before,
.basic-home-page > .page-header.home-story-intro::after,
.basic-home-page > .page-header.home-story-intro .page-header-copy::before,
.basic-home-page > .page-header.home-story-intro .page-header-copy::after {
  content: none !important;
  display: none !important;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section {
  margin-top: 0;
  border-top: 0 !important;
}


/* =========================================================
   BASIC HOME — FIRST SECTION 1PX ALIGNMENT
   Visual alignment with approved Level 1 page rhythm.
   ========================================================= */

.basic-home-page > .page-header.home-story-intro + .home-destination-section {
  transform: none;
}


/* =========================================================
   BASIC HOME — HEADER / FIRST SECTION FINAL ALIGNMENT PASS
   ========================================================= */

/* Move Home header content down inside its existing frame only. */
.basic-home-page > .page-header.home-story-intro .page-header-copy {
  transform: translateY(6px);
}

/* Remove the faded divider above the first Players section. */
.basic-home-page > .page-header.home-story-intro + .home-destination-section::before {
  content: none !important;
  display: none !important;
}

/* Nudge only the Players heading/description upward, not the section frame. */
.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading {
  transform: none;
}


/* =========================================================
   BASIC HOME — FIRST DESTINATION CANONICAL LEFT ALIGNMENT
   Match Level 1 EXPLORE section heading line exactly.
   ========================================================= */

.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading {
  min-height: 35px;
  margin-bottom: 10px;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading .home-destination-kicker {
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: normal;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.4;
}



/* =========================================================
   BASIC HOME — CANONICAL SINGLE LEFT RAIL
   Home header establishes the rail. Every destination heading
   starts on that exact same line.
   ========================================================= */

.basic-home-page > .page-header.home-story-intro,
.basic-home-page .home-destination-heading {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* First destination follows the same rule with no special inset. */
.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* =========================================================
   TMS LEVEL 1 / HOME ALIGNMENT RESET
   Teams, Matchups and Fantasy Hub are the untouched baseline.
   Correct Players and Home only.
   ========================================================= */

/* HOME:
   One page rail only. SEE WHAT MATTERS establishes it.
   Every destination heading begins on that exact same rail.
   Frames may contain their own internal padding, but they do not
   control or indent the destination headings. */
.basic-home-page > .page-header.home-story-intro,
.basic-home-page > .home-destination-section,
.basic-home-page > .home-destination-section > .home-destination-heading {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
}

/* Remove destination divider lines. */
.basic-home-page > .home-destination-section::before {
  content: none !important;
  display: none !important;
}

/* First Home destination uses the same heading typography/rhythm as
   the established Level 1 Explore heading. */
.basic-home-page > .home-destination-section:first-of-type > .home-destination-heading,
.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading {
  min-height: 35px;
  margin-bottom: 10px;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading .home-destination-kicker {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.2px;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.basic-home-page > .page-header.home-story-intro + .home-destination-section > .home-destination-heading p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.4;
}


/* =========================================================
   LEVEL 1 — BELOW EXPLORE ONLY
   No established page/header/explore selectors are changed here.
   ========================================================= */
.tms-safe-placeholder{
  min-height:160px;
  margin-top:22px;
  display:grid;
  place-items:center;
  border-top:1px solid rgba(0,240,168,.16);
  color:#6f8f86;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
}

/* =========================================================
   TMS CANONICAL LEFT RAIL SYSTEM — 2PX
   Clean rebuild from the confirmed ZERO-RAIL baseline.
   One straight-line construction for every Level 1 content box.
   ========================================================= */

:root {
  --tms-left-rail-width: 3px;
  --tms-left-rail-green: #00F0A0;
}

/* Retire older pseudo-element/accent-strip rail constructions so
   every box uses only the physical straight left border below. */
.players-page .explore-card::before,
.players-page .top-players-card::before,
.discovery-card::before,
.player-radar .discovery-card::before,
.player-spotlight .spotlight-main-compact::before {
  content: none !important;
  display: none !important;
}

.player-spotlight > .spotlight-accent,
.player-spotlight .spotlight-accent {
  display: none !important;
}

/* ---------------------------------------------------------
   EXPLORE
   --------------------------------------------------------- */

/* Players: position color follows the established seven-card order. */
.players-page .players-explore .explore-card {
  border-left-width: var(--tms-left-rail-width) !important;
  border-left-style: solid !important;
}
.players-page .players-explore .explore-grid > .explore-card:nth-child(1) { border-left-color:#00F0A0 !important; }
.players-page .players-explore .explore-grid > .explore-card:nth-child(2) { border-left-color:#3B82F6 !important; }
.players-page .players-explore .explore-grid > .explore-card:nth-child(3) { border-left-color:#FF9F1C !important; }
.players-page .players-explore .explore-grid > .explore-card:nth-child(4) { border-left-color:#D946EF !important; }
.players-page .players-explore .explore-grid > .explore-card:nth-child(5) { border-left-color:#E6C229 !important; }
.players-page .players-explore .explore-grid > .explore-card:nth-child(6) { border-left-color:#35C9FF !important; }
.players-page .players-explore .explore-grid > .explore-card:nth-child(7) { border-left-color:#FF5A5F !important; }

/* Teams, Matchups, Fantasy, Insights, Performance, University and Home. */
.team-focus-card,
.matchup-focus-card,
.fantasy-mode-card,
.team-explore-card {
  border-left-width: var(--tms-left-rail-width) !important;
  border-left-style: solid !important;
  border-left-color: var(--c, var(--team-accent, var(--tms-left-rail-green))) !important;
}

/* ---------------------------------------------------------
   BIG BRAIN SPECIAL / X WORTH WATCHING
   --------------------------------------------------------- */
.player-spotlight .spotlight-main-compact {
  border-left: var(--tms-left-rail-width) solid var(--tms-left-rail-green) !important;
}

/* ---------------------------------------------------------
   RANKINGS / TABLE FRAME
   --------------------------------------------------------- */
.players-page .top-players-card {
  border-left: var(--tms-left-rail-width) solid var(--tms-left-rail-green) !important;
}

/* ---------------------------------------------------------
   BIG BRAIN DISCOVERY / X TO KNOW
   --------------------------------------------------------- */
.players-to-know-grid > .discovery-card {
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--tms-left-rail-green)) 28%, transparent) !important;
  border-left: var(--tms-left-rail-width) solid var(--card-accent, var(--tms-left-rail-green)) !important;
  background: transparent !important;
}

/* Discovery semantic colors. */
.players-to-know-grid > .discovery-card:nth-child(1) { --card-accent:#00F0A0; }
.players-to-know-grid > .discovery-card:nth-child(2) { --card-accent:#35A7FF; }
.players-to-know-grid > .discovery-card:nth-child(3) { --card-accent:#FFB000; }

/* ---------------------------------------------------------
   WHAT'S CHANGING / RADAR
   --------------------------------------------------------- */
.player-radar .discovery-card {
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--tms-left-rail-green)) 28%, transparent) !important;
  border-left: var(--tms-left-rail-width) solid var(--card-accent, var(--tms-left-rail-green)) !important;
  background: transparent !important;
}

.player-radar .discovery-card.accent-green    { --card-accent:#00F0A0; }
.player-radar .discovery-card.accent-amber    { --card-accent:#FFB000; }
.player-radar .discovery-card.accent-magenta  { --card-accent:#D946EF; }
.player-radar .discovery-card.accent-blue     { --card-accent:#35A7FF; }
.player-radar .discovery-card.accent-cyan     { --card-accent:#35C9FF; }
.player-radar .discovery-card.accent-red      { --card-accent:#FF5A5F; }

/* Home/Level-1 radar follows the Explore category order. */
.player-radar > .discovery-card:nth-child(1) { --card-accent:#00F0A0; }
.player-radar > .discovery-card:nth-child(2) { --card-accent:#35A7FF; }
.player-radar > .discovery-card:nth-child(3) { --card-accent:#FFB000; }
.player-radar > .discovery-card:nth-child(4) { --card-accent:#D946EF; }

/* =========================================================
   DISCOVERY + RADAR — FULL CARD ACCENT INHERITANCE
   The established --card-accent controls the entire card language:
   left rail, faded outer frame, line 1, line 3, and TMS.
   ========================================================= */

.players-to-know-grid .discovery-card,
.player-radar .discovery-card {
  border-top-color: color-mix(in srgb, var(--card-accent) 28%, transparent) !important;
  border-right-color: color-mix(in srgb, var(--card-accent) 28%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--card-accent) 28%, transparent) !important;
  border-left-color: var(--card-accent) !important;
}

.players-to-know-grid .discovery-card .discovery-type,
.player-radar .discovery-card .discovery-type,
.players-to-know-grid .discovery-card .discovery-player-meta > span,
.player-radar .discovery-card .discovery-player-meta > span,
.players-to-know-grid .discovery-card .tms-analysis-trigger,
.player-radar .discovery-card .tms-analysis-trigger,
.players-to-know-grid .discovery-card .why-link,
.player-radar .discovery-card .why-link {
  color: var(--card-accent) !important;
}

.players-to-know-grid .discovery-card .tms-analysis-trigger,
.player-radar .discovery-card .tms-analysis-trigger {
  border-color: color-mix(in srgb, var(--card-accent) 34%, transparent);
  background: color-mix(in srgb, var(--card-accent) 10%, transparent);
}

.players-to-know-grid .discovery-card .tms-analysis-trigger:hover,
.players-to-know-grid .discovery-card .tms-analysis-trigger:focus-visible,
.player-radar .discovery-card .tms-analysis-trigger:hover,
.player-radar .discovery-card .tms-analysis-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--card-accent) 58%, transparent);
  background: color-mix(in srgb, var(--card-accent) 18%, transparent);
}

.players-to-know-grid .discovery-card .tms-analysis-trigger::after,
.player-radar .discovery-card .tms-analysis-trigger::after {
  border-color: color-mix(in srgb, var(--card-accent) 38%, transparent);
  border-left-color: var(--card-accent);
}

/* =========================================================
   BIG BRAIN SPECIAL — CONTEXT IDENTITY
   Shared visual component.

   HOME uses three stacked contextual lines selected by signal type:
   Player:      Player Name / Full Team Name / vs Full Opponent Name
   Team:        Full Team Name / vs Full Opponent Name / Day · Time
   Matchup:     Signal or Edge / Full Team vs Full Team / Day · Time
   Fantasy:     Player Name / Full Position Name / Week · Matchup
   Insight:     Signal or Finding / Category / Context
   Performance: Metric or Result / Sample / Period

   Dedicated Level 1 pages may use the same component with two lines.
   No highlighted POS/MATCHUP/category badge.
   ========================================================= */

.spotlight-player-copy {
  display: flex;
  align-items: center;
  min-width: 0;
}

.spotlight-position-label {
  display: none;
}

.spotlight-context-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.spotlight-context-lines > span {
  display: block;
  margin: 0;
  color: #6A8F84;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  white-space: nowrap;
}

.spotlight-context-lines > span:first-child {
  color: var(--cool-white, #F4FFFB);
  font-size: 12px;
}

.spotlight-context-lines-two {
  gap: 4px;
}

.level1-primary-nav-item:hover .level1-primary-nav-icon {
  filter: drop-shadow(0 0 7px rgba(0, 240, 160, 0.62));
}

/* =========================================================
   GLOBAL ACCENT CARD HOVER
   Approved Explore interaction applied to framed cards:
   subtle accent-colored inner glow + 1px content/card lift.
   ========================================================= */

.discovery-card,
.team-focus-card,
.matchup-focus-card,
.fantasy-mode-card,
.team-explore-card,
.explore-card {
  transition:
    transform 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.discovery-card:hover,
.discovery-card:focus-within,
.team-focus-card:hover,
.team-focus-card:focus-within,
.matchup-focus-card:hover,
.matchup-focus-card:focus-within,
.fantasy-mode-card:hover,
.fantasy-mode-card:focus-within,
.team-explore-card:hover,
.team-explore-card:focus-within,
.explore-card:hover,
.explore-card:focus-within {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 18px color-mix(
      in srgb,
      var(--card-accent, var(--c, var(--team-accent, var(--position-accent, var(--green))))) 12%,
      transparent
    );
}

/* =========================================================
   STICKY TWO-ROW APPLICATION HEADER
   Row 1: Ask Big Brain + Upgrade / Profile
   Row 2: TMS logo + primary navigation
   Both rows remain frozen while page content scrolls.
   ========================================================= */

.tms-topbar {
  position: sticky;
  top: 0;
  z-index: 920;
  background: rgba(0, 10, 7, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.level1-nav-row {
  position: sticky;
  top: var(--topbar-height, 68px);
  transform: translateY(-5px);
  z-index: 910;
  background: rgba(0, 10, 7, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   PLAYERS HERO — INDEPENDENT BACKGROUND / PLAYER SCALE
   Background: 115% wide, original hero height.
   Player: 115% scale, anchored center-bottom.
   ========================================================= */

.players-page .tms-hero,
.players-level1-page .tms-hero {
  background-size: 115% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.players-page .tms-hero-player,
.players-level1-page .tms-hero-player,
.players-page .hero-player,
.players-level1-page .hero-player {
  transform: scale(1.15);
  transform-origin: center bottom;
}

/* =========================================================
   SHARED FRONTEND INTERACTION COMPONENTS
   ========================================================= */

/* MCBRAINY — CANONICAL SITE-WIDE COMPONENT */
    #mcbrainy-launcher {
      cursor: pointer;
    }

    #mcbrainy-launcher:focus-visible {
      outline: 2px solid #7dff9a;
      outline-offset: 3px;
    }

    .mcbrainy-backdrop {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(2, 7, 12, 0.62);
      opacity: 0;
      visibility: hidden;
      transition: opacity 180ms ease, visibility 180ms ease;
    }

    .mcbrainy-backdrop.is-open {
      opacity: 1;
      visibility: visible;
    }

    .mcbrainy-panel {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9999;
      width: min(460px, 100vw);
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: #071018;
      border-left: 1px solid rgba(125, 255, 154, 0.22);
      box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
      transform: translateX(100%);
      transition: transform 220ms ease;
      color: #f4f8fb;
    }

    .mcbrainy-panel.is-open {
      transform: translateX(0);
    }

    .mcbrainy-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.02);
    }

    .mcbrainy-header-copy {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .mcbrainy-mark {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 12px;
      background: rgba(125, 255, 154, 0.10);
      border: 1px solid rgba(125, 255, 154, 0.28);
      color: #7dff9a;
      font-size: 18px;
    }

    .mcbrainy-title {
      display: block;
      margin: 0;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .mcbrainy-status {
      display: block;
      margin-top: 3px;
      color: rgba(244, 248, 251, 0.58);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .mcbrainy-close {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.06);
      color: #f4f8fb;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

    .mcbrainy-close:hover {
      background: rgba(255, 255, 255, 0.10);
    }

    .mcbrainy-messages {
      flex: 1;
      overflow-y: auto;
      padding: 22px;
    }

    .mcbrainy-welcome {
      padding: 18px;
      border: 1px solid rgba(125, 255, 154, 0.15);
      border-radius: 14px;
      background: rgba(125, 255, 154, 0.045);
    }

    .mcbrainy-welcome strong {
      display: block;
      margin-bottom: 7px;
      color: #7dff9a;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .mcbrainy-welcome p {
      margin: 0;
      color: rgba(244, 248, 251, 0.74);
      font-size: 14px;
      line-height: 1.55;
    }

    .mcbrainy-message {
      display: flex;
      margin-top: 16px;
    }

    .mcbrainy-message.user {
      justify-content: flex-end;
    }

    .mcbrainy-bubble {
      max-width: 88%;
      padding: 12px 14px;
      border-radius: 14px;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .mcbrainy-message.user .mcbrainy-bubble {
      background: #183123;
      border: 1px solid rgba(125, 255, 154, 0.22);
      color: #f4f8fb;
      border-bottom-right-radius: 5px;
    }

    .mcbrainy-message.assistant .mcbrainy-bubble {
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: rgba(244, 248, 251, 0.88);
      border-bottom-left-radius: 5px;
    }

    .mcbrainy-message.thinking .mcbrainy-bubble {
      color: rgba(244, 248, 251, 0.58);
      font-style: italic;
    }

    .mcbrainy-analysis-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .mcbrainy-analysis-toggle {
      appearance: none;
      border: 1px solid rgba(125, 255, 154, 0.30);
      background: rgba(125, 255, 154, 0.08);
      color: #dfffe7;
      border-radius: 999px;
      padding: 8px 11px;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      cursor: pointer;
    }

    .mcbrainy-analysis-toggle:hover,
    .mcbrainy-analysis-toggle.is-active {
      background: rgba(125, 255, 154, 0.16);
      border-color: rgba(125, 255, 154, 0.55);
      color: #7dff9a;
    }

    .mcbrainy-analysis-detail {
      display: none;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mcbrainy-analysis-detail.is-open {
      display: block;
    }

    .mcbrainy-analysis-detail-title {
      display: block;
      margin-bottom: 9px;
      color: #7dff9a;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .mcbrainy-key-facts {
      margin: 0;
      padding-left: 20px;
    }

    .mcbrainy-key-facts li {
      margin: 0 0 10px;
      line-height: 1.55;
    }

    .mcbrainy-key-facts li:last-child {
      margin-bottom: 0;
    }

    .mcbrainy-deeper-copy p {
      margin: 0 0 10px;
      line-height: 1.58;
    }

    .mcbrainy-deeper-copy p:last-child {
      margin-bottom: 0;
    }

    .mcbrainy-form {
      padding: 16px 18px 18px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: #071018;
    }

    .mcbrainy-input-row {
      display: flex;
      align-items: flex-end;
      gap: 10px;
    }

    .mcbrainy-input {
      min-height: 48px;
      max-height: 132px;
      flex: 1;
      resize: none;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      outline: none;
      background: rgba(255, 255, 255, 0.055);
      color: #f4f8fb;
      padding: 13px 14px;
      font: inherit;
      font-size: 14px;
      line-height: 1.45;
    }

    .mcbrainy-input::placeholder {
      color: rgba(244, 248, 251, 0.38);
    }

    .mcbrainy-input:focus {
      border-color: rgba(125, 255, 154, 0.55);
      box-shadow: 0 0 0 3px rgba(125, 255, 154, 0.07);
    }

    .mcbrainy-send {
      min-width: 82px;
      height: 48px;
      border: 1px solid rgba(125, 255, 154, 0.42);
      border-radius: 12px;
      background: #7dff9a;
      color: #06100a;
      font-weight: 900;
      letter-spacing: 0.04em;
      cursor: pointer;
    }

    .mcbrainy-send:disabled {
      cursor: wait;
      opacity: 0.55;
    }

    .mcbrainy-note {
      margin: 9px 2px 0;
      color: rgba(244, 248, 251, 0.38);
      font-size: 10px;
      line-height: 1.4;
    }


    .mcbrainy-beta-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 11px;
    }

    .mcbrainy-beta-actions .mcbrainy-note {
      margin: 0;
    }

    .mcbrainy-feedback-button {
      flex: 0 0 auto;
      border: 1px solid rgba(125, 255, 154, 0.34);
      border-radius: 9px;
      background: rgba(125, 255, 154, 0.08);
      color: #7dff9a;
      padding: 8px 10px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.07em;
      cursor: pointer;
    }

    .mcbrainy-feedback-button:hover {
      background: rgba(125, 255, 154, 0.14);
    }

    .mcbrainy-feedback-view {
      display: none;
      padding: 20px 22px 24px;
      overflow-y: auto;
      flex: 1;
    }

    .mcbrainy-feedback-view.is-open {
      display: block;
    }

    .mcbrainy-chat-view.is-hidden,
    .mcbrainy-form.is-hidden {
      display: none;
    }

    .mcbrainy-feedback-heading {
      margin-bottom: 18px;
    }

    .mcbrainy-feedback-heading strong {
      display: block;
      color: #7dff9a;
      font-size: 13px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .mcbrainy-feedback-heading p {
      margin: 7px 0 0;
      color: rgba(244, 248, 251, 0.68);
      font-size: 13px;
      line-height: 1.5;
    }

    .mcbrainy-field {
      display: block;
      margin-top: 15px;
    }

    .mcbrainy-field > span {
      display: block;
      margin-bottom: 7px;
      color: rgba(244, 248, 251, 0.70);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .mcbrainy-field input,
    .mcbrainy-field textarea {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 11px;
      outline: none;
      background: rgba(255, 255, 255, 0.055);
      color: #f4f8fb;
      padding: 12px 13px;
      font: inherit;
      font-size: 13px;
    }

    .mcbrainy-field textarea {
      min-height: 125px;
      resize: vertical;
    }

    .mcbrainy-field input:focus,
    .mcbrainy-field textarea:focus {
      border-color: rgba(125, 255, 154, 0.55);
    }

    .mcbrainy-file-help {
      display: block;
      margin-top: 6px;
      color: rgba(244, 248, 251, 0.42);
      font-size: 10px;
    }

    .mcbrainy-feedback-controls {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }

    .mcbrainy-feedback-send,
    .mcbrainy-feedback-back {
      min-height: 42px;
      border-radius: 10px;
      padding: 0 14px;
      font-weight: 900;
      letter-spacing: 0.04em;
      cursor: pointer;
    }

    .mcbrainy-feedback-send {
      border: 1px solid rgba(125, 255, 154, 0.42);
      background: #7dff9a;
      color: #06100a;
    }

    .mcbrainy-feedback-back {
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.055);
      color: #f4f8fb;
    }

    .mcbrainy-feedback-send:disabled {
      opacity: 0.55;
      cursor: wait;
    }

    .mcbrainy-feedback-status {
      min-height: 20px;
      margin: 13px 0 0;
      color: rgba(244, 248, 251, 0.68);
      font-size: 12px;
      line-height: 1.45;
    }

    .mcbrainy-feedback-status.success {
      color: #7dff9a;
    }

    .mcbrainy-feedback-status.error {
      color: #ff9b9b;
    }

    @media (max-width: 600px) {
      .mcbrainy-panel {
        width: 100vw;
      }
    }

/* =========================================================
   LEVEL 1 SUBNAV — CANONICAL SITE-WIDE COMPONENT
   Matches current Level 1 page markup.
   ========================================================= */

.level1-nav-group,
.level1-nav-menu {
  position: relative;
  display: flex;
  min-width: 0;
  width: 100%;
}

.level1-nav-group > .level1-primary-nav-item,
.level1-nav-menu > .level1-primary-nav-item {
  width: 100%;
}

.level1-subnav {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 1200;
  min-width: 520px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(145px, 1fr));
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 240, 160, 0.08), transparent 38%),
    #020d09;
  border: 1px solid var(--border);
  border-top-color: rgba(0, 240, 160, 0.28);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.58);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;
}

.level1-subnav-wide,
.level1-subnav-teams {
  min-width: 680px;
}

.level1-primary-nav > .level1-nav-group:nth-child(n+6) > .level1-subnav,
.level1-primary-nav > .level1-nav-menu:nth-child(n+6) > .level1-subnav {
  left: auto;
  right: 0;
}

.level1-nav-group:hover > .level1-subnav,
.level1-nav-group:focus-within > .level1-subnav,
.level1-nav-menu:hover > .level1-subnav,
.level1-nav-menu:focus-within > .level1-subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.level1-nav-group:hover > .level1-primary-nav-item .level1-nav-chevron,
.level1-nav-group:focus-within > .level1-primary-nav-item .level1-nav-chevron,
.level1-nav-menu:hover > .level1-primary-nav-item .level1-nav-caret,
.level1-nav-menu:focus-within > .level1-primary-nav-item .level1-nav-caret {
  transform: rotate(180deg);
}

.level1-subnav-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.level1-subnav-heading {
  display: block;
  margin: 0 0 3px;
  padding: 0 6px 5px;
  color: var(--green);
  border-bottom: 1px solid rgba(0, 240, 160, 0.16);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1;
  text-transform: uppercase;
}

.level1-subnav-column > a,
.level1-subnav-column > button,
.level1-subnav-label,
.level1-subnav-item {
  width: 100%;
  min-height: 18px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: #a9c5bb;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

.level1-subnav-column > a,
.level1-subnav-column > button,
.level1-subnav-item {
  cursor: pointer;
}

.level1-subnav-label {
  color: #6f8b81;
  cursor: default;
}

.level1-subnav-column > a:hover,
.level1-subnav-column > a:focus-visible,
.level1-subnav-column > button:hover,
.level1-subnav-column > button:focus-visible,
.level1-subnav-item:hover,
.level1-subnav-item:focus-visible,
.level1-subnav-item.active {
  color: var(--white);
  background: rgba(0, 240, 160, 0.09);
  outline: none;
}

/* =========================================================
   CANONICAL SINGLE-ROW TMS HEADER
   Logo | Primary Navigation | McBrainy | Upgrade | Profile
   ========================================================= */

.tms-topbar.tms-topbar-navigation-migrated {
  display: none;
}

.level1-nav-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  min-height: 64px;
}

.level1-nav-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 220px;
  padding: 0 16px 0 20px;
}

.level1-nav-brand img {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
}

.level1-primary-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group,
.level1-primary-nav > .level1-nav-menu {
  min-width: 0;
  width: 100%;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}

.level1-nav-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  padding: 7px 14px 7px 12px;
}

.level1-nav-utilities .big-brain-search {
  width: 250px;
  min-width: 190px;
  max-width: 250px;
  height: 42px;
  margin: 0;
  padding: 0 14px;
}

.level1-nav-utilities .big-brain-search > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level1-nav-utilities .upgrade-button,
.level1-nav-utilities .profile-button {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 1500px) {
  .level1-nav-brand {
    min-width: 190px;
    padding-left: 12px;
    padding-right: 10px;
  }

  .level1-nav-brand img {
    width: 170px;
  }

  .level1-primary-nav > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
    padding-left: 5px;
    padding-right: 5px;
  }

  .level1-nav-utilities {
    gap: 7px;
    padding-left: 8px;
    padding-right: 10px;
  }

  .level1-nav-utilities .big-brain-search {
    width: 210px;
    min-width: 170px;
  }
}

/* =========================================================
   CANONICAL HEADER VISUAL REFINEMENT
   Compact utilities + cleaner primary navigation rhythm
   ========================================================= */

.level1-nav-row {
  grid-template-columns: 270px minmax(0, 1fr) auto;
  min-height: 58px;
}

.level1-nav-brand {
  min-width: 0;
  padding: 0 18px 0 20px;
}

.level1-nav-brand img {
  width: 235px;
}

.level1-primary-nav {
  column-gap: 0;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
  gap: 7px;
  padding: 0 9px;
  font-size: 15px;
}

.level1-primary-nav-icon {
  flex: 0 0 auto;
}

.level1-nav-chevron {
  margin-left: 0;
}

.level1-nav-utilities {
  gap: 8px;
  padding: 7px 14px 7px 10px;
}

.level1-nav-utilities .big-brain-search {
  width: 230px;
  min-width: 230px;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
}

.level1-nav-utilities .upgrade-button {
  min-width: 96px;
  height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
}

.level1-nav-utilities .profile-button {
  width: 44px;
  min-width: 44px;
  height: 38px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1500px) {
  .level1-nav-row {
    grid-template-columns: 235px minmax(0, 1fr) auto;
  }

  .level1-nav-brand {
    padding-left: 14px;
    padding-right: 12px;
  }

  .level1-nav-brand img {
    width: 205px;
  }

  .level1-primary-nav > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
    gap: 5px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 14px;
  }

  .level1-nav-utilities .big-brain-search {
    width: 205px;
    min-width: 205px;
  }

  .level1-nav-utilities .upgrade-button {
    min-width: 88px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .level1-nav-utilities .profile-button {
    width: 40px;
    min-width: 40px;
  }
}

/* =========================================================
   CANONICAL HEADER FIT REFINEMENT
   Smaller brand + compact utility controls + full McBrainy prompt
   ========================================================= */

.level1-nav-row {
  grid-template-columns: 220px minmax(0, 1fr) auto;
  min-height: 54px;
}

.level1-nav-brand {
  padding: 0 14px;
}

.level1-nav-brand img {
  width: 190px;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
  gap: 4px;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 13px;
}

.level1-primary-nav-icon {
  font-size: 15px;
}

.level1-nav-chevron {
  font-size: 10px;
}

.level1-nav-utilities {
  gap: 6px;
  padding: 6px 12px 6px 8px;
}

.level1-nav-utilities .big-brain-search {
  width: 275px;
  min-width: 275px;
  max-width: 275px;
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.level1-nav-utilities .big-brain-search > span:last-child {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.level1-nav-utilities .upgrade-button {
  min-width: 76px;
  height: 32px;
  padding: 0 10px;
  font-size: 10px;
  line-height: 1;
}

.level1-nav-utilities .profile-button {
  width: 34px;
  min-width: 34px;
  height: 32px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 1500px) {
  .level1-nav-row {
    grid-template-columns: 200px minmax(0, 1fr) auto;
  }

  .level1-nav-brand img {
    width: 174px;
  }

  .level1-primary-nav > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
    gap: 3px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 12px;
  }

  .level1-primary-nav-icon {
    font-size: 14px;
  }

  .level1-nav-utilities .big-brain-search {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    font-size: 11px;
  }

  .level1-nav-utilities .upgrade-button {
    min-width: 72px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 9px;
  }

  .level1-nav-utilities .profile-button {
    width: 32px;
    min-width: 32px;
    font-size: 9px;
  }
}

/* =========================================================
   CANONICAL HEADER FINAL SCALE
   Smaller logo + one-step-smaller Level 1 navigation type
   ========================================================= */

.level1-nav-row {
  grid-template-columns: 185px minmax(0, 1fr) auto;
}

.level1-nav-brand {
  padding-left: 10px;
  padding-right: 10px;
}

.level1-nav-brand img {
  width: 158px;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
  font-size: 12px;
}

.level1-primary-nav-icon {
  font-size: 14px;
}

@media (max-width: 1500px) {
  .level1-nav-row {
    grid-template-columns: 175px minmax(0, 1fr) auto;
  }

  .level1-nav-brand img {
    width: 148px;
  }

  .level1-primary-nav > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
    font-size: 11px;
  }

  .level1-primary-nav-icon {
    font-size: 13px;
  }
}

/* =========================================================
   CANONICAL HEADER NAV ALIGNMENT
   Left-start navigation + protected equal cells + half-step type reduction
   ========================================================= */

.level1-nav-row {
  grid-template-columns: 165px minmax(0, 1fr) auto;
}

.level1-nav-brand {
  padding-left: 8px;
  padding-right: 8px;
}

.level1-nav-brand img {
  width: 145px;
}

.level1-primary-nav {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 0;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group,
.level1-primary-nav > .level1-nav-menu {
  min-width: 0;
  width: 100%;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
  box-sizing: border-box;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 11.5px;
  white-space: nowrap;
}

.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item > span:nth-child(2),
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item > span:nth-child(2) {
  min-width: 0;
}

.level1-nav-chevron {
  flex: 0 0 auto;
  margin-left: 1px;
  font-size: 9px;
}

@media (max-width: 1500px) {
  .level1-nav-row {
    grid-template-columns: 155px minmax(0, 1fr) auto;
  }

  .level1-nav-brand img {
    width: 138px;
  }

  .level1-primary-nav > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
    gap: 2px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 10.5px;
  }

  .level1-nav-chevron {
    margin-left: 0;
    font-size: 8px;
  }
}

/* =========================================================
   CANONICAL HEADER WIDTH CORRECTION
   More nav room + full labels + smaller utilities
   ========================================================= */

.level1-nav-row {
  grid-template-columns: 145px minmax(0, 1fr) auto;
}

.level1-nav-brand {
  padding-left: 6px;
  padding-right: 6px;
}

.level1-nav-brand img {
  width: 132px;
}

.level1-primary-nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group,
.level1-primary-nav > .level1-nav-menu {
  flex: 1 1 0;
  min-width: max-content;
  width: auto;
}

.level1-primary-nav > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
.level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
  justify-content: center;
  width: 100%;
  min-width: max-content;
  gap: 3px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 11.5px;
  overflow: visible;
  white-space: nowrap;
}

.level1-nav-utilities {
  gap: 5px;
  padding-left: 6px;
  padding-right: 8px;
}

.level1-nav-utilities .big-brain-search {
  width: 270px;
  min-width: 270px;
  max-width: 270px;
}

.level1-nav-utilities .upgrade-button {
  min-width: 64px;
  height: 28px;
  padding: 0 7px;
  font-size: 8.5px;
}

.level1-nav-utilities .profile-button {
  width: 29px;
  min-width: 29px;
  height: 28px;
  padding: 0;
  font-size: 8.5px;
}

@media (max-width: 1500px) {
  .level1-nav-row {
    grid-template-columns: 135px minmax(0, 1fr) auto;
  }

  .level1-nav-brand img {
    width: 122px;
  }

  .level1-primary-nav > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-group > .level1-primary-nav-item,
  .level1-primary-nav > .level1-nav-menu > .level1-primary-nav-item {
    font-size: 10.5px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .level1-nav-utilities .big-brain-search {
    width: 255px;
    min-width: 255px;
    max-width: 255px;
  }

  .level1-nav-utilities .upgrade-button {
    min-width: 60px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 8px;
  }

  .level1-nav-utilities .profile-button {
    width: 27px;
    min-width: 27px;
    font-size: 8px;
  }
}

/* =========================================================
   CANONICAL HEADER NAV LEFT NUDGE
   Primary navigation only. Utilities remain fixed.
   ========================================================= */

.level1-primary-nav {
  transform: translateX(-14px);
  width: calc(100% + 14px);
}