/* ═══════════════════════════════════════════════════════
   NFL Player Profiler  ·  DrRoto Dev
   Design language: broadcast data terminal
   ─ near-black bg, bold header strips, zero radius, large type
════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Archivo:wght@600;700;800;900&display=swap');

:root {
  /* "mono" var name retained to avoid mass renames — it's now a proportional
     sans (Inter) with tabular figures so numbers still align in columns. */
  --prof-mono:    'Inter', system-ui, -apple-system, sans-serif;
  --prof-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --prof-display: 'Archivo', system-ui, sans-serif;

  /* Profiler palette — blue headers, white/cream content */
  --p-bg:         #f4f4f0;   /* cream page tone */
  --p-card:       #ffffff;   /* section body — white */
  --p-head:       #1a2740;   /* section header strip — dark navy blue */
  --p-border:     #253a5e;   /* outer frame border — dark blue */
  --p-border-2:   #dde2ea;   /* inner dividers — light gray */

  --p-text:       #0d1117;   /* near-black primary */
  --p-text-2:     #374151;   /* dark gray secondary */
  --p-text-3:     #6b7280;   /* medium gray muted */

  --p-cyan:       #00c8f0;   /* active/highlight accent */
  --p-gold:       #ffc107;   /* stat callout gold */
  --p-green:      #22c55e;
  --p-green-d:    rgba(34,197,94,.15);
  --p-red:        #ef4444;
  --p-red-d:      rgba(239,68,68,.15);
  --p-blue:       #3b82f6;
  --p-blue-d:     rgba(59,130,246,.15);
  --p-purple:     #a78bfa;
  --p-purple-d:   rgba(167,139,250,.15);

  /* Legacy aliases used by home.css-referenced components */
  --prof-green:   #22c55e;
  --prof-green-d: rgba(34,197,94,.15);
  --prof-gold:    #ffc107;
  --prof-gold-d:  rgba(245,158,11,.15);
  --prof-red:     #ef4444;
  --prof-red-d:   rgba(239,68,68,.15);
  --prof-blue:    #3b82f6;
  --prof-blue-d:  rgba(59,130,246,.15);
  --prof-elite:   #a78bfa;
  --prof-elite-d: rgba(167,139,250,.15);
}

body {
  font-family: var(--prof-sans);
  /* tabular-nums = numbers all the same width, so columns line up.
     cv11 = single-storey 'a' / cleaner 'l'. */
  font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1;
}
/* Display headlines (player surname, page H1) keep their condensed character. */
.wr-lastname,
.prof-tool-hd h1 { font-family: var(--prof-display); }

/* ── Page Shell ──────────────────────────────────────── */
.prof-page {
  margin-top: calc(var(--ticker-h) + var(--topbar-h) + var(--header-h));
  min-height: calc(100vh - var(--ticker-h) - var(--topbar-h) - var(--header-h));
  padding: 14px 18px 40px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  background: var(--p-bg);
}

/* ── Tool Header (title + search, full width) ────────── */
.prof-tool-hd {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.prof-tool-hd-left { flex: 0 1 auto; min-width: 200px; }
.prof-tool-hd h1 {
  font-size: 1.2rem; font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text-1);
  margin-bottom: 2px;
}
.prof-tool-hd p { font-size: .86rem; color: var(--text-2); }
.prof-tool-hd-back {
  font-size: .87rem;
  color: var(--text-2);
  align-self: center;
  margin-left: auto;
  white-space: nowrap;
}
.prof-tool-hd-back:hover { color: var(--p-cyan); }
.prof-tool-hd .search-wrap {
  flex: 1 1 320px;
  max-width: 480px;
  margin: 0;
}

/* ── Search ──────────────────────────────────────────── */
.search-wrap {
  position: relative;
  margin: 0 0 14px;
}
.search-input-row {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 2px solid var(--border-card);
  border-radius: 0;
  padding: 0 14px;
  gap: 10px;
  transition: border-color .15s;
}
.search-input-row:focus-within {
  border-color: var(--brand);
}
.search-icon { color: var(--text-3); font-size: 1.08rem; flex-shrink: 0; }
.search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-1); font-family: var(--prof-sans);
  font-size: 1.03rem; padding: 11px 0;
}
.search-input::placeholder { color: var(--text-3); }
.search-clear {
  background: none; border: none; color: var(--text-3);
  font-size: 1.08rem; padding: 4px; cursor: pointer;
  display: none; transition: color .15s;
}
.search-clear:hover { color: var(--text-1); }
.search-clear.vis { display: block; }

.search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 0;
  box-shadow: 0 20px 48px rgba(0,0,0,.6);
  z-index: 200;
  max-height: 380px; overflow-y: auto;
  display: none;
}
.search-dropdown.open { display: block; }
.search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border-card);
  transition: background .12s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--bg-card-h); }
.sr-img {
  width: 38px; height: 38px; border-radius: 0;
  object-fit: cover; background: var(--bg-surface);
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.sr-info { flex: 1; }
.sr-name { font-weight: 700; font-size: 1rem; color: var(--text-1); }
.sr-meta { font-size: .86rem; color: var(--text-2); margin-top: 1px; }
.sr-pos {
  font-size: .75rem; font-weight: 800; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 0; text-transform: uppercase;
}

/* ── Position Badges ─────────────────────────────────── */
.pos-wr { background: rgba(59,130,246,.2);  color: #60a5fa; }
.pos-rb { background: rgba(34,197,94,.2);   color: #4ade80; }
.pos-te { background: rgba(245,158,11,.2);  color: #fbbf24; }
.pos-qb { background: rgba(239,68,68,.2);   color: #f87171; }
.pos-k  { background: rgba(139,92,246,.2);  color: #c4b5fd; }

/* ── Featured Carousel (horizontal, auto-scrolling) ──── */
.featured-carousel {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg-card);
  border: 2px solid var(--p-border);
  margin-bottom: 14px;
  overflow: hidden;
  position: relative;
}
.fc-label {
  flex-shrink: 0;
  font-family: var(--prof-mono);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: #e8f0ff;
  background: var(--p-head);
  padding: 0 14px;
  display: flex; align-items: center;
  border-right: 2px solid var(--p-border);
}
.fc-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.fc-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: fc-marquee 60s linear infinite;
}
.featured-carousel:hover .fc-track { animation-play-state: paused; }
@keyframes fc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.fc-card {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-right: 1px solid var(--p-border-2);
  background: var(--bg-card);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 220px;
  transition: background .15s;
  position: relative;
}
.fc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--fc1, #3052d1), var(--fc2, #1e2a4a));
}
.fc-card:hover { background: color-mix(in srgb, var(--fc1, #3052d1) 8%, var(--bg-card)); }
.fc-card.active {
  background: color-mix(in srgb, var(--fc1, #3052d1) 14%, var(--bg-card));
  box-shadow: inset 0 -3px 0 var(--p-cyan);
}
.fc-photo {
  width: 36px; height: 36px;
  object-fit: cover; object-position: top center;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.fc-info { display: flex; flex-direction: column; min-width: 0; }
.fc-name {
  font-weight: 800; font-size: .92rem;
  color: var(--text-1); white-space: nowrap;
  line-height: 1.1;
}
.fc-meta {
  font-family: var(--prof-mono);
  font-size: .68rem; font-weight: 600;
  color: var(--text-3);
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.4;
}
.fc-stat {
  font-family: var(--prof-mono);
  font-size: .78rem; color: var(--text-2);
  margin-left: auto;
  padding-left: 12px;
}
.fc-stat b { color: var(--p-gold); font-weight: 800; }
.fc-refresh {
  flex-shrink: 0;
  background: var(--bg-card);
  border: none;
  border-left: 2px solid var(--p-border);
  color: var(--text-3);
  padding: 0 14px;
  font-size: 1.03rem;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.fc-refresh:hover { color: var(--p-cyan); background: var(--bg-card-h, var(--bg-surface)); }
.feat-card {
  background: var(--bg-card);
  border: 2px solid var(--border-card);
  border-radius: 0;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color .15s, background .12s;
  display: flex; align-items: center; gap: 9px;
  position: relative; overflow: hidden;
}
.feat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom, var(--fc1), var(--fc2));
}
.feat-card:hover { border-color: var(--fc1); background: var(--bg-card-h, var(--bg-surface)); }
.feat-card.active {
  border-color: var(--fc1);
  background: color-mix(in srgb, var(--fc1) 10%, var(--bg-card));
}
.feat-photo {
  width: 34px; height: 34px; border-radius: 0;
  object-fit: cover;
  border: 2px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0; margin-left: 4px;
}
.feat-info { flex: 1; min-width: 0; }
.feat-name {
  font-weight: 700; font-size: .9rem;
  color: var(--text-1); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 1px;
}
.feat-meta { font-size: .75rem; color: var(--text-2); margin-bottom: 2px; }
.feat-stat { font-family: var(--prof-mono); font-size: .74rem; color: var(--text-3); }
.feat-stat b { color: var(--p-gold); }
.feat-skeleton {
  background: var(--bg-card); border: 2px solid var(--border-card);
  border-radius: 0; padding: 8px 10px;
  display: flex; align-items: center; gap: 9px;
  animation: pulse .8s ease-in-out infinite alternate;
}
.feat-skeleton .sk-circle { width: 34px; height: 34px; border-radius: 0; background: var(--bg-surface); flex-shrink: 0; }
.feat-skeleton .sk-lines { flex: 1; }
.feat-skeleton .sk-l { background: var(--bg-surface); border-radius: 0; height: 9px; margin-bottom: 5px; }
.feat-skeleton .sk-l:last-child { width: 60%; }

/* ── Empty State ─────────────────────────────────────── */
.prof-empty {
  text-align: center; padding: 80px 20px; color: var(--text-3);
}
.prof-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: .4; }
.prof-empty h3 { font-size: 1.1rem; color: var(--text-2); margin-bottom: 8px; }
.prof-empty p  { font-size: .94rem; }

/* ── Profiler Card ───────────────────────────────────── */
#profilerPanel { display: block; }

/* ── WR Banner ───────────────────────────────────────── */
.wr-banner {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #090e1a;
  border: 2px solid var(--p-border);
  border-bottom: none;
}
.wr-banner-bg {
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--tc1) 32%, transparent) 0%,
    transparent 60%);
  pointer-events: none;
}
.wr-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
  background: linear-gradient(to bottom, var(--tc1), var(--tc2));
}
.wr-banner-body {
  position: relative;
  display: flex; gap: 16px; align-items: center;
  padding: 16px 20px 14px 20px;
}

/* Player photo — proper visible element */
.wr-player-photo {
  width: 96px; height: 96px;
  border-radius: 0;
  object-fit: cover; object-position: top center;
  border: 2px solid color-mix(in srgb, var(--tc1) 55%, rgba(255,255,255,.2));
  flex-shrink: 0;
  align-self: stretch;
}

/* Identity block */
.wr-id { flex: 1; min-width: 0; }
.wr-meta-top {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 3px;
  font-family: var(--prof-mono);
}
.wr-num { color: rgba(255,255,255,.7); }
.wr-teamname { color: rgba(255,255,255,.7); }
.wr-sep { color: rgba(255,255,255,.2); }
.wr-postag { padding: 1px 6px; border-radius: 0; font-size: .72rem; }
.wr-inj {
  font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 0;
  background: rgba(239,68,68,.2); color: #ef4444;
  border: 1px solid rgba(239,68,68,.4);
}
.wr-firstname {
  font-size: 1rem; font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .08em;
  line-height: 1; margin-bottom: 0;
}
.wr-lastname {
  font-size: 3rem; font-weight: 900;
  letter-spacing: -.04em; line-height: .92;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0,0,0,.7);
  margin-bottom: 6px;
  font-family: var(--prof-sans);
}
.wr-arch {
  font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tc1) 85%, #fff);
  margin-bottom: 8px;
}
.wr-adot-bar {
  display: flex; gap: 0; flex-wrap: wrap;
  font-family: var(--prof-mono); font-size: .92rem;
}
.wr-adot-pair {
  display: flex; align-items: baseline; gap: 4px;
  margin-right: 20px; white-space: nowrap;
}
.wr-adot-val { font-weight: 700; color: #fff; font-size: 1rem; }
.wr-adot-lbl { font-size: .76rem; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.38); }

/* Stats row (right side of banner, single horizontal LR strip) */
.wr-kstats {
  display: grid;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  gap: 4px;
  align-items: stretch;
  flex-shrink: 0;
  position: relative;
}
.wr-kstat {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0;
  padding: 10px 12px 9px;
  text-align: center;
  min-width: 70px;
}
.wr-kstat-val {
  font-family: var(--prof-mono);
  font-size: 1.15rem; font-weight: 700;
  color: #fff; line-height: 1;
  margin-bottom: 4px;
  white-space: nowrap;
}
.wr-kstat-lbl {
  font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
}
.wr-year {
  grid-column: 1 / -1;
  font-family: var(--prof-mono);
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.22);
  text-align: right;
  letter-spacing: .12em;
  padding: 3px 2px 0;
}

/* ── Trend arrows ────────────────────────────────────── */
.arr-up { color: var(--p-green); font-size: .65em; }
.arr-dn { color: var(--p-red);   font-size: .65em; }

/* ── Section wrapper (shared) ────────────────────────── */
/* Both .prof-section and .vis-section use the same bold terminal look */
.prof-section,
.vis-section {
  background: var(--p-card);
  border: 2px solid var(--p-border);
  border-top: none;
  border-radius: 0;
  padding: 0;
}
.prof-section:last-child,
.vis-section:last-child { border-radius: 0; }

/* Section header strip — the dark labeled band from the reference */
.prof-section-hd,
.vis-section-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: var(--p-head);
  border-bottom: 2px solid var(--p-border);
  justify-content: space-between;
}
.prof-section-title,
.vis-title {
  font-family: var(--prof-mono);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #e8f0ff;   /* always white — lives on dark blue header */
  flex: 1;
}
.vis-subtitle {
  font-family: var(--prof-mono);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);  /* always light — lives on dark blue header */
}
.vis-data-note {
  font-family: var(--prof-mono);
  font-size: .78rem; color: var(--p-text-3);
  padding: 10px 16px;
  border-top: 1px solid var(--p-border-2);
}

/* Section badges */
.prof-section-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 0;
}
.badge-live     { background: rgba(34,197,94,.2);  color: #22c55e; border: 1px solid rgba(34,197,94,.35); }
.badge-enhanced { background: rgba(255,193,7,.15);  color: #ffc107; border: 1px solid rgba(255,193,7,.35); }
.badge-coming   { background: rgba(255,255,255,.05); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.12); }

/* ── Quarter Performance (always visible above tabs) ─── */
.qp-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; /* flush grid, borders handle separation */
}
.qp-card {
  background: var(--p-card);
  border-right: 2px solid var(--p-border-2);
  border-radius: 0;
  padding: 14px 10px 12px;
  text-align: center;
  transition: background .15s;
}
.qp-card:last-child { border-right: none; }
.qp-active {
  background: rgba(0,200,240,.08);
  border-bottom: 3px solid var(--p-cyan);
}
.qp-label {
  font-family: var(--prof-mono);
  font-size: .8rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-text-2);
  margin-bottom: 8px;
}
.qp-ypt {
  font-family: var(--prof-mono);
  font-size: 1.5rem; font-weight: 700;
  color: var(--p-text);
  line-height: 1; margin-bottom: 4px;
}
.qp-cr {
  font-family: var(--prof-mono);
  font-size: .88rem; color: var(--p-text-3);
}

/* ── Profile Tabs ────────────────────────────────────── */
.prof-tabs {
  display: flex;
  gap: 0;
  background: var(--p-head);
  border-left: 2px solid var(--p-border);
  border-right: 2px solid var(--p-border);
  border-bottom: 2px solid var(--p-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tab {
  flex-shrink: 0;
  font-family: var(--prof-mono);
  font-size: .86rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);  /* always light — lives on dark blue tab bar */
  padding: 12px 18px;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  background: transparent;
}
.prof-tab:hover { color: #fff; background: rgba(255,255,255,.07); }
.prof-tab.active {
  color: #030c18;
  background: var(--p-cyan);
  border-bottom-color: var(--p-cyan);
}
.prof-tab-panel { display: none; }
.prof-tab-panel.active { display: block; }

/* Tab panels: top border removed (tab bar handles it), bottom rounded 0 */
.prof-tab-panel > .vis-section,
.prof-tab-panel > .prof-section {
  border-top: none;
  border-radius: 0;
}

/* ── Stats Grid ──────────────────────────────────────── */
.prof-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0;
  background: var(--p-border-2);
  border-top: none;
}
.prof-stat-cell {
  background: var(--p-card);
  padding: 16px 18px;
  border-right: 1px solid var(--p-border-2);
  border-bottom: 1px solid var(--p-border-2);
}
.prof-stat-label {
  font-family: var(--prof-mono);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-text-2); margin-bottom: 6px;
}
.prof-stat-value {
  font-family: var(--prof-mono);
  font-size: 1.4rem; font-weight: 700;
  color: var(--p-text);
}
.prof-stat-bar-wrap { margin-top: 8px; height: 5px; background: var(--p-border-2); border-radius: 0; overflow: hidden; }
.prof-stat-bar { height: 100%; border-radius: 0; transition: width .6s ease; }
.bar-green { background: var(--p-green); }
.bar-gold  { background: var(--p-gold); }
.bar-blue  { background: var(--p-blue); }
.bar-red   { background: var(--p-red); }
.prof-stat-sub { font-size: .8rem; color: var(--p-text-3); margin-top: 4px; font-family: var(--prof-mono); }

/* ── Route Tree ──────────────────────────────────────── */
.rt-wrap {
  display: flex; gap: 0;
  padding: 12px 14px 0;
}
.rt-svg-wrap {
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 2px solid var(--p-border-2);
}
.rt-svg-wrap svg {
  display: block;
  border: 2px solid rgba(0,0,0,.18);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.rt-table { flex: 1; padding-left: 14px; }

.rt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--p-border-2);
}
.rt-row:last-child { border-bottom: none; }
.rt-name {
  width: 118px; flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  font-size: .92rem; font-weight: 600;
  color: var(--p-text);
}
.rt-badge {
  font-size: .62rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 5px; border-radius: 0;
}
.rt-badge-elite    { background: var(--p-purple-d); color: var(--p-purple); border: 1px solid rgba(167,139,250,.4); }
.rt-badge-sig      { background: var(--p-blue-d);   color: #60a5fa;         border: 1px solid rgba(59,130,246,.4); }
.rt-badge-weakness { background: var(--p-red-d);    color: var(--p-red);    border: 1px solid rgba(239,68,68,.4); }

.rt-tgts {
  font-family: var(--prof-mono);
  font-size: .84rem; color: var(--p-text-3);
  width: 30px; flex-shrink: 0; text-align: right;
}
.rt-bar-cell { flex: 1; }
.rt-bar-track {
  height: 22px; background: var(--p-border-2);
  border-radius: 0; overflow: hidden;
  position: relative; display: flex; align-items: center;
}
.rt-bar-fill {
  height: 100%; border-radius: 0;
  display: flex; align-items: center;
  padding-left: 8px;
  min-width: 2px;
  transition: width .5s ease;
}
.rt-bar-green  { background: rgba(34,197,94,.75); }
.rt-bar-gold   { background: rgba(255,193,7,.75); }
.rt-bar-blue   { background: rgba(59,130,246,.75); }
.rt-bar-purple { background: rgba(167,139,250,.75); }
.rt-bar-slate  { background: rgba(148,163,184,.55); }
.rt-bar-pct {
  font-family: var(--prof-mono); font-size: .8rem;
  font-weight: 700; color: #fff; white-space: nowrap;
}
.rt-bar-empty {
  font-family: var(--prof-mono); font-size: .8rem;
  color: var(--p-text-3); padding-left: 8px;
}
.rt-ypt {
  font-family: var(--prof-mono); font-size: .98rem;
  font-weight: 700; width: 40px; flex-shrink: 0; text-align: right;
}
.ypt-hi  { color: var(--p-green); }
.ypt-mid { color: var(--p-gold); }
.ypt-lo  { color: #fb923c; }
.ypt-bad { color: var(--p-red); }
.rt-ypt:not([class*="ypt-"]) { color: var(--p-text-3); }

/* Route tree legend */
.rt-legend { display: flex; gap: 6px; align-items: center; }
.rtl-item {
  font-family: var(--prof-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  padding: 3px 7px; border-radius: 0;
}
.rtl-hi  { background: rgba(34,197,94,.2);   color: var(--p-green); }
.rtl-mid { background: rgba(255,193,7,.2);    color: var(--p-gold); }
.rtl-lo  { background: rgba(251,146,60,.2);   color: #fb923c; }
.rtl-bad { background: rgba(239,68,68,.18);   color: var(--p-red); }

/* ── Coverage Shell ──────────────────────────────────── */
.cov-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--p-border-2);
  padding: 0;
  border-top: 1px solid var(--p-border-2);
}
.cov-card {
  background: var(--p-card);
  border: none;
  border-right: 1px solid var(--p-border-2);
  border-bottom: 1px solid var(--p-border-2);
  border-radius: 0;
  padding: 12px 8px 10px;
  text-align: center;
  position: relative;
}
.cov-card:nth-child(4n) { border-right: none; }
.cov-card.cov-best  { background: rgba(34,197,94,.07);  border-bottom-color: var(--p-green); }
.cov-card.cov-worst { background: rgba(239,68,68,.07);  border-bottom-color: var(--p-red); }
.cov-card-top {
  min-height: 14px;
  display: flex; justify-content: flex-end;
  margin-bottom: 4px;
}
.cov-flag { font-family: var(--prof-mono); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cov-flag-best  { color: var(--p-green); }
.cov-flag-worst { color: var(--p-red); }
.cov-formation { display: flex; justify-content: center; margin-bottom: 6px; background: #1a2740; padding: 6px; }
.cov-dots-svg  { display: block; }
.cov-name {
  font-family: var(--prof-mono);
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--p-text-2);
  margin-bottom: 5px;
}
.cov-ypt {
  font-family: var(--prof-mono);
  font-size: 1.5rem; font-weight: 700;
  line-height: 1; margin-bottom: 3px;
}
.cov-ypt-hi   { color: var(--p-green); }
.cov-ypt-mid  { color: var(--p-gold); }
.cov-ypt-lo   { color: var(--p-red); }
.cov-ypt-null { color: var(--p-text-3); }
.cov-stats {
  display: flex; justify-content: center; gap: 6px;
  font-family: var(--prof-mono); font-size: .78rem;
  color: var(--p-text-3);
}
.cov-tgts { color: var(--p-text-3); }
.cov-badge {
  font-family: var(--prof-mono);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 0;
  margin-top: 4px; display: inline-block;
}
.cov-best-badge  { background: var(--p-green-d); color: var(--p-green); border: 1px solid rgba(34,197,94,.4); }
.cov-worst-badge { background: var(--p-red-d);   color: var(--p-red);   border: 1px solid rgba(239,68,68,.4); }

/* Coverage legend — lives inside the dark blue section header */
.cov-legend {
  display: flex; gap: 14px; justify-content: flex-start;
  font-family: var(--prof-mono);
  font-size: .74rem; padding: 0 16px 0;
  color: rgba(255,255,255,.45);
}
.cov-leg-s  { color: rgba(255,255,255,.7); }
.cov-leg-c  { color: #fbbf24; }
.cov-leg-l  { color: #60a5fa; }
.cov-leg-r  { color: #f59e0b; }

/* ── Separation Profile ──────────────────────────────── */
.sep-wrap { padding: 10px 16px 6px; }
.sep-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px auto;
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--p-border-2);
}
.sep-row:last-child { border-bottom: none; }
.sep-label {
  font-size: .92rem; font-weight: 600;
  color: var(--p-text);
}
.sep-bar-wrap {
  height: 24px; background: var(--p-border-2);
  border-radius: 0; overflow: hidden;
  position: relative; display: flex; align-items: center;
}
.sep-bar-fill {
  height: 100%; border-radius: 0;
  display: flex; align-items: center;
  padding-left: 8px;
  min-width: 2px;
  transition: width .5s ease;
}
.sep-bar-green { background: rgba(34,197,94,.7); }
.sep-bar-gold  { background: rgba(255,193,7,.7); }
.sep-bar-blue  { background: rgba(59,130,246,.7); }
.sep-bar-pct {
  font-family: var(--prof-mono); font-size: .84rem;
  font-weight: 700; color: #fff; white-space: nowrap;
}
.sep-bar-empty {
  font-family: var(--prof-mono); font-size: .84rem;
  color: var(--p-text-3); padding-left: 8px;
}
.sep-ypt {
  font-family: var(--prof-mono); font-size: 1.04rem;
  font-weight: 700; text-align: right;
}
.sep-null { color: var(--p-text-3); }
.sep-badge {
  font-family: var(--prof-mono);
  font-size: .66rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 0;
  white-space: nowrap;
  background: var(--p-purple-d); color: var(--p-purple);
  border: 1px solid rgba(167,139,250,.35);
}

/* ── Game Log ────────────────────────────────────────── */
.prof-gamelog-wrap { padding: 14px 16px; }
.prof-chart { margin-bottom: 16px; }
.prof-chart-title {
  font-family: var(--prof-mono);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--p-text-2);
  margin-bottom: 10px;
}
.prof-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.prof-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.prof-bar {
  width: 100%; border-radius: 0;
  background: rgba(0,150,185,.35);
  border: 1px solid rgba(0,150,185,.8);
  transition: height .4s ease;
  min-height: 2px; cursor: pointer;
}
.prof-bar:hover { background: rgba(0,150,185,.65); }
.prof-bar.has-td { background: rgba(34,197,94,.35); border-color: rgba(34,197,94,.9); }
.prof-bar.has-td:hover { background: rgba(34,197,94,.65); }
.prof-bar-wk { font-family: var(--prof-mono); font-size: .68rem; color: var(--p-text-3); }

.prof-log-table { width: 100%; border-collapse: collapse; }
.prof-log-table th {
  font-family: var(--prof-mono);
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--p-text-2);
  padding: 0 8px 10px; text-align: right; white-space: nowrap;
  border-bottom: 2px solid var(--p-border);
}
.prof-log-table th:first-child,
.prof-log-table th:nth-child(2) { text-align: left; }
.prof-log-table td {
  padding: 9px 8px; border-bottom: 1px solid var(--p-border-2);
  font-family: var(--prof-mono); font-size: .98rem;
  text-align: right; color: var(--p-text-2);
}
.prof-log-table td:first-child,
.prof-log-table td:nth-child(2) { text-align: left; }
.prof-log-table tr:hover td { background: rgba(255,255,255,.03); }
.prof-log-table tfoot td { border-top: 2px solid var(--p-border); border-bottom: none; }
.log-wk   { font-weight: 700; color: var(--p-text); width: 30px; }
.log-opp  { font-weight: 700; color: var(--p-text); }
.log-home { color: var(--p-text-3); }
.log-score { font-size: .88rem; }
.log-w    { color: var(--p-green); font-weight: 700; }
.log-l    { color: var(--p-red); }
.log-hi   { color: var(--p-text); font-weight: 700; }
.log-td   { color: var(--p-green); font-weight: 700; }
.log-dk-hi { color: var(--p-gold); font-weight: 700; }
.log-zero { color: var(--p-text-3); }

/* ── History Panel ───────────────────────────────────── */
.prof-history-wrap { padding: 14px 16px; }
.prof-history-table { width: 100%; border-collapse: collapse; }
.prof-history-table th {
  font-family: var(--prof-mono);
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--p-text-2);
  padding: 0 10px 10px; text-align: right;
  border-bottom: 2px solid var(--p-border);
}
.prof-history-table th:first-child { text-align: left; }
.prof-history-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--p-border-2);
  font-family: var(--prof-mono); font-size: 1rem;
  text-align: right; color: var(--p-text-2);
}
.prof-history-table td:first-child { text-align: left; color: var(--p-text); font-weight: 700; }
.prof-history-table tr.cur-season td { color: var(--p-text); background: rgba(0,200,240,.06); }

/* ── News ────────────────────────────────────────────── */
.prof-news-wrap { padding: 14px 16px; }
.prof-news-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--p-border-2);
  font-size: .98rem;
}
.prof-news-item:last-child { border-bottom: none; }
.prof-news-cat {
  font-family: var(--prof-mono);
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 4px;
}
.cat-injury   { color: var(--p-red); }
.cat-news     { color: var(--p-cyan); }
.cat-breaking { color: var(--p-gold); }
.prof-news-hl { color: var(--p-text); font-weight: 500; line-height: 1.45; }
.prof-news-date { font-family: var(--prof-mono); font-size: .8rem; color: var(--p-text-3); margin-top: 3px; }

/* ── Skeleton Loading ────────────────────────────────── */
.prof-skeleton {
  background: var(--p-card);
  border: 2px solid var(--p-border);
  border-radius: 0;
  padding: 24px;
  animation: pulse .8s ease-in-out infinite alternate;
}
@keyframes pulse { from{opacity:1} to{opacity:.5} }
.sk { background: var(--p-head); border-radius: 0; }
.sk-h1 { height: 80px; margin-bottom: 12px; }
.sk-h2 { height: 22px; margin-bottom: 8px; }
.sk-h3 { height: 14px; width: 60%; margin-bottom: 16px; }

/* ── Error ───────────────────────────────────────────── */
.prof-error {
  background: var(--p-card);
  border: 2px solid var(--p-border);
  border-radius: 0;
  padding: 40px; text-align: center;
  color: var(--p-text-2); font-size: 1.03rem;
}

/* ── Legacy banner classes (kept for QB/RB non-WR paths) */
.prof-banner {
  position: relative; border-radius: 0; overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--border-card); border-bottom: none;
}
.prof-banner-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc1) 30%, transparent), color-mix(in srgb, var(--tc2) 15%, transparent));
  pointer-events: none;
}
.prof-banner-inner {
  position: relative;
  display: flex; align-items: flex-start; gap: 20px;
  padding: 24px 28px 20px; flex-wrap: wrap;
}
.prof-photo { width: 110px; height: 110px; border-radius: 0; object-fit: cover; border: 2px solid color-mix(in srgb, var(--tc1) 60%, transparent); }
.prof-name { font-size: 2.6rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #fff; margin-bottom: 8px; }
.prof-key-stats { display: flex; flex-wrap: wrap; gap: 2px; align-self: center; }
.prof-kstat { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 0; padding: 10px 14px; text-align: center; min-width: 58px; }
.prof-kstat-val { font-family: var(--prof-mono); font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 3px; }
.prof-kstat-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.prof-adot-row { position: relative; display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,.06); padding: 10px 28px; background: rgba(0,0,0,.2); }
.prof-adot-item { display: flex; align-items: center; gap: 8px; margin-right: 24px; font-family: var(--prof-mono); }
.prof-adot-lbl { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--p-text-3); }
.prof-adot-val { font-size: .98rem; font-weight: 700; color: var(--p-text); }
.prof-ident { flex: 1; min-width: 200px; padding-top: 4px; }
.prof-team-pos { display: flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.prof-team-pos .prof-pos { padding: 2px 8px; border-radius: 0; font-size: .76rem; }
.prof-inj { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 0; background: var(--p-red-d); color: var(--p-red); border: 1px solid rgba(239,68,68,.35); }
.prof-archetype { font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--tc1) 80%, #fff); margin-bottom: 10px; }
.prof-meta-row { display: flex; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--text-2); }
.prof-meta-row span::after { content: '·'; margin-left: 10px; color: var(--text-3); }
.prof-meta-row span:last-child::after { content: ''; }

/* ── Route Tree SVG (shared between old + new) ───────── */
.prof-route-wrap { display: flex; gap: 0; padding: 18px 20px; }
.prof-route-svg { flex-shrink: 0; }
.prof-route-svg svg { display: block; }
.prof-route-table { flex: 1; margin-left: 20px; }
.prof-route-table table { width: 100%; border-collapse: collapse; font-family: var(--prof-mono); font-size: .94rem; }
.prof-route-table th { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--p-text-2); padding: 0 8px 10px; text-align: right; }
.prof-route-table th:first-child { text-align: left; }
.prof-route-table td { padding: 8px; border-top: 1px solid var(--p-border-2); text-align: right; color: var(--p-text-2); }
.prof-route-table td:first-child { text-align: left; color: var(--p-text); }
.prof-route-table tr:hover td { background: rgba(255,255,255,.03); }
.prof-route-name { font-weight: 600; }
.prof-route-badge { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 2px 5px; border-radius: 0; margin-left: 5px; vertical-align: middle; }
.rb-elite { background: var(--p-purple-d); color: var(--p-purple); border: 1px solid rgba(167,139,250,.35); }
.rb-sig   { background: var(--p-blue-d);   color: #60a5fa;          border: 1px solid rgba(59,130,246,.35); }
.rb-weak  { background: var(--p-red-d);    color: var(--p-red);     border: 1px solid rgba(239,68,68,.35); }
.prof-cr-bar-wrap { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.prof-cr-bar { width: 80px; height: 8px; background: var(--p-border-2); border-radius: 0; overflow: hidden; }
.prof-cr-fill { height: 100%; border-radius: 0; }
.cr-hi { background: var(--p-green); }
.cr-md { background: var(--p-gold); }
.cr-lo { background: var(--p-red); }
.prof-ypt-val { color: var(--p-gold); font-weight: 700; }
.prof-enhanced-note { text-align: center; padding: 24px 16px; font-size: .92rem; color: var(--p-text-3); border-top: 1px solid var(--p-border-2); }
.prof-enhanced-note strong { color: var(--p-gold); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 960px) {
  .prof-left { width: 200px; }
}

@media (max-width: 700px) {
  .prof-layout { flex-direction: column; gap: 10px; }
  .prof-left { width: 100%; position: static; max-height: none; overflow: visible; }
  .featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .wr-banner-body { flex-direction: column; gap: 10px; }
  .wr-player-photo { width: 72px; height: 72px; align-self: auto; }
  .wr-lastname { font-size: 2.2rem; }
  .wr-kstats { grid-template-columns: repeat(3,1fr); width: 100%; }
  .rt-wrap { flex-direction: column; }
  .rt-svg-wrap { border-right: none; border-bottom: 2px solid var(--p-border-2); padding-right: 0; padding-bottom: 10px; }
  .rt-svg-wrap svg { margin: 0 auto; }
  .rt-name { width: 90px; }
  .cov-grid { grid-template-columns: repeat(2,1fr); }
  .qp-grid { grid-template-columns: repeat(2,1fr); }
  .sep-row { grid-template-columns: 82px 1fr 42px; }
  .sep-badge { display: none; }
  .prof-banner-inner { flex-direction: column; }
  .prof-key-stats { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .prof-page { padding: 8px 8px 28px; }
  .wr-lastname { font-size: 1.8rem; }
  .wr-kstats { grid-template-columns: repeat(3,1fr); }
  .featured-grid { grid-template-columns: 1fr; }
  .rt-row { gap: 5px; }
  .rt-name { width: 78px; font-size: .86rem; }
  .prof-tab { padding: 10px 12px; font-size: .78rem; }
}

/* ── Advanced Metrics (Savant-style percentile sliders) ─ */
.adv-wrap {
  background: var(--p-card);
}
.adv-group {
  border-bottom: 1px solid var(--p-border-2);
}
.adv-group:last-child { border-bottom: none; }
.adv-group-hd {
  font-family: var(--prof-sans);
  font-size: .9rem; font-weight: 700;
  letter-spacing: .02em;
  color: var(--p-text);
  padding: 11px 18px 9px;
  background: linear-gradient(to right, color-mix(in srgb, var(--p-head) 6%, transparent), transparent);
  border-bottom: 1px solid var(--p-border-2);
}
/* Grid of slider cells — 3 cols desktop, 2 tablet, 1 mobile */
.adv-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  background: var(--p-border-2);
}

.adv-row {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 11px 14px 12px;
  border-right: 1px solid var(--p-border-2);
  border-bottom: 1px solid var(--p-border-2);
  background: var(--p-card);
  transition: background .15s;
}
.adv-row:hover { background: color-mix(in srgb, var(--p-cyan) 4%, var(--p-card)); }
.adv-row.adv-empty { opacity: .5; }

.adv-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-height: 18px;
}

.adv-row-label {
  font-family: var(--prof-sans);
  font-size: .88rem; font-weight: 600;
  letter-spacing: 0;
  color: var(--p-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adv-row-val {
  display: flex; align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}
.adv-row-num {
  font-family: var(--prof-mono);
  font-size: 1.08rem; font-weight: 700;
  color: var(--p-text);
  line-height: 1;
}
.adv-row-sub {
  font-family: var(--prof-mono);
  font-size: .66rem; font-weight: 600;
  color: var(--p-text-3);
  white-space: nowrap;
}

.adv-row-slider {
  position: relative;
  height: 26px;
  display: flex; align-items: center;
}
.adv-row-track {
  flex: 1;
  height: 6px;
  /* Savant divergent palette: blue (low) → gray (avg) → red (elite) */
  background: linear-gradient(to right,
      #2563eb 0%,
      #93c5fd 25%,
      #e5e7eb 50%,
      #fca5a5 75%,
      #dc2626 100%);
  position: relative;
}
.adv-row-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--p-card);
  border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--prof-mono);
  font-size: .74rem; font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
/* tier colors mirror the gradient — solid borders, matching text */
.adv-marker-elite { border-color: #dc2626; color: #dc2626; }
.adv-marker-great { border-color: #f97316; color: #b94c08; }
.adv-marker-good  { border-color: #fbbf24; color: #92580a; }
.adv-marker-mid   { border-color: #93c5fd; color: #2563eb; }
.adv-marker-low   { border-color: #2563eb; color: #2563eb; }

.adv-row-norank {
  font-family: var(--prof-mono);
  font-size: .78rem;
  color: var(--p-text-3);
  margin-left: 8px;
}

@media (max-width: 720px) {
  .adv-rows { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .adv-row  { padding: 10px 12px; }
  .adv-row-num { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Draft War Room accent — the Profiler's palette was, from the start,
   deliberately fixed (cream/navy "broadcast terminal" look, independent
   of the site's light/dim/dark toggle) — the same kind of intentional
   fixed identity the Optimizer uses for its always-dark "solver surface".
   That's restored here (an earlier pass in this session had mistakenly
   forced the whole page dark, which read as broken when the main site
   was in light mode). Only the highlight accent shifts to violet for
   brand consistency with the rest of /nfl/. See /nfl/theme.css.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --p-cyan:       #8b5cf6;
  --p-purple:     #7c3aed;
  --p-purple-d:   rgba(124,58,237,.15);
  --prof-elite:   #7c3aed;
  --prof-elite-d: rgba(124,58,237,.15);
}