/* Team > Injuries — the medical room (src/medical_view.js). In the room
   (src/room.css): windows on the training room, every player a tile, solid
   badges, the gold cursor on the plan you pick. */

/* --- the trainer ---------------------------------------------------------- */
.med-tman { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; }
.med-vac { display: grid; place-items: center; background: var(--ink-2); }
.med-vac b { font: 400 40px/1 var(--disp); color: #fff; }
.med-tid { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.med-tid > b { font: 400 30px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.med-tfx { display: grid; gap: 6px; }
.med-tfx div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  margin: 3px; padding: 8px 10px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.med-tfx span { font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); white-space: nowrap; }
.med-tfx b { font: 400 24px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; color: inherit; white-space: nowrap; }

/* --- one hurt player: a tile ------------------------------------------------ */
.med-list { gap: 6px; }
.med-card { display: block; margin: 3px; padding: 8px 10px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); text-decoration: none; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
a.med-card:hover { background: var(--card-hov); color: var(--card-ink); }
.med-top, .med-row { display: grid; grid-template-columns: 62px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(150px, auto); gap: 12px; align-items: center; }
.med-row { grid-template-columns: 62px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.med-face { display: block; text-decoration: none; }
.med-top a:not(.rm-btn) { color: inherit; text-decoration: none; }
.inj-id { display: grid; gap: 5px; min-width: 0; }
.inj-id .nmrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.inj-id .nmrow .rk { margin-left: 0; flex: none; color: var(--ink); font: 900 10px/13px var(--sans); }   /* game.css .inj-id span would paint it soft on gold */
.inj-id .nmrow a, .inj-id .nmrow b { min-width: 0; overflow-wrap: anywhere; }
.inj-id .nmrow b { font: 400 22px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; color: inherit; }
.med-top .inj-id a:hover b { color: inherit; text-decoration: underline; }
.inj-id .ovr { flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 4px; margin: 2px;
  font: 400 19px/1 var(--disp); font-style: normal; box-shadow: var(--frame-2); }
.med-sub { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -2px; }
.med-sub .rm-bd, .med-chips .rm-bd { padding: 3px 5px 2px; font-size: 9.5px; }
.inj-what { display: grid; gap: 5px; min-width: 0; }
.inj-what > b, .inj-back > b { font: 800 14px/1.2 var(--sans); color: inherit; }
.med-chips { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -2px; }
.inj-back { display: grid; gap: 7px; min-width: 0; }
.inj-back .rm-bar { flex: none; height: 14px; margin: 0 2px; }
.med-note { font: 800 11.5px/1.3 var(--sans); color: var(--soft); }
.med-top .mp-btn { justify-self: stretch; }
/* severity: minor green, moderate orange, major red, the season deep red */
.med-sev.s-minor { background: var(--green); }
.med-sev.s-moderate { background: var(--orange); color: var(--ink); }
.med-sev.s-major { background: var(--red); }
.med-sev.s-season { background: var(--red-dk); }
.med-clean { color: var(--card-ink); font-size: 14px; }

.med-mods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.med-mod { margin: 2px; padding: 5px 8px 4px; font: 800 12px/1.25 var(--sans); color: #fff; box-shadow: var(--frame-2); }
.med-mod b { font-weight: 900; }
.med-mod.good { background: var(--green); } .med-mod.bad { background: var(--red); }

/* --- #team/injuries/<id>: one man's decision --------------------------------- */
.mp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
/* the key, once above the cards: what each colour on a strip means */
.mp-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 3px 12px; }
.mp-key span { display: inline-flex; align-items: center; gap: 7px; font: 900 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.mp-key i, .mp-tl > i { display: block; background: var(--green); }
.mp-key i { width: 14px; height: 14px; box-shadow: var(--frame-2); }
.mp-key i.o, .mp-tl > i.o { background: var(--red); }
.mp-key i.l, .mp-tl > i.l { background: var(--gold); }
/* a plan: a tile you point at with the gold cursor; the chosen one wears
   the club colour in a gold ring */
.mp-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; margin: 3px; text-align: left; cursor: pointer;
  font: inherit; border: 0; padding: 10px 12px 12px 30px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.mp-card:hover:not(.on) { background: var(--card-hov); color: var(--card-ink); }
.mp-card:focus-visible { outline: none; box-shadow: var(--frame), inset 0 0 0 3px var(--gold); }
.mp-card.on { background: var(--tm); color: var(--on-tm); box-shadow: var(--frame), inset 0 0 0 3px var(--gold); }
.mp-card.rm-pt::before { top: 22px; }
.mp-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 400 26px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.mp-card.on .mp-name { text-shadow: 2px 2px 0 var(--tm-sh); }
.mp-name i { font-style: normal; text-shadow: none; }
/* the one number: when he plays again */
.mp-head { font: 400 34px/.9 var(--disp); letter-spacing: .4px; text-transform: uppercase; color: inherit; }
.mp-card.on .mp-head { text-shadow: 2px 2px 0 var(--tm-sh); }
.mp-k { font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); white-space: nowrap; }
.mp-card.on .mp-k, .mp-card.on .mp-now { color: var(--tm-acc); }
/* the weeks ahead, one block a week from this one: the return bracketed
   above, what the limited weeks cost him tagged below */
.mp-tl { display: grid; grid-template-columns: auto repeat(var(--n), minmax(0, 1fr)); grid-template-rows: auto 6px 18px auto;
  column-gap: 2px; row-gap: 3px; align-items: end; padding: 0 2px; }
.mp-tl > i { grid-row: 3; height: 18px; box-shadow: 0 0 0 2px var(--ink); }
.mp-now { grid-row: 3; grid-column: 1; align-self: center; padding-right: 7px;
  font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
.mp-bk { grid-row: 1; justify-self: start; white-space: nowrap; font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.mp-bk.end, .mp-pen.end { justify-self: end; }
.mp-br { grid-row: 2; align-self: stretch; border: 3px solid currentColor; border-bottom: 0; }
.mp-pen { grid-row: 4; justify-self: start; white-space: nowrap; margin-top: 3px; }
.mp-pen i { display: inline-block; padding: 3px 5px 2px; margin: 2px; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2);
  font: 900 10.5px/1 var(--sans); font-style: normal; letter-spacing: .04em; }
/* re-injury: five solid steps, very low to very high */
.mp-risk { display: grid; grid-template-columns: auto minmax(0, 170px) auto; gap: 10px; align-items: center; justify-content: start; }
.mp-meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 14px auto; gap: 0 4px; padding: 2px; }
.mp-meter i { position: relative; display: block; height: 14px; background: var(--ink-2); box-shadow: var(--frame-2); overflow: hidden; }
.mp-meter b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.mp-meter i.orange b { background: var(--orange); } .mp-meter i.red b { background: var(--red); }
.mp-meter u { grid-row: 2; height: 5px; margin-top: 4px; border: 3px solid currentColor; border-top: 0; }
.mp-risk > b { font: 400 22px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.mp-bds { display: flex; flex-wrap: wrap; margin-left: -2px; }
/* Back / Submit stay in reach while you scroll the plans on a phone, on a
   solid strip of the window so the cards pass under it. main keeps 60px
   (50px on a phone) under every page, so the offset is negative. */
.mp-go { position: sticky; bottom: -60px; z-index: 5; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
  margin: 12px -12px -12px; padding: 12px 12px 8px; background: var(--win); border-top: 3px solid var(--ink); }
@media (max-width: 720px) { .mp-go { bottom: -50px; } }
/* what Submit did, wherever you land */
.mp-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; box-sizing: border-box; width: max-content; max-width: calc(100vw - 32px);
  background: var(--gold); color: var(--ink); border: 0; padding: 10px 16px 9px;
  font: 400 22px/1.1 var(--disp); letter-spacing: .4px; text-align: center; box-shadow: var(--frame), 0 6px 0 0 var(--ink); animation: mp-toast 3.2s both; }
@keyframes mp-toast { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 640px) {
  .med-top, .med-row { grid-template-columns: 62px minmax(0, 1fr); gap: 8px 10px; }
  .med-top .inj-what, .med-top .inj-back, .med-top .mp-btn, .med-row .inj-what, .med-row .inj-back { grid-column: 2; }
  .med-top .mp-btn { justify-self: start; }
  .mp-cards { grid-template-columns: minmax(0, 1fr); }
  .mp-go .rm-btn { flex: 1 1 0; }
  .mp-head { font-size: 30px; }
  .med-tid > b { font-size: 26px; }
  /* the trainer's three effects side by side, the word under its label */
  .med-tfx { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .med-tfx div { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; }
  .med-tfx b { font-size: 19px; line-height: .95; white-space: normal; }
  .med-tfx span { font-size: 9.5px; }
}

/* the re-injury risk list (medical_view.js injects it): white rows, ink names */
#app .med-rr-row { background: var(--card); color: var(--card-ink); }
#app .med-rr-row .nm { color: inherit; }
#app .med-rr-row .nm:hover { color: inherit; text-decoration: underline; }