/* INJSUR · NFL — single stylesheet. Self-contained: no dependency on
   the construction app's styles.css. Organised top-down: design tokens,
   reset, layout shell, primitives (card / button / badge / kpi),
   home dashboard sections, teams + roster, player report. */

/* ---- Design tokens ----------------------------------------- */
/* Dark navy theme — palette matches NFL/index.html so the app
   and the landing page share a single visual language. Three layered
   surfaces (page → surface → muted) keep cards, inputs, and hover
   states visually distinct on a dark background. */
:root {
  --bg:          #060c1d;
  --bg-page:     #060c1d;
  --bg-surface:  #0c1428;
  --bg-muted:    #111e38;
  --fg:          #f1f5f9;
  --fg-primary:   #f1f5f9;
  --fg-secondary: #cbd5e1;
  --fg-muted:     #a0aec0;
  --border:      rgba(255, 255, 255, 0.08);
  --accent:      #3b82f6;
  --accent-hover:#60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.14);
  --success:     #60a5fa;
  --success-soft:rgba(59, 130, 246, 0.14);
  --warning:     #f59e0b;
  --warning-soft:rgba(245, 158, 11, 0.14);
  --danger:      #ef4444;
  --danger-soft: rgba(220, 38, 38, 0.14);
  /* ---- Nine-band risk palette — elite → green → lime → yellow → orange → red → deep red → maroon --------- */
  --band-elite:        #10b981;
  --band-elite-soft:   rgba(16, 185, 129, 0.14);
  --band-trusted:      #22c55e;
  --band-trusted-soft: rgba(34, 197, 94, 0.14);
  --band-stable:       #84cc16;
  --band-stable-soft:  rgba(132, 204, 22, 0.12);
  --band-watch:        #eab308;
  --band-watch-soft:   rgba(234, 179, 8, 0.12);
  --band-caution:      #f97316;
  --band-caution-soft: rgba(249, 115, 22, 0.14);
  --band-elevated:     #ef4444;
  --band-elevated-soft:rgba(239, 68, 68, 0.14);
  --band-high:         #dc2626;
  --band-high-soft:    rgba(220, 38, 38, 0.16);
  --band-severe:       #f87171;
  --band-severe-soft:  rgba(185, 28, 28, 0.18);
  --band-critical:     #fca5a5;
  --band-critical-soft:rgba(153, 27, 27, 0.20);
  /* ---- Six-band risk palette — ironman → steel → oak → chipped → cracked → glass ----------------- */
  --band-ironman:      #10b981;
  --band-ironman-soft: rgba(16,185,129,.12);
  --band-steel:        #22c55e;
  --band-steel-soft:   rgba(34,197,94,.12);
  --band-oak:          #eab308;
  --band-oak-soft:     rgba(234,179,8,.12);
  --band-chipped:      #f97316;
  --band-chipped-soft: rgba(249,115,22,.12);
  --band-cracked:      #dc2626;
  --band-cracked-soft: rgba(220,38,38,.14);
  --band-glass:        #fca5a5;
  --band-glass-soft:   rgba(153,27,27,.18);
  --radius:      10px;
  --radius-md:   10px;
  --radius-sm:   6px;
  --bg-hover:    rgba(255, 255, 255, 0.04);
  --primary:     var(--accent);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:   0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ---- Reset / base ------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Reserve space for the sticky topbar whenever the browser scrolls
   anything into view, so card headers / report titles never tuck
   underneath it. */
html { scroll-padding-top: 120px; text-rendering: optimizeLegibility; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  color: var(--fg-secondary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  /* Safety net: prevent any single overflowing element from forcing the
     whole document to scroll horizontally on mobile. */
  overflow-x: hidden;
}

/* Long content (player names, team names, copy) wraps cleanly on mobile
   instead of forcing horizontal scroll. */
.card-title, .card-sub, .home-title, .home-lead,
.assessment-report, .assessment-report p,
.employee-data-block, .employee-data-block li,
.description, .description p, .description h4,
.faq-q, .faq-a, .threshold-info,
.kpi-trend, .stat-desc, .breakthrough-lead,
.breakthrough-tile p, .breakthrough-howto li,
.r25-impact, .r25-meta, .r25-team-meta,
.pi-impact, .prev-injury-clean, .fb-copy,
.fr-slot-pos, .fr-card-text, .gs-step-desc, .gs-tip-body,
.secret-item, .roster-howto, .teamscores-explainer,
.matchup-rec, .profile-bio-value {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

button { font-family: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ---- App shell --------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: clip;
  overflow-y: visible;
}

.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Close button inside the mobile nav drawer — hidden on desktop,
   revealed inside the 920px media query below. */
.sidebar-close { display: none; }

/* Sidebar logo — matches the landing-page navbar logo (red IS mark,
   white "INJSUR" with accent-blue "· NFL" span) and links home. */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  min-width: 0;
}
.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
}
.nav-logo-mark {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #dc2626;
  border: 1px solid rgba(252,165,165,.5);
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 13.5px;
  color: #fff;
  letter-spacing: .03em;
  box-shadow:
    0 0 14px rgba(220,38,38,.6),
    0 0 28px rgba(220,38,38,.25),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.nav-logo-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f1f5f9;
}
.nav-logo-text span { color: #60a5fa; }
.nav-logo:hover .nav-logo-text { color: #ffffff; }
.nav-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.nav-section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 8px 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-secondary);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.nav-link:hover { background: var(--bg-muted); color: var(--fg-primary); }
.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav-link[disabled] {
  cursor: wait;
  opacity: 0.55;
  pointer-events: none;
}
.nav-icon { font-size: 16px; line-height: 1; width: 18px; text-align: center; }

.nav-loader {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  margin: 2px 0 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-secondary);
  line-height: 1.3;
}
.sidebar.is-loading .nav-loader { display: inline-flex; }
.nav-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: nav-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes nav-spin { to { transform: rotate(360deg); } }

.sidebar-footer {
  margin-top: auto;
  font-size: 14px;
  color: var(--fg-muted);
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}

/* ---- Main column ------------------------------------------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.page-title { font-size: 16px; font-weight: 600; color: var(--fg-primary); }
.page-meta  { font-size: 13.5px; color: var(--fg-muted); margin-top: 2px; }

/* Hamburger toggle for the mobile nav drawer — hidden on desktop
   where the sidebar is always visible. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg-secondary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Dimmed backdrop behind the open mobile nav drawer. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(2, 6, 23, 0.6);
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--fg-secondary);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-muted); }
.status-pill.is-loading .dot { background: var(--warning); animation: pulse 1.4s ease-in-out infinite; }
.status-pill.is-ready   .dot { background: var(--success); }
.status-pill.is-error   .dot { background: var(--danger); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.page { padding: 24px 28px 40px; overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.page-content { display: none; overflow-x: hidden; }
.page-content.active { display: block; }

/* ---- Primitives -------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.card-header { margin-bottom: 14px; }
.card-title  { font-size: 16px; font-weight: 700; color: var(--fg-primary); }
.card-sub    { font-size: 15px; line-height: 1.55; color: var(--fg-muted); margin-top: 4px; }
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
/* Direct children of `.flex-between` need `min-width: 0` so flex shrink
   can clip long titles instead of forcing the row wider than the card. */
.flex-between > * { min-width: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 600;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary {
  background: var(--bg-muted);
  color: var(--fg-secondary);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.40);
  color: var(--fg-primary);
}
.btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Risk labels — compact colored text, no pill/badge styling */
.badge {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge-elite   { color: var(--band-elite);   }
.badge-trusted { color: var(--band-trusted); }
.badge-stable  { color: var(--band-stable);  }
.badge-watch   { color: var(--band-watch); }
.badge-caution { color: var(--band-caution); }
.badge-elevated{ color: var(--band-elevated);}
.badge-high    { color: var(--band-high);    }
.badge-severe  { color: var(--band-severe);  }
.badge-critical{ color: var(--band-critical);}
.badge-ironman { background: rgba(16,185,129,.12); color: var(--band-ironman); }
.badge-steel   { background: rgba(34,197,94,.12);  color: var(--band-steel);   }
.badge-oak     { background: rgba(234,179,8,.12);  color: var(--band-oak);     }
.badge-chipped { background: rgba(249,115,22,.12); color: var(--band-chipped); }
.badge-cracked { background: rgba(220,38,38,.14);  color: var(--band-cracked); }
.badge-glass   { background: rgba(153,27,27,.18);  color: var(--band-glass);   }

.placeholder {
  padding: 24px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 15px;
}

.spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--bg-muted);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 12px;
  color: var(--fg-muted);
  font-size: 15px;
}

/* ---- KPI strip --------------------------------------------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1080px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}
.kpi-label {
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  font-weight: 600;
}
.kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-primary);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-trend { font-size: 14.5px; color: var(--fg-muted); margin-top: 4px; word-wrap: break-word; overflow-wrap: break-word; min-width: 0; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---- Home hero --------------------------------------------- */
.home-hero {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-surface) 100%);
  padding: 28px 28px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.home-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 12px;
}
.home-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0;
  max-width: 780px;
}

/* ---- Breakthrough / fantasy & betting explainer ------------ */
.breakthrough-card em { font-style: italic; color: var(--fg-primary); }
.breakthrough-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0 0 18px;
  max-width: 880px;
}
.breakthrough-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .breakthrough-grid { grid-template-columns: 1fr; } }
.breakthrough-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
.breakthrough-tag {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.breakthrough-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 6px;
}
.breakthrough-tile p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0;
}
.breakthrough-howto {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.breakthrough-howto-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 10px;
}
.breakthrough-howto ul {
  margin: 0 0 10px;
  padding-left: 18px;
}
.breakthrough-howto li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin-bottom: 6px;
}
.breakthrough-disclaimer {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 8px 0 0;
  font-style: italic;
}

/* ---- Patent / explainer info grid -------------------------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) { .info-grid { grid-template-columns: 1fr; } }
.info-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.info-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 8px;
}
.info-block p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0;
}

/* ---- Backtest results · stat grid -------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1080px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stat-grid { grid-template-columns: 1fr; } }
.stat-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.stat-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.stat-val {
  font-size: 30px;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 4px 0 0;
}
.stat-footnotes {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.stat-footnotes li { margin-bottom: 4px; }
.stat-footnotes li:last-child { margin-bottom: 0; }

/* ---- Full-page player report header ------------------------ */
.player-full-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.player-full-header-text { flex: 1 1 200px; min-width: 0; }
.player-full-header-text .card-title {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ---- FAQ list ---------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item[open] { border-color: rgba(59, 130, 246, 0.3); }
.faq-q {
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-size: 18px;
  font-weight: 300;
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a {
  padding: 0 18px 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-secondary);
}

/* ---- Search controls (used by team grid + global search) --- */
.team-filters,
.search-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.team-filters input,
.team-filters select,
.search-controls input,
.search-controls select {
  padding: 8px 12px;
  font-size: 14.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--fg-primary);
  font-family: inherit;
}
.team-filters input::placeholder,
.search-controls input::placeholder { color: var(--fg-muted); }
.team-filters select option,
.search-controls select option { background: var(--bg-surface); color: var(--fg-primary); }
.team-filters input,
.search-controls input { width: 220px; }
.team-filters input:focus,
.team-filters select:focus,
.search-controls input:focus,
.search-controls select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ---- Fantasy/betting global-search results ----------------- */
.results-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-top: 14px;
  max-width: 100%;
  box-sizing: border-box;
}
.rt-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) 60px 64px 80px 80px 80px minmax(180px, 1.7fr) 80px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.1s ease;
  min-width: 0;
  overflow: hidden;
}
.rt-row > * { min-width: 0; }
.rt-row:last-child { border-bottom: 0; }
.rt-row:hover { background: var(--bg-muted); }
.rt-head {
  background: var(--bg-muted);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: default;
}
.rt-head:hover { background: var(--bg-muted); }

/* Sortable column headers */
.rt-hdr-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.rt-hdr-sort:hover { color: var(--fg-primary); }
.rt-hdr-sort.sort-active { color: var(--accent, #2563eb); }
.rt-name {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--fg-primary); min-width: 0;
}
.rt-name .rt-name-text {
  white-space: normal; word-break: break-word;
}
.rt-name .rt-sub { color: var(--fg-muted); font-weight: 400; flex-shrink: 0; }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rt-pos  { font-weight: 600; }
.rt-team { color: var(--fg-muted); }
.rt-num  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rt-sal  { text-align: right; color: var(--fg-secondary); }
.rt-prop { color: var(--fg-secondary); text-align: center; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.rt-prop .rt-sub { color: var(--fg-muted); }
.rt-sub  { font-size: 14.5px; }
.rt-frailty.score-elite   { color: var(--band-elite);   }
.rt-frailty.score-trusted { color: var(--band-trusted); }
.rt-frailty.score-stable  { color: var(--band-stable);  }
.rt-frailty.score-watch   { color: var(--band-watch);   }
.rt-frailty.score-caution { color: var(--band-caution); }
.rt-frailty.score-elevated{ color: var(--band-elevated);}
.rt-frailty.score-high    { color: var(--band-high);    }
.rt-frailty.score-severe  { color: var(--band-severe);  }
.rt-frailty.score-critical{ color: var(--band-critical);}
.rt-frailty.score-ironman { color: var(--band-ironman); }
.rt-frailty.score-steel   { color: var(--band-steel);   }
.rt-frailty.score-oak     { color: var(--band-oak);     }
.rt-frailty.score-chipped { color: var(--band-chipped); }
.rt-frailty.score-cracked { color: var(--band-cracked); }
.rt-frailty.score-glass   { color: var(--band-glass);   }
.results-footnote {
  font-size: 14.5px;
  color: var(--fg-muted);
  margin-top: 8px;
  text-align: right;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- Dirty Little Secrets digest ---------------------------- */
.secrets-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.secret-item {
  padding: 14px 16px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-secondary);
}
.secret-item strong {
  display: block;
  color: var(--fg);
  margin-bottom: 4px;
}
.secret-item code {
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow-wrap: break-word;
  word-break: break-all;
}

/* ---- Wide results table (Value Picks / At Risk) ------------ */
/* Adds age, key prop, prior-injury count and the composite
   value/risk index alongside the standard columns. */
.results-table--wide .rt-row {
  grid-template-columns:
    minmax(200px, 1.8fr) 44px 52px 44px 60px
    minmax(120px, 1.2fr) 60px 70px 76px 64px;
}

/* Rank number + daily-movement chips (Value Picks / At Risk) */
.pick-rank {
  min-width: 22px;
  text-align: right;
  color: var(--fg-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pick-move {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick-move--up   { color: var(--success); background: var(--success-soft); }
.pick-move--down { color: var(--danger);  background: var(--danger-soft);  }
.pick-move--new  { color: var(--accent);  background: var(--accent-soft);  }
.pick-move--flat { color: var(--fg-muted); background: var(--bg-muted);    }
.picks-note {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 10px;
}

@media (max-width: 1200px) {
  .results-table--wide .rt-extra { display: none; }
  .results-table--wide .rt-row {
    grid-template-columns: minmax(180px, 1.6fr) 44px 56px 70px 70px;
  }
}
.results-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1px;
  padding: 0 1px;
  max-width: 100%;
}
@media (max-width: 920px) {
  .results-table--wide .rt-row {
    grid-template-columns: minmax(0, 1fr) 50px 56px 72px;
    grid-template-areas:
      "name pos team frailty"
      "prop prop prop risk";
    row-gap: 6px;
  }
  .results-table--wide .rt-num:not(.rt-frailty) { display: none; }
}

/* ---- League leaders ---------------------------------------- */
.leaders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.leader-card {
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.leader-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.leader-list { display: flex; flex-direction: column; gap: 2px; }
.leader-row {
  display: grid;
  grid-template-columns: 22px 1fr 80px 60px;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  font-size: 14.5px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.1s ease;
  min-width: 0;
  overflow: hidden;
}
.leader-row:hover { background: var(--bg-surface); }
.leader-rank { font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.leader-name { font-weight: 600; color: var(--fg-primary); }
.leader-pts  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.leader-frailty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.leader-frailty.score-elite   { color: var(--band-elite);   }
.leader-frailty.score-trusted { color: var(--band-trusted); }
.leader-frailty.score-stable  { color: var(--band-stable);  }
.leader-frailty.score-watch   { color: var(--band-watch);   }
.leader-frailty.score-caution { color: var(--band-caution); }
.leader-frailty.score-elevated{ color: var(--band-elevated);}
.leader-frailty.score-high    { color: var(--band-high);    }
.leader-frailty.score-severe  { color: var(--band-severe);  }
.leader-frailty.score-critical{ color: var(--band-critical);}
.leader-frailty.score-ironman { color: var(--band-ironman); }
.leader-frailty.score-steel   { color: var(--band-steel);   }
.leader-frailty.score-oak     { color: var(--band-oak);     }
.leader-frailty.score-chipped { color: var(--band-chipped); }
.leader-frailty.score-cracked { color: var(--band-cracked); }
.leader-frailty.score-glass   { color: var(--band-glass);   }

/* ---- Risers & Fallers -------------------------------------- */
.risers-fallers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rf-column {
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
.rf-column-title {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rf-column--risers .rf-column-title { color: var(--success); }
.rf-column--fallers .rf-column-title { color: var(--danger); }
.rf-list { display: flex; flex-direction: column; gap: 6px; }
.rf-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-surface);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 0;
  overflow: hidden;
}
.rf-row:hover { background: var(--bg-hover); }
.rf-rank {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-muted);
  text-align: center;
}
.rf-info { min-width: 0; }
.rf-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-meta { font-size: 14px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-frailty {
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rf-change {
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 4px;
  text-align: right;
  min-width: 54px;
}
.rf-change--up {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}
.rf-change--down {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}
.rf-tag {
  font-size: 13.5px;
  letter-spacing: .04em;
  text-align: center;
  padding: 2px 6px;
}
.rf-tag .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12.5px;
}
@media (max-width: 768px) {
  .risers-fallers-grid { grid-template-columns: 1fr; }
  .rf-row {
    grid-template-columns: 22px 1fr auto;
    gap: 6px;
  }
  .rf-frailty { font-size: 13.5px; }
  .rf-tag { display: none; }
  .rf-change {
    font-size: 12.5px;
    padding: 2px 6px;
    min-width: 44px;
  }
  .results-table--wide .rt-row {
    grid-template-columns: 1fr 44px 72px;
    grid-template-areas:
      "name  name  name"
      "pos   frailty risk"
      "prop  prop  prop";
    gap: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
  }
  .results-table--wide .rt-team { display: none; }
}

/* ---- Live ESPN odds card ----------------------------------- */
.odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}
/* The "Compare › Full breakdown" detail panel is rendered inside the
   same #oddsGrid container but is meant to span the full card width —
   otherwise it collapses into a single ~360px grid track and reads
   like a mobile layout on desktop. */
.odds-grid.odds-grid--detail {
  display: block;
}
.odds-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  box-sizing: border-box;
}

/* Card header row */
.odds-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.odds-card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.odds-card-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-primary);
}
.odds-card-status.is-live {
  color: var(--danger);
  animation: pulse-status 2s ease-in-out infinite;
}
@keyframes pulse-status {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}
.odds-card-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.odds-card-provider {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

/* Team matchup display */
.odds-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
}
.odds-matchup-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  transition: background .12s, box-shadow .12s;
  min-width: 0;
}
.odds-matchup-team:hover { background: var(--bg-muted); }
.odds-matchup-team.is-fav {
  box-shadow: 0 0 0 1px rgba(59,130,246,.3);
}
.odds-matchup-team.is-fav:hover {
  box-shadow: 0 0 0 1px rgba(59,130,246,.5);
}
/* Completed game winner / loser treatment */
.odds-matchup-team.is-winner {
  box-shadow: 0 0 0 1px rgba(34,197,94,.35);
  background: rgba(34,197,94,.04);
}
.odds-matchup-team.is-winner:hover {
  box-shadow: 0 0 0 1px rgba(34,197,94,.55);
  background: rgba(34,197,94,.08);
}
.odds-matchup-team.is-loser {
  opacity: .7;
}
.odds-matchup-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.odds-matchup-code {
  font-size: 17px;
  font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: .02em;
}
.odds-matchup-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Frailty score within game card team block */
.odds-matchup-frailty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
}
.omf-score {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.omf-tier {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1px 6px;
  border-radius: 5px;
}
.odds-matchup-score {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fg-primary);
  line-height: 1;
}
.odds-matchup-score--win {
  color: #16a34a;
}
.odds-matchup-score--loss {
  color: var(--fg-muted);
}
.odds-matchup-record {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-muted);
  margin-top: 1px;
}
.odds-matchup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
  justify-content: center;
}
.odds-matchup-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  letter-spacing: .04em;
}
.odds-matchup-tag--fav {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.odds-matchup-tag--winner {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.odds-matchup-tag--spread {
  color: var(--fg-secondary);
}

.odds-matchup-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 50px;
}
.odds-matchup-vs {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.odds-matchup-status-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--bg-muted);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

/* Model accuracy badge — shown on completed games with a durability edge */
.odds-model-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.odds-model-badge--correct {
  background: rgba(22,163,74,.12);
  color: #16a34a;
  border: 1px solid rgba(22,163,74,.3);
}
.odds-model-badge--wrong {
  background: rgba(239,68,68,.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.3);
}

/* Odds bar — 3-column grid */
.odds-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.odds-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px;
  border-right: 1px solid var(--border);
  text-align: center;
  min-width: 0;
}
.odds-line:last-child { border-right: none; }
.odds-line-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
}
.odds-line-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* Per-market "Bet" link */
.odds-line-val {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.odds-line-bet {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid rgba(59,130,246,.3);
  text-decoration: none;
  transition: all .12s;
}
.odds-line-bet:hover {
  background: var(--accent);
  color: #fff;
}

/* ---- Game meta footer -------------------------------------- */
.odds-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 20px;
  font-size: 12.5px;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
}
.odds-meta-item {
  display: inline-flex;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.odds-meta-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  opacity: .7;
  white-space: nowrap;
  flex: none;
}
.odds-meta-value {
  color: var(--fg-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Team frailty comparison block ------------------------- */
.odds-frailty-cmp {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.ofc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ofc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
}
.ofc-delta {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-primary);
}
.ofc-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
}
.ofc-team {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  min-width: 0;
}
.ofc-code {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ofc-score {
  font-weight: 800;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.ofc-team.has-edge .ofc-score {
  color: var(--band-ironman);
}
.ofc-edge-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--band-ironman-soft);
  color: var(--band-ironman);
  border: 1px solid rgba(16,185,129,.3);
}
.ofc-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  text-decoration: none;
  text-align: center;
  transition: color .12s;
}
.ofc-cta:hover { color: var(--accent-hover); }
.ofc-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 40px;
}
.ofc-bar-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-muted);
  position: relative;
}
.ofc-bar-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--band-ironman) 0%,
    var(--band-steel) 25%,
    var(--band-oak) 50%,
    var(--band-chipped) 75%,
    var(--band-cracked) 100%);
  opacity: .35;
}
.ofc-bar-marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ---- Durability edge callout ------------------------------- */
.odds-edge {
  margin: 14px 20px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odds-edge-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.odds-edge-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-hover);
}
.odds-edge-units {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
}
.odds-edge-units--3,
.odds-edge-units--4,
.odds-edge-units--5 {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.odds-edge-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.odds-edge-pick {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-primary);
  line-height: 1.4;
}
.odds-edge-sub {
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.45;
}

/* ---- DraftKings CTA ---------------------------------------- */
.odds-dk-cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  background: transparent;
  color: var(--fg-muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .12s;
}
.odds-dk-cta:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

/* Compare button — triggers the full frailty breakdown detail view */
.odds-compare-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 16px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-top: none;
  color: var(--fg-primary);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .15s;
  border-radius: 0 0 var(--radius) var(--radius);
}
.odds-compare-btn:hover {
  background: var(--accent-soft);
  border-color: rgba(59,130,246,.4);
  color: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  font-size: 14px;
}

/* Edge % text in detail view VS area */
.matchup-teams-edge {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--band-ironman);
  background: var(--band-ironman-soft);
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,.25);
  white-space: nowrap;
}

/* Model accuracy badge inside matchup detail VS area */
.matchup-teams-vs-wrap .odds-model-badge {
  margin: 0;
}
.hazard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.hazard-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  min-width: 0;
  gap: 8px;
}
.hazard-row span:last-child {
  font-weight: 700;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- Team grid --------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.team-card {
  --team-color: #2563eb;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow: hidden;
}
.team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--team-color);
}
.team-card-logo {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--bg-muted);
  border-radius: 10px;
  flex-shrink: 0;
}
.team-card-logo img { width: 44px; height: 44px; object-fit: contain; }
.team-card-logo--fallback {
  font-weight: 700;
  font-size: 14px;
  color: var(--team-color);
}
.team-card-body { min-width: 0; }
.team-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-card-meta { font-size: 14.5px; color: var(--fg-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Team detail header + roster --------------------------- */
.team-header-card {
  --team-color: #2563eb;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.team-header {
  display: flex;
  align-items: center;
  gap: 18px;
}
.team-header-logo { width: 72px; height: 72px; object-fit: contain; }
.team-header-text { min-width: 0; }
.team-header-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-primary);
}
.team-header-meta { font-size: 15px; color: var(--fg-muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.roster-section { margin-top: 18px; }
.roster-section:first-child { margin-top: 8px; }
.roster-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.position-chip {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.roster-section-title { font-weight: 600; color: var(--fg-primary); font-size: 14.5px; }
.roster-section-count { font-size: 14.5px; color: var(--fg-muted); margin-left: auto; }

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* ---- Player card ------------------------------------------- */
.player-card {
  --player-color: #64748b;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.player-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--player-color);
}
.player-card-body { flex: 1; min-width: 0; overflow: hidden; }
.player-card-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-card-meta {
  font-size: 14.5px;
  color: var(--fg-muted);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.player-card-pos { font-weight: 600; color: var(--player-color); }
.player-card-jersey,
.player-card-age { color: var(--fg-muted); }
.player-card-cta {
  color: var(--fg-muted);
  font-size: 18px;
  font-weight: 300;
  margin-left: 4px;
}

.player-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
  color: white;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
  overflow: hidden;
  position: relative;
}
.player-avatar span { line-height: 1; }
.player-headshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* ---- Player report — profile header & bio strip -------------- */
.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  max-width: 100%;
  overflow-x: hidden;
}
.profile-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1 1 auto;
}
.profile-header-info { min-width: 0; max-width: 100%; }
.profile-header-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.profile-header-meta {
  font-size: 15px;
  color: var(--fg-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.trench-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--band-oak);
}
.profile-risk-badge {
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.profile-bio-strip {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.profile-bio-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-bio-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.profile-bio-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

/* ---- Player report ----------------------------------------- */
.score-block { text-align: center; padding: 24px 0 14px; }
.score-value {
  font-size: 56px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.score-suffix { color: var(--fg-muted); font-size: 18px; margin-left: 4px; }
.score-elite   { color: var(--band-elite);   }
.score-trusted { color: var(--band-trusted); }
.score-stable  { color: var(--band-stable);  }
.score-watch   { color: var(--band-watch);   }
.score-caution { color: var(--band-caution); }
.score-elevated{ color: var(--band-elevated);}
.score-high    { color: var(--band-high);    }
.score-severe  { color: var(--band-severe);  }
.score-critical{ color: var(--band-critical);}
.score-ironman { color: var(--band-ironman); }
.score-steel   { color: var(--band-steel);   }
.score-oak     { color: var(--band-oak);     }
.score-chipped { color: var(--band-chipped); }
.score-cracked { color: var(--band-cracked); }
.score-glass   { color: var(--band-glass);   }

.progress {
  height: 8px;
  width: 280px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--bg-muted);
  border-radius: 999px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}
.progress-elite   > span { background: var(--band-elite);   }
.progress-trusted > span { background: var(--band-trusted); }
.progress-stable  > span { background: var(--band-stable);  }
.progress-watch   > span { background: var(--band-watch);   }
.progress-caution > span { background: var(--band-caution); }
.progress-elevated> span { background: var(--band-elevated);}
.progress-high    > span { background: var(--band-high);    }
.progress-severe  > span { background: var(--band-severe);  }
.progress-critical> span { background: var(--band-critical);}
.progress-ironman > span { background: var(--band-ironman); }
.progress-steel   > span { background: var(--band-steel);   }
.progress-oak     > span { background: var(--band-oak);     }
.progress-chipped > span { background: var(--band-chipped); }
.progress-cracked > span { background: var(--band-cracked); }
.progress-glass   > span { background: var(--band-glass);   }

.threshold-info {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  font-size: 15px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-top: 14px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.55;
}

.description {
  margin-top: 18px;
  font-size: 15px;
  color: var(--fg-secondary);
}
.description p { margin: 0 0 10px; }
.description h4 { color: var(--fg-primary); margin: 14px 0 8px; font-size: 15px; }

/* Position-specific assessment templates (rendered inside .description) */
.assessment-report { margin-top: 6px; }
.ar-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
}
.ar-elite   { color: var(--band-elite);   }
.ar-trusted { color: var(--band-trusted); }
.ar-stable  { color: var(--band-stable);  }
.ar-watch   { color: var(--band-watch); }
.ar-caution { color: var(--band-caution); }
.ar-elevated{ color: var(--band-elevated);}
.ar-high    { color: var(--band-high);    }
.ar-severe  { color: var(--band-severe);  }
.ar-critical{ color: var(--band-critical);}
.ar-ironman { color: var(--band-ironman); }
.ar-steel   { color: var(--band-steel);   }
.ar-oak     { color: var(--band-oak);     }
.ar-chipped { color: var(--band-chipped); }
.ar-cracked { color: var(--band-cracked); }
.ar-glass   { color: var(--band-glass);   }
.assessment-report p { margin: 0 0 8px; line-height: 1.55; }

/* Player-specific data-points block (rendered after the template) */
.employee-data-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.edb-title {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg-primary);
}
.employee-data-block ul {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
}
.employee-data-block li { margin-bottom: 4px; }
/* Data flags — compact text markers */
.data-flag {
  display: inline-block;
  margin-left: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--warning);
  letter-spacing: 0.02em;
}

/* ---- Player report — previous-injury history card ---------- */
.prev-injury-card {
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
}
.prev-injury-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.prev-injury-header h4 {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-primary);
  letter-spacing: 0.02em;
}
.prev-injury-meta {
  font-size: 14.5px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
/* Injury penalty text — no pill styling */
.prev-injury-penalty {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--band-caution);
  letter-spacing: 0.02em;
}
.prev-injury-penalty.pi-clean {
  color: var(--band-trusted);
}
.prev-injury-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.prev-injury-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
  overflow: hidden;
}
.pi-injury-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-primary);
}
/* Injury severity — compact text labels */
.pi-severity {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pi-sev-season  { color: var(--band-critical);   }
.pi-sev-major   { color: var(--band-caution); }
.pi-sev-mod     { color: var(--band-watch); }
.pi-sev-minor   { color: var(--band-stable);  }
.pi-meta {
  font-size: 14.5px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.pi-impact {
  font-size: 15px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.prev-injury-clean {
  font-size: 15px;
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ---- Career risk indicators for injury history -------------- */
.prev-injury-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Overall/career risk — text only */
.pi-overall-risk {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pi-injury-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pi-risk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  margin-top: 4px;
}
.pi-career-risk {
  font-size: 14.5px;
  font-weight: 600;
}
.pi-cat-flag {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--band-critical);
  letter-spacing: 0.02em;
}
/* Career risk severity — text only */
.pi-risk-critical { color: var(--band-critical); }
.pi-risk-high     { color: var(--band-caution); }
.pi-risk-moderate { color: var(--band-watch); }
.pi-risk-low      { color: var(--band-stable); }
/* Catastrophic injury highlight */
.prev-injury-card.pi-has-catastrophic {
  border-color: var(--band-critical);
}
/* Season group headers within multi-year injury history */
.pi-season-group { margin-top: 10px; }
.pi-season-group:first-child { margin-top: 0; }
.pi-season-label {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.pi-season-count {
  font-weight: 500;
  color: var(--fg-muted);
  margin-left: 8px;
  letter-spacing: normal;
  text-transform: none;
  font-size: 14px;
}

/* ---- Player report — section labels & layout ---------------- */
.report-section-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 20px 0 2px;
}
.report-section-label,.report-context,.report-assessment,.report-verdict {
  overflow-wrap: break-word;
  word-break: break-word;
}
.report-context {
  font-size: 15px;
  color: var(--fg-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  min-width: 0;
  overflow: hidden;
}
.report-context strong { color: var(--fg-primary); }

/* Frailty driver breakdown — horizontal bar chart rows */
.report-factors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.report-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  min-width: 0;
}
.report-row > * { min-width: 0; overflow: hidden; }
.report-row-lbl {
  color: var(--fg-muted);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.report-row-bar {
  height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
}
.report-row-bar-fill {
  height: 100%;
  background: var(--danger);
  border-radius: 3px;
}
.report-row-val {
  text-align: right;
  font-weight: 700;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}

/* Injury severity breakdown — simple horizontal bars with counts */
.sev-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px;
}
.sev-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 44px;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.sev-bar-label {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
}
.sev-bar-track {
  height: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}
.sev-bar-fill {
  height: 100%;
  border-radius: 8px;
  min-width: 3px;
  transition: width .3s ease;
}
.sev-bar-count {
  text-align: right;
  font-weight: 700;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
}

/* Live injury report — filter chips + team-grouped status list */
.ir-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ir-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-secondary);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ir-chip:hover { background: var(--bg-muted); color: var(--fg-primary); }
.ir-chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ir-chip-active:hover { background: var(--accent); color: #fff; }
.ir-chip-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.ir-report {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ir-team {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-muted);
}
.ir-team-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.ir-team-logo { width: 24px; height: 24px; object-fit: contain; }
.ir-team-name { font-weight: 700; color: var(--fg-primary); font-size: 15px; }
.ir-team-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.ir-list { display: flex; flex-direction: column; }
.ir-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.ir-row:last-child { border-bottom: none; }
.ir-row[data-pid]:hover { background: var(--bg-surface); }
.ir-status {
  justify-self: start;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ir-name { min-width: 0; }
.ir-name strong { display: block; font-size: 14.5px; color: var(--fg-primary); }
.ir-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ir-date { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-sub { display: block; font-size: 13px; color: var(--fg-muted); margin-top: 1px; }
.ir-comment {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Status badge colours */
.badge-ir           { background: rgba(153,27,27,.22);  color: #fca5a5; }
.badge-out          { background: rgba(220,38,38,.18);  color: #f87171; }
.badge-questionable { background: rgba(245,158,11,.18); color: #fbbf24; }
.badge-suspension   { background: rgba(139,92,246,.18); color: #c4b5fd; }
.badge-daytoday     { background: rgba(234,179,8,.18);  color: #facc15; }
.badge-active       { background: rgba(34,197,94,.14);  color: #4ade80; }

.home-meta { font-size: 13.5px; color: var(--fg-muted); margin-top: 6px; }

/* Current-status banner in the player report */
.current-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}
.current-status .badge {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.current-status-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-secondary);
}


/* Assessment block — tier-colored title bar */
.report-assessment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  margin-top: 6px;
}
.report-assessment .ar-title {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.report-assessment.tier-elite    .ar-title { background: rgba(16,185,129,.14); }
.report-assessment.tier-trusted  .ar-title { background: rgba(34,197,94,.14); }
.report-assessment.tier-stable   .ar-title { background: rgba(132,204,22,.12); }
.report-assessment.tier-watch    .ar-title { background: rgba(234,179,8,.12); }
.report-assessment.tier-caution  .ar-title { background: rgba(249,115,22,.14); }
.report-assessment.tier-elevated .ar-title { background: rgba(239,68,68,.14); }
.report-assessment.tier-high     .ar-title { background: rgba(220,38,38,.16); }
.report-assessment.tier-severe   .ar-title { background: rgba(185,28,28,.18); }
.report-assessment.tier-critical .ar-title { background: rgba(153,27,27,.20); }
.report-assessment.tier-ironman .ar-title { background: rgba(16,185,129,.12); }
.report-assessment.tier-steel   .ar-title { background: rgba(34,197,94,.12); }
.report-assessment.tier-oak     .ar-title { background: rgba(234,179,8,.12); }
.report-assessment.tier-chipped .ar-title { background: rgba(249,115,22,.12); }
.report-assessment.tier-cracked .ar-title { background: rgba(220,38,38,.14); }
.report-assessment.tier-glass   .ar-title { background: rgba(153,27,27,.18); }
.report-assessment p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-secondary);
}
.report-assessment p strong { color: var(--fg-primary); }
.report-assessment .employee-data-block {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.report-assessment .edb-title {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg-primary);
}
.report-assessment ul {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
}
.report-assessment li { margin-bottom: 4px; }

/* Verdict — closing safety-percentile summary */
.report-verdict {
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  margin-top: 18px;
}
.report-verdict strong { color: var(--fg-primary); }

/* Make employee-data-block inside assessment look clean */
.report-assessment .data-flag {
  display: inline-block;
  margin-left: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--warning);
  letter-spacing: 0.02em;
}

/* ---- Player report — fantasy & sports-betting block -------- */
.fb-card {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
}
.fb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.fb-header h4 { margin: 0; font-size: 14.5px; color: var(--fg-primary); }
/* Stance labels — compact text only */
.fb-stance {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.fb-trusted  { color: var(--band-trusted);  }
.fb-stable   { color: var(--band-stable);   }
.fb-watch    { color: var(--band-watch);    }
.fb-caution  { color: var(--band-caution);  }
.fb-elevated { color: var(--band-elevated); }
.fb-high     { color: var(--band-high);     }
.fb-severe   { color: var(--band-severe);   }
.fb-critical { color: var(--band-critical); }
.fb-ironman  { color: var(--band-ironman);  }
.fb-steel    { color: var(--band-steel);    }
.fb-oak      { color: var(--band-oak);      }
.fb-chipped  { color: var(--band-chipped);  }
.fb-cracked  { color: var(--band-cracked);  }
.fb-glass    { color: var(--band-glass);    }
.fb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  min-width: 0;
}
.fb-tile {
  background: var(--bg-surface);
  padding: 8px 10px;
  border-radius: 6px;
  min-width: 0;
  overflow: hidden;
}
.fb-tile-wide { grid-column: 1 / -1; }
.fb-label {
  font-size: 14px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  word-break: break-word;
  overflow-wrap: break-word;
}
.fb-sub  { font-size: 13.5px; color: var(--fg-secondary); margin-top: 2px; }
.fb-copy { margin: 10px 0 0; font-size: 15px; color: var(--fg-secondary); }

/* ---- Fantasy roster card ---------------------------------- */
.fantasy-roster-card { border-top: 3px solid var(--accent); }

.fr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 780px) { .fr-grid { grid-template-columns: 1fr; } }

.fr-slot {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: stretch;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  min-width: 0;
  overflow: hidden;
}
.fr-slot > * { min-width: 0; }

.fr-slot-pos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  color: white;
  background: #64748b;
}
.fr-slot-headshot {
  display: block;
  width: min(46px, 84%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.fr-slot-headshot[hidden] { display: none; }
.fr-slot-headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-slot-pos.pos-QB    { background: #2563eb; }
.fr-slot-pos.pos-RB    { background: #ef4444; }
.fr-slot-pos.pos-WR    { background: #f59e0b; }
.fr-slot-pos.pos-TE    { background: #a78bfa; }
.fr-slot-pos.pos-K     { background: #22c55e; }
.fr-slot-pos.pos-DL    { background: #dc2626; }
.fr-slot-pos.pos-LB    { background: #ec4899; }
.fr-slot-pos.pos-DB    { background: #38bdf8; }
.fr-slot-pos.pos-BENCH { background: #475569; }
.fr-slot-pos.pos-BONUS { background: #0ea5e9; }
.fr-slot-pos.pos-DEF   { background: #475569; }
.fr-slot-pos.pos-DST   { background: #475569; }

/* Lineup-format switcher (Season-Long / DraftKings / FanDuel) */
.fr-format-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 14px 0 4px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
  max-width: 100%;
}
.fr-format-btn {
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fr-format-btn:hover { color: var(--fg); }
.fr-format-btn.is-active {
  background: var(--accent);
  color: #fff;
}
.fr-cap-note {
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--fg-muted);
}

/* Locked (Pro — coming soon) lineup slots, e.g. DK DST / FD DEF */
.fr-slot-locked { opacity: 0.75; }
.fr-card-locked {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
}
.fr-locked-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.fr-slot-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; }

/* Search-and-pick button replaces the old native <select>. */
.fr-pick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.fr-pick-btn:hover { border-color: var(--accent); color: var(--fg-primary); }
.fr-pick-btn:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); }
.fr-pick-btn-icon { font-size: 14.5px; opacity: 0.7; }
.fr-pick-btn-text { flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .fr-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    min-width: 0;
    overflow: hidden;
  }
  .fr-card > * { min-width: 0; }

.fr-card-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

#fantasyPlayerReportView,
#fantasyPlayerReport {
  scroll-margin-top: 100px;
  max-width: 100%;
  overflow-x: hidden;
}
.fr-card-clickable:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.fr-card-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fr-card-empty {
  grid-template-columns: 1fr;
  font-size: 13.5px;
  color: var(--fg-muted);
  font-style: italic;
  cursor: default;
  border-left-color: var(--border);
  text-align: center;
  padding: 12px 10px;
}
.fr-card-empty:hover { box-shadow: none; transform: none; }

.fr-card-logo { width: 40px; height: 40px; object-fit: contain; }

.fr-card-text { min-width: 0; }
.fr-card-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-card-meta {
  font-size: 14.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fr-card-pos {
  font-weight: 700;
  color: var(--fg-secondary);
  letter-spacing: 0.03em;
}
.fr-card-salary {
  font-weight: 600;
  color: var(--primary);
}

.fr-card-score { text-align: right; min-width: 0; flex-shrink: 0; }
.fr-card-score-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fr-card-score-label {
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin: 2px 0 4px;
}

/* Safer-option recommendation shown when the picked player lands in
   the caution / high bands. Sits below the main card inside the slot. */
.fr-safe {
  border: 1px dashed var(--border);
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-width: 0;
  overflow: hidden;
}
.fr-safe-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--band-caution);
  margin-bottom: 6px;
  padding-right: 4px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.fr-safe-icon { font-size: 13.5px; line-height: 1; }
.fr-safe-use-btn {
  margin-left: auto;
  padding: 3px 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s;
}
.fr-safe-use-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.fr-safe-use-btn:active { opacity: 0.8; }
.fr-safe-body {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
}
.fr-safe-body > * { min-width: 0; }
.fr-safe-logo { width: 28px; height: 28px; object-fit: contain; }
.fr-safe-text { min-width: 0; }
.fr-safe-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-safe-meta {
  font-size: 14px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-safe-nums { display: flex; gap: 10px; }
.fr-safe-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.fr-safe-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.fr-safe-row + .fr-safe-row {
  border-top: 1px dashed var(--border);
}
.fr-safe-row .fr-safe-use-btn {
  margin-left: 0;
  padding: 3px 10px;
}
.fr-safe-row.fr-safe-row-hot {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin: 6px 0;
}
.fr-safe-row.fr-safe-row-hot + .fr-safe-row {
  border-top: 1px dashed var(--border);
}
.fr-safe-name-hot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fr-safe-name-hot .fr-safe-name-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-hot-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.4;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.35);
}
.fr-safe-ppr-up {
  color: var(--warning);
}
.fr-safe-empty .fr-safe-head { color: var(--fg-muted); }
.fr-safe-empty .fr-safe-body { display: block; }
.fr-safe-num-val { font-size: 14.5px; font-weight: 800; line-height: 1; }
.fr-safe-num-lbl {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Injury Roster Analysis — 6-line breakdown shown when roster is full */
.fr-analysis {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
  padding: 16px 20px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.fr-analysis-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 12px;
}
.fr-analysis-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fr-analysis-line {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-secondary);
  padding: 7px 10px;
  background: rgba(255,255,255,.025);
  border-radius: 6px;
  border-left: 3px solid var(--border);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.fr-analysis-line:nth-child(1) { border-left-color: var(--accent); }
.fr-analysis-line:nth-child(2) { border-left-color: var(--danger); }
.fr-analysis-line:nth-child(3) { border-left-color: #22c55e; }
.fr-analysis-line:nth-child(4) { border-left-color: var(--band-caution); }
.fr-analysis-line:nth-child(5) { border-left-color: var(--warning); }
.fr-analysis-line:nth-child(6) { border-left-color: #a78bfa; }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  /* The sidebar keeps its desktop layout but becomes a slide-in
     drawer, toggled by the topbar hamburger. Same nav, same order,
     same section labels — consistent across every screen size. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: 264px;
    max-width: 84vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 32px rgba(2, 6, 23, 0.55);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop.is-visible { display: block; }
  body.nav-drawer-open { overflow: hidden; }
  .nav-toggle { display: inline-flex; }

  /* Close button inside the mobile nav drawer — sits top-right
     so the user can dismiss the drawer without hunting for the
     hamburger in the topbar. */
  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--fg-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
  }
  .sidebar-close:hover { background: var(--bg-surface); color: var(--fg-primary); }
  .nav-logo { padding-right: 46px; }
  .topbar { justify-content: flex-start; gap: 12px; }
  .topbar-actions { margin-left: auto; }
  .topbar, .page { padding-left: 18px; padding-right: 18px; }

  /* Search/sort controls: stack vertically in the tablet range so
     the sort dropdown and position filter are fully visible after
     data populates. */
  .search-controls,
  .team-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }
  .team-filters input,
  .search-controls input,
  .team-filters select,
  .search-controls select { width: 100%; max-width: 100%; box-sizing: border-box; }

  /* Card-header: stack title above controls on tablets too, not
     just on phones — prevents sort/filter from being squeezed. */
  .flex-between {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .flex-between > * { min-width: 0; max-width: 100%; }

  .rt-row {
    grid-template-columns: minmax(0, 1fr) 50px 56px 72px;
    grid-template-areas:
      "name pos team frailty"
      "prop prop prop risk";
    row-gap: 6px;
  }
  .rt-row > * { min-width: 0; }
  .rt-head { display: none; }
  .rt-name    { grid-area: name; }
  .rt-pos     { grid-area: pos;  }
  .rt-team    { grid-area: team; }
  .rt-frailty { grid-area: frailty; }
  .rt-prop    { grid-area: prop; }
  .rt-risk    { grid-area: risk; text-align: right; }
  .rt-row .rt-name { display: block; text-align: center; }
  .rt-row .rt-dot { display: inline-block; vertical-align: middle; flex-shrink: unset; }
  .rt-row .rt-name .rt-sub { display: inline; flex-shrink: unset; }
  .rt-row > .rt-num:not(.rt-frailty),
  .rt-row > .rt-sal { display: none; }
}


/* ---- Fantasy roster: searchable player picker ----------------- */
.fr-picker {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-picker[hidden] { display: none; }
body.fr-picker-open { overflow: hidden; }

.fr-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.fr-picker-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  max-height: min(720px, 86vh);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.fr-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.fr-picker-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
}
.fr-picker-close {
  width: 32px; height: 32px;
  border: none; background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.fr-picker-close:hover { background: var(--bg-muted); color: var(--fg-primary); }

.fr-picker-search {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.fr-picker-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.6;
  pointer-events: none;
}
.fr-picker-input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--fg-primary);
  -webkit-appearance: none;
  appearance: none;
}
.fr-picker-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-surface);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.fr-picker-input::-webkit-search-cancel-button { cursor: pointer; }

.fr-picker-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px 8px;
}

.fr-pl-group { padding: 6px 0 4px; }
.fr-pl-group-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 4px 8px;
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 1;
}

.fr-pl-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  color: var(--fg-primary);
  cursor: pointer;
  font: inherit;
}
.fr-pl-row:hover,
.fr-pl-row.is-active { background: var(--bg-muted); border-color: var(--border); }
.fr-pl-row.is-selected { border-color: var(--accent); background: rgba(37, 99, 235, 0.08); }
.fr-pl-row.is-over-cap { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.fr-pl-overcap {
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fr-pl-logo { width: 32px; height: 32px; object-fit: contain; }
.fr-pl-text { min-width: 0; }
.fr-pl-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-pl-jersey { color: var(--fg-muted); font-weight: 600; margin-left: 2px; }
.fr-pl-meta {
  font-size: 13.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-pl-salary {
  font-weight: 600;
  color: var(--primary);
}
.fr-pl-num { text-align: right; min-width: 48px; }
.fr-pl-num-val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.fr-pl-num-lbl {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

.fr-pl-more {
  font-size: 14.5px;
  color: var(--fg-muted);
  font-style: italic;
  padding: 4px 10px 6px;
}
.fr-pl-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14.5px;
}

.fr-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
}
.fr-picker-count { font-size: 13.5px; color: var(--fg-muted); }

/* Search view wrapper */
.fr-picker-search-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fr-picker-search-view[hidden] { display: none; }

/* Player report preview view */
.fr-picker-report-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.fr-picker-report-view[hidden] { display: none; }

.fr-picker-report-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
  flex-shrink: 0;
}

.fr-picker-report-back {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--fg-primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fr-picker-report-back:hover {
  background: var(--bg-muted);
  border-color: var(--fg-muted);
}

.fr-picker-report-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-picker-report-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}

.fr-picker-report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  flex-shrink: 0;
}

.fr-picker-pass {
  font-size: 14.5px;
  padding: 8px 16px;
}

.fr-picker-pick {
  font-size: 14.5px;
  padding: 8px 20px;
  font-weight: 700;
}

/* Mobile: fill the screen so the keyboard + list stay usable. */
@media (max-width: 640px) {
  .fr-picker { align-items: stretch; justify-content: stretch; }
  .fr-picker-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .fr-picker-head { padding: 16px 18px; padding-top: max(16px, env(safe-area-inset-top, 0px)); }
  .fr-picker-title { font-size: 16px; }
  .fr-picker-close { width: 40px; height: 40px; font-size: 24px; }
  .fr-picker-search { padding: 14px 18px; }
  .fr-picker-input { font-size: 16px; padding: 12px 14px 12px 38px; }
  .fr-picker-search-icon { left: 30px; font-size: 15px; }
  .fr-picker-list { padding: 8px 10px 10px; }
  .fr-pl-group { padding: 8px 0 6px; }
  .fr-pl-group-label { font-size: 14.5px; padding: 6px 10px; }
  .fr-pl-row {
    padding: 12px 10px;
    gap: 12px;
    min-height: 52px;
  }
  .fr-picker-footer { padding: 12px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .fr-pl-logo { width: 36px; height: 36px; }
  .fr-pl-name { font-size: 14.5px; }
  .fr-pl-meta { font-size: 14px; margin-top: 2px; }
  .fr-pl-num { min-width: 52px; }
  .fr-pl-num-val { font-size: 15px; }
  .fr-pl-num-lbl { font-size: 14.5px; }
  .fr-pl-num:first-of-type { display: none; }
  .fr-picker-count { font-size: 14.5px; }
  .fr-pl-empty { padding: 32px 20px; font-size: 14px; }
  .fr-pl-more { font-size: 13.5px; padding: 6px 12px 8px; }

  .fr-picker-report-head { padding: 14px 18px; }
  .fr-picker-report-back { padding: 8px 14px; font-size: 14px; }
  .fr-picker-report-title { font-size: 15px; }
  .fr-picker-report-content { padding: 14px 18px; }
  .fr-picker-report-actions { padding: 14px 18px; gap: 12px; }
  .fr-picker-pass,
  .fr-picker-pick { font-size: 14px; padding: 10px 18px; }
}


/* ---- 2025 Results page ------------------------------------- */
.r25-list { display: flex; flex-direction: column; gap: 10px; max-width: 100%; overflow-x: hidden; }

.r25-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: box-shadow 0.15s ease, transform 0.05s ease;
  overflow: hidden;
  min-width: 0;
}
.r25-row[data-pid] { cursor: pointer; }
.r25-row[data-pid]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.r25-head {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* Injuries page with team logo */
.inj-row .r25-head {
  grid-template-columns: 28px 12px 1fr auto;
}
.inj-team-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.r25-name { min-width: 0; overflow: hidden; }
.r25-name strong { display: block; font-size: 15px; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r25-name .rt-sub { font-size: 13.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r25-score-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.r25-score {
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.r25-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 15px;
  color: var(--fg-secondary);
  margin-bottom: 6px;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.r25-meta strong { color: var(--fg-primary); font-weight: 600; }

.r25-impact {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-secondary);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.r25-team-list { display: flex; flex-direction: column; gap: 12px; }
.r25-team-row {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow: hidden;
}
.r25-team-row--click { cursor: pointer; transition: border-color 0.1s ease, background-color 0.1s ease; }
.r25-team-row--click:hover,
.r25-team-row--click:focus-visible {
  border-color: var(--accent);
  background: var(--bg-muted);
}
.r25-team-head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.r25-team-logo { width: 40px; height: 40px; object-fit: contain; }
.r25-team-name { font-weight: 700; color: var(--fg-primary); font-size: 15px; }
.r25-team-rating {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fg-primary);
  background: var(--bg-muted);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.r25-team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 15px;
  color: var(--fg-secondary);
  margin-bottom: 4px;
}
.r25-team-meta strong { color: var(--fg-primary); font-weight: 600; }

@media (max-width: 720px) {
  .r25-head {
    grid-template-columns: 12px 1fr;
  }
  .r25-score-block {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .r25-team-head { grid-template-columns: 40px 1fr; }
  .r25-team-rating {
    grid-column: 1 / -1;
    justify-self: end;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
  }
}

/* ---- Redesigned Team Score Cards ----------------------------------- */
.ts-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-top: 0;
}

.ts-team-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  min-width: 0;
}
.ts-team-card:hover,
.ts-team-card:focus-visible {
  border-color: var(--accent);
  background: var(--bg-muted);
  box-shadow: 0 0 0 1px rgba(59,130,246,.2);
}

/* Top row: rank, logo, name, tier badge */
.ts-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ts-card-rank {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-muted);
  min-width: 28px;
  text-align: center;
}
.ts-card-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.ts-card-name-block {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ts-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-card-sub {
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ts-card-tier {
  flex-shrink: 0;
}

/* Health meter bar */
.ts-card-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ts-meter-bar-wrap {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--bg-muted);
  overflow: hidden;
}
.ts-meter-fill {
  height: 100%;
  border-radius: 7px;
  transition: width .4s ease;
  min-width: 3px;
}
.ts-meter-fill--ironman { background: linear-gradient(90deg, var(--band-ironman), var(--band-steel)); }
.ts-meter-fill--steel   { background: linear-gradient(90deg, var(--band-steel), var(--band-oak)); }
.ts-meter-fill--oak     { background: linear-gradient(90deg, var(--band-oak), var(--band-chipped)); }
.ts-meter-fill--chipped { background: linear-gradient(90deg, var(--band-chipped), var(--band-cracked)); }
.ts-meter-fill--cracked { background: linear-gradient(90deg, var(--band-cracked), var(--band-glass)); }
.ts-meter-fill--glass   { background: linear-gradient(90deg, var(--band-cracked), var(--band-glass)); }
.ts-meter-val-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ts-meter-val {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ts-meter-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Stats grid */
.ts-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ts-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ts-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.ts-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Player contributors list */
.ts-card-players {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ts-players-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.ts-player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-width: 0;
}
.ts-player-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.ts-player-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  background: var(--bg-surface);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ts-player-ppr {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.ts-player-frailty {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---- Responsive: Team Score Cards -------------------------------- */
@media (max-width: 860px) {
  .ts-team-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
  }
  .ts-team-card {
    padding: 14px 16px;
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .ts-team-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ts-card-logo { width: 32px; height: 32px; }
  .ts-card-name { font-size: 14px; }
  .ts-card-stats { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .ts-stat-val { font-size: 14px; }
  .ts-stat-label { font-size: 10px; }
  .ts-meter-val { font-size: 20px; }
}

@media (max-width: 480px) {
  .ts-team-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .ts-card-top { gap: 8px; }
  .ts-card-rank { font-size: 13px; min-width: 24px; }
  .ts-card-name { font-size: 13.5px; }
  .ts-card-stats { grid-template-columns: repeat(2, 1fr); }
  .ts-stat { padding: 6px 4px; }
  .ts-stat-val { font-size: 13px; }
  .ts-meter-val { font-size: 18px; }
  .ts-player-row { gap: 6px; padding: 5px 8px; }
  .ts-player-name { font-size: 12.5px; }
  .ts-player-frailty { font-size: 12px; }
}


/* Tuned-weights card on the 2025 backtest page ============================= */
.tuned-weights-card { border: 1px solid var(--accent-soft); }
.tw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin-top: 14px;
}
.tw-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.tw-name { font-size: 14px; color: var(--fg-primary); font-weight: 500; }
.tw-bar {
  position: relative;
  height: 8px;
  background: var(--bg-muted);
  border-radius: 999px;
  overflow: hidden;
}
.tw-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
}
.tw-fill-pos { background: var(--accent); }
.tw-fill-neg { background: var(--danger); }
.tw-value {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: var(--fg-secondary);
}
.tw-pos .tw-value { color: var(--accent); }
.tw-neg .tw-value { color: var(--danger); }

@media (max-width: 900px) {
  .tw-grid { grid-template-columns: 1fr; }
  .tw-row  { grid-template-columns: 140px 1fr 60px; }
}

/* ======================================================
   MOBILE — phones ≤ 640px
   All sections: topbar, page/card padding, KPI strip,
   search controls, results table, tw-row, fantasy slot,
   player report, team header.
   ====================================================== */
@media (max-width: 640px) {

  /* ---- Topbar ---------------------------------------- */
  .topbar {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-title { font-size: 14px; }
  .page-meta  { display: none; }
  .status-pill { font-size: 13.5px; padding: 4px 8px; }
  .status-pill .dot { width: 6px; height: 6px; }

  /* ---- Page / card padding --------------------------- */
  .page { padding: 14px 14px 32px; }
  .card { padding: 16px 16px; }
  .home-hero { padding: 18px 16px; }
  .home-title { font-size: 22px; line-height: 1.3; }
  .home-lead { font-size: 16px; line-height: 1.6; }

  /* ---- Text sizing for readability ------------------- */
  .card-title { font-size: 15px; }
  .card-sub { font-size: 14.5px; }
  .info-block-title { font-size: 14px; }
  .info-block p { font-size: 14.5px; line-height: 1.6; }
  .breakthrough-lead { font-size: 14.5px; }
  .breakthrough-tile p { font-size: 14.5px; }

  /* ---- Roster grid -- player cards ------------------ */
  .player-card { padding: 8px 10px; gap: 8px; }
  .player-card-name { font-size: 14px; }
  .player-card-meta { font-size: 13.5px; }
  .player-avatar { width: 42px !important; height: 42px !important; font-size: 13.5px; }

  /* ---- KPI strip: single column ---------------------- */
  .kpi-strip { grid-template-columns: 1fr; }

  /* Search controls + flex-between already stacked at 920px. */

  /* ---- Results / global-search table (rt-row) -------- */
  .results-table { margin-top: 16px; border-radius: var(--radius); }
  .rt-row {
    grid-template-columns: 1fr 44px 72px;
    grid-template-areas:
      "name  name  name"
      "pos   frailty risk"
      "prop  prop  prop";
    gap: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
  }
  .rt-row > * { min-width: 0; }
  .rt-head { padding: 10px 14px; font-size: 14.5px; }
  .rt-row .rt-name { display: block; text-align: center; font-size: 14px; font-weight: 600; }
  .rt-row .rt-dot { display: inline-block; vertical-align: middle; flex-shrink: unset; }
  .rt-row .rt-name .rt-sub { display: inline; flex-shrink: unset; }
  .rt-pos { font-size: 13.5px; font-weight: 600; }
  .rt-frailty { font-size: 14px; }
  .rt-team { display: none; }
  .rt-prop { font-size: 14px; padding-top: 4px; }
  .rt-risk { grid-area: risk; text-align: right; font-size: 14px; padding: 4px 10px; }

  /* ---- Feature-weight rows (tw-row): 2-row layout ---- */
  .tw-grid { grid-template-columns: 1fr; }
  .tw-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "name value"
      "bar  bar";
    padding: 8px 0;
    gap: 4px 8px;
    min-width: 0;
    overflow: hidden;
  }
  .tw-name  { grid-area: name;  font-size: 13.5px; }
  .tw-bar   { grid-area: bar; }
  .tw-value { grid-area: value; }

  /* Hyperparameter sweep table: allow horizontal scroll */
  .tw-sweep-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .tw-sweep-wrap table { min-width: 520px; }

  /* ---- Fantasy roster -------------------------------- */
  .fr-slot { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px; }
  .fr-slot-pos { font-size: 14.5px; padding: 8px 4px; }
  .fr-card { grid-template-columns: 38px 1fr auto; gap: 10px; padding: 10px 12px; }
  .fr-card-name { font-size: 14px; }
  .fr-card-meta { font-size: 13.5px; }
  .fr-card-score-num { font-size: 18px; }
  .fr-card-score-label { font-size: 13.5px; }
  .fr-safe { padding: 10px 12px; }
  .fr-safe-body { grid-template-columns: 32px 1fr auto; gap: 10px; }
  .fr-safe-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas:
      "logo text nums"
      "logo text swap";
    row-gap: 4px;
    column-gap: 10px;
  }
  .fr-safe-row .fr-safe-logo   { grid-area: logo; align-self: center; }
  .fr-safe-row .fr-safe-text   { grid-area: text; }
  .fr-safe-row .fr-safe-nums   { grid-area: nums; }
  .fr-safe-row .fr-safe-use-btn { grid-area: swap; justify-self: end; }
  .fr-safe-logo { width: 32px; height: 32px; }
  .fr-safe-name { font-size: 14.5px; }
  .fr-safe-meta { font-size: 14.5px; }
  .fr-safe-nums { flex-direction: column; gap: 4px; align-items: flex-end; }
  .fr-safe-num-val { font-size: 14px; }

  /* ---- Player report score --------------------------- */
  .score-value { font-size: 42px; }

  /* ---- Team header ----------------------------------- */
  .team-header { flex-wrap: wrap; gap: 10px; }
  .team-header-name { font-size: 18px; }
  .team-header-logo { width: 52px; height: 52px; }

  /* ---- Leaders card ---------------------------------- */
  /* Give the name more room by shrinking rank + score cols */
  .leader-card { padding: 14px 16px; }
  .leader-card-title { font-size: 13.5px; margin-bottom: 10px; }
  .leader-list { gap: 4px; }
  .leader-row {
    grid-template-columns: 20px 1fr 64px 54px;
    gap: 8px;
    font-size: 14.5px;
    padding: 8px 6px;
  }
  .leader-name { font-size: 14.5px; }
  .leader-pts { font-size: 14.5px; }
  .leader-frailty { font-size: 13.5px; padding: 3px 8px; }

  /* ---- Backtest results rows (r25) ------------------- */
  .r25-meta { gap: 4px 10px; font-size: 14.5px; }
  .r25-impact { font-size: 14.5px; }
  .r25-team-meta { gap: 4px 10px; font-size: 14.5px; }

  /* ---- Odds card ------------------------------------- */
  .odds-matchup-logo { width: 36px; height: 36px; }
  .odds-matchup-code { font-size: 15px; }
  .odds-matchup-score { font-size: 26px; }
  /* Frailty comparison — stack on phones */
  .ofc-row { grid-template-columns: 1fr; gap: 8px; }
  .ofc-bar { order: 2; }

  /* ---- Breakthrough tiles (already 1-col at 900px) --- */
  .breakthrough-lead { font-size: 14.5px; }

  /* ---- Mobile overflow safety net -------------------- */
  /* All JS-populated containers — keep content inside the viewport. */
  #playerReport,
  #playerFullReport,
  #fantasyPlayerReportView,
  #fantasyPlayerReport,
  #matchupsContainer,
  #globalSearchResults,
  #risersFallersGrid,
  #teamGrid,
  #rosterGrid,
  #resultsGrid,
  #fantasyRoster,
  #fantasyRosterAnalysis,
  #fantasyRosterFormats,
  #oddsGrid,
  #defenseContainer,
  #valuepicksContainer,
  #atriskContainer,
  #teamscoresContainer,
  #injuries2025Container,
  #injuries2026Container,
  #results2025Container,
  #teamRisersFallersGrid,
  #teamDetailView {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .matchup-row,
  .matchup-health-meter,
  .matchup-detail,
  .matchup-teams,
  .matchup-recs,
  .matchup-jenga,
  .matchup-factors {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Tables / grids: ensure they stay inside their wrapper */
  .results-table,
  .results-table--wide,
  .results-table-scroll {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Report content: long strings / code blocks must not push
     past the viewport edge regardless of font-family / -size */
  .report-assessment,
  .report-verdict,
  .report-context,
  .description,
  .assessment-report {
    max-width: 100%;
    box-sizing: border-box;
  }
  .report-assessment *,
  .report-verdict *,
  .description *,
  .assessment-report * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ======================================================
   MOBILE — very small phones ≤ 420px
   ====================================================== */
@media (max-width: 420px) {

  /* Tighten spacing further but keep it readable */
  .page { padding: 14px 14px 32px; }
  .card { padding: 14px 14px; }

  /* KPI values — keep readable */
  .kpi-value { font-size: 20px; }
  .kpi-label { font-size: 14.5px; }
  .kpi-trend { font-size: 14px; }

  /* Team grid: force single column on tiny phones */
  .team-grid { grid-template-columns: 1fr; }

  /* Roster grid: single column */
  .roster-grid { grid-template-columns: 1fr; }

  /* Player cards — shrink avatar for more name room */
  .player-card { padding: 8px 10px; gap: 8px; }
  .player-card-name { font-size: 14px; }
  .player-avatar { width: 42px !important; height: 42px !important; font-size: 13.5px; }
  .player-card-cta { font-size: 16px; }

  /* Leader row — keep professional and readable */
  .leader-card { padding: 12px 14px; }
  .leader-row {
    grid-template-columns: 18px 1fr 58px 50px;
    font-size: 14px;
    padding: 8px 4px;
  }
  .leader-name { font-size: 14px; }

  /* Fantasy roster — keep spacious for touch */
  .fr-slot-pos { font-size: 13.5px; }

  /* Results table — readable rows */
  .rt-row { padding: 12px 12px; font-size: 14.5px; }

  /* Score on player report */
  .score-value { font-size: 38px; }

  /* Team header */
  .team-header-name { font-size: 17px; }
}


/* ======================================================
   MOBILE — additional polish for dynamically rendered
   data lists (player reports, fantasy roster, results,
   inline-flex headers built in JS). Layered on top of the
   existing 920 / 640 / 420px blocks above.
   ====================================================== */
@media (max-width: 920px) {
  /* Sticky topbar is shorter at this breakpoint — pull the scroll
     padding in so anchored sections don't sit too far below the
     viewport top. */
  html { scroll-padding-top: 80px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 64px; }

  /* iOS Safari auto-zooms any input/select whose computed font-size
     is < 16px. Bump the search/filter controls + roster pickers so
     focus doesn't slam the viewport. */
  .team-filters input, .team-filters select,
  .search-controls input, .search-controls select,
  #defenseSearch, #defensePosFilter, #defenseSort {
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Player report header (rendered inline by assessment.js) — the
     inner flex container has inline styles, so target its descendants
     directly to enforce wrapping + min-width:0 for ellipsis. */
  #playerReport > .flex-between,
  #playerFullReport > .flex-between {
    align-items: flex-start;
  }
  #playerReport > .flex-between > div,
  #playerFullReport > .flex-between > div { min-width: 0; }
  #playerReport .card-title,
  #playerFullReport .card-title {
    font-size: 16px;
    line-height: 1.3;
  }

  /* Previous-injury card: wrap penalty pill below the title cleanly */
  .prev-injury-header { flex-direction: column; align-items: flex-start; }
  .prev-injury-penalty, .prev-injury-meta { align-self: flex-start; }
  .prev-injury-summary { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pi-injury-row { gap: 6px; }
  .pi-risk-row { gap: 6px; }
  .pi-overall-risk { font-size: 14px; }
  .pi-career-risk { font-size: 14px; }
  .pi-cat-flag { font-size: 14px; }

  /* Threshold-info on the report — long inline list of bands. Add
     line-height so the wrap is readable on narrow viewports. */
  .threshold-info { font-size: 14.5px; line-height: 1.55; padding: 10px 12px; }

  /* Fantasy/betting tiles in the player report — shrink the minmax so
     three small tiles fit per row on a 360px phone, then wrap. */
  .fb-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .fb-value { font-size: 15px; }

  /* Score block: the badge/score combo on results pages can crowd on
     a 320px viewport — let it wrap and stay right-aligned. */
  .r25-score-block { justify-content: flex-end; }

  /* Profile header (player report): keep the risk badge from
     overlapping the player name on phones. Shrink the avatar so
     the name + meta text have room to breathe. */
  .profile-header { gap: 10px; }
  .profile-header-left { gap: 12px; }
  .profile-header-left .player-avatar { width: 64px !important; height: 64px !important; }
  .profile-header-name { font-size: 18px; }
  .profile-risk-badge { flex-shrink: 0; }

  /* Profile bio strip — wrap and tighten gaps on phones */
  .profile-bio-strip { gap: 12px; padding: 10px 0; }
  .profile-bio-item { min-width: 0; }
  .profile-bio-label { font-size: 13px; }
  .profile-bio-value { font-size: 14.5px; }

  /* Progress bar — ensure it stays within the card */
  .progress { width: 100%; max-width: 280px; }

  /* KPI value can overflow if the number is long. Allow it to shrink
     down rather than push the tile wide. */
  .kpi-value { word-break: break-word; }

  /* Tap targets — bump button & roster picker padding for finger use */
  .btn { min-height: 44px; padding: 12px 18px; font-size: 14px; }
  .fr-pick-btn { min-height: 46px; padding: 12px 14px; font-size: 14.5px; }
  .fr-picker-close { width: 44px; height: 44px; font-size: 26px; }

  /* Roster section header — long position labels wrap cleanly */
  .roster-section-header { flex-wrap: wrap; }

  /* Team detail header card — back button + header stack neatly */
  .team-header-card { gap: 12px; padding: 16px; }
  .team-header-card .btn-secondary { align-self: flex-start; }

  /* Stat tiles inside the player report (.grid-3) — two-up on phones
     instead of single column so the report is more scannable. */
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid-3 .kpi { padding: 12px 14px; }
  .grid-3 .kpi-value { font-size: 20px; }
  .grid-3 .kpi-label { font-size: 14.5px; }

  /* Hazard grid — two compact columns on phones */
  .hazard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hazard-row { padding: 10px 12px; font-size: 14.5px; }

  /* Leaders grid — full-width cards stack vertically */
  .leaders-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Odds grid — full-width cards stack vertically */
  .odds-grid { grid-template-columns: 1fr; gap: 12px; }
  .odds-matchup { padding: 14px 16px; }
  .odds-matchup-logo { width: 40px; height: 40px; }
  .odds-matchup-code { font-size: 15px; }
  .odds-matchup-score { font-size: 26px; }
  .odds-lines { grid-template-columns: repeat(3, 1fr); }

  /* Tuned-weights bar row — keep the bar from collapsing to zero */
  .tw-bar { min-height: 10px; }

  /* Leader cards — ensure names don't overflow */
  .leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* New report elements: shrink grid and padding on narrow viewports */
  .report-row { grid-template-columns: 108px 1fr 38px; gap: 8px; font-size: 14.5px; }
  .report-row-lbl { font-size: 14.5px; }
  .report-context { padding: 8px 10px; gap: 8px; font-size: 14.5px; }
  .report-section-label { margin: 16px 0 2px; }
  .report-assessment { padding: 12px 14px; }
  .report-verdict { padding: 12px 14px; font-size: 14.5px; }
}

@media (max-width: 420px) {
  /* Larger tap targets for the nav drawer on tiny phones */
  .nav-link { padding: 10px 10px; min-height: 40px; }
  .nav-icon { font-size: 15px; }

  /* Topbar status pill can crowd against the title — let it drop below */
  .topbar { justify-content: flex-start; padding: 12px 14px; }
  .topbar-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
  .page-title { font-size: 15px; }
  .status-pill { font-size: 14px; padding: 5px 10px; }

  /* Card paddings — keep professional spacing */
  .card { margin-bottom: 16px; }

  /* Stat tiles single column on the very smallest phones for readability */
  .grid-3 { grid-template-columns: 1fr; gap: 10px; }
  .grid-3 .kpi { padding: 14px 16px; }
  .grid-3 .kpi-value { font-size: 22px; }

  /* Hazard grid back to single column too */
  .hazard-grid { grid-template-columns: 1fr; gap: 8px; }
  .hazard-row { padding: 12px 14px; font-size: 13.5px; }

  /* Results table on tiny phones — keep readable and professional */
  .rt-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name  name"
      "pos   frailty"
      "prop  risk";
    gap: 6px;
    padding: 14px 12px;
  }
  .rt-row > * { min-width: 0; }
  .rt-row .rt-name { display: block; text-align: center; font-size: 14px; font-weight: 700; }
  .rt-row .rt-dot { display: inline-block; vertical-align: middle; flex-shrink: unset; }
  .rt-row .rt-name .rt-sub { display: inline; flex-shrink: unset; }
  .rt-pos { grid-area: pos; font-size: 13.5px; color: var(--fg-muted); }
  .rt-frailty { font-size: 15px; font-weight: 700; }
  .rt-prop { grid-area: prop; font-size: 14px; padding-top: 4px; }
  .rt-risk { grid-area: risk; text-align: right; font-size: 14px; }

  /* Fantasy slot — keep spacious for populated data */
  .fr-grid { gap: 12px; }
  .fr-slot { grid-template-columns: 48px 1fr; gap: 10px; padding: 12px; }
  .fr-slot-pos { font-size: 13.5px; padding: 6px; }
  .fr-card { padding: 12px; gap: 10px; }
  .fr-card-logo { width: 36px; height: 36px; }
  .fr-card-name { font-size: 14px; }
  .fr-card-meta { font-size: 13.5px; }
  .fr-card-score-num { font-size: 18px; }
  .fr-card-score-label { font-size: 13.5px; }

  /* Backup player cards — keep readable */
  .fr-safe { padding: 12px 14px; }
  .fr-safe-head { font-size: 14px; margin-bottom: 8px; }
  .fr-safe-body { grid-template-columns: 34px 1fr auto; gap: 10px; }
  .fr-safe-row { column-gap: 8px; row-gap: 4px; }
  .fr-safe-logo { width: 34px; height: 34px; }
  .fr-safe-name { font-size: 13.5px; }
  .fr-safe-meta { font-size: 13.5px; }
  .fr-safe-num-val { font-size: 14px; }
  .fr-safe-num-lbl { font-size: 14.5px; }

  /* Picker rows — keep comfortable for touch */
  .fr-pl-row { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 12px 10px; }
  .fr-pl-logo { width: 30px; height: 30px; }
  .fr-pl-name { font-size: 14px; }
  .fr-pl-meta { font-size: 14.5px; }

  /* Tuned-weights row — keep the name column wide enough for labels */
  .tw-row { grid-template-columns: 1fr auto; padding: 10px 0; }
  .tw-name { font-size: 14.5px; }
  .tw-value { font-size: 14.5px; }

  /* Tightest report overrides — single-column friendly */
  .report-row { grid-template-columns: 92px 1fr 38px; gap: 8px; font-size: 14.5px; }
  .report-row-lbl { font-size: 14.5px; }
  .sev-bar-row { grid-template-columns: 96px 1fr 36px; gap: 8px; }
  .sev-bar-label, .sev-bar-count { font-size: 14px; }
  .ir-row { grid-template-columns: 104px 1fr; gap: 6px 10px; padding: 10px 12px; }
  .report-context { padding: 8px; gap: 6px; font-size: 14.5px; }
  .report-assessment { padding: 12px 14px; }
  .report-verdict { padding: 12px 14px; font-size: 14.5px; }
}

/* ======================================================
   MOBILE — very narrow phones ≤ 360px (iPhone SE, etc.)
   Final tightening pass for the smallest modern viewports.
   ====================================================== */
@media (max-width: 360px) {

  /* ---- Card / page padding ---------------------------- */
  .page { padding: 10px 10px 28px; }
  .card { padding: 12px 12px; margin-bottom: 12px; }
  .home-hero { padding: 14px 12px; }
  .home-title { font-size: 19px; }
  .home-lead { font-size: 14.5px; line-height: 1.55; }
  .card-title { font-size: 14px; }
  .card-sub { font-size: 14px; }

  /* ---- Topbar ---------------------------------------- */
  .topbar { padding: 8px 10px; gap: 4px; }
  .page-title { font-size: 13.5px; }
  .status-pill { font-size: 14.5px; padding: 4px 8px; }

  /* ---- Nav drawer ------------------------------------- */
  .sidebar { padding: 14px 10px; }
  .nav-logo-img { height: 26px; }

  /* ---- KPI strip ------------------------------------- */
  .kpi-strip { grid-template-columns: 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-value { font-size: 18px; }
  .kpi-label { font-size: 13.5px; }
  .kpi-trend { font-size: 13.5px; }

  /* ---- Stat grid (backtest) -------------------------- */
  .stat-block { padding: 12px 14px; }
  .stat-val { font-size: 24px; }

  /* ---- Info grid (patent explainer) ------------------ */
  .info-block { padding: 12px 14px; }
  .info-block-title { font-size: 14.5px; }
  .info-block p { font-size: 14.5px; }

  /* ---- Results table (global search) ----------------- */
  .results-table { margin-top: 10px; }
  .rt-name { font-size: 14.5px; }
  .rt-frailty { font-size: 14px; }
  .rt-pos { font-size: 14px; }
  .rt-prop { font-size: 14.5px; }
  .rt-risk { font-size: 14px; }

  /* ---- Leaders grid ---------------------------------- */
  .leader-card { padding: 10px 12px; }
  .leader-card-title { font-size: 14px; margin-bottom: 8px; }
  .leader-row {
    grid-template-columns: 16px 1fr 54px 46px;
    font-size: 14.5px;
    padding: 6px 2px;
    gap: 6px;
  }
  .leader-name { font-size: 14.5px; }
  .leader-pts { font-size: 14.5px; }
  .leader-frailty { font-size: 14px; padding: 2px 6px; }

  /* ---- Odds cards ------------------------------------ */
  .odds-matchup { padding: 12px 12px; }
  .odds-matchup-logo { width: 32px; height: 32px; }
  .odds-matchup-code { font-size: 14px; }
  .odds-matchup-score { font-size: 24px; }
  .odds-line-value { font-size: 14px; }
  .odds-meta { gap: 4px 8px; font-size: 12px; }

  /* Frailty comparison row — let teams stack for readability */
  .ofc-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ofc-bar { order: 2; }

  /* Model edge block */
  .odds-edge { padding: 8px 10px; }
  .odds-edge-pick { font-size: 14.5px; }
  .odds-edge-sub { font-size: 13.5px; }

  /* ---- Fantasy roster -------------------------------- */
  .fr-grid { gap: 8px; }
  .fr-slot { grid-template-columns: 44px 1fr; gap: 8px; padding: 8px; }
  .fr-slot-pos { font-size: 14px; }
  .fr-card { padding: 8px 10px; gap: 8px; }
  .fr-card-logo { width: 32px; height: 32px; }
  .fr-card-name { font-size: 14.5px; }
  .fr-card-meta { font-size: 14px; }
  .fr-card-score-num { font-size: 16px; }

  /* ---- Team grid ------------------------------------- */
  .team-card { padding: 12px 14px; gap: 10px; }
  .team-card-logo { width: 40px; height: 40px; }
  .team-card-name { font-size: 14.5px; }

  /* ---- Roster grid ----------------------------------- */
  .roster-grid { grid-template-columns: 1fr; gap: 6px; }
  .player-card { padding: 8px 10px; gap: 8px; }
  .player-card-name { font-size: 14px; }
  .player-avatar { width: 36px !important; height: 36px !important; font-size: 13px; }
  .player-card-cta { font-size: 16px; }

  /* ---- Player report --------------------------------- */
  .score-value { font-size: 34px; }
  .profile-header { gap: 10px; }
  .profile-header-left { gap: 10px; }
  .profile-header-left .player-avatar { width: 52px !important; height: 52px !important; }
  .profile-header-name { font-size: 16px; }
  .profile-header-meta { font-size: 14px; }
  .profile-bio-strip { gap: 12px; padding: 10px 0; }
  .profile-bio-value { font-size: 14.5px; }

  /* ---- Breakthrough tiles ---------------------------- */
  .breakthrough-tile { padding: 10px 12px; }
  .breakthrough-tag { font-size: 14.5px; }
  .breakthrough-title { font-size: 14.5px; }
  .breakthrough-tile p { font-size: 14px; }

  /* ---- FAQ items ------------------------------------- */
  .faq-q { padding: 10px 14px; font-size: 14px; }
  .faq-a { font-size: 14px; }

  /* ---- Misc buttons and tap targets ------------------ */
  .btn { min-height: 44px; padding: 10px 14px; font-size: 14.5px; }

  /* ---- Tuned-weights rows ---------------------------- */
  .tw-row { padding: 8px 0; }
  .tw-name { font-size: 13.5px; }

  /* ---- Report rows ----------------------------------- */
  .report-row { grid-template-columns: 80px 1fr 34px; gap: 6px; font-size: 14px; }
  .report-row-lbl { font-size: 14px; }
  .report-context { padding: 8px; gap: 6px; font-size: 14px; }
  .report-assessment { padding: 10px 12px; }
  .report-verdict { padding: 10px 12px; font-size: 14px; }
}


/* ---- Boot overlay ------------------------------------------
   Full-screen blocker that prevents any interaction with the app
   until the frailty model finishes initializing. Mirrors the
   sidebar / status-pill progress in a single, centered card. */
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%,
    rgba(20, 32, 64, 0.82) 0%,
    rgba(6, 12, 29, 0.92) 60%,
    rgba(6, 12, 29, 0.96) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 1;
  transition: opacity 0.4s ease;
}
.boot-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.boot-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 40px;
  padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  min-width: 280px;
  max-width: 92vw;
  text-align: center;
}
.boot-overlay-logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  opacity: 0.95;
}
.boot-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--bg-muted);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
.boot-overlay-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: 0.01em;
}
.boot-overlay-status {
  font-size: 14.5px;
  color: var(--fg-muted);
  min-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ---- Feature nav cards (Home dashboard) ----------------------- */
.feature-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .feature-nav-grid { grid-template-columns: 1fr; }
}
.feature-nav-card {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
  overflow: hidden;
}
.feature-nav-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.feature-nav-icon {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--accent);
}
.feature-nav-tag {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.feature-nav-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 6px;
}
.feature-nav-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.feature-nav-bullets {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 15px;
  color: var(--fg-secondary);
  line-height: 1.6;
}
.feature-nav-bullets li { margin-bottom: 3px; }
.feature-nav-bullets li::marker { color: var(--accent); }

/* ---- Getting Started risk grid -------------------------------- */
.gs-risk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 768px) {
  .gs-risk-grid { grid-template-columns: 1fr; }
}
.gs-risk-block {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  min-width: 0;
  overflow: hidden;
}
.gs-risk-label {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.gs-risk-desc {
  font-size: 15px;
  line-height: 1.55;
}

.gs-risk--elite   { background: var(--band-elite-soft);   border-color: rgba(16, 185, 129, 0.2); }
.gs-risk--elite   .gs-risk-label { color: var(--band-elite); }
.gs-risk--elite   .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--trusted { background: var(--band-trusted-soft); border-color: rgba(34, 197, 94, 0.2); }
.gs-risk--trusted .gs-risk-label { color: var(--band-trusted); }
.gs-risk--trusted .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--stable  { background: var(--band-stable-soft);  border-color: rgba(132, 204, 22, 0.2); }
.gs-risk--stable  .gs-risk-label { color: var(--band-stable); }
.gs-risk--stable  .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--watch   { background: var(--band-watch-soft);   border-color: rgba(234, 179, 8, 0.2); }
.gs-risk--watch   .gs-risk-label { color: var(--band-watch); }
.gs-risk--watch   .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--caution { background: var(--band-caution-soft); border-color: rgba(249, 115, 22, 0.2); }
.gs-risk--caution .gs-risk-label { color: var(--band-caution); }
.gs-risk--caution .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--elevated{ background: var(--band-elevated-soft);border-color: rgba(239, 68, 68, 0.2); }
.gs-risk--elevated .gs-risk-label{ color: var(--band-elevated); }
.gs-risk--elevated .gs-risk-desc { color: var(--fg-secondary); }
.gs-risk--high    { background: var(--band-high-soft);    border-color: rgba(220, 38, 38, 0.25); }
.gs-risk--high    .gs-risk-label { color: var(--band-high); }
.gs-risk--high    .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--severe  { background: var(--band-severe-soft);  border-color: rgba(185, 28, 28, 0.25); }
.gs-risk--severe  .gs-risk-label { color: var(--band-severe); }
.gs-risk--severe  .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--ironman { background: var(--band-ironman-soft); border-color: rgba(16,185,129,0.2); }
.gs-risk--ironman .gs-risk-label { color: var(--band-ironman); }
.gs-risk--ironman .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--steel   { background: var(--band-steel-soft);   border-color: rgba(34,197,94,0.2); }
.gs-risk--steel   .gs-risk-label { color: var(--band-steel); }
.gs-risk--steel   .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--oak     { background: var(--band-oak-soft);     border-color: rgba(234,179,8,0.2); }
.gs-risk--oak     .gs-risk-label { color: var(--band-oak); }
.gs-risk--oak     .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--chipped { background: var(--band-chipped-soft); border-color: rgba(249,115,22,0.2); }
.gs-risk--chipped .gs-risk-label { color: var(--band-chipped); }
.gs-risk--chipped .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--cracked { background: var(--band-cracked-soft); border-color: rgba(220,38,38,0.2); }
.gs-risk--cracked .gs-risk-label { color: var(--band-cracked); }
.gs-risk--cracked .gs-risk-desc  { color: var(--fg-secondary); }
.gs-risk--glass   { background: var(--band-glass-soft);   border-color: rgba(153,27,27,0.2); }
.gs-risk--glass   .gs-risk-label { color: var(--band-glass); }
.gs-risk--glass   .gs-risk-desc  { color: var(--fg-secondary); }

/* ---- Getting Started step list -------------------------------- */
.gs-step-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gs-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gs-step-num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.gs-step-body { flex: 1; min-width: 0; }
.gs-step-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}
.gs-step-desc {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.55;
}

/* ---- Getting Started tip list --------------------------------- */
.gs-tip-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gs-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.gs-tip-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  margin-top: 1px;
}
.gs-tip-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-secondary);
  flex: 1;
  min-width: 0;
}
.gs-tip-body strong { color: var(--fg-primary); }

/* ---- Roster how-to -------------------------------------------- */
.roster-howto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.roster-howto p { margin: 0 0 10px; }
.roster-howto p:last-child { margin-bottom: 0; }
.roster-howto strong { color: var(--fg-secondary); }

/* ---- Matchups: Attrition Edge — modern layout -------------- */

/* ---- List view ---------------------------------------------- */
.matchup-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Matchup explainer (list view) ---------------------------- */
.matchup-explainer {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.matchup-explainer-summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  padding: 12px 18px;
  list-style-position: inside;
  user-select: none;
}
.matchup-explainer-summary::marker { color: var(--fg-muted); font-size: 11px; }
.matchup-explainer[open] .matchup-explainer-summary {
  border-bottom: 1px solid var(--border);
  color: var(--fg-primary);
}

.matchup-explainer-body {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.matchup-explainer-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
}

.matchup-explainer-body p strong {
  color: var(--fg-primary);
  font-weight: 700;
}

.matchup-explainer-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  background: var(--bg-muted);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent-hover);
}

.matchup-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 1px 3px rgba(0,0,0,.06);
}
.matchup-row:hover {
  background: var(--bg-muted);
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 0 1px rgba(59,130,246,.2);
}

/* Away team column */
.matchup-row-team {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background .12s;
  min-width: 0;
  overflow: hidden;
}
.matchup-row-team:hover { background: var(--bg-muted); }

.matchup-row-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.matchup-row-team-text { min-width: 0; }
.matchup-row-team-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.matchup-row-team-code {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: .04em;
}

.omf-tier--ironman  { background: var(--band-ironman-soft);  color: var(--band-ironman); }
.omf-tier--steel    { background: var(--band-steel-soft);    color: var(--band-steel); }
.omf-tier--oak      { background: var(--band-oak-soft);      color: var(--band-oak); }
.omf-tier--chipped  { background: var(--band-chipped-soft);  color: var(--band-chipped); }
.omf-tier--cracked  { background: var(--band-cracked-soft);  color: var(--band-cracked); }
.omf-tier--glass    { background: var(--band-glass-soft);    color: var(--band-glass); }

/* Frailty score block in list view */
.matchup-row-frailty {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  min-width: 60px;
}

.matchup-row-team--right .matchup-row-frailty {
  align-items: flex-start;
}

.mfs-score {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mfs-tier {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1px 7px;
  border-radius: 6px;
}
.mfs-tier--ironman  { background: var(--band-ironman-soft);  color: var(--band-ironman); }
.mfs-tier--steel    { background: var(--band-steel-soft);    color: var(--band-steel); }
.mfs-tier--oak      { background: var(--band-oak-soft);      color: var(--band-oak); }
.mfs-tier--chipped  { background: var(--band-chipped-soft);  color: var(--band-chipped); }
.mfs-tier--cracked  { background: var(--band-cracked-soft);  color: var(--band-cracked); }
.mfs-tier--glass    { background: var(--band-glass-soft);    color: var(--band-glass); }

.matchup-row-edge {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-muted);
  text-align: center;
}
.matchup-row-edge-pct {
  color: var(--band-ironman);
  font-weight: 800;
}

.matchup-row-gap {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-muted);
  text-align: center;
}

/* Home team column — right-aligned */
.matchup-row-team--right {
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-end;
}

/* Center column */
.matchup-row-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 100px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-muted);
  cursor: pointer;
  transition: all .15s;
}
.matchup-row-center:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

.matchup-row-vs {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.matchup-row-tier-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.matchup-tier-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.matchup-tier-badge--ironman   { background: var(--band-ironman-soft);  color: var(--band-ironman);  border: 1px solid rgba(16,185,129,.35); }
.matchup-tier-badge--steel      { background: var(--band-steel-soft);    color: var(--band-steel);    border: 1px solid rgba(34,197,94,.35); }
.matchup-tier-badge--oak        { background: var(--band-oak-soft);      color: var(--band-oak);      border: 1px solid rgba(234,179,8,.35); }
.matchup-tier-badge--chipped    { background: var(--band-chipped-soft);  color: var(--band-chipped);  border: 1px solid rgba(249,115,22,.35); }
.matchup-tier-badge--cracked    { background: var(--band-cracked-soft);  color: var(--band-cracked);  border: 1px solid rgba(220,38,38,.35); }
.matchup-tier-badge--glass      { background: var(--band-glass-soft);    color: var(--band-glass);    border: 1px solid rgba(153,27,27,.35); }
.matchup-tier-badge--titanium   { background: var(--band-ironman-soft);  color: var(--band-ironman);  border: 1px solid rgba(16,185,129,.35); }
.matchup-tier-badge--wet-tissue { background: var(--band-glass-soft);    color: var(--band-glass);    border: 1px solid rgba(153,27,27,.35); }

.matchup-row-drill {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-hover);
  white-space: nowrap;
  padding: 4px 12px;
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 10px;
  background: var(--accent-soft);
  transition: all .12s;
}
.matchup-row:hover .matchup-row-drill {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.matchup-row-meta {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--fg-muted);
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ---- Detail view -------------------------------------------- */
.matchup-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 100%;
  overflow-x: hidden;
  padding: 4px 0;
}

.matchup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: hidden;
}
.matchup-header-back {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.matchup-header-back:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
.matchup-header-share {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.matchup-header-share:hover { color: var(--accent-hover); border-color: var(--accent); background: var(--accent-soft); }
.matchup-header-week {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Detail team block */
.matchup-team-block {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-left: 4px solid var(--team-accent);
  cursor: pointer;
  transition: all .15s;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.matchup-team-block:hover {
  background: var(--bg-surface);
  border-color: var(--team-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.matchup-team-block--home {
  flex-direction: row-reverse;
  border-left: none;
  border-right: 4px solid var(--team-accent);
  text-align: right;
}
.matchup-team-logo  { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.matchup-team-info  { min-width: 0; flex: 1; }
.matchup-team-name  {
  font-size: 17px;
  font-weight: 800;
  color: var(--fg-primary);
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matchup-team-code  {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: .04em;
  display: block;
}
.matchup-team-pct,
.matchup-team-frailty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 64px;
}
.matchup-team-block--home .matchup-team-frailty-block {
  align-items: center;
}
.matchup-team-frailty-score {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.matchup-team-frailty-tier {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 6px;
}
.matchup-team-frailty-tier--ironman  { background: var(--band-ironman-soft);  color: var(--band-ironman); }
.matchup-team-frailty-tier--steel    { background: var(--band-steel-soft);    color: var(--band-steel); }
.matchup-team-frailty-tier--oak      { background: var(--band-oak-soft);      color: var(--band-oak); }
.matchup-team-frailty-tier--chipped  { background: var(--band-chipped-soft);  color: var(--band-chipped); }
.matchup-team-frailty-tier--cracked  { background: var(--band-cracked-soft);  color: var(--band-cracked); }
.matchup-team-frailty-tier--glass    { background: var(--band-glass-soft);    color: var(--band-glass); }

.matchup-team-edge { color: var(--band-ironman); }
.matchup-team-weak { color: var(--fg-muted); }

/* Completed-game winner/loser */
.matchup-team-block--winner {
  box-shadow: 0 0 0 2px rgba(34,197,94,.35), 0 1px 6px rgba(34,197,94,.1);
  background: rgba(34,197,94,.04);
}
.matchup-team-block--loser {
  opacity: .65;
}
.matchup-team-score {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-muted);
  margin-top: 2px;
}
.matchup-team-score--win { color: #16a34a; }
.matchup-team-score--loss { color: var(--fg-muted); }

.matchup-teams-final {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--bg-muted);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  margin-top: 6px;
}

/* Matchup list view winner highlight */
.matchup-row-team--winner {
  border-left: 3px solid #16a34a;
  padding-left: 9px;
}

.matchup-teams {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.matchup-teams-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.matchup-teams-vs-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 80px;
}
.matchup-teams-vs {
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.matchup-health-edge-label {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Durability edge split meter — away vs home share of the model edge */
.matchup-edge-meter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}
.matchup-edge-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.matchup-edge-meter-side {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.matchup-edge-meter-side--away { color: var(--accent-hover); }
.matchup-edge-meter-side--home { color: #34d399; }
.matchup-edge-meter-bar {
  display: flex;
  height: 14px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-muted);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
}
.matchup-edge-meter-fill { height: 100%; transition: width .5s ease; }
.matchup-edge-meter-fill--away {
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 8px 0 0 8px;
}
.matchup-edge-meter-fill--home {
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 0 8px 8px 0;
}
.matchup-edge-meter-caption {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: .02em;
}

/* Risk alert */
.matchup-risk-alert {
  background: var(--danger-soft);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
}
.matchup-risk-alert-icon { font-size: 20px; flex-shrink: 0; }

/* Section label */
.matchup-section-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
  padding-left: 4px;
  margin-top: 2px;
}

/* Health meter */
.matchup-health-meter {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.matchup-meter-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.matchup-meter-team {
  display: grid;
  grid-template-columns: 52px 1fr 56px 120px;
  gap: 16px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: 6px 0;
}
.matchup-meter-team > * { min-width: 0; overflow: hidden; }
.matchup-meter-code {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color .12s, background .12s;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
.matchup-meter-code:hover { color: var(--accent-hover); background: var(--accent-soft); }

.matchup-meter-bar-wrap {
  position: relative;
  height: 22px;
  border-radius: 11px;
  background: var(--bg-muted);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
.matchup-meter-bar-fill {
  height: 100%;
  border-radius: 11px;
  transition: width .5s ease;
}
.matchup-meter-bar-fill--ironman { background: linear-gradient(90deg, var(--band-ironman), #34d399); }
.matchup-meter-bar-fill--steel    { background: linear-gradient(90deg, var(--band-steel), #a3e635); }
.matchup-meter-bar-fill--oak      { background: linear-gradient(90deg, var(--band-oak), #facc15); }
.matchup-meter-bar-fill--chipped  { background: linear-gradient(90deg, var(--band-chipped), #fb923c); }
.matchup-meter-bar-fill--cracked  { background: linear-gradient(90deg, var(--band-cracked), #f87171); }
.matchup-meter-bar-fill--glass    { background: linear-gradient(90deg, #ef4444, #dc2626); }
.matchup-meter-bar-fill--titanium { background: linear-gradient(90deg, var(--band-ironman), #34d399); }
.matchup-meter-bar-fill--wet      { background: linear-gradient(90deg, var(--band-chipped), #fb923c); }

.matchup-meter-bar-scale {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 9px;
  color: rgba(255,255,255,.2);
  align-items: center;
  pointer-events: none;
}

.matchup-meter-value {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.matchup-meter-tier {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 12px;
  border-radius: 10px;
  text-align: center;
}
.matchup-meter-tier--ironman { background: var(--band-ironman-soft); color: var(--band-ironman); }
.matchup-meter-tier--steel    { background: var(--band-steel-soft);   color: var(--band-steel);   }
.matchup-meter-tier--oak      { background: var(--band-oak-soft);     color: var(--band-oak);     }
.matchup-meter-tier--chipped  { background: var(--band-chipped-soft); color: var(--band-chipped); }
.matchup-meter-tier--cracked  { background: var(--band-cracked-soft); color: var(--band-cracked); }
.matchup-meter-tier--glass    { background: var(--band-glass-soft);   color: var(--band-glass);   }
.matchup-meter-tier--titanium { background: var(--band-ironman-soft); color: var(--band-ironman); }
.matchup-meter-tier--wet-tissue { background: var(--band-glass-soft); color: var(--band-glass); }

.matchup-meter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--fg-muted);
  align-items: center;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.matchup-meter-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 3px;
}
.matchup-meter-dot--ironman  { background: var(--band-ironman); }
.matchup-meter-dot--steel    { background: var(--band-steel);   }
.matchup-meter-dot--oak      { background: var(--band-oak);     }
.matchup-meter-dot--chipped  { background: var(--band-chipped); }
.matchup-meter-dot--cracked  { background: var(--band-cracked); }
.matchup-meter-dot--glass    { background: var(--band-glass);   }
.matchup-meter-dot--titanium { background: var(--band-ironman); }
.matchup-meter-dot--wet      { background: var(--band-glass);   }

/* Jenga pillars */
.matchup-jenga {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.matchup-jenga-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.matchup-jenga-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.matchup-jenga-team-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .12s;
}
.matchup-jenga-team-label:hover { color: var(--accent-hover); }
.matchup-jenga-team-avg {
  font-size: 12.5px;
  color: var(--fg-muted);
  font-weight: 600;
}
.matchup-jenga-player {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: all .15s;
}
.matchup-jenga-player:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.matchup-jenga-player.is-critical { border-color: rgba(239,68,68,.4); background: var(--danger-soft); }
.matchup-jenga-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.matchup-jenga-player-name { font-size: 15px; font-weight: 700; color: var(--fg-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchup-jenga-player-pos  { font-size: 13px; color: var(--fg-muted); font-weight: 700; flex-shrink: 0; }
.matchup-jenga-player-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.matchup-jenga-frailty {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.matchup-jenga-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
}
.matchup-jenga-badge--critical    { background: var(--band-glass-soft);    color: var(--band-glass);    }
.matchup-jenga-badge--high        { background: var(--band-cracked-soft);  color: var(--band-cracked);  }
.matchup-jenga-badge--elevated    { background: var(--band-elevated-soft); color: var(--band-elevated); }
.matchup-jenga-badge--trusted     { background: var(--band-trusted-soft);  color: var(--band-trusted);  }
.matchup-jenga-badge--bulletproof { background: var(--band-ironman-soft);  color: var(--band-ironman);  }

.matchup-jenga-player-load {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.matchup-jenga-load-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-surface);
  overflow: hidden;
}
.matchup-jenga-load-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .3s ease;
}
.matchup-jenga-load-label {
  font-size: 12.5px;
  color: var(--fg-muted);
  font-weight: 600;
}

/* Recommendation Engine */
.matchup-recs {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.matchup-recs-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.matchup-rec {
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  overflow-wrap: break-word;
  word-break: break-word;
}
.matchup-rec--danger { border-color: rgba(239,68,68,.3); background: var(--danger-soft); color: var(--danger); }
.matchup-rec--warn   { border-color: rgba(245,158,11,.3); background: var(--warning-soft); color: var(--warning); }
.matchup-rec--info   { border-color: rgba(59,130,246,.3); background: var(--accent-soft); color: var(--accent-hover); }

/* ---- Factor Breakdown (matchup detail) ------------------------- */
.matchup-factors {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.matchup-factors-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-muted);
}
.matchup-factors-sub {
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.6;
}
.matchup-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.matchup-factor {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.matchup-factor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.matchup-factor-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
}
.matchup-factor-weight {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg-muted);
  padding: 3px 10px;
  border-radius: 10px;
}
.matchup-factor-vals {
  display: flex;
  align-items: center;
  gap: 12px;
}
.matchup-factor-val {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.matchup-factor-team {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.matchup-factor-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.matchup-factor-vs {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.matchup-factor-adv {
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
}
.matchup-factor-adv--away { background: rgba(59,130,246,.1); color: var(--accent-hover); }
.matchup-factor-adv--home { background: rgba(16,185,129,.1); color: var(--band-ironman); }
.matchup-factor-detail {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.45;
}
.matchup-factors-formula {
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.65;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  border: 1px solid var(--border);
  word-break: break-word;
  overflow-wrap: break-word;
}
.matchup-factors-formula code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,.06);
  padding: 1px 5px;
  border-radius: 3px;
  word-break: break-all;
}


/* ---- Position Group Durability Breakdown (matchup detail) ---------- */
.matchup-pos-breakdown {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.matchup-pos-header {
  display: grid;
  grid-template-columns: 120px 1fr 48px 1fr 80px;
  gap: 12px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-muted);
}

.matchup-pos-row {
  display: grid;
  grid-template-columns: 120px 1fr 48px 1fr 80px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.matchup-pos-row:last-child { border-bottom: none; }
.matchup-pos-row > * { min-width: 0; overflow: hidden; }

.matchup-pos-label-col {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matchup-pos-team-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.matchup-pos-delta-col {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg-primary);
  text-align: center;
  flex-shrink: 0;
}

.matchup-pos-adv-col {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.matchup-pos-adv--away { background: rgba(59,130,246,.1); color: var(--accent-hover); }
.matchup-pos-adv--home { background: rgba(16,185,129,.1); color: var(--band-ironman); }

.matchup-pos-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.matchup-pos-meter-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-muted);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}

.matchup-pos-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}
.matchup-pos-meter-fill.score-ironman { background: var(--band-ironman); }
.matchup-pos-meter-fill.score-steel   { background: var(--band-steel); }
.matchup-pos-meter-fill.score-oak     { background: var(--band-oak); }
.matchup-pos-meter-fill.score-chipped { background: var(--band-chipped); }
.matchup-pos-meter-fill.score-cracked { background: var(--band-cracked); }
.matchup-pos-meter-fill.score-glass   { background: var(--band-glass); }

.matchup-pos-meter-val {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.matchup-pos-meter-cnt {
  font-size: 11px;
  color: var(--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.matchup-pos-na {
  font-size: 14px;
  color: var(--fg-muted);
  font-weight: 600;
}

/* ---- Full Player Report (matchup detail) ---------------------------- */
.matchup-player-report {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.matchup-plr-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.matchup-plr-head-code {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
  background: var(--bg-surface);
  padding: 10px 18px;
  text-align: center;
}

.matchup-plr-scroll {
  max-height: 520px;
  overflow-y: auto;
}

.matchup-plr-table { width: 100%; border-collapse: collapse; }
.matchup-plr-table tr { border-bottom: 1px solid var(--border); }
.matchup-plr-table tr:last-child { border-bottom: none; }

.matchup-plr-cell {
  width: 50%;
  padding: 10px 16px;
  vertical-align: top;
  border-right: 1px solid var(--border);
}
.matchup-plr-cell:last-child { border-right: none; }
.matchup-plr-empty { width: 50%; padding: 10px 16px; border-right: 1px solid var(--border); }
.matchup-plr-empty:last-child { border-right: none; }

.matchup-plr-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.matchup-plr-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matchup-plr-pos {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  background: var(--bg-muted);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.matchup-plr-bot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.matchup-plr-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--bg-muted);
  border-radius: 3px;
  overflow: hidden;
  min-width: 30px;
}

.matchup-plr-bar {
  height: 100%;
  border-radius: 3px;
  min-width: 3px;
}
.matchup-plr-bar.score-ironman { background: var(--band-ironman); }
.matchup-plr-bar.score-steel   { background: var(--band-steel); }
.matchup-plr-bar.score-oak     { background: var(--band-oak); }
.matchup-plr-bar.score-chipped { background: var(--band-chipped); }
.matchup-plr-bar.score-cracked { background: var(--band-cracked); }
.matchup-plr-bar.score-glass   { background: var(--band-glass); }

.matchup-plr-score {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.matchup-plr-ppr {
  font-size: 11px;
  color: var(--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ---- Responsive: Matchups ----------------------------------- */
@media (max-width: 860px) {
  .matchup-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 18px;
  }
  .matchup-row-center {
    order: 2;
    flex-direction: row;
    gap: 10px;
    min-width: 0;
    padding: 8px 14px;
    flex-wrap: wrap;
  }
  .matchup-row-tier-row { flex-direction: row; gap: 6px; flex-wrap: wrap; }
  .matchup-row-drill { padding: 3px 10px; white-space: nowrap; }
  .matchup-row-team { order: 1; }
  .matchup-row-team--right {
    order: 3;
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
  }
  .matchup-row-team--right .matchup-row-pct { order: 1; }
  .matchup-row-pct { white-space: nowrap; }
  .matchup-row-meta { grid-column: 1; padding-top: 8px; }
  .matchup-meter-team { grid-template-columns: 40px 1fr 48px 100px; gap: 10px; }
  .matchup-teams-row { gap: 20px; }
}
@media (max-width: 720px) {
  .matchup-row { padding: 14px 14px; gap: 8px; }
  .matchup-explainer-summary { font-size: 12px; padding: 10px 14px; }
  .matchup-explainer-body { padding: 10px 14px 12px; }
  .matchup-explainer-body p { font-size: 12px; }
  .matchup-row-logo { width: 34px; height: 34px; }
  .matchup-team-logo { width: 40px; height: 40px; }
  .matchup-team-name { font-size: 15px; }
  .matchup-team-pct  { font-size: 22px; }
  .matchup-row-pct { font-size: 22px; min-width: 44px; }
  .matchup-jenga { grid-template-columns: 1fr; gap: 14px; }
  .matchup-meter-team { grid-template-columns: 36px 1fr 44px 84px; gap: 8px; }
  .matchup-meter-tier { font-size: 11px; padding: 3px 7px; }
  .matchup-meter-bar-scale { display: none; }
  .matchup-teams { padding: 20px 18px; }
  .matchup-team-block { padding: 16px 18px; gap: 10px; }
  .matchup-detail { gap: 18px; }
  .matchup-health-meter { padding: 18px 18px; }
  .matchup-recs { padding: 18px 18px; }
  .matchup-recs-title { margin-bottom: 0; }
  .matchup-factors { padding: 18px 18px; }
  .matchup-factors-grid { grid-template-columns: 1fr; }
  .matchup-factors-sub { font-size: 13px; }
  .matchup-pos-header,
  .matchup-pos-row { grid-template-columns: 90px 1fr 36px 1fr 64px; gap: 8px; }
  .matchup-pos-label-col { font-size: 13px; }
  .matchup-pos-meter-val { font-size: 13px; }
  .matchup-pos-delta-col { font-size: 15px; }
  .matchup-pos-adv-col { font-size: 11px; }
  .matchup-plr-head-code { font-size: 12px; padding: 8px 12px; }
  .matchup-plr-cell { padding: 8px 12px; }
  .matchup-plr-name { font-size: 13px; }
  .matchup-plr-score { font-size: 13px; }
  .matchup-teams-row { gap: 16px; }
  .matchup-team-frailty-score { font-size: 24px; }
  .matchup-meter-value { font-size: 17px; }
}
@media (max-width: 480px) {
  .matchup-row { padding: 12px 12px; gap: 6px; }
  .matchup-row-logo { width: 28px; height: 28px; }
  .matchup-row-team-name { font-size: 14px; }
  .matchup-row-pct { font-size: 20px; min-width: 38px; }
  .matchup-teams-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .matchup-teams-vs-wrap { order: 2; }
  .matchup-team-block--away { order: 1; }
  .matchup-team-block--home {
    order: 3;
    flex-direction: row;
    border-left: 4px solid var(--team-accent);
    border-right: none;
    text-align: left;
  }
  .matchup-team-block--home .matchup-team-frailty-block { align-items: center; }
  .matchup-team-pct { font-size: 20px !important; }
  .matchup-meter-team { grid-template-columns: 40px 1fr 48px; }
  .matchup-meter-tier { display: none; }
  .matchup-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .matchup-header-back,
  .matchup-header-share { align-self: center; }
  .matchup-teams { padding: 16px 14px; gap: 12px; }
  .matchup-team-block { padding: 14px 14px; gap: 8px; }
  .matchup-team-name { font-size: 14px; max-width: 100%; }
  .matchup-team-frailty-score { font-size: 22px; }
  .matchup-health-meter { padding: 16px 14px; gap: 14px; }
  .matchup-meter-label { font-size: 12px; }
  .matchup-recs { padding: 16px 14px; }
  .matchup-rec { font-size: 13px; padding: 8px 10px; }
  .matchup-factors { padding: 16px 14px; }
  .matchup-factor-num { font-size: 15px; }
  .matchup-factors-formula { font-size: 11px; word-break: break-word; overflow-wrap: break-word; }
  .matchup-meter-legend { font-size: 11px; gap: 8px; word-break: break-word; }
  .matchup-jenga { grid-template-columns: 1fr; gap: 12px; }
  .matchup-jenga-card { padding: 14px 14px; }
  .matchup-jenga-player { padding: 10px 12px; gap: 8px; }
  .matchup-jenga-player-name { font-size: 14px; max-width: 100%; }
  .matchup-pos-header,
  .matchup-pos-row { grid-template-columns: 70px 1fr 28px 1fr 52px; gap: 6px; }
  .matchup-pos-label-col { font-size: 12px; }
  .matchup-pos-meter-cnt { display: none; }
  .matchup-pos-meter-val { font-size: 12px; }
  .matchup-pos-delta-col { font-size: 13px; }
  .matchup-pos-adv-col { font-size: 10px; padding: 2px 4px; }
  .matchup-pos-breakdown { padding: 12px 14px; }
  .matchup-plr-head-code { font-size: 11px; padding: 6px 10px; }
  .matchup-plr-cell { padding: 6px 8px; }
  .matchup-plr-name { font-size: 12px; }
  .matchup-plr-score { font-size: 12px; }
  .matchup-plr-ppr { display: none; }
  .matchup-plr-scroll { max-height: 360px; }
  .matchup-teams-vs-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }
  .matchup-teams-edge { font-size: 12px; padding: 3px 8px; }
  .matchup-edge-meter-head { gap: 8px; }
  .matchup-edge-meter-side { font-size: 12px; }
  .matchup-edge-meter-bar { height: 12px; }
  .matchup-edge-meter-caption { font-size: 11px; }
  .matchup-detail { gap: 16px; }
  .matchup-factor-vals { gap: 8px; }
  .matchup-factor-val { padding: 8px 10px; }
  .matchup-section-label { font-size: 12px; margin-top: 0; }
  .matchup-jenga-head { border-bottom: none; padding-bottom: 0; }
}

/* ---- First-run onboarding popup --------------------------- */
.onboarding-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4000;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}
.onboarding-overlay.show {
  display: flex;
}
.onboarding-overlay.is-visible {
  opacity: 1;
}
.onboarding-popup {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  animation: popupIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.onboarding-popup-icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}
.onboarding-popup-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 10px;
  line-height: 1.3;
}
.onboarding-popup-body {
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.6;
  margin-bottom: 22px;
}
.onboarding-menu-icon-demo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 6px;
  margin: 0 2px;
}
.onboarding-menu-icon-demo span {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--fg-secondary);
}
.onboarding-popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 36px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.onboarding-popup-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}
.onboarding-popup-btn:active {
  transform: scale(0.97);
}

@keyframes popupIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 921px) {
  .onboarding-overlay { display: none !important; }
}