/* 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-page:     #060c1d;
  --bg-surface:  #0c1428;
  --bg-muted:    #111e38;
  --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:       #b91c1c;
  --band-severe-soft:  rgba(185, 28, 28, 0.18);
  --band-critical:     #991b1b;
  --band-critical-soft:rgba(153, 27, 27, 0.20);
  --radius:      10px;
  --radius-sm:   6px;
  --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 {
  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; }

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

.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;
}

/* 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;
}
.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;
  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; }

.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;
}
.card-header { margin-bottom: 14px; }
.card-title  { font-size: 16px; font-weight: 700; color: var(--fg-primary); }
.card-sub    { font-size: 14px; 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);
}

/* 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-low    { color: var(--success); }
.badge-medium { color: var(--warning); }
.badge-high   { color: var(--danger);  }
.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);}

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

.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: 14.5px;
}

/* ---- 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);
}
.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; }

.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;
}
.home-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0 0 12px;
}
.home-lead {
  font-size: 16px;
  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: 15px;
  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;
}
.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: 14px;
  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: 14px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin-bottom: 6px;
}
.breakthrough-disclaimer {
  font-size: 14.5px;
  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;
}
.info-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 8px;
}
.info-block p {
  font-size: 14.5px;
  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, 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;
}
.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: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 4px 0 0;
}
.stat-footnotes {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  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: 13.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: 14.5px;
  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: hidden;
  margin-top: 14px;
}
.rt-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) 60px 64px 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;
}
.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); }
.rt-name {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--fg-primary); min-width: 0;
}
.rt-name .rt-sub { color: var(--fg-muted); font-weight: 400; }
.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-prop { color: var(--fg-secondary); overflow-wrap: break-word; word-break: break-word; }
.rt-prop .rt-sub { color: var(--fg-muted); }
.rt-sub  { font-size: 14.5px; }
.rt-frailty.score-low    { color: var(--success); }
.rt-frailty.score-medium { color: var(--warning); }
.rt-frailty.score-high   { color: var(--danger);  }
.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);}
.results-footnote {
  font-size: 14.5px;
  color: var(--fg-muted);
  margin-top: 8px;
  text-align: right;
}

/* ---- 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;
}
.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;
}
.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-low    { color: var(--success); }
.leader-frailty.score-medium { color: var(--warning); }
.leader-frailty.score-high   { color: var(--danger);  }
.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);}

/* ---- 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;
}
.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;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-surface);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.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); }
.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: 14.5px;
  letter-spacing: .06em;
  text-align: center;
  padding: 2px 6px;
}
@media (max-width: 768px) {
  .risers-fallers-grid { grid-template-columns: 1fr; }
}

/* ---- Live ESPN odds card ----------------------------------- */
.odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.odds-card {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.odds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.odds-provider { font-weight: 600; }
.odds-team {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--bg-surface);
}
.odds-team.is-fav { box-shadow: 0 0 0 2px var(--accent) inset; }
.odds-team-logo  { width: 28px; height: 28px; object-fit: contain; }
.odds-team-text  { min-width: 0; }
.odds-team-name  {
  font-weight: 600; font-size: 14.5px; color: var(--fg-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.odds-team-meta  { font-size: 14px; color: var(--fg-muted); }
.odds-score      { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.odds-lines {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.odds-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--fg-secondary);
}
.odds-line span:last-child {
  font-weight: 600; color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.odds-team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.odds-team-tag {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}
.odds-team-tag--fav {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Per-market deep-link "Bet" pill next to spread / total / moneyline */
.odds-line-val { display: inline-flex; align-items: center; gap: 8px; }
.odds-line-bet {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid rgba(59, 130, 246, 0.35);
  text-decoration: none;
}
.odds-line-bet:hover { background: var(--accent); color: #fff; }

/* Game meta row — clean text labels in place of emoji icons */
.odds-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 14.5px;
  color: var(--fg-muted);
}
.odds-meta-item { display: inline-flex; gap: 6px; white-space: nowrap; }
.odds-meta-label {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  opacity: .75;
}
.odds-meta-value { color: var(--fg-secondary); }

/* ---- Team frailty comparison block ------------------------- */
.odds-frailty-cmp {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ofc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ofc-title { color: var(--fg-muted); font-weight: 700; }
.ofc-delta { color: var(--fg-primary); font-weight: 700; }
.ofc-row {
  display: grid;
  grid-template-columns: 1fr minmax(60px, 1.2fr) 1fr;
  gap: 10px;
  align-items: center;
}
.ofc-team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
}
.ofc-team:last-child { justify-content: flex-end; }
.ofc-code { color: var(--fg-muted); font-weight: 600; font-size: 14px; }
.ofc-score {
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.ofc-team.has-edge .ofc-score { font-size: 18px; }
.ofc-edge {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--band-trusted-soft);
  color: var(--band-trusted);
  border: 1px solid var(--band-trusted);
}
.ofc-bar {
  position: relative;
  height: 6px;
}
.ofc-bar-track {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    var(--band-elite)   0%,
    var(--band-trusted)  12.5%,
    var(--band-stable)   25%,
    var(--band-watch)    37.5%,
    var(--band-caution)  50%,
    var(--band-elevated) 62.5%,
    var(--band-high)     75%,
    var(--band-severe)   87.5%,
    var(--band-critical) 100%);
  opacity: .5;
  border-radius: 2px;
}
.ofc-bar-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--fg-primary);
  border: 2px solid var(--bg-muted);
  box-shadow: 0 0 0 1px var(--fg-primary);
}

/* ---- Model edge / suggested bet block ---------------------- */
.odds-edge {
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.odds-edge-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.odds-edge-label { color: var(--accent-hover); font-weight: 700; }
.odds-edge-units {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  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: 2px; }
.odds-edge-pick {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
}
.odds-edge-sub {
  font-size: 14.5px;
  color: var(--fg-muted);
  line-height: 1.4;
}
.odds-edge-bet {
  display: block;
  text-align: center;
  margin-top: 4px;
  padding: 7px 10px;
  background: #53d337;
  color: #000;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.odds-edge-bet:hover { filter: brightness(1.08); transform: translateY(-1px); }

.odds-dk-cta {
  display: block;
  text-align: center;
  margin-top: 2px;
  padding: 8px 12px;
  background: transparent;
  color: var(--fg-secondary);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.odds-dk-cta:hover { background: var(--bg-surface); color: var(--fg-primary); }

/* ---- Hazard table ------------------------------------------ */
.hazard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.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;
}
.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);
}
.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; }

/* ---- 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: 14px; color: var(--fg-muted); margin-top: 4px; }

.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;
}
.player-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--player-color);
}
.player-card-body { flex: 1; min-width: 0; }
.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;
}
.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 {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ---- 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;
}
.profile-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.profile-header-info { min-width: 0; }
.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;
}
.profile-header-meta {
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.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;
}
.profile-bio-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-bio-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.profile-bio-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- 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-low    { color: var(--success); }
.score-medium { color: var(--warning); }
.score-high   { color: var(--danger);  }
.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);}

.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-low    > span { background: var(--success); }
.progress-medium > span { background: var(--warning); }
.progress-high   > span { background: var(--danger);  }
.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);}

.threshold-info {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-top: 14px;
}

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

/* 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-low    { color: var(--success); }
.ar-medium { color: var(--warning); }
.ar-high   { color: var(--danger);  }
.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);}
.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: 14px;
  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: 14px;
  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);
}
.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: 13.5px;
  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: 14px;
  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: 13.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 20px 0 2px;
}
.report-context {
  font-size: 13.5px;
  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;
}
.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: 14px;
}
.report-row-lbl {
  color: var(--fg-muted);
  font-weight: 500;
}
.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;
}

/* 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: 14px;
  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 p {
  margin: 0;
  font-size: 14px;
  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: 14px;
  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: 14.5px;
  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: 14px; color: var(--fg-primary); }
/* Stance labels — compact text only */
.fb-stance {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.fb-low    { color: var(--success); }
.fb-medium { color: var(--warning); }
.fb-high   { color: var(--danger);  }
.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-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.fb-tile {
  background: var(--bg-surface);
  padding: 8px 10px;
  border-radius: 6px;
}
.fb-tile-wide { grid-column: 1 / -1; }
.fb-label {
  font-size: 14px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fb-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.fb-sub  { font-size: 13.5px; color: var(--fg-secondary); margin-top: 2px; }
.fb-copy { margin: 10px 0 0; font-size: 14px; 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;
}
@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;
}

.fr-slot-pos {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  color: white;
  background: #64748b;
}
.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-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* 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;
}

.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;
}
.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;
}
.fr-card-pos {
  font-weight: 700;
  color: var(--fg-secondary);
  letter-spacing: 0.03em;
}

.fr-card-score { text-align: right; }
.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;
}

/* Backup-player recommendation shown when the picked player lands in
   the caution / high bands. Sits below the main card inside the slot. */
.fr-backup {
  border: 1px dashed var(--border);
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.fr-backup-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;
}
.fr-backup-icon { font-size: 13.5px; line-height: 1; }
.fr-backup-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-backup-use-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.fr-backup-use-btn:active { opacity: 0.8; }
.fr-backup-body {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
}
.fr-backup-logo { width: 28px; height: 28px; object-fit: contain; }
.fr-backup-text { min-width: 0; }
.fr-backup-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-backup-meta {
  font-size: 14px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-backup-nums { display: flex; gap: 10px; }
.fr-backup-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}
.fr-backup-empty .fr-backup-head { color: var(--fg-muted); }
.fr-backup-empty .fr-backup-body { display: block; }
.fr-backup-num-val { font-size: 14.5px; font-weight: 800; line-height: 1; }
.fr-backup-num-lbl {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    position: static;
    height: auto;
    overflow: visible;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* Prevent nav links from wrapping — let them scroll horizontally
     so every tab stays accessible without crowding the viewport. */
  .nav-logo { padding: 0 8px 0 0; flex: 0 0 auto; }
  .nav-logo-mark { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
  .nav-logo-text { font-size: 15px; }
  .nav-logo-img { height: 30px; }
  .nav-section-label { display: none; }
  .nav-link { padding: 6px 10px; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
  .nav-loader { padding: 4px 8px; margin: 0; font-size: 14.5px; flex-shrink: 0; }
  .nav-loader-text { white-space: nowrap; }
  .sidebar-footer { display: none; }
  .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%;
  }
  .team-filters input,
  .search-controls input,
  .team-filters select,
  .search-controls select { 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;
  }

  .rt-row {
    grid-template-columns: 1.6fr 50px 70px 70px;
    grid-template-areas:
      "name pos team frailty"
      "prop prop prop risk";
    row-gap: 6px;
  }
  .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-row > span:not(.rt-name):not(.rt-pos):not(.rt-team):not(.rt-frailty):not(.rt-prop) {
    grid-area: risk; text-align: right;
  }

  /* Results table: allow horizontal scroll so populated rows
     never push the page wider than the viewport. */
  .results-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ---- 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-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-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; }   /* hide PPR to keep names readable */
  .fr-picker-footer { padding: 12px 18px; }
  .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; }

.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;
}
.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 strong { display: block; font-size: 15px; color: var(--fg-primary); }
.r25-name .rt-sub { font-size: 13.5px; color: var(--fg-muted); }
.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: 14px;
  color: var(--fg-secondary);
  margin-bottom: 6px;
}
.r25-meta strong { color: var(--fg-primary); font-weight: 600; }

.r25-impact {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.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;
}
.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: 14px;
  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; }
}


/* 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 1fr 64px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.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: 15px; line-height: 1.6; }

  /* ---- Text sizing for readability ------------------- */
  .card-title { font-size: 15px; }
  .card-sub { font-size: 13.5px; }
  .info-block-title { font-size: 14px; }
  .info-block p { font-size: 14px; line-height: 1.6; }
  .breakthrough-lead { font-size: 14px; }
  .breakthrough-tile p { 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) -------- */
  /* Drop the team column to give the name room */
  .results-table { margin-top: 16px; border-radius: var(--radius); }
  .rt-row {
    grid-template-columns: 1fr 50px 72px;
    grid-template-areas:
      "name pos frailty"
      "prop prop risk";
    gap: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
  }
  .rt-head { padding: 10px 14px; font-size: 14.5px; }
  .rt-name { font-size: 14px; font-weight: 600; }
  .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; }
  /* risk badge (the span after frailty in the original 8-col row)
     still maps to the risk area */
  .rt-row > span:not(.rt-name):not(.rt-pos):not(.rt-team):not(.rt-frailty):not(.rt-prop) {
    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: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "name value"
      "bar  bar";
    padding: 8px 0;
    gap: 4px 8px;
  }
  .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;
  }
  .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-backup { padding: 10px 12px; }
  .fr-backup-body { grid-template-columns: 32px 1fr auto; gap: 10px; }
  .fr-backup-logo { width: 32px; height: 32px; }
  .fr-backup-name { font-size: 14.5px; }
  .fr-backup-meta { font-size: 14.5px; }
  .fr-backup-nums { flex-direction: column; gap: 4px; align-items: flex-end; }
  .fr-backup-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: 13.5px; }
  .r25-impact { font-size: 14px; }
  .r25-team-meta { gap: 4px 10px; font-size: 13.5px; }

  /* ---- Odds card ------------------------------------- */
  .odds-team { grid-template-columns: 28px 1fr auto; gap: 8px; }
  .odds-team-logo { width: 24px; height: 24px; }

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

  /* ---- Misc button sizes for tap targets ------------- */
  .btn { padding: 9px 14px; font-size: 14.5px; }
}

/* ======================================================
   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; }

  /* Nav links in horizontal sidebar */
  .nav-link { padding: 6px 10px; font-size: 14px; gap: 6px; }
  .nav-logo-text { font-size: 14.5px; }

  /* 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; }

  /* 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 { grid-template-columns: 50px 1fr; gap: 10px; padding: 10px; }
  .fr-slot-pos { font-size: 13.5px; }
  .fr-card { padding: 10px; gap: 8px; }
  .fr-card-name { font-size: 13.5px; }
  .fr-card-meta { font-size: 14.5px; }
  .fr-card-score-num { font-size: 17px; }

  /* Results table — readable rows */
  .rt-row { padding: 12px 12px; font-size: 14.5px; }
  .rt-name { font-size: 13.5px; }
  .rt-frailty { font-size: 13.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 {
    font-size: 16px;
    width: 100%;
  }

  /* 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: 13.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; }

  /* 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, 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, 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: 10px; }
  .odds-card { padding: 14px 16px; }
  .odds-team { padding: 10px 0; }
  .odds-team-name { font-size: 14px; }
  .odds-team-meta { font-size: 13.5px; }

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

  /* Prevent any horizontal overflow on dynamically loaded content */
  .card { max-width: 100%; box-sizing: border-box; }

  /* Global search results — ensure table fits */
  .results-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 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: 13.5px; }
  .report-row-lbl { font-size: 13.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: 14px; }
}

@media (max-width: 420px) {
  /* Larger tap targets for the horizontal nav 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; }
  .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 64px;
    grid-template-areas:
      "name frailty"
      "pos  pos"
      "prop prop"
      "risk risk";
    gap: 6px;
    padding: 14px 12px;
  }
  .rt-name { font-size: 14px; font-weight: 700; }
  .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; }

  /* 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-backup { padding: 12px 14px; }
  .fr-backup-head { font-size: 14px; margin-bottom: 8px; }
  .fr-backup-body { grid-template-columns: 34px 1fr auto; gap: 10px; }
  .fr-backup-logo { width: 34px; height: 34px; }
  .fr-backup-name { font-size: 13.5px; }
  .fr-backup-meta { font-size: 13.5px; }
  .fr-backup-num-val { font-size: 14px; }
  .fr-backup-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; }
  .report-context { padding: 8px; gap: 6px; font-size: 14px; }
  .report-assessment { padding: 12px 14px; }
  .report-verdict { padding: 12px 14px; font-size: 14px; }
}

/* ======================================================
   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: 13.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 links in horizontal sidebar ---------------- */
  .sidebar { padding: 8px 10px; gap: 4px; }
  .nav-link { padding: 6px 8px; font-size: 14.5px; min-height: 36px; }
  .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-row {
    grid-template-columns: 1fr 58px;
    grid-template-areas:
      "name frailty"
      "pos  pos"
      "prop prop"
      "risk risk";
    gap: 4px;
    padding: 12px 10px;
  }
  .rt-name { font-size: 14.5px; }
  .rt-frailty { font-size: 14px; }
  .rt-pos { font-size: 14px; }
  .rt-prop { font-size: 14.5px; }

  /* ---- 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-card { padding: 12px 12px; }
  .odds-team { grid-template-columns: 24px 1fr auto; gap: 6px; padding: 8px 4px; }
  .odds-team-logo { width: 20px; height: 20px; }
  .odds-team-name { font-size: 14px; }
  .odds-team-meta { font-size: 13.5px; }
  .odds-line { font-size: 14.5px; }
  .odds-meta { gap: 4px 8px; font-size: 13.5px; }

  /* Frailty comparison row — let teams stack for readability */
  .ofc-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ofc-team:last-child { justify-content: flex-start; }
  .ofc-bar { display: none; }

  /* 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: 38px; height: 38px; font-size: 13.5px; }

  /* ---- Player report --------------------------------- */
  .score-value { font-size: 34px; }
  .profile-header { gap: 10px; }
  .profile-header-left { gap: 12px; }
  .profile-header-name { font-size: 16px; }
  .profile-header-meta { font-size: 13.5px; }
  .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: 13.5px; }

  /* ---- 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: 13.5px; }
}


/* ---- 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: 56px;
  height: 56px;
  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;
}
.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: 14.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.feature-nav-bullets {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 14px;
  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;
}
.gs-risk-label {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.gs-risk-desc {
  font-size: 14px;
  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); }

/* ---- 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: 14px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}
.gs-step-desc {
  font-size: 14.5px;
  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: 13.5px;
  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: 14.5px;
  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); }