/* ===========================================================
   Minnesota Vikings — Injury Report (/injuries/)
   Availability-desk layout. Every selector on this page is
   prefixed with .inj- (or scoped to body.page-injuries) so it
   can never collide with another stylesheet on this site.
   =========================================================== */

body.page-injuries{
  /* ---- status palette (from the editorial brief) ---- */
  --inj-cleared:#2E7D5B;
  --inj-full:#5B8C5A;
  --inj-limited:#D8A31A;
  --inj-dnp:#C86B32;
  --inj-out:#B43737;
  --inj-unknown:#747782;
  --inj-purple:#4F2683;
  --inj-bg:#F6F4EF;

  /* ---- darkened text variants -------------------------------
     The palette above is designed for FILLS. Several of those
     hues do not reach 4.5:1 as text on a light background, so
     text uses these darker siblings instead. All are >= 5.4:1
     on #FFFFFF and on #F6F4EF.
     ---------------------------------------------------------- */
  --inj-cleared-ink:#256247;
  --inj-full-ink:#3F6B3E;
  --inj-limited-ink:#7A5B00;
  --inj-dnp-ink:#944A17;
  --inj-out-ink:#962C2C;
  --inj-unknown-ink:#5F626D;

  /* ---- fills that carry light text ---- */
  --inj-unknown-fill:#6A6D78;

  /* ---- structure ---- */
  --inj-line:#d2d2de;
  --inj-line-strong:#b9b9c9;
  --inj-zebra:#ecedf4;
  --inj-head:#e7e8f0;
  --inj-ink:#17171c;
  --inj-muted:#54545f;
  --inj-card:#ffffff;

  background:var(--inj-bg);
}

/* The sitewide reset removes list markers from <ul> only. This page uses
   ordered lists for the breadcrumb, the IR stage rail and the update log,
   so they need the same treatment. */
body.page-injuries ol{margin:0;padding:0;list-style:none}

/* Author-level display rules (.inj-lane{display:flex}, .inj-tile{display:grid})
   outrank the UA [hidden] rule, so the attribute must be enforced here or the
   lane tabs and the region filter silently stop hiding anything. */
body.page-injuries [hidden]{display:none !important}

/* ===========================================================
   1. Masthead + title block
   =========================================================== */

.inj-masthead{
  background:var(--inj-purple);
  color:#fff;
  border-bottom:3px solid #ffc62f;
}
.inj-masthead .wrap{
  padding-top:9px;padding-bottom:9px;   /* never a padding shorthand on .wrap */
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.inj-desk{
  font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;min-width:0;
}
.inj-desk::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:#ffc62f;flex:none;
}
.inj-desk-meta{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--display);font-weight:600;
  color:rgba(255,255,255,.82);min-width:0;
}

.inj-crumbs{background:#efece4;border-bottom:1px solid var(--inj-line)}
.inj-crumbs .wrap{padding-top:10px;padding-bottom:10px}
.inj-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--display);font-weight:600;color:var(--inj-muted)}
.inj-crumbs a{color:var(--inj-purple)}
.inj-crumbs a:hover{text-decoration:underline}
.inj-crumbs .sl{color:#9a9aa3}

.inj-title{background:var(--inj-bg)}
.inj-title .wrap{padding-top:30px;padding-bottom:26px}
.inj-title h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,5.2vw,58px);line-height:1.02;letter-spacing:.005em;
  color:var(--inj-ink);max-width:16ch;
}
.inj-titlerow{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;
}
.inj-kicker{
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--inj-muted);
  min-width:0;
}
.inj-badge{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;
  padding:6px 13px;border-radius:2px;
  background:var(--inj-unknown-fill);color:#fff;
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;
}
.inj-badge::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#fff;flex:none;
}
.inj-lede{margin-top:20px;max-width:70ch;display:grid;gap:12px}
.inj-lede p{font-size:17px;line-height:1.6;color:#2b2b33}
.inj-lede a{color:var(--inj-purple);text-decoration:underline;text-underline-offset:2px}

/* ===========================================================
   2. Generic section furniture
   =========================================================== */

.inj-sect{border-top:1px solid var(--inj-line)}
.inj-sect .wrap{padding-top:38px;padding-bottom:38px}
.inj-sect.inj-onwhite{background:#fff}

.inj-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.5vw,28px);line-height:1.1;letter-spacing:.02em;
  color:var(--inj-ink);
}
.inj-h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.09em;color:var(--inj-ink);
}
.inj-h4{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:13px;letter-spacing:.1em;color:var(--inj-muted);
}
.inj-eyebrow{
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--inj-purple);
  margin-bottom:8px;
}
.inj-sect p{color:#2b2b33;line-height:1.62}
.inj-sect .inj-h2 + p,
.inj-sect p + p{margin-top:12px}
.inj-prose{max-width:72ch;display:grid;gap:12px;margin-top:14px}
.inj-prose a{color:var(--inj-purple);text-decoration:underline;text-underline-offset:2px}
.inj-list{display:grid;gap:8px;margin-top:12px;max-width:72ch}
.inj-list li{
  position:relative;padding-left:20px;line-height:1.55;color:#2b2b33;
}
.inj-list li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;background:var(--inj-purple);
}
.inj-note{
  margin-top:16px;border-left:4px solid var(--inj-purple);
  background:#fff;padding:13px 16px;max-width:72ch;
  font-size:15px;color:#2b2b33;
}
.inj-onwhite .inj-note{background:var(--inj-bg)}

/* ---- tables ---- */
.inj-tablewrap{
  margin-top:16px;overflow-x:auto;min-width:0;
  border:1px solid var(--inj-line);background:#fff;
  -webkit-overflow-scrolling:touch;
}
.inj-table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.inj-table caption{
  text-align:left;padding:11px 14px;background:var(--inj-purple);color:#fff;
  font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
}
.inj-table th,.inj-table td{
  border:1px solid var(--inj-line);padding:10px 13px;text-align:left;
  vertical-align:top;
}
.inj-table thead th{
  background:var(--inj-head);
  font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:#2a2a33;
  white-space:nowrap;
}
.inj-table tbody th{font-weight:600}
.inj-table tbody tr.alt > *{background:var(--inj-zebra)}
.inj-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.inj-table a{color:var(--inj-purple);text-decoration:underline;text-underline-offset:2px}
.inj-empty-row td{
  color:var(--inj-unknown-ink);font-style:italic;
}

/* ===========================================================
   3. Availability board — weekday tape
   =========================================================== */

.inj-board{background:#fff;border-top:1px solid var(--inj-line)}
.inj-board .wrap{padding-top:26px;padding-bottom:34px}

.inj-tape{
  border:1px solid var(--inj-line-strong);background:var(--inj-bg);
  padding:10px;
}
.inj-tape-strip{
  display:flex;align-items:stretch;gap:0;min-width:0;
}
.inj-day{
  flex:1 1 0;min-width:0;min-height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px 6px;text-align:center;
  border:1px solid var(--inj-line);
  background:#e4e4ea;color:#4a4a55;
  font-family:var(--display);font-weight:700;
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:background var(--t-fast),color var(--t-fast);
}
.inj-day + .inj-day{border-left:0}
.inj-day .inj-day-state{
  font-size:10px;letter-spacing:.09em;font-weight:600;
  color:inherit;opacity:.8;
}
/* future day (light grey) is the default above.
   .is-done = completed day (dark grey). Add it to a day once its
   report has been published and the week has moved on. */
.inj-day.is-done{background:#3a3a44;color:#fff;border-color:#3a3a44}
.inj-day[aria-selected="true"]{
  background:var(--inj-purple);color:#fff;border-color:var(--inj-purple);
}
.inj-day:hover{background:#d6d6df}
.inj-day.is-done:hover{background:#4a4a55}
.inj-day[aria-selected="true"]:hover{background:#5e2f9c}

.inj-daypanel{
  margin-top:10px;border:1px solid var(--inj-line);background:#fff;
  padding:14px 16px;
}
.inj-daypanel .inj-h3{margin-bottom:6px}
.inj-daypanel p{font-size:15px;color:#2b2b33}
.inj-daypanel .inj-stamp{
  margin-top:8px;font-family:var(--display);font-weight:600;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--inj-unknown-ink);
}

/* ---- inactive countdown (built, not active at Week 1) ---- */
.inj-countdown{
  margin-top:10px;border:1px dashed var(--inj-line-strong);
  background:var(--inj-bg);padding:12px 16px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
}
.inj-countdown[data-countdown="static"]{display:none}
.inj-countdown-label{
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--inj-purple);
}
.inj-countdown-clock{
  font-family:var(--display);font-weight:700;font-size:22px;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--inj-ink);
}
.inj-countdown-note{font-size:13px;color:var(--inj-muted);min-width:0}

/* ===========================================================
   4. Body map filter + lanes
   =========================================================== */

.inj-boardgrid{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:20px;margin-top:18px;align-items:start;
}
.inj-boardgrid > *{min-width:0}

.inj-filter{
  border:1px solid var(--inj-line);background:var(--inj-bg);padding:14px;
}
.inj-filter .inj-h3{margin-bottom:4px}
.inj-filter p{font-size:13px;color:var(--inj-muted);margin-top:4px}

/* Every inline SVG on this page is sized here. An unsized SVG falls
   back to 300x150 and destroys the layout. */
.inj-bodymap{
  display:block;width:100%;max-width:190px;height:auto;aspect-ratio:150/330;
  margin:12px auto 4px;
}
.inj-bodymap .inj-body-base{fill:#e2e0d8;stroke:#a9a7a0;stroke-width:2}
.inj-bodymap .inj-region{
  fill:#d5d2c8;stroke:#8f8d86;stroke-width:1.6;
  cursor:pointer;transition:fill var(--t-fast);
}
.inj-bodymap .inj-region:hover{fill:#c3bfb2}
.inj-bodymap .inj-region[aria-pressed="true"]{fill:var(--inj-purple);stroke:#2a1450}
.inj-bodymap .inj-region:focus-visible{outline:3px solid #ffc62f;outline-offset:2px}

.inj-fallback{margin-top:12px}
.inj-fallback label{
  display:block;font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inj-muted);
  margin-bottom:6px;
}
.inj-fallback select{
  width:100%;min-height:44px;padding:10px 12px;font:inherit;font-size:15px;
  border:1px solid var(--inj-line-strong);background:#fff;color:var(--inj-ink);
  border-radius:2px;
}
.inj-filter-status{
  margin-top:10px;font-size:13px;color:var(--inj-muted);
}
.inj-clear{
  margin-top:10px;min-height:44px;width:100%;
  border:1px solid var(--inj-line-strong);background:#fff;
  font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inj-purple);
  padding:10px 12px;
}
.inj-clear:hover{background:var(--inj-head)}

/* ---- lanes ---- */
.inj-lanetabs{display:none}
.inj-lanes{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
}
.inj-lane{
  min-width:0;border:1px solid var(--inj-line);background:#fff;
  display:flex;flex-direction:column;
}
.inj-lane-head{
  padding:9px 10px;border-bottom:1px solid var(--inj-line);
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  display:flex;flex-direction:column;gap:2px;
}
.inj-lane-count{
  font-size:10.5px;letter-spacing:.08em;font-weight:600;
  color:rgba(255,255,255,.88);
}
.inj-lane[data-lane="cleared"] .inj-lane-head{background:var(--inj-cleared)}
.inj-lane[data-lane="full"]    .inj-lane-head{background:var(--inj-full);color:#0e1a0d}
.inj-lane[data-lane="full"]    .inj-lane-count{color:rgba(14,26,13,.78)}
.inj-lane[data-lane="limited"] .inj-lane-head{background:var(--inj-limited);color:#241B00}
.inj-lane[data-lane="limited"] .inj-lane-count{color:rgba(36,27,0,.78)}
.inj-lane[data-lane="dnp"]     .inj-lane-head{background:var(--inj-dnp);color:#241100}
.inj-lane[data-lane="dnp"]     .inj-lane-count{color:rgba(36,17,0,.78)}
.inj-lane[data-lane="out"]     .inj-lane-head{background:var(--inj-out)}
.inj-lane-body{
  padding:10px;flex:1 1 auto;display:flex;flex-direction:column;gap:8px;
  min-height:150px;min-width:0;
}
.inj-lane-empty{
  border:1px dashed var(--inj-line-strong);background:var(--inj-bg);
  padding:12px 10px;text-align:center;font-size:13px;line-height:1.45;
  color:var(--inj-unknown-ink);
}
.inj-lane-empty b{
  display:block;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#3a3a44;margin-bottom:5px;
}

/* ---- player tile (template for the first real entry) ---- */
.inj-tile{
  width:100%;text-align:left;min-width:0;min-height:44px;
  border:1px solid var(--inj-line);border-left:4px solid var(--inj-unknown-fill);
  background:#fff;padding:9px 10px;display:grid;gap:3px;
  transition:box-shadow var(--t-fast),transform var(--t-fast);
}
.inj-tile:hover{box-shadow:0 3px 10px rgba(0,0,0,.14);transform:translateY(-1px)}
.inj-tile-name{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.02em}
.inj-tile-meta{font-size:12px;color:var(--inj-muted)}
.inj-tile-move{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--inj-unknown-ink);
}

/* ===========================================================
   5. Status chips — colour is never the only signal
   =========================================================== */

.inj-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:2px;
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.inj-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.inj-chip-cleared{background:var(--inj-cleared);color:#fff}
.inj-chip-full{background:var(--inj-full);color:#0e1a0d}
.inj-chip-limited{background:var(--inj-limited);color:#241B00}
.inj-chip-dnp{background:var(--inj-dnp);color:#241100}
.inj-chip-out{background:var(--inj-out);color:#fff}
.inj-chip-unknown{background:var(--inj-unknown-fill);color:#fff}

.inj-legend{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.inj-legend dt{margin:0}
.inj-legend dd{margin:0;font-size:13px;color:var(--inj-muted)}

/* ===========================================================
   6. Banner band (CSS/SVG art, photo-ready)
   =========================================================== */

.inj-banner{border-top:1px solid var(--inj-line)}
.inj-banner .wrap{padding-top:0;padding-bottom:0}
.inj-banner-art{
  /* ONE-LINE PHOTO SWAP -----------------------------------------
     Set this custom property to the real photograph and the CSS
     art below is covered completely:
       --inj-banner-image:url("/assets/img/injuries-banner.webp");
     The layer lists below already reserve slot 1 for it.
     ------------------------------------------------------------ */
  --inj-banner-image:none;

  height:clamp(170px,24vw,320px);
  background-color:#3d5a3c;
  background-image:
    var(--inj-banner-image),                                             /* 1 photo    */
    linear-gradient(to bottom,rgba(255,255,255,0) 22%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.10) 62%,rgba(255,255,255,0) 76%),  /* 2 fog      */
    radial-gradient(ellipse 54px 15px at 17% 84%,#4F2683 0 72%,rgba(79,38,131,0) 74%),   /* 3 pad     */
    radial-gradient(ellipse 42px 12px at 33% 92%,#5e2f9c 0 72%,rgba(94,47,156,0) 74%),   /* 4 pad     */
    radial-gradient(ellipse 60px 16px at 80% 87%,#43206f 0 72%,rgba(67,32,111,0) 74%),   /* 5 pad     */
    repeating-linear-gradient(96deg,rgba(255,255,255,.34) 0 2px,rgba(255,255,255,0) 2px 88px),  /* 6 yard lines */
    linear-gradient(to bottom,#9fb2c4 0%,#c2ccd2 30%,#d3d8d2 42%,#7d9670 47%,#5f7d56 62%,#3d5a3c 100%);  /* 7 sky + turf */
  background-size:
    cover,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 56%,
    100% 100%;
  background-position:
    center,
    center,
    center,
    center,
    center,
    left bottom,
    center;
  background-repeat:no-repeat;
  border:1px solid var(--inj-line);
}
.inj-banner-cap{
  padding-top:9px;padding-bottom:2px;font-size:13px;color:var(--inj-muted);
  max-width:72ch;
}

/* ===========================================================
   7. Formation view / position rooms
   =========================================================== */

.inj-formwrap{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:20px;margin-top:18px;align-items:start;
}
.inj-formwrap > *{min-width:0}

.inj-field{
  border:1px solid var(--inj-line);background:#25412c;padding:10px;
}
/* Explicit size: this SVG must never fall back to 300x150. */
.inj-formation{
  display:block;width:100%;height:auto;aspect-ratio:640/420;
}
.inj-formation .inj-turf{fill:#2c4c33}
.inj-formation .inj-yard{stroke:rgba(255,255,255,.30);stroke-width:1.4}
.inj-formation .inj-hash{stroke:rgba(255,255,255,.18);stroke-width:1}
.inj-formation .inj-spot circle{
  fill:#f3f1ea;stroke:#1d3222;stroke-width:2;transition:fill var(--t-fast);
}
.inj-formation .inj-spot text{
  font-family:var(--display);font-weight:700;font-size:15px;
  fill:#1d3222;text-anchor:middle;dominant-baseline:central;
  pointer-events:none;letter-spacing:.04em;
}
.inj-formation .inj-spot{cursor:pointer}
.inj-formation .inj-spot:hover circle{fill:#ffe9a8}
.inj-formation .inj-spot:focus-visible{outline:3px solid #ffc62f;outline-offset:3px}
.inj-formation .inj-spot[aria-pressed="true"] circle{fill:#ffc62f}
/* Concern rings. NOTHING carries a ring until an official
   designation exists — add .has-concern / .is-out to a .inj-spot. */
.inj-formation .inj-spot .inj-ring{fill:none;stroke:none;stroke-width:3.4}
.inj-formation .inj-spot.has-concern .inj-ring{stroke:#D8A31A}
.inj-formation .inj-spot.is-out .inj-ring{stroke:#B43737}

.inj-room{
  border:1px solid var(--inj-line);background:#fff;padding:16px;
}
.inj-room .inj-h3{margin-bottom:10px}
.inj-room dl{display:grid;gap:0;margin:0}
.inj-room dt{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inj-muted);
  padding-top:10px;
}
.inj-room dd{margin:0;padding-bottom:10px;border-bottom:1px solid var(--inj-line);
  font-size:15px;color:#2b2b33}
.inj-room dd:last-of-type{border-bottom:0}

.inj-ringkey{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;padding:2px 2px 4px}
.inj-ringkey li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#e8ece6}
.inj-ringkey .sw{width:16px;height:16px;border-radius:50%;flex:none;background:transparent}
.inj-ringkey .sw-amber{border:3px solid var(--inj-limited)}
.inj-ringkey .sw-red{border:3px solid var(--inj-out)}
.inj-ringkey .sw-none{border:3px solid #cfcfda}

/* ---- game impact summary ---- */
.inj-impact{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;margin-top:16px;
}
.inj-impact > *{min-width:0}
.inj-impact-row{
  border:1px solid var(--inj-line);background:#fff;padding:11px 13px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  border-left:4px solid var(--inj-unknown-fill);
}
.inj-impact-pos{
  font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;min-width:0;
}
.inj-impact-lvl{
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--inj-unknown-ink);
}
/* Levels 2 and 3 exist for when evidence arrives:
   add .is-depth or .is-starter to .inj-impact-row. */
.inj-impact-row.is-depth{border-left-color:var(--inj-limited)}
.inj-impact-row.is-depth .inj-impact-lvl{color:var(--inj-limited-ink)}
.inj-impact-row.is-starter{border-left-color:var(--inj-out)}
.inj-impact-row.is-starter .inj-impact-lvl{color:var(--inj-out-ink)}

/* ===========================================================
   8. IR shelf
   =========================================================== */

.inj-shelf{margin-top:18px;border:1px solid var(--inj-line);background:#fff;padding:18px}
.inj-stages{display:grid;gap:0;margin-top:12px;max-width:60ch}
.inj-stage{
  position:relative;padding:0 0 20px 34px;border-left:2px solid var(--inj-line-strong);
}
.inj-stage:last-child{border-left-color:transparent;padding-bottom:0}
.inj-stage::before{
  content:"";position:absolute;left:-9px;top:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--inj-line-strong);
}
.inj-stage.is-reached::before{background:var(--inj-purple);border-color:var(--inj-purple)}
.inj-stage-name{
  font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inj-ink);
}
.inj-stage-date{font-size:14px;color:var(--inj-unknown-ink);margin-top:2px}
.inj-shelf-empty{
  margin-top:14px;border:1px dashed var(--inj-line-strong);background:var(--inj-bg);
  padding:14px 16px;color:var(--inj-unknown-ink);font-size:15px;
}

/* ===========================================================
   9. Player drawer
   =========================================================== */

.inj-drawer-backdrop{
  position:fixed;inset:0;background:rgba(20,16,32,.55);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
  z-index:150;
}
.inj-drawer-backdrop.is-open{opacity:1;visibility:visible}

.inj-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);
  background:#fff;border-left:4px solid var(--inj-purple);
  transform:translateX(102%);transition:transform var(--t);
  z-index:160;display:flex;flex-direction:column;
  box-shadow:-14px 0 40px rgba(0,0,0,.24);
  visibility:hidden;
}
.inj-drawer.is-open{transform:translateX(0);visibility:visible}
.inj-drawer-head{
  background:var(--inj-purple);color:#fff;padding:14px 16px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.inj-drawer-head h2{
  font-family:var(--display);font-weight:700;font-size:18px;
  letter-spacing:.04em;text-transform:uppercase;min-width:0;
}
.inj-drawer-head p{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:3px}
.inj-drawer-close{
  flex:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.5);
  color:#fff;font-family:var(--display);font-size:20px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;border-radius:2px;
}
.inj-drawer-close:hover{background:rgba(255,255,255,.16)}
.inj-drawer-body{padding:16px;overflow-y:auto;flex:1 1 auto;min-height:0}
.inj-drawer-body dl{display:grid;gap:0;margin:0}
.inj-drawer-body dt{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inj-muted);padding-top:11px;
}
.inj-drawer-body dd{
  margin:0;padding-bottom:11px;border-bottom:1px solid var(--inj-line);
  font-size:15px;color:#2b2b33;
}
.inj-drawer-body dd a{color:var(--inj-purple);text-decoration:underline;text-underline-offset:2px}
.inj-drawer-notice{
  margin-top:16px;background:var(--inj-bg);border-left:4px solid var(--inj-unknown-fill);
  padding:12px 14px;font-size:14px;color:#2b2b33;
}

/* ===========================================================
   10. Update log
   =========================================================== */

.inj-log{margin-top:16px;display:grid;gap:0;max-width:76ch}
.inj-log li{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--inj-line);
}
.inj-log time{
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--inj-purple);
  min-width:0;
}
.inj-log .inj-log-text{min-width:0;font-size:15px;color:#2b2b33}
.inj-log .inj-log-text a{color:var(--inj-purple);text-decoration:underline;text-underline-offset:2px}
.inj-log-src{
  display:block;margin-top:3px;font-size:12px;color:var(--inj-muted);
}
.inj-disclosure{margin-top:14px;border:1px solid var(--inj-line);background:#fff}
.inj-disclosure > summary{
  list-style:none;cursor:pointer;min-height:44px;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--inj-purple);
}
.inj-disclosure > summary::-webkit-details-marker{display:none}
.inj-disclosure > summary::after{content:"+";font-size:20px;line-height:1}
.inj-disclosure[open] > summary::after{content:"–"}
.inj-disclosure > summary:hover{background:var(--inj-head)}
.inj-disclosure-body{padding:4px 16px 16px}
.inj-onwhite .inj-disclosure{background:var(--inj-bg)}

/* ===========================================================
   11. FAQ + internal links
   =========================================================== */

.inj-faq{margin-top:18px;display:grid;gap:10px;max-width:80ch}
.inj-faq .inj-q{
  border:1px solid var(--inj-line);background:#fff;padding:16px 18px;
}
.inj-onwhite .inj-faq .inj-q{background:var(--inj-bg)}
.inj-faq h3{
  font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:.02em;color:var(--inj-ink);
}
.inj-faq p{margin-top:7px;font-size:15px;color:#2b2b33}

.inj-links{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:10px;margin-top:16px;
}
.inj-links > *{min-width:0}
.inj-links a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:52px;padding:13px 15px;background:#fff;
  border:1px solid var(--inj-line);border-left:4px solid var(--inj-purple);
  font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--inj-ink);
  transition:background var(--t-fast),transform var(--t-fast);
  min-width:0;
}
.inj-links a:hover{background:var(--inj-head);transform:translateX(2px)}
.inj-links a svg{width:15px;height:15px;flex:none;color:var(--inj-purple)}

.inj-srcbar{
  margin-top:16px;border:1px solid var(--inj-line);background:#fff;
  padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
}
.inj-srcbar p{font-size:14px;color:#2b2b33;min-width:0}
.inj-srcbar a{color:var(--inj-purple);text-decoration:underline;text-underline-offset:2px}

.inj-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===========================================================
   12. Responsive
   =========================================================== */

@media (max-width:1000px){
  /* Lanes are the primary interface, so they come before the filter once
     the two-column board collapses. */
  .inj-boardgrid{display:flex;flex-direction:column;align-items:stretch}
  .inj-lanescol{order:1}
  .inj-filter{order:2}
  .inj-bodymap{max-width:132px}
  .inj-formwrap{grid-template-columns:1fr}
  .inj-lanes{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  /* Sticky weekday tape. It parks below the sitewide sticky header,
     whose .wrap has a 58px min-height, and sits under it in the stack. */
  .inj-tape{
    position:sticky;top:58px;z-index:30;
    border-left:0;border-right:0;
  }
  .inj-day{font-size:11.5px;letter-spacing:.06em}

  /* Body map is optional on small screens — the select stays. */
  .inj-bodymap{display:none}
  .inj-filter{order:2}
  .inj-boardgrid{display:flex;flex-direction:column}
  .inj-lanescol{order:1}

  /* Lanes become tabs. Two per row, the fifth full width, so no
     label is ever squeezed. */
  .inj-lanetabs{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    margin-bottom:12px;
  }
  .inj-lanetab{
    min-height:48px;min-width:0;padding:10px 12px;
    border:1px solid var(--inj-line-strong);background:#fff;
    font-family:var(--display);font-weight:700;font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;color:#3a3a44;
    display:flex;align-items:center;justify-content:center;text-align:center;
  }
  .inj-lanetab:last-child{grid-column:1 / -1}
  .inj-lanetab[aria-selected="true"]{
    background:var(--inj-purple);border-color:var(--inj-purple);color:#fff;
  }
  .inj-lanes{grid-template-columns:1fr;gap:0}
  .inj-lane-body{min-height:120px}

  /* Drawer becomes a full-height bottom sheet. */
  .inj-drawer{
    top:0;left:0;right:0;bottom:0;width:auto;
    border-left:0;border-top:4px solid var(--inj-purple);
    transform:translateY(102%);
  }
  .inj-drawer.is-open{transform:translateY(0)}

  .inj-log li{grid-template-columns:1fr}
  .inj-table{min-width:460px}
}

@media (max-width:520px){
  .inj-title .wrap{padding-top:22px;padding-bottom:20px}
  .inj-sect .wrap{padding-top:28px;padding-bottom:28px}
  .inj-titlerow{gap:9px}
  .inj-tape-strip{flex-wrap:wrap}
  .inj-day{flex:1 1 45%;min-height:48px}
  .inj-day + .inj-day{border-left:1px solid var(--inj-line)}
  .inj-impact{grid-template-columns:1fr}
  .inj-links{grid-template-columns:1fr}
}

/* ===========================================================
   13. Motion
   =========================================================== */

@media (prefers-reduced-motion:reduce){
  body.page-injuries *,
  body.page-injuries *::before,
  body.page-injuries *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
