/* Light surfaces for matchup and player-stat pages only.
   Homepage and league hubs do not set data-theme-surface="research". */

.theme-switch {
    display: none;
    align-items: center;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(8, 12, 24, 0.92);
    justify-self: end;
}

html[data-theme-surface="research"] .theme-switch {
    display: inline-flex;
}

.theme-switch-btn {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.theme-switch-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

html[data-theme="light"][data-theme-surface="research"] body {
    background: #f3f5f8 !important;
}

/* The stadium art was built for the dark page. Leaving it under a white
   wash made every section look blurred. Light mode uses a flat page. */
html[data-theme="light"][data-theme-surface="research"] .nfl-field-bg,
html[data-theme="light"][data-theme-surface="research"] .nba-court-bg {
    display: none;
}

/* Player-stat team picker and roster. The navy/red page banner stays. */
html[data-theme="light"][data-theme-surface="research"] .team-card {
    background: #ffffff;
    border-color: #d5dbe3;
}

html[data-theme="light"][data-theme-surface="research"] .team-name,
html[data-theme="light"][data-theme-surface="research"] .team-name-large,
html[data-theme="light"][data-theme-surface="research"] .player-name {
    color: #111827;
}

html[data-theme="light"][data-theme-surface="research"] .team-record,
html[data-theme="light"][data-theme-surface="research"] .breadcrumb,
html[data-theme="light"][data-theme-surface="research"] .breadcrumb i {
    color: #526174;
}

html[data-theme="light"][data-theme-surface="research"] .team-header,
html[data-theme="light"][data-theme-surface="research"] .player-card {
    background: #ffffff;
    border-color: #d5dbe3;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

html[data-theme="light"][data-theme-surface="research"] .player-depth-tag {
    color: #526174;
}

html[data-theme="light"][data-theme-surface="research"] .player-position {
    color: #047857;
}

html[data-theme="light"][data-theme-surface="research"] .page-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
}