/* ── Injuries Screen ─────────────────────────────────────────── */

.inj-screen {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* .stub-screen's flex container uses align-items:flex-start (not the
     default stretch), so a child needs its own explicit width or it just
     shrinks to content width — first fix (settings.css-style) caught THIS by
     capping .inj-screen itself at --app-max-width. Real improvement, but it
     made the scroll owner and the centered-width element the same node
     again: past 900px, the dead margin was smaller but still there, still
     un-scrollable, same shape as the settings-screen bug this was modeled
     on before that one got the same second pass.
     This element now spans the full stub-screen width and owns the scroll;
     .inj-inner (below) is the centered reading column inside it.

     `height: 100%` removed 2026-09-18 — this element IS .stub-screen (see
     index.html: class="stub-screen inj-screen"), which already sizes itself
     correctly via position:fixed + explicit top/bottom (top clears the
     header/nav/league-bar). `height: 100%` on a fixed element resolves
     against the full VIEWPORT, ignoring that top offset, so the box rendered
     exactly the header's height taller than the real visible area below it.
     Content that still fit inside that oversized box never triggered
     overflow — no scrollbar, nothing below the true fold reachable. Exact
     same bug, same fix, as fantasy.css's #screen-fantasy (found and fixed
     the same day via a live user report there). */
}

.inj-inner {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Inherited align-items:flex-start problem, one level in now instead of
     one level out: without this, the search box/summary/list each shrink to
     their own content width inside .inj-inner. Same fix, same reason. */
  align-items: stretch;
}

@media (min-width: 1024px) {
  .inj-inner { max-width: 900px; }
}

/* ── Search bar ─────────────────────────────────────────────── */
.inj-search-wrap {
  padding: 12px 16px 8px;
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.inj-playoff-toggle {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.inj-playoff-toggle.active {
  background: var(--accent1);
  border-color: var(--accent1);
  color: var(--accent-fg, #fff);
}

.inj-search {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s;
}
html[dir="rtl"] .inj-search { direction: rtl; }
.inj-search::placeholder { color: var(--muted); }
.inj-search:focus { border-color: var(--accent1); }

/* ── Summary bar ────────────────────────────────────────────── */
.inj-summary {
  padding: 0 16px 10px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
html[dir="rtl"] /* ── Summary bar ────────────────────────────────────────────── */
.inj-summary { direction: rtl; }

/* ── Scrollable list ────────────────────────────────────────── */
.inj-list {
  /* No overflow/flex of its own — .inj-screen owns the scroll now. Left in
     place, this would clip and scroll its own content internally at
     .inj-inner's capped width, so .inj-screen (the actual full-width
     element) would never see any overflow to scroll — the exact bug this
     whole change exists to fix, recreated one element further in. This also
     means the search bar and summary no longer stay pinned while the list
     scrolls beneath them — the whole column now scrolls together. */
  padding: 0 12px 80px;
}

/* ── Team section ───────────────────────────────────────────── */
.inj-team-section {
  margin-bottom: 12px;
}

.inj-team-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
html[dir="rtl"] .inj-team-header { direction: rtl; }

.inj-team-logo {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.inj-team-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.inj-team-count {
  margin-right: auto;
  font-size: 11px;
  color: var(--muted);
  background: var(--bg-card2);
  border-radius: 10px;
  padding: 1px 7px;
}

/* ── Player row ─────────────────────────────────────────────── */
.inj-player-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(30,45,80,0.4);
}
html[dir="rtl"] .inj-player-row { direction: rtl; }

/* The name block carries the row: it takes the free space so the status pill
   is pushed to the far end, which is what makes the row read as a row rather
   than as a huddle against one edge. */
.inj-player-info {
  flex: 1;
  min-width: 0;
}
.inj-player-row:last-child { border-bottom: none; }

.inj-player-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  flex: 1;
}

.inj-player-name-link {
  cursor: pointer;
  width: fit-content;
}
.inj-player-name-link:hover { text-decoration: underline; }

.inj-reason {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.inj-reason-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 8px 3px 6px;
  background: rgba(96,165,250,0.1);
  border: 1px solid rgba(96,165,250,0.25);
  border-radius: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.inj-reason-chip:active { background: rgba(96,165,250,0.2); }
.inj-reason-chip:hover  { background: rgba(96,165,250,0.16); border-color: rgba(96,165,250,0.4); }

.inj-reason-text {
  font-size: 11px;
  color: rgba(147,197,253,0.9);
}

.inj-explain-icon {
  font-size: 13px;
  flex-shrink: 0;
  color: #6ea8e0;
  font-weight: 700;
}

.inj-explain-box {
  display: none;
  position: relative;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(224,231,255,0.85);
  background: rgba(59,130,246,0.07);
  border-right: 2px solid rgba(96,165,250,0.4);
  padding: 7px 28px 7px 10px;
  margin-top: 5px;
  border-radius: 0 6px 6px 0;
  max-width: 420px;
  word-break: break-word;
}
html[dir="rtl"] .inj-explain-box { direction: rtl; }
.inj-explain-box.open { display: block; }
.inj-explain-box.ltr {
  direction: ltr;
  text-align: left;
  border-right: none;
  border-left: 2px solid rgba(96,165,250,0.4);
  padding: 7px 10px 7px 28px;
}

.inj-explain-close {
  position: absolute;
  top: 5px;
  left: 6px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.inj-explain-close:hover,
.inj-explain-close:active { opacity: 1; }

.inj-explain-prof {
  font-weight: 700;
  color: #60a5fa;
  margin-left: 4px;
}

.inj-explain-loading {
  color: var(--muted);
  font-style: italic;
}

/* ── Status badges ──────────────────────────────────────────── */
.inj-status {
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.inj-status-out         { background: rgba(239,68,68,0.15);   color: #ef4444; }
.inj-status-doubtful    { background: rgba(249,115,22,0.15);  color: #f97316; }
.inj-status-questionable{ background: rgba(202,138,4,0.15);   color: #eab308; }
.inj-status-gtd         { background: rgba(34,197,94,0.12);   color: #22c55e; }
.inj-status-day-to-day  { background: rgba(34,197,94,0.12);   color: #22c55e; }
.inj-status-other       { background: rgba(107,127,168,0.15); color: #6b7fa8; }

/* ── Empty / loading ────────────────────────────────────────── */
.inj-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
  font-size: 14px;
}
html[dir="rtl"] /* ── Empty / loading ────────────────────────────────────────── */
.inj-empty { direction: rtl; }

.inj-el-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 32px;
  gap: 12px;
  text-align: center;
}
html[dir="rtl"] .inj-el-empty { direction: rtl; }

.inj-el-icon {
  font-size: 40px;
  margin-bottom: 4px;
}

.inj-el-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #f0f4ff);
  letter-spacing: 0.3px;
}

.inj-el-sub {
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  color: var(--muted, rgba(107,127,168,0.7));
  margin-bottom: 8px;
}

.inj-el-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}

.inj-el-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 20px;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.inj-el-btn:active { background: rgba(59,130,246,0.18); }
.inj-el-btn:hover  { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.4); }

.inj-el-btn-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #60a5fa;
  letter-spacing: 0.3px;
}

.inj-el-btn-sub {
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  color: rgba(147,197,253,0.7);
}

/* ── Light theme ────────────────────────────────────────────────
   Every colour below was picked for a dark card. On a pale one the
   status pills and the reason line wash out — measured between 1.8:1
   and 4.1:1 where the standard asks 4.5. Same hues, darker, so
   "out" still reads red and "day to day" still reads green. */
html[data-theme="light"] .inj-status-out          { color: #b91c1c; }
html[data-theme="light"] .inj-status-doubtful     { color: #c2410c; }
html[data-theme="light"] .inj-status-questionable { color: #92700a; }
html[data-theme="light"] .inj-status-gtd,
html[data-theme="light"] .inj-status-day-to-day   { color: #126d34; }
html[data-theme="light"] .inj-status-other        { color: #4a5568; }
html[data-theme="light"] .inj-reason-text         { color: #4a5568; }
html[data-theme="light"] .inj-explain-icon        { color: #1d4ed8; }

/* Dark theme: the per-team count and the "out" status were just under. */
html[data-theme="dark"] .inj-team-count   { color: #9aa8c4; }
html[data-theme="dark"] .inj-status-out   { color: #f47272; }

/* ── "What happened to him" — the second, quieter layer ────────────────────
   Deliberately NOT a second chip. The blue ⓘ chip above it is the one that
   teaches: it explains what the injury IS, and it has to stay the thing the
   eye lands on. This sits under it as a plain text control, so the hierarchy
   reads name → injury → the optional story, rather than two peers competing. */
.inj-story-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.inj-story-toggle:hover,
.inj-story-toggle:focus-visible { color: var(--text); }
.inj-story-toggle::after {
  content: " ›";
  display: inline-block;
  transition: transform 0.15s;
}
.inj-story-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }

/* Turned off once the server says there is nothing after all — the keyword
   gate lets some filler through, and a control that opens onto "no further
   detail" should stop advertising itself. */
.inj-story-toggle.inj-story-empty {
  opacity: 0.45;
  pointer-events: none;
  border-bottom-color: transparent;
}

.inj-story-box {
  display: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.9;
  background: rgba(120,120,120,0.08);
  border-right: 2px solid var(--muted);
  padding: 7px 10px;
  margin-top: 5px;
  border-radius: 0 6px 6px 0;
  max-width: 420px;
  word-break: break-word;
}
.inj-story-box.open { display: block; }
html[dir="rtl"] .inj-story-box { direction: rtl; }
html[dir="ltr"] .inj-story-box {
  direction: ltr;
  text-align: left;
  border-right: none;
  border-left: 2px solid var(--muted);
  border-radius: 6px 0 0 6px;
}