/* RotoBaller NFL Injury Predictor / Next Man Up
 * All rules scoped under .rb-injpred so host-theme table styles don't bleed in
 * (and ours don't leak out). Mirrors the Dynasty Trade Calculator look.
 */

.rb-injpred-host {
  width: 100%;
}

.rb-injpred,
.rb-injpred * {
  box-sizing: border-box;
}

/* Stop mobile browsers from auto-inflating ("boosting") our small table fonts.
   MUST be at the ROOT (html) to reliably disable Chrome/Safari text-autosizing —
   setting it only on a descendant is not honored. The loader also injects a
   <meta viewport> (see JS) since the bare fragment ships without one; together
   these keep the tool at its authored sizes on a phone. */
html,
body,
.rb-injpred {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.rb-injpred .rb-injpred-card {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  line-height: 1.5;
}

/* Header ------------------------------------------------------------------ */
.rb-injpred .rb-injpred-header {
  background: #006DC8; /* RotoBaller blue */
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.rb-injpred .rb-injpred-header h2 {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  margin: 0;
  font-size: 26px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

/* The page is a post: the theme draws a blue bar before every post H2
   (.single-post #content .entry h2::before — 5px border, 0.5em pad, 36.5px tall),
   which pushed the title right and down and made the banner 12px taller than
   the NFL tool's (a page). Not in the tool's banner. */
#content .entry .rb-injpred .rb-injpred-header h2::before,
#content .entry .rb-injpred .rb-injpred-header h2::after {
  content: none;
}

.rb-injpred .rb-injpred-header p {
  margin: 5px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.rb-injpred .rb-injpred-count {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Controls (search-first, then filters + toggles) ------------------------- */
.rb-injpred .rb-injpred-controls {
  background: #f8fafc;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.rb-injpred .rb-injpred-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.rb-injpred .rb-injpred-filter-label {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: #64748b;
}

.rb-injpred .rb-injpred-select,
.rb-injpred .rb-injpred-search {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1f2937;
  padding: 7px 10px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  outline: none;
}

/* Desktop filters: our own chevron with room to breathe, and a width that fits the full
   label ("All Positions", "Game-Time Decision") — native selects size the arrow into the
   text and Safari clips it. Mobile keeps its compact short-label selects (max-width rule). */
@media (min-width: 701px) {
  .rb-injpred .rb-injpred-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 150px;
    padding: 7px 36px 7px 12px;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none" stroke="%23475569" stroke-width="1.8"><path d="M1 1l5 5 5-5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 13px center;
  }
}

.rb-injpred .rb-injpred-select:focus,
.rb-injpred .rb-injpred-search:focus {
  border-color: #004d99;
  box-shadow: 0 0 0 2px rgba(0, 77, 153, 0.15);
}

/* Big, prominent, full-width search — the primary way to use the tool. */
.rb-injpred .rb-injpred-search {
  display: block;
  width: 100%;
  height: 48px;
  font-size: 17px;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 8px;
}

/* Search wrapper + collapsible-search controls. On desktop the search is the
   big always-visible bar and the icon/close button are hidden; mobile flips
   this (see the mobile media query). */
.rb-injpred .rb-injpred-searchwrap {
  position: relative;
}
.rb-injpred .rb-injpred-search-ic,
.rb-injpred .rb-injpred-search-x {
  display: none;
}

/* Table ------------------------------------------------------------------- */
.rb-injpred .rb-injpred-tablewrap {
  background: #ffffff;
  overflow-x: auto;
}

.rb-injpred table.rb-injpred-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  margin: 0;
  background: #ffffff;
  border: none;
}

.rb-injpred .rb-injpred-table thead tr {
  background: #f1f5f9;
}

.rb-injpred .rb-injpred-table thead th {
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #475569;
  padding: 12px 14px;
  border: none;
  border-bottom: 2px solid #e2e8f0;
  /* Two-line labels ("Injury / Start Date") sit tight; on phones the theme's
     30px line-height otherwise doubled the grey row to 67px (Alex, 2026-10-14). */
  line-height: 1.2;
}

.rb-injpred .rb-injpred-th {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  transition: color 0.12s ease;
}

.rb-injpred .rb-injpred-th:hover {
  color: #004d99;
}

.rb-injpred .rb-injpred-th.is-sorted {
  color: #004d99;
}

.rb-injpred .rb-injpred-th:focus-visible {
  outline: 2px solid #004d99;
  outline-offset: -2px;
}

.rb-injpred .rb-injpred-arrow {
  font-size: 10px;
}

.rb-injpred .rb-injpred-table tbody td {
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid #eef2f6;
  background: #ffffff;
  vertical-align: middle;
  font-size: 13px;
  color: #1f2937;
}

.rb-injpred .rb-injpred-row:hover td {
  background: #f8fafc;
}

/* Player cell */
.rb-injpred .rb-injpred-player {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rb-injpred .rb-injpred-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #004d99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
}

.rb-injpred .rb-injpred-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  padding: 2px;
  box-sizing: border-box;
  display: block;
}

/* Free agent / no-team placeholder shown in the avatar circle. */
.rb-injpred .rb-injpred-avatar-fa {
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* The host theme (SWIFT) injects per-element margins into .entry-content on
   mobile (e.g. a large, content-dependent margin-right on the avatar + name
   block), which knocks the player names out of alignment. Zero margins on the
   main rows' cell content so every name lines up under the avatar. (Detail cards are unaffected
   by the theme and keep their own margins.) */
.rb-injpred .rb-injpred-row > td,
.rb-injpred .rb-injpred-row > td * {
  margin: 0 !important;
}

.rb-injpred .rb-injpred-name-link {
  color: #111827;
  text-decoration: none;
}

.rb-injpred .rb-injpred-name-link:hover {
  color: #004d99;
  text-decoration: underline;
}

.rb-injpred .rb-injpred-avatar-up {
  width: 30px;
  height: 30px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
}

.rb-injpred .rb-injpred-name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #111827;
  line-height: 1.2;
}

.rb-injpred .rb-injpred-meta {
  font-size: 12px;
  color: #64748b;
}

/* Desktop shows the full name / full "time ago" — the mobile-only short variants
   below are hidden here and swapped in under the 700px breakpoint. */
.rb-injpred .rb-injpred-fn-init,
.rb-injpred .rb-injpred-ago-short,
.rb-injpred .rb-injpred-proj-abbr {
  display: none;
}

/* Status column: badge + header centered in the column (feedback #1). */
.rb-injpred .rb-injpred-td-status,
.rb-injpred .rb-injpred-table thead th[data-sort="status"] {
  text-align: center;
}

/* Status badge */
.rb-injpred .rb-injpred-status {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 5px;
}

/* Date columns: short values ("Oct 5", "Mid-Nov", "Day-to-Day") centered under the label. */
.rb-injpred .rb-injpred-td-start,
.rb-injpred .rb-injpred-td-return {
  text-align: center;
  white-space: nowrap;
}
.rb-injpred .rb-injpred-td-start {
  font-size: 13px;
  color: #475569;
}
.rb-injpred .rb-injpred-proj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2px;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
/* Reason text under the badge in the expanded card. */
.rb-injpred .rb-injpred-proj-detail {
  margin: 8px 0 2px;
  font-size: 12.5px;
  color: #334155;
}
.rb-injpred .rb-injpred-proj-detail-label {
  font-weight: 700;
  color: #0f172a;
}
.rb-injpred .rb-injpred-proj-reason {
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

.rb-injpred .rb-injpred-diag {
  font-size: 13px;
  color: #334155;
  text-align: center;
}

.rb-injpred .rb-injpred-td-return {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

/* Toggle button */
.rb-injpred .rb-injpred-td-toggle {
  text-align: center;
  width: 48px;
}

.rb-injpred .rb-injpred-toggle {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: #004d99;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  transition: background 0.15s ease;
}

.rb-injpred .rb-injpred-toggle:hover {
  background: #003a73;
}

.rb-injpred .rb-injpred-toggle.is-open {
  background: #003366;
}

/* Detail row -------------------------------------------------------------- */
.rb-injpred .rb-injpred-detail-row td {
  background: #f8fafc;
  padding: 0;
}

/* Plain padding wrapper. It used to be sticky + JS-width-synced for the old
   horizontal-scroll mobile table; the mobile card layout removed all sideways
   scroll, so it now just flows at the cell's natural width (which keeps the
   expanded section the same width as the row — no desktop shift). */
.rb-injpred .rb-injpred-detail-inner {
  padding: 16px;
  box-sizing: border-box;
}

.rb-injpred .rb-injpred-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rb-injpred .rb-injpred-detail-grid--single {
  grid-template-columns: 1fr;
}

/* Stack the two cards once the widget is too narrow to show them side by side. */
@media (max-width: 700px) {
  .rb-injpred .rb-injpred-detail-grid {
    grid-template-columns: 1fr;
  }
}

.rb-injpred .rb-injpred-detail-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
}

.rb-injpred .rb-injpred-detail-card h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #004d99;
  margin: 0 0 10px;
}

/* Non-sortable headers (Next Man Up, More Info) — base th look, no pointer. */
.rb-injpred .rb-injpred-th-static {
  cursor: default;
  white-space: nowrap;
}
.rb-injpred .rb-injpred-th-more {
  text-align: center;
}

/* Inline Next Man Up column cell (main table) */
.rb-injpred .rb-injpred-td-nmu {
  min-width: 150px;
}
.rb-injpred .rb-injpred-nmu-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rb-injpred .rb-injpred-avatar-cell {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  font-size: 9px;
}
.rb-injpred .rb-injpred-nmu-cell-txt {
  min-width: 0;
}
.rb-injpred .rb-injpred-nmu-cell-name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #111827;
  line-height: 1.15;
  white-space: nowrap;
}
.rb-injpred .rb-injpred-nmu-cell-tag {
  font-size: 11px;
  color: #059669;
  font-weight: 600;
  white-space: nowrap;
}
.rb-injpred .rb-injpred-nmu-none {
  color: #cbd5e1;
}

.rb-injpred .rb-injpred-nmu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rb-injpred .rb-injpred-nmu-name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

.rb-injpred .rb-injpred-nmu-meta {
  font-size: 12px;
  color: #64748b;
}

.rb-injpred .rb-injpred-tag {
  display: inline-block;
  background: #ecfdf5;
  color: #064e3b;
  border-left: 3px solid #10b981;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 4px 4px 0;
  margin-bottom: 8px;
}

.rb-injpred .rb-injpred-impact,
.rb-injpred .rb-injpred-note {
  font-size: 12.5px;
  color: #475569;
  margin: 0;
  line-height: 1.4;
}

.rb-injpred .rb-injpred-outlook {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.rb-injpred .rb-injpred-outlook-pill {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

.rb-injpred .rb-injpred-soft {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
}

.rb-injpred .rb-injpred-recur {
  margin-top: 8px;
  font-size: 12px;
  color: #475569;
}

/* Where the latest report came from (tweet / SportsDataIO / staff) */
.rb-injpred .rb-injpred-src {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.rb-injpred .rb-injpred-src-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e3a8a;
  margin-bottom: 4px;
}
.rb-injpred .rb-injpred-src-line {
  font-size: 12.5px;
  color: #334155;
}
.rb-injpred .rb-injpred-src-line strong {
  color: #0f172a;
}
.rb-injpred .rb-injpred-src-quote {
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

.rb-injpred .rb-injpred-muted {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0;
}

/* Footer + empty ---------------------------------------------------------- */
.rb-injpred .rb-injpred-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  font-size: 11.5px;
  color: #94a3b8;
}

.rb-injpred .rb-injpred-empty {
  padding: 28px 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.rb-injpred-unavailable {
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  font-family: "Outfit", sans-serif;
  text-align: center;
}

/* No tap-flash / sticky focus highlight; the row is tap-to-expand -------- */
.rb-injpred,
.rb-injpred * {
  -webkit-tap-highlight-color: transparent;
}

.rb-injpred .rb-injpred-row {
  cursor: pointer;
}

/* The whole summary row is a click target to expand; don't let a click select
   its text (that selection is the blue highlight that filled the first row).
   !important + descendants so a host-theme `user-select: text` can't re-enable
   it, and a transparent ::selection so even a forced selection stays invisible. */
.rb-injpred .rb-injpred-row,
.rb-injpred .rb-injpred-row * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* NUCLEAR: no text-selection highlight anywhere in the widget. Kills the blue
   highlight regardless of how a selection gets created or what host-page CSS
   does — selection simply paints nothing. */
.rb-injpred-host ::selection,
.rb-injpred-host *::selection,
.rb-injpred ::selection,
.rb-injpred *::selection {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

.rb-injpred-host ::-moz-selection,
.rb-injpred-host *::-moz-selection,
.rb-injpred ::-moz-selection,
.rb-injpred *::-moz-selection {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

.rb-injpred .rb-injpred-toggle:focus,
.rb-injpred .rb-injpred-name-link:focus {
  outline: none;
}

.rb-injpred .rb-injpred-toggle:focus-visible,
.rb-injpred .rb-injpred-name-link:focus-visible {
  outline: 2px solid #004d99;
  outline-offset: 2px;
}

/* Mobile: the SAME desktop table, shrunk to fit full screen width ---------- */
/* ==========================================================================
   MOBILE (≤700px) — a bigger, horizontally-scrollable data table (readable,
   NOT zoomed), with a frozen player column, a sticky one-line control bar, a
   collapsible search, and a compact hero. Rebuilt per team feedback (Alex).
   ========================================================================== */
@media (max-width: 700px) {
  /* The card's overflow:hidden makes it a scroll container, which breaks the
     sticky control bar (it would pin to the card, not the viewport). Drop it on
     mobile and round the hero/footer corners directly to keep the clipped look. */
  .rb-injpred .rb-injpred-card { overflow: visible; }

  /* --- Slim hero: small title, tight — the tool sits under the site header --- */
  .rb-injpred .rb-injpred-header {
    padding: 6px 12px;
    gap: 6px;
    border-radius: 8px 8px 0 0;
  }
  /* Extra-specific (add .rb-injpred-card) so the host theme's mobile h2 rule
     can't override our small hero title. */
  .rb-injpred .rb-injpred-card .rb-injpred-header h2 { font-size: 12px !important; letter-spacing: 0.3px !important; line-height: 1.2 !important; }
  .rb-injpred .rb-injpred-card .rb-injpred-header p { font-size: 8.5px !important; margin-top: 0 !important; }
  .rb-injpred .rb-injpred-card .rb-injpred-header .rb-injpred-count { font-size: 8.5px !important; padding: 2px 7px !important; }

  /* One-line control bar. NOT CSS-sticky: the JS fixed clone (setupPinnedHeader)
     pins the controls + column header together on scroll, the same as desktop and
     the Rankings tool. A sticky bar here kept its own top at 0, which starved the
     clone's pin threshold (controls never scrolled above navOffset -> never pinned). */
  .rb-injpred .rb-injpred-controls {
    padding: 6px 8px;
  }
  .rb-injpred .rb-injpred-filters {
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    overflow-x: auto;           /* safety valve on very narrow phones */
    scrollbar-width: none;
  }
  .rb-injpred .rb-injpred-filters::-webkit-scrollbar { display: none; }
  .rb-injpred .rb-injpred-filter-label { display: none; }

  /* magnifier icon that expands the search row */
  .rb-injpred .rb-injpred-search-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
  }
  .rb-injpred .rb-injpred-search-ic:active { background: #eef4fb; }

  /* compact selects share the remaining width; custom caret so short labels
     ("Pos"/"Team") aren't clipped by the native dropdown arrow */
  .rb-injpred .rb-injpred-select {
    height: 30px;
    font-size: 12px;
    flex: 0 0 auto;
    /* Cap width so a select sizes to its short placeholder ("Status"), not to
       its longest option ("Questionable") — keeps the whole bar on one line. */
    max-width: 82px;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="%23475569" stroke-width="1.6"><path d="M1 1l4 4 4-4"/></svg>');
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding: 4px 19px 4px 8px;
  }
  /* collapsible search: hidden until the icon is tapped */
  .rb-injpred .rb-injpred-searchwrap { display: none; margin-bottom: 8px; }
  .rb-injpred .rb-injpred-controls.search-open .rb-injpred-searchwrap { display: block; }
  .rb-injpred .rb-injpred-search {
    height: 42px;
    font-size: 16px; /* ≥16px avoids iOS focus-zoom */
    margin-bottom: 0;
    padding: 10px 42px 10px 14px;
  }
  .rb-injpred .rb-injpred-search-x {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }

  /* --- Mobile scroll model — matches the Rankings tool. The table is a HORIZONTAL
     scroller in normal PAGE FLOW with no vertical bound, so ordinary page scrolling
     passes through every row before you can scroll past the tool. The column header
     is pinned to the top of the viewport by the JS position:fixed clone
     (setupPinnedHeader) — the SAME mechanism the desktop uses. CSS position:sticky
     can't pin it here: the horizontal scroller's overflow-x forces overflow-y into
     a scroll value, and the theme's html{overflow-x:hidden} also kills page-level
     sticky. So the header is NOT sticky in CSS — the fixed clone owns the pin. */
  .rb-injpred .rb-injpred-tablewrap {
    overflow-x: auto;
    overflow-y: visible;            /* height auto -> the PAGE owns vertical scroll */
    max-height: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* don't chain horizontal scroll to the page */
  }
  /* The host theme auto-wraps our table in a .table-wrapper div with its own
     overflow; display:contents removes its box so OUR tablewrap is the single
     horizontal scroller (keeps the frozen column's sticky-left correct). */
  .rb-injpred .rb-injpred-tablewrap .table-wrapper {
    display: contents;
  }
  .rb-injpred table.rb-injpred-table {
    min-width: 0;
    width: auto;
    /* sticky-left (frozen column) needs separated borders; spacing:0 keeps the look */
    border-collapse: separate;
    border-spacing: 0;
  }
  .rb-injpred .rb-injpred-row > td,
  .rb-injpred .rb-injpred-table thead th {
    white-space: nowrap;
  }
  /* UNIFORM TYPE SCALE (professional/consistent): one size (10px) for the player
     name + every data value, one smaller size (8.5px) for headers, meta, badges.
     No more mixed 8/9/10/11px across columns. */
  .rb-injpred .rb-injpred-table thead th,
  .rb-injpred .rb-injpred-table tbody td {
    padding: 2.4px 8px !important;   /* row top/bottom padding -20% (feedback) */
    font-size: 12px !important;
    vertical-align: middle;
  }
  .rb-injpred .rb-injpred-table thead th { font-size: 10px !important; letter-spacing: 0.2px; }
  .rb-injpred .rb-injpred-td-start,
  .rb-injpred .rb-injpred-td-return { font-size: 12px !important; }
  .rb-injpred .rb-injpred-diag { font-size: 12px !important; }
  /* Status badge shrunk to a compact chip (feedback #6 — the colored shapes were
     chunkier than the Projected ones for the same kind of label). */
  .rb-injpred .rb-injpred-status { padding: 1px 5px !important; font-size: 9px !important; border-radius: 4px; }
  /* Projected Status: abbreviated tier stacked over the % to stay narrow. */
  .rb-injpred .rb-injpred-proj {
    flex-direction: column;
    gap: 0;
    padding: 2px 6px !important;
    line-height: 1.15;
  }
  .rb-injpred .rb-injpred-proj-tier { font-size: 10px !important; }
  /* The tag's margin out-specifies the row-cell margin:0 lock, like the meta below. */
  .rb-injpred .rb-injpred-nmu-cell-name { font-size: 12px !important; }
  .rb-injpred .rb-injpred-nmu-cell-tag { font-size: 9.5px !important; }
  .rb-injpred .rb-injpred-td-nmu .rb-injpred-nmu-cell-tag { margin-top: 8px !important; }
  /* The theme's phone line-height (30px, an id selector) beat the 1.0 these cells
     asked for: name<->POS/team 12px and NMU name<->tag 15px apart. !important
     line-heights + the margins above/below set them to ~6px / ~7px (Alex, 2026-10-14). */
  .rb-injpred .rb-injpred-ptext,
  .rb-injpred .rb-injpred-name,
  .rb-injpred .rb-injpred-meta,
  .rb-injpred .rb-injpred-nmu-cell-txt,
  .rb-injpred .rb-injpred-nmu-cell-name,
  .rb-injpred .rb-injpred-nmu-cell-tag,
  .rb-injpred .rb-injpred-td-return {
    line-height: 1.2 !important;
  }
  /* "Re-evaluated" over the window, two tight lines. */
  .rb-injpred .rb-injpred-ret-pre { display: block; }
  /* No team logo in the Next Man Up cell on mobile — the name carries it. */
  .rb-injpred .rb-injpred-avatar-cell { display: none; }
  .rb-injpred .rb-injpred-toggle { width: 21px; height: 21px; font-size: 14px; }

  /* Frozen PLAYER column: ~34% of the screen width (scales with the device) so
     names sit on one line and the meta (POS • TEAM • 9-Cat #N) isn't cut off, with
     px bounds so it stays sane on very small / very large phones. */
  .rb-injpred .rb-injpred-table thead th:first-child,
  .rb-injpred .rb-injpred-table tbody td.rb-injpred-td-player {
    /* min-width drives the actual width in auto table-layout; max() keeps a px
       floor on tiny phones while scaling to ~34% of the screen on normal ones. */
    /* Narrower now that the 9-Cat rank is hidden on mobile — reclaims horizontal
       space for the rest of the tool. */
    width: max(92px, 26vw);
    min-width: max(92px, 26vw);
    max-width: 126px;
    padding: 4px 5px 4px 8px !important;   /* row top/bottom padding -20% (feedback) */
    overflow: hidden;            /* clip — nothing leaks past the frozen column */
  }
  .rb-injpred .rb-injpred-player { gap: 5px; align-items: center; min-width: 0; }
  .rb-injpred .rb-injpred-ptext { min-width: 0; }  /* let the text block shrink */
  /* Mobile swaps the space-saving variants in: initial first name + compact
     "time ago". (Body part now shows in full — abbreviations weren't intuitive.) */
  .rb-injpred .rb-injpred-fn-full,
  .rb-injpred .rb-injpred-ago-full,
  .rb-injpred .rb-injpred-proj-full { display: none; }
  .rb-injpred .rb-injpred-fn-init,
  .rb-injpred .rb-injpred-ago-short,
  .rb-injpred .rb-injpred-proj-abbr { display: inline; }
  /* No team logo on mobile at all — the left avatar is hidden and there is no
     inline logo. The team abbreviation on the meta line carries the team. */
  .rb-injpred .rb-injpred-td-player .rb-injpred-avatar-left { display: none; }
  /* Name: bigger now that the first name is an initial. WRAP at word boundaries,
     capped at 2 lines (ellipsis beyond) — never clip mid-word. white-space:normal
     overrides the nowrap the row cells inherit. */
  .rb-injpred .rb-injpred-name {
    font-size: 14px !important;
    font-weight: 600;
    margin-bottom: 0;   /* tight gap to the team/pos row (feedback) */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Meta: always a single line (ellipsis if long) — so the cell is ≤3 lines. */
  /* The meta's margin MUST out-specify the theme's `.rb-injpred-row > td * {margin:0!important}`
     lock — the .rb-injpred-td-player .rb-injpred-meta selector (0,3,0) beats it. */
  .rb-injpred .rb-injpred-meta {
    font-size: 11.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rb-injpred .rb-injpred-td-player .rb-injpred-meta { margin-top: 6.5px !important; }
  /* 9-Cat rank hidden on mobile (declutter + lets the player column be narrower). */
  .rb-injpred .rb-injpred-meta-rank { display: none; }

  /* keep the player cell left-justified against the theme's mobile centering */
  .rb-injpred .rb-injpred-table tbody td.rb-injpred-td-player,
  .rb-injpred .rb-injpred-name,
  .rb-injpred .rb-injpred-meta {
    text-align: left !important;
  }

  /* --- Frozen player column --- native sticky-left on both the body cells and the
     header corner (all relative to our panel now that .table-wrapper is neutralized). */
  .rb-injpred .rb-injpred-table tbody td.rb-injpred-td-player {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ffffff;
  }
  /* Edge shadow appears ONLY once the table is actually scrolled right — on load
     the frozen column reads like a normal column, giving Status room to breathe. */
  .rb-injpred .rb-injpred-tablewrap.is-hscrolled .rb-injpred-table thead th:first-child,
  .rb-injpred .rb-injpred-tablewrap.is-hscrolled .rb-injpred-table tbody td.rb-injpred-td-player {
    box-shadow: 6px 0 6px -4px rgba(15, 23, 42, 0.18);
  }
  /* Header corner (Player label): frozen-left so it stays put during horizontal
     scroll (the vertical pin is the JS fixed clone, not CSS sticky). */
  .rb-injpred .rb-injpred-table thead th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 7;
    background: #f1f5f9;
  }
  .rb-injpred .rb-injpred-row:hover td.rb-injpred-td-player {
    background: #f8fafc;
  }

  /* detail cards stack; keep them pinned in view while the table scrolls right */
  .rb-injpred .rb-injpred-detail-grid {
    grid-template-columns: 1fr;
  }
  /* High specificity so it beats the generic mobile `tbody td` padding rule. */
  .rb-injpred .rb-injpred-table tbody td.rb-injpred-detail-cell {
    padding: 0 !important;
  }
  /* Card must stretch to the full inner width (grid item wasn't filling). */
  .rb-injpred .rb-injpred-detail-grid { width: 100% !important; }
  .rb-injpred .rb-injpred-detail-card { width: 100% !important; box-sizing: border-box; }
  /* Foldout fills the FULL screen width (pinned to the viewport's left edge so it
     stays put while the table scrolls horizontally). It's a subtly tinted "tray"
     so the white cards read as clean cards on it (feedback #8 — the old faint
     border on white looked floaty); its padding insets the cards off the edges. */
  .rb-injpred .rb-injpred-detail-inner {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100vw;   /* JS overrides to the exact visible table width (sizeDetails) */
    padding: 10px !important;
    background: #eef2f7;
    box-sizing: border-box;
  }
  .rb-injpred .rb-injpred-detail-grid { gap: 10px; }

  /* Expanded FOLDOUT cards: scaled to the compact mobile table but a touch bigger
     than the rows so the detail text is comfortably readable — headings ~12px,
     body ~11px, small labels/badges ~9-10px. !important so nothing re-inflates. */
  .rb-injpred .rb-injpred-detail-card {
    padding: 12px 14px !important;
    border-radius: 10px;
    border: none !important;                       /* the faint border read as floaty */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);  /* soft lift off the tray instead */
  }
  /* More Info / expanded cards — bumped up a notch; the text read too small. */
  .rb-injpred .rb-injpred-detail-card h3 { font-size: 13.5px !important; margin: 0 0 9px !important; }
  .rb-injpred .rb-injpred-note { font-size: 13px !important; line-height: 1.4 !important; }
  .rb-injpred .rb-injpred-outlook { gap: 7px !important; }
  .rb-injpred .rb-injpred-outlook-pill { font-size: 12px !important; padding: 5px 11px !important; }
  .rb-injpred .rb-injpred-soft { font-size: 11px !important; padding: 3px 8px !important; }
  .rb-injpred .rb-injpred-recur { font-size: 12px !important; margin-top: 7px !important; }
  .rb-injpred .rb-injpred-src { margin-top: 9px !important; padding-top: 9px !important; }
  .rb-injpred .rb-injpred-src-label { font-size: 10.5px !important; }
  .rb-injpred .rb-injpred-src-line { font-size: 13px !important; }
  .rb-injpred .rb-injpred-src-quote { font-size: 12px !important; }
  .rb-injpred .rb-injpred-nmu { margin-bottom: 9px !important; gap: 8px !important; }
  .rb-injpred .rb-injpred-nmu .rb-injpred-avatar-up { width: 28px !important; height: 28px !important; font-size: 10px !important; }
  .rb-injpred .rb-injpred-nmu-name { font-size: 13.5px !important; }
  .rb-injpred .rb-injpred-nmu-meta { font-size: 11.5px !important; }
  .rb-injpred .rb-injpred-tag { font-size: 11.5px !important; padding: 4px 9px !important; }
  .rb-injpred .rb-injpred-impact { font-size: 13px !important; line-height: 1.4 !important; }
  .rb-injpred .rb-injpred-muted { font-size: 13px !important; }
}

/* --- Pinned header bar (position:fixed clone; see setupPinnedHeader in the JS) ---
   Appended to <body> inside a .rb-injpred scope so all the tool styles apply. The
   theme's overflow:hidden disables position:sticky, so this fixed overlay reproduces
   the controls + column-labels at the top of the viewport while you scroll. Rules
   live at the end of the file so they win the cascade on both breakpoints. */
.rb-injpred .rb-injpred-pin-card {
  border-radius: 0;
  /* just a bottom lift so it reads as a floating bar, not the full card shadow */
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.28);
}
.rb-injpred .rb-injpred-pin-scroll {
  /* Must be overflow-x:auto (like the real table wrap) so the clone's frozen
     first column actually stays frozen while scrolling — overflow:hidden broke
     that and the header columns drifted out of alignment. Scrollbar hidden; the
     JS keeps it and the real table in lock-step in both directions. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* old Edge */
}
.rb-injpred .rb-injpred-pin-scroll::-webkit-scrollbar { display: none; } /* WebKit */
.rb-injpred-pin-placeholder { flex: 0 0 auto; }

/* Live updates: a row that changes while the page is open flashes once. */
.rb-injpred .rb-injpred-row.is-new > td {
  animation: rb-nbainj-flash 2.4s ease-out 1;
}
@keyframes rb-nbainj-flash {
  0% { background: #fef3c7; }
  100% { background: transparent; }
}
.rb-injpred .rb-injpred-src-line a {
  color: #004d99;
  font-weight: 600;
  text-decoration: none;
}