/* NHLstats visual layer. Loaded after existing feature styles. */
:root { --bg:#f6f8fa; --panel:#fff; --panel-2:#f7f9fb; --panel-3:#edf2f6; --text:#182b3b; --muted:#607184; --border:#e3e9ee; --border-strong:#cdd8e2; --blue:#1767c9; --blue-dark:#1556a4; --blue-soft:#edf3fc; --shadow:none; --shadow-small:none; }
html,body { background:var(--bg); }
body { border-top:0; }
.page { width:min(100%,1220px); padding:0 32px 48px; }
.site-header { padding-top:24px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.site-brand { margin:0; display:flex; gap:0; font-size:28px; line-height:1.2; letter-spacing:-1px; font-weight:750; }
.site-brand span { color:var(--blue); font-weight:550; }
.nav-tabs { display:flex; flex-wrap:wrap; gap:24px; margin:20px 0 0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.nav-tabs .nav-tab { padding:12px 0 15px; min-height:44px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; box-shadow:none; font-size:14px; font-weight:600; color:var(--muted); }
.nav-tabs .nav-tab.active { color:var(--blue); background:transparent; border-bottom-color:var(--blue); box-shadow:none; }
.nav-tabs .nav-tab:hover { color:var(--blue); transform:none; }
#playersView .toolbar.player-finder { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; padding:0; margin-bottom:20px; background:transparent; border:0; border-radius:0; box-shadow:none; }
#playersView .player-finder .player-search-field { flex:1 1 240px; width:auto; max-width:560px; }
#playersView .search-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#playersView .player-search-field input { border-color:var(--border-strong); min-height:46px; padding-top:12px; padding-bottom:12px; box-shadow:none; }
#playersView .player-search-clear { height:46px; }
#playersView .player-filters { margin:0; flex:0 0 100%; min-width:0; }
#playersView .filter-fields { display:grid; grid-template-columns:1fr 1fr 2fr; gap:16px; margin-top:2px; padding:18px; background:var(--panel); border:1px solid var(--border); border-radius:12px; }
#playersView .field label { color:var(--muted); text-transform:none; letter-spacing:0; font-weight:500; font-size:13px; }
#playersView .field select { min-height:44px; font-size:16px; background:var(--panel); border-color:var(--border-strong); }
#playersView .player-period-controls { display:flex; justify-content:flex-start; align-items:center; gap:12px; margin:0 0 16px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#playersView .player-sample { color:var(--muted); font-size:13px; }
#playersView .split-toggle { display:flex; gap:3px; padding:3px; background:#e9eef3; border:0; border-radius:8px; box-shadow:none; }
#playersView .split-btn { min-height:40px; padding:9px 16px; border:0; border-radius:6px; background:transparent; box-shadow:none; color:var(--muted); font-size:13px; font-weight:600; }
#playersView .split-btn.active { background:var(--panel); color:var(--blue); box-shadow:0 1px 3px #182b3b0e; }
#playersView .player-overview { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:24px; margin-bottom:16px; }
#playersView .player-card { display:flex; align-items:center; gap:18px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#playersView .player-photo { width:88px; height:88px; position:relative; flex:none; background:#edf2f6; border-radius:14px; overflow:hidden; }
#playersView .player-photo >span { display:flex; align-items:center; justify-content:center; height:100%; color:#7b8d9f; font-size:26px; font-weight:600; }
#playersView .player-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border:0; border-radius:0; background:#edf2f6; }
#playersView .player-meta { min-width:0; }
#playersView .player-meta h2 { font-size:32px; line-height:1.2; margin:6px 0; letter-spacing:-1px; overflow-wrap:anywhere; }
#playersView .player-team-line, #playersView .player-age { font-size:13px; color:var(--muted); }
#playersView .season-stats-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:20px 0 0; margin-top:24px; border-top:1px solid var(--border); }
#playersView .season-stat { padding:0; border:0; border-radius:0; background:transparent; }
#playersView .season-stat-label { color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0; font-size:12px; margin-bottom:7px; }
#playersView .season-stat-value { font-size:27px; line-height:1.2; font-weight:650; letter-spacing:-.7px; font-variant-numeric:tabular-nums; }
#playersView .season-stat:nth-child(4) .season-stat-value { color:var(--blue); }
#playersView .panel.performance-panel { border:1px solid var(--border); border-radius:12px; box-shadow:none; background:var(--panel); padding:22px 24px; margin-bottom:24px; }
#playersView .performance-panel >.panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0; border:0; background:transparent; }
#playersView .performance-panel >.panel-header h3 { margin:0; font-size:18px; font-weight:650; }
#playersView .performance-panel >.panel-header >span { color:var(--muted); font-size:12px; }
#playersView .profile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:22px 0 26px; }
#playersView .profile-card { padding:0; border:0; border-radius:0; background:transparent; min-width:0; }
#playersView .profile-label { font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; line-height:1.4; color:var(--muted); margin-bottom:9px; min-height:0; }
#playersView .profile-badge { display:inline-flex; align-items:center; padding:5px 12px; border:1px solid transparent; border-radius:999px; background:#e9edf2; color:#344155; font-size:16px; font-weight:650; line-height:1.4; }
#playersView .profile-badge::before { content:none; }
#playersView .profile-badge.badge-elite { background:#128044; border-color:transparent; color:#fff; }
#playersView .profile-badge.badge-very-good { background:#16834e; border-color:transparent; color:#fff; }
#playersView .profile-badge.badge-good { background:#577f1e; border-color:transparent; color:#fff; }
#playersView .profile-badge.badge-average { background:#92700f; border-color:transparent; color:#fff; }
#playersView .profile-badge.badge-weak { background:#b85216; border-color:transparent; color:#fff; }
#playersView .profile-badge.badge-bad { background:#d92d36; border-color:transparent; color:#fff; }
#playersView .profile-badge.badge-neutral { background:#e9edf2; border-color:#dbe1e9; color:#526073; }
#playersView .performance-panel .player-type-panel { display:flex; align-items:flex-start; gap:24px; padding-top:24px; border:0; border-top:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
#playersView .player-type-panel .panel-header { background:transparent; padding:0; border:0; flex:none; }
#playersView .player-type-panel .panel-header h3 { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-top:4px; }
#playersView .player-type-panel .summary-wrap { padding:0; display:block; }
#playersView .player-type-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
#playersView .player-type-heading >strong { font-size:15px; }
#playersView .player-type-detail { color:var(--muted); font-size:13px; line-height:1.5; margin-top:5px; }
#playersView .deep-dive-heading h3 { font-size:18px; margin:0 0 16px; }
#playersView details.accordion { background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:none; margin-bottom:12px; }
#playersView details.accordion >summary { display:flex; align-items:center; justify-content:space-between; gap:12px; background:transparent; min-height:78px; padding:20px 22px; font-size:16px; font-weight:600; }
#playersView details.accordion >summary >span { color:var(--muted); font-size:12px; font-weight:400; }
#playersView .accordion-subtitle { font-size:12px; font-weight:400; margin-top:5px; color:var(--muted); }
#playersView .accordion-content { padding:6px 22px 20px; }
#playersView .stat-row { display:grid; grid-template-columns:1fr auto; gap:6px 14px; padding:16px 0; border-bottom:1px solid var(--border); }
#playersView .stat-row:last-child { border-bottom:0; }
#playersView .stat-name { font-size:14px; font-weight:500; }
#playersView .stat-value { font-size:23px; font-weight:650; text-align:right; }
#playersView .stat-rank { grid-column:1/-1; font-size:12px; text-align:left; color:var(--muted); }
#playersView .stat-row >div:last-child { grid-column:1/-1; }
#playersView .percentile { width:100%; height:5px; border:0; background:#edf2f4; border-radius:3px; overflow:hidden; }
#playersView .percentile-fill { height:100%; border:0; border-radius:3px; }
#playersView .player-footer { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:18px; }
#playersView .footer-note { margin:0; font-size:12px; color:var(--muted); }
#playersView details.legend { position:static; top:auto; right:auto; width:auto; max-width:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; margin:0; }
#playersView .legend summary { color:var(--muted); font-size:12px; cursor:pointer; min-height:32px; }
#playersView .legend-scale { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; }
#playersView .legend .legend-item { margin:0; font-size:12px; }
#playersView .legend .legend-color { width:8px; height:8px; border-radius:50%; }
#playersView .legend p { max-width:650px; font-size:12px; line-height:1.6; color:var(--muted); }
#playersView .empty { box-shadow:none; font-size:14px; }
@media(max-width:800px) { #playersView .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
  .page { padding:0 16px 32px; }
  .site-header { padding-top:20px; margin-bottom:20px; }
  .nav-tabs { gap:8px 18px; }
  .nav-tabs .nav-tab { font-size:13px; padding:10px 0 12px; flex:initial; }
  #playersView .player-finder .player-search-field { max-width:none; flex:1 1 180px; }
  #playersView .filter-fields { grid-template-columns:1fr; gap:14px; padding:16px; }
  #playersView .player-overview { padding:18px; }
  #playersView .player-card { gap:12px; }
  #playersView .player-photo { width:66px; height:76px; }
  #playersView .player-meta h2 { font-size:25px; }
  #playersView .player-team-line, #playersView .player-age { font-size:12px; }
  #playersView .season-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 12px; padding-top:18px; margin-top:20px; }
  #playersView .season-stat-label { font-size:11px; }
  #playersView .season-stat-value { font-size:24px; }
  #playersView .panel.performance-panel { padding:18px; }
  #playersView .profile-grid { gap:20px 14px; padding-top:20px; }
  #playersView .profile-badge { font-size:15px; }
  #playersView .player-type-panel { flex-direction:column; gap:8px!important; }
  #playersView details.accordion >summary { padding:18px; }
  #playersView .accordion-content { padding:4px 18px 16px; }
  #playersView .player-sample { font-size:12px; }
}

/* Readable typography and shared overview layout. */
#playersView { --muted:#526477; }
#playersView .player-summary-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-bottom:24px; }
#playersView .player-summary-layout >.player-overview,
#playersView .player-summary-layout >.performance-panel { min-width:0; margin-bottom:0; }
#playersView .field label,
#playersView .player-sample,
#playersView .split-btn,
#playersView .player-team-line,
#playersView .player-age,
#playersView .season-stat-label,
#playersView .profile-label,
#playersView .performance-panel >.panel-header >span,
#playersView .accordion-subtitle,
#playersView .stat-rank,
#playersView .footer-note,
#playersView .legend summary,
#playersView .legend .legend-item,
#playersView .legend p { font-size:14px; line-height:1.5; }
#playersView .player-type-detail { font-size:15px; line-height:1.6; }
#playersView .player-type-panel .panel-header h3 { font-size:13px; letter-spacing:.7px; }
#playersView details.accordion >summary >span { font-size:14px; }
@media(min-width:1000px) {
  #playersView .player-summary-layout { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:stretch; }
  #playersView .season-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; }
  #playersView .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
  #playersView .performance-panel .player-type-panel { flex-direction:column; gap:8px; }
}
@media(max-width:999px) and (min-width:641px) {
  #playersView .season-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; }
  #playersView .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Schedule: flat controls, clean match cells, viewport-sticky day headings. */
#scheduleView .schedule-controls { box-shadow:none; padding:18px 20px; }
#scheduleView .schedule-subtitle { font-size:14px; line-height:1.5; color:#526477; }
#scheduleView .schedule-week-field label { font-size:13px; color:#526477; }
#scheduleView .day-btn { background:#f4f7fa; color:#607184; border:1px solid #cdd8e2; box-shadow:none; transform:none; }
#scheduleView .day-btn.active { background:#1767c9; border-color:#1767c9; color:#fff; box-shadow:none; }
#scheduleView .day-btn:hover { box-shadow:none; transform:none; }
#scheduleView .day-btn.active:hover { background:#1556a4; }
#scheduleView .game-pill { border:0; background:transparent; box-shadow:none; border-radius:0; padding:0; }
/* Both ancestors must allow vertical overflow for sticky to follow the page. */
#scheduleView .schedule-scroll { overflow:visible; padding-bottom:0; }
#scheduleView .schedule-grid { overflow:visible; min-width:0; width:100%; }
#scheduleView .schedule-head { position:sticky; top:0; z-index:5; background:#f1f5f9; box-shadow:0 2px 4px #182b3b12; border-radius:12px 12px 0 0; }
#scheduleView .schedule-head .schedule-cell { background:#f1f5f9; }
#scheduleView .schedule-head .schedule-cell:first-child { border-top-left-radius:12px; }
#scheduleView .schedule-head .schedule-cell:last-child { border-top-right-radius:12px; }
#scheduleView .schedule-head .inactive-day { opacity:1; color:#a8b3c0; }
#scheduleView .schedule-head .inactive-day .schedule-day-button { opacity:.4; }
@media(min-width:641px) {
  #scheduleView .schedule-row { grid-template-columns:84px repeat(7,minmax(0,1fr)) 56px; }
  #scheduleView .day-toggle { grid-template-columns:84px repeat(7,minmax(0,1fr)) 56px; }
  #scheduleView .schedule-row:not(.schedule-head) .schedule-cell { min-height:96px; padding:6px; }
  #scheduleView .game-pill { min-height:80px; min-width:0; }
}
@media(max-width:640px) {
  #scheduleView .schedule-controls { padding:16px; }
  #scheduleView .schedule-controls h2 { margin-bottom:6px; }
  #scheduleView .schedule-subtitle { margin-bottom:12px; }
  #scheduleView .schedule-week-field { margin-top:12px; }
  #scheduleView .schedule-head,
  #scheduleView .schedule-head .schedule-cell:first-child,
  #scheduleView .schedule-head .schedule-cell:last-child { border-radius:0; }
}