/* ════════════════════════════════════════════════════════════════════════
   INJURIES SCREEN — the redesign (21.10.2026), from the approved prototype.
   A head like Live and Standings, three counters under a 2px rule, four
   filter tabs, and a card per team laid out in columns by the screen's own
   width. A status is a word and a shape (solid / half / empty square), so it
   reads without colour; ink is the only colour a row uses.
   Scoped to #screen-injuries; loaded after injuries.css, which it replaces.
   ════════════════════════════════════════════════════════════════════════ */

#screen-injuries .inj-inner {
  container-type: inline-size;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 20px clamp(10px, 3vw, 24px) 60px;
  color: var(--ds-ink); font-family: var(--ds-font);
}

/* ── Head ── */
.inj-head { margin-bottom: 20px; }
.inj-head-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inj-head h1 { margin: 0; font: 900 var(--ds-fd-80)/.92 var(--ds-font); letter-spacing: -.035em; color: var(--ds-ink); }
.inj-sub { margin: 0; font: 800 var(--ds-fs-17)/1.25 var(--ds-font); letter-spacing: .04em; color: var(--ds-ink2); }
@container (max-width: 999px) { .inj-head h1 { font-size: var(--ds-fd-64); } }
@container (max-width: 559px) {
  .inj-head { margin-bottom: 14px; }
  .inj-head h1 { font-size: 40px; line-height: 1; }
  .inj-sub { font-size: var(--ds-fs-14); letter-spacing: .02em; }
}

/* ── Search, my teams, playoff ── */
#screen-injuries .inj-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; }
#screen-injuries .inj-bar[hidden] { display: none; }
#screen-injuries .inj-search {
  flex: 1 1 240px; min-width: 0; min-height: var(--ds-h-field); padding: 0 14px;
  border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink);
  font: 600 var(--ds-fs-15) var(--ds-font);
}
#screen-injuries .inj-search::placeholder { color: var(--ds-ink2); opacity: 1; }
#screen-injuries .inj-search:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; border-color: var(--ds-ink); }
#screen-injuries .inj-mine,
#screen-injuries .inj-playoff-toggle {
  flex: none; min-height: var(--ds-h-field); padding: 0 16px;
  border: 1.5px solid var(--ds-ink); border-radius: 0; background: var(--ds-card); color: var(--ds-ink);
  font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer;
  transition: background var(--ds-t-ctrl) ease, color var(--ds-t-ctrl) ease;
}
#screen-injuries .inj-mine:hover,
#screen-injuries .inj-playoff-toggle:hover { background: var(--ds-soft); }
#screen-injuries .inj-mine.is-on,
#screen-injuries .inj-playoff-toggle.active { background: var(--ds-ink); color: var(--ds-card); }

/* ── Counters ── */
#screen-injuries .inj-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px;
  background: var(--ds-card); border-top: 2px solid var(--ds-ink); font: inherit; color: inherit; padding: 0;
}
#screen-injuries .inj-summary:empty { display: none; }
.inj-tile { padding: 14px 16px; border-inline-start: 1px solid var(--ds-line); }
.inj-tile:first-child { border-inline-start: 0; }
.inj-tile b { display: block; font: 800 40px/1 var(--ds-font-num); font-variant-numeric: tabular-nums; color: var(--ds-ink); }
.inj-tile span { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--ds-fs-13)/1.3 var(--ds-font); color: var(--ds-ink2); }
@container (max-width: 559px) {
  .inj-tile { padding: 12px 10px; }
  .inj-tile b { font-size: 32px; }
  .inj-tile span { font-size: var(--ds-fs-12); align-items: flex-start; }
}

/* ── The shapes: out / in doubt / expected ── */
.inj-shp { display: inline-block; flex: none; box-sizing: border-box; width: 13px; height: 13px; border: 2px solid var(--ds-ink); }
.inj-shp--out { background: var(--ds-ink); }
.inj-shp--doubt { background: linear-gradient(to right, var(--ds-ink) 50%, transparent 50%); }
html[dir="rtl"] .inj-shp--doubt { background: linear-gradient(to left, var(--ds-ink) 50%, transparent 50%); }

/* ── Filter tabs ── */
#screen-injuries .inj-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; margin-top: 8px; background: var(--ds-card); padding-inline: 16px; }
#screen-injuries .inj-filters:empty { display: none; }
.inj-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--ds-h-btn); padding: 0 14px;
  border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink);
  font: 700 var(--ds-fs-14) var(--ds-font); cursor: pointer;
  transition: background var(--ds-t-ctrl) ease, border-color var(--ds-t-ctrl) ease;
}
.inj-chip:hover { border-color: var(--ds-ink); }
.inj-chip.is-on { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.inj-chip.is-on .inj-shp { border-color: var(--ds-card); }
.inj-chip.is-on .inj-shp--out { background: var(--ds-card); }
.inj-chip.is-on .inj-shp--doubt { background: linear-gradient(to right, var(--ds-card) 50%, transparent 50%); }
html[dir="rtl"] .inj-chip.is-on .inj-shp--doubt { background: linear-gradient(to left, var(--ds-card) 50%, transparent 50%); }

/* ── Cards by team ── */
/* A grid, not CSS columns: with `columns` the browser re-balances the three columns every time a team card
   is opened or closed, so a card jumps to another column and a different team ends up under the finger
   (owner's screen recording, 26.10). In a grid every card keeps its own cell. */
#screen-injuries .inj-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 8px; padding: 0; }
@container (min-width: 700px)  { #screen-injuries .inj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { #screen-injuries .inj-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inj-team { margin: 0; padding: 0 16px 4px; background: var(--ds-card); }
.inj-th {
  display: flex; align-items: center; gap: 10px; min-height: 56px; list-style: none; cursor: pointer;
  border-bottom: 2px solid var(--ds-ink);
}
.inj-th::-webkit-details-marker { display: none; }
.inj-th::after {
  content: ""; width: 9px; height: 9px; margin-inline-start: 4px; margin-top: -3px;
  border: solid var(--ds-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.inj-team[open] > .inj-th::after { transform: rotate(-135deg); margin-top: 3px; }
.inj-th:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.inj-tname { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.inj-tname b { font: 800 16px/1.2 var(--ds-font); }
.inj-count { font: 600 var(--ds-fs-13)/1 var(--ds-font); color: var(--ds-ink2); white-space: nowrap; }
.inj-star { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ds-ink); font-size: 20px; cursor: pointer; }
.inj-star:hover { background: var(--ds-soft); }
.inj-star:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }

/* ── A player ── */
.inj-row { border-top: 1px solid var(--ds-line); }
.inj-row:first-of-type { border-top: 0; }
.inj-rowhd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pn st" "pn rt"; gap: 2px 12px; align-items: center;
  width: 100%; min-height: 64px; padding: 8px 0; border: 0; border-radius: 0; background: none; color: var(--ds-ink);
  font: inherit; text-align: start; cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.inj-rowhd:hover { background: color-mix(in srgb, var(--ds-ink) 5%, transparent); }
.inj-rowhd:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
.inj-pn { grid-area: pn; min-width: 0; }
.inj-pn b { display: block; font: 700 var(--ds-fs-15)/1.3 var(--ds-font); overflow-wrap: anywhere; }
.inj-pn small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 12.5px/1.35 var(--ds-font); color: var(--ds-ink2); }
.inj-st { grid-area: st; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font: 700 var(--ds-fs-13)/1.2 var(--ds-font); color: var(--ds-ink); white-space: nowrap; }
.inj-st--prob { color: var(--ds-ink2); }
.inj-rt { grid-area: rt; text-align: end; font: 700 var(--ds-fs-14)/1.2 var(--ds-font-num); font-variant-numeric: tabular-nums; font-style: normal; direction: ltr; unicode-bidi: isolate; }
.inj-rt--none { font: 600 12.5px/1.2 var(--ds-font); color: var(--ds-ink2); direction: inherit; }
html[dir="rtl"] .inj-rt { text-align: left; }
html[dir="rtl"] .inj-rt--none { text-align: left; direction: rtl; }
.inj-detail { padding: 0 0 14px; }
.inj-detail[hidden] { display: none; }
.inj-d-block { margin-bottom: 12px; }
.inj-d-block h3 { margin: 0 0 4px; font: 800 var(--ds-fs-12)/1.2 var(--ds-font); letter-spacing: .02em; color: var(--ds-ink2); }
.inj-d-block p { margin: 0; font: 500 var(--ds-fs-14)/1.6 var(--ds-font); color: var(--ds-ink); text-wrap: pretty; }
.inj-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--ds-h-btn); padding: 0 16px;
  border: 1.5px solid var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink);
  font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.inj-btn:hover { background: var(--ds-soft); }
.inj-btn--solid { background: var(--ds-ink); color: var(--ds-card); }
.inj-btn--solid:hover { background: var(--ds-ink); opacity: .9; }
html[dir="ltr"] .inj-flip { transform: scaleX(-1); }

/* ── Empty, error, loading ── */
#screen-injuries .inj-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; background: var(--ds-card); font: 600 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink2); }
.inj-error {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px;
  padding: 22px 24px; background: var(--ds-card); border: 1.5px solid var(--ds-live);
}
.inj-error p { margin: 0; font: 600 var(--ds-fs-15)/1.45 var(--ds-font); }
.inj-skel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 700px)  { .inj-skel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1100px) { .inj-skel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inj-skel-card { padding: 0 16px 4px; background: var(--ds-card); }
.inj-skel i, .inj-skel-card i {
  display: block; background: linear-gradient(90deg, var(--ds-line) 0%, var(--ds-card) 50%, var(--ds-line) 100%);
  background-size: 200% 100%; animation: lv-shim 1.2s linear infinite;
}
.inj-skel-card .h { height: 18px; width: 55%; margin: 19px 0; }
.inj-skel-card .r { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-top: 1px solid var(--ds-line); }
.inj-skel-card .r span { display: flex; flex-direction: column; gap: 8px; }
.inj-skel-card .a { height: 12px; width: 110px; }
.inj-skel-card .b { height: 10px; width: 70px; }
.inj-skel-card .c { height: 12px; width: 64px; }

/* ── EuroLeague: no public source, so where to look ── */
.inj-el-empty { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: var(--ds-card); border-top: 2px solid var(--ds-ink); }
.inj-el-empty h2 { margin: 0; font: 900 var(--ds-fs-24)/1.15 var(--ds-font); color: var(--ds-ink); }
.inj-el-empty p { margin: 0; font: 500 var(--ds-fs-15)/1.5 var(--ds-font); color: var(--ds-ink2); }
.inj-el-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.inj-el-btn {
  display: flex; flex-direction: column; gap: 2px; min-width: 180px; min-height: var(--ds-h-btn); padding: 10px 16px;
  border: 1.5px solid var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink); text-decoration: none;
  transition: background var(--ds-t-ctrl) ease;
}
.inj-el-btn:hover { background: var(--ds-soft); }
.inj-el-btn b { font: 800 var(--ds-fs-14)/1.2 var(--ds-font); }
.inj-el-btn span { font: 600 var(--ds-fs-12)/1.2 var(--ds-font); color: var(--ds-ink2); }

@media (prefers-reduced-motion: reduce) { .inj-skel i, .inj-skel-card i { animation: none; } }

/* A row opens on a tap: say so, and show it. */
.inj-hint { margin: 14px 0 10px; font: 600 var(--ds-fs-13, 13px)/1.5 var(--ds-font); color: var(--ds-ink2); }
.inj-rowhd { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "pn st chev" "pn rt chev"; }
.inj-chev { grid-area: chev; align-self: center; flex: none; width: 8px; height: 8px; margin-inline-start: 10px; border-inline-end: 2px solid var(--ds-ink2); border-bottom: 2px solid var(--ds-ink2); transform: rotate(45deg); transition: transform .15s; }
.inj-rowhd[aria-expanded="true"] .inj-chev { transform: rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .inj-chev { transition: none; } }