/* ---------------------------------------------------------------------------
   The practice field, in the room: Development → Camp drills
   (src/drills_view.js), the practice board the drills and the Training
   reports share (.dr-board), his drill grades on the player page
   (.dr-plog), and Development → Position battles (src/battles_view.js,
   classes `bt-`). Loaded after teamlife.css.

   Everything floats on the practice field as windows from the room kit
   (src/room.css): chunky tabs for the rooms, choice rows with the gold
   cursor for the drills, framed faces for the men, the gold button to run.
   Solid saturated colour only, 3px ink frames with cut corners, Jersey 15
   for display, Rubik 800+ for reading. No pale tints, no stripes, no emoji.
--------------------------------------------------------------------------- */

/* --- the drills left this week, on the title bar ------------------------------------ */
.dr-left {
  display: inline-flex; align-items: center; gap: 7px; margin: 2px; padding: 3px 10px 2px 8px;
  background: var(--gold); color: var(--ink); box-shadow: var(--frame-2); text-shadow: none;
}
.dr-left b { font-size: 30px; line-height: .8; }
.dr-left span { font: 900 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.dr-left.spent { background: var(--red); color: #fff; }

/* --- the rooms: one chunky tab each, the one you are in gold ------------------------ */
.dr-rooms { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.dr-rm {
  display: grid; place-items: center; min-width: 0; margin: 3px 3px 8px; padding: 9px 4px 7px; cursor: pointer; border: 0;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame), 0 5px 0 0 var(--ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.dr-rm b { font-size: 23px; line-height: .95; letter-spacing: .5px; white-space: nowrap; }
.dr-rm:hover:not(:disabled) { background: var(--card-hov); color: var(--card-ink); }
.dr-rm:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--frame), 0 2px 0 0 var(--ink); }
.dr-rm.on {
  background: var(--gold); color: var(--ink); transform: translateY(3px);
  box-shadow: var(--frame), 0 2px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk);
}
.dr-rm:disabled { cursor: default; background: #6b7280; color: #fff; }

/* the room's name, then its drills as choice rows with the cursor */
.dr-room.rm-sec { margin-top: 10px; }
.dr-room-h { flex: none; }
.dr-drills { margin-bottom: 4px; }
.dr-d.rm-opt { min-height: 50px; }
.dr-d b { font: 400 22px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.dr-d.on { background: var(--card-hov); color: var(--card-ink); }
.dr-d.done, .dr-d:disabled { cursor: default; background: var(--ink-2); color: #9fb4d3; }
.dr-d.done::before { visibility: hidden !important; }

/* --- the men of the room ----------------------------------------------------------------- */
.dr-count { text-shadow: none; }
.dr-men { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.dr-man {
  position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; margin: 3px 3px 8px; padding: 10px 6px 8px;
  cursor: pointer; border: 0; background: var(--card); color: var(--card-ink); box-shadow: var(--frame), 0 5px 0 0 var(--ink);
  font-family: var(--sans); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.dr-man:hover:not(:disabled) { background: var(--card-hov); color: var(--card-ink); }
.dr-man:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--frame), 0 2px 0 0 var(--ink); }
.dr-man.on { background: var(--tm); color: var(--on-tm); }
.dr-man.on .pos { color: var(--on-tm); }
.dr-man:disabled { cursor: default; }
.dr-man:disabled:not(.on):not(.out) { background: var(--ink-2); color: #fff; --soft: #fff; }
.dr-man.out { background: #6b7280; color: #fff; }
.dr-man.out .pos { color: #fff; }
.dr-man .rm-fc { margin: 0 auto 4px; }
.dr-man b { max-width: 100%; font: 800 12px var(--sans); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-man .pos { font: 900 10.5px var(--sans); letter-spacing: .04em; color: var(--soft); }
.dr-man .flag {
  position: absolute; top: -8px; right: -6px; padding: 3px 7px 2px;
  background: var(--green); color: #fff; box-shadow: var(--frame-2); font: 900 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.dr-man .flag.bad { background: var(--red); }
.dr-run { margin-top: 10px; }

/* the catalogue, read-only, when camp is shut */
.dr-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-top: 8px; }
.dr-tile { display: grid; gap: 4px; margin: 3px; padding: 10px 12px; 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); }
.dr-tile b { font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--card-ink); }
.dr-tile .d { font: 800 12px/1.4 var(--sans); color: var(--soft); }

/* --- the board: every man's row, his grade, the road to his next point ---------------------
   A window inside a window: the ink title bar, gold heads, zebra rows with
   column lines. The drills and the Training reports both draw it. */
.dr-done { display: grid; gap: 14px; }
.dr-board { margin: 3px; background: var(--win); color: #fff; border: 2px solid #fff; box-shadow: var(--frame); }
.dr-board-h {
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 7px 12px 5px;
  background: var(--ink-2); color: #fff; border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 0 #2b4166, inset 0 -3px 0 0 #0a1424;
}
.dr-board-h b { font-size: 26px; line-height: 1; letter-spacing: .6px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--ink); }
.dr-board-h span { font: 900 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.dr-board-h .sum { margin-left: auto; padding: 4px 8px 3px; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2); }
.dr-board .tr-rep-p { margin: 10px 12px 2px; }
.dr-board .tr-hurt { margin: 10px 12px 2px; }
.dr-board .tr-more { margin: 0 9px 9px; }

.dr-hd, .dr-row { display: grid; grid-template-columns: 44px 60px minmax(0, 1fr) 0 76px 200px; align-items: stretch; }
.dr-hd {
  background: var(--ink); color: var(--gold);
  font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.dr-hd > * { display: flex; align-items: center; padding: 8px 10px 7px; }
.dr-hd > .pl { grid-column: 1; justify-content: center; }
.dr-hd > .who { grid-column: 2 / 5; }
.dr-hd > .mdc { grid-column: 5; justify-content: center; border-left: 2px solid var(--rule); }
.dr-hd > .rw { grid-column: 6; justify-content: flex-end; border-left: 2px solid var(--rule); }
.dr-rows { display: grid; }
.dr-row { background: var(--card); border-top: 2px solid var(--card-line); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.dr-rows > .dr-row:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.dr-row > .pl { display: grid; place-items: center; font-size: 26px; color: var(--soft); }
.dr-row > .dr-face { align-self: center; margin: 6px 4px 6px 8px; }
.dr-row > .who { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 6px 10px; }
.dr-row .who .nmrow { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dr-row .who a { font: 800 14px var(--sans); color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-row .who a:hover { color: inherit; text-decoration: underline; }
.dr-row .who > span:not(.nmrow) { font: 800 11.5px/1.3 var(--sans); color: var(--soft); }
.dr-row .who .nmrow .rk { margin-left: 0; flex: none; }
.dr-row > .mdc { display: grid; place-items: center; border-left: 2px solid var(--card-line); }
.dr-row .md {
  display: grid; place-items: center; width: 40px; height: 40px; padding-top: 3px;
  font: 400 28px/1 var(--disp); color: #fff; background: #6b7280; box-shadow: var(--frame-2);
}
.dr-row.m-gold .md { background: var(--gold); color: var(--ink); }
.dr-row.m-silver .md { background: #8d99ab; color: var(--ink); }
.dr-row.m-bronze .md { background: #b5651d; }
/* the road to his next point: what he earned today over an ink rail that
   fills gold, and a fixed slot for the point chip so nothing floats */
.dr-row > .rw { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 6px 10px; border-left: 2px solid var(--card-line); }
.dr-next { position: relative; display: block; height: 14px; margin-top: 15px; padding: 3px; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.dr-next u { display: block; height: 100%; width: var(--w); background: var(--gold); }
.dr-next em {
  position: absolute; left: -2px; bottom: calc(100% + 4px); font: 900 11px/1 var(--sans); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; color: var(--card-ink); white-space: nowrap;
}
.dr-next.none { margin-top: 0; }
.dr-row .rw .dr-plus {
  display: grid; place-items: center; height: 24px; margin: 2px; padding: 0 4px;
  background: var(--green); color: #fff; box-shadow: var(--frame-2); font: 400 20px/1 var(--disp);
}
.dr-row .rw .dr-plus.none { visibility: hidden; }

/* only a board that has just been run plays out; an old one sits still */
.dr-board.play .dr-row { animation: dr-in .35s ease-out both; animation-delay: calc(var(--i) * .55s); }
.dr-board.play .dr-next u { width: var(--f); animation: dr-fill .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * .55s + 1.2s); }
.dr-board.play .md { animation: dr-pop .35s ease-out both; animation-delay: calc(var(--i) * .55s + 1.05s); }
.dr-board.play .rw { opacity: 0; animation: dr-in .3s ease-out forwards; animation-delay: calc(var(--i) * .55s + 1.2s); }
.dr-board.play .dr-row.won { animation: dr-in .35s ease-out both, dr-glow 1.1s steps(6, end) 1; animation-delay: calc(var(--i) * .55s), calc(var(--i) * .55s + 1.2s); }
.dr-board.play .dr-plus { animation: dr-pop .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * .55s + 1.3s); }
@keyframes dr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dr-fill { from { width: var(--f); } to { width: var(--w); } }
@keyframes dr-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dr-glow { 0%, 100% { box-shadow: none; } 40% { box-shadow: inset 0 0 0 3px var(--gold); } }
@media (prefers-reduced-motion: reduce) { .dr-board.play * { animation: none !important; opacity: 1 !important; } .dr-board.play .dr-next u { width: var(--w); } }

/* --- his drill grades, on the player page --------------------------------------------------- */
.dr-plog { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dr-pmed {
  display: flex; align-items: center; gap: 6px; margin: 2px; padding: 5px 9px 4px;
  font: 900 12px var(--sans); color: #fff; background: #6b7280; box-shadow: var(--frame-2);
}
.dr-pmed.m-gold { background: var(--gold); color: var(--ink); }
.dr-pmed.m-silver { background: #8d99ab; color: var(--ink); }
.dr-pmed.m-bronze { background: #b5651d; }
.dr-pmed b { font: 800 12px var(--sans); }

/* --- Position battles: one window per battle ---------------------------------------------------- */
.btl-grid { row-gap: 22px; }
.btl-tug { display: grid; grid-template-columns: 104px minmax(0, 1fr) 104px; align-items: start; gap: 10px; padding: 8px 0 4px; }
.btl-tug > .btl-bar { margin-top: 26px; }
.btl-man { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.btl-man .rm-fc { margin: 3px 3px 4px; }
.btl-man a { max-width: 100%; font: 800 13px/1.15 var(--sans); color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.btl-man a:hover { color: var(--gold); }
.btl-man .meta { display: inline-flex; align-items: center; gap: 5px; font: 900 11px var(--sans); color: var(--soft); }
/* the rope: an ink rail that fills gold from the starter's end; the post
   is where the job is up for grabs */
.btl-bar { position: relative; height: 24px; padding: 4px; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.btl-bar > i {
  display: block; height: 100%; width: 0; transition: width .9s steps(12, end);
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--gold-dk) 10px 12px);
}
.btl-bar.play > i { width: var(--w, 0%); }
.btl-card.live .btl-bar > i { background: repeating-linear-gradient(90deg, var(--red) 0 10px, var(--red-dk) 10px 12px); }
.btl-bar .mk { position: absolute; top: -8px; bottom: -8px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.btl-bar .mk::after {
  content: 'Live'; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
  font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
}
.btl-line { margin: 10px 3px 0; padding: 9px 11px; background: var(--card); box-shadow: var(--frame); font: 800 13.5px/1.4 var(--sans); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.btl-h h2 .btl-pos { font-weight: 400; opacity: .7; margin-left: 4px; }
.btl-f { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.btl-empty { margin: 0; }
.btl-watch .rm-chips { gap: 4px; }

/* --- phone ------------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .dr-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .dr-rm b { font-size: 20px; }
  .dr-hd { display: none; }
  .dr-row { grid-template-columns: 30px 54px minmax(0, 1fr) 0 54px; }
  .dr-row > .pl { font-size: 22px; }
  .dr-row > .dr-face { margin: 6px 2px; }
  .dr-row > .mdc { grid-column: 5; grid-row: 1; }
  .dr-row > .rw { grid-column: 2 / -1; grid-row: 2; border-left: 0; padding: 0 10px 10px 4px; }
  .dr-board-h .sum { margin-left: 0; }
}
@media (max-width: 560px) {
  .dr-men { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 2px; }
  .btl-tug { grid-template-columns: 86px minmax(0, 1fr) 86px; gap: 6px; }
  .btl-man a { font-size: 12px; }
}
.dr-run-why { margin: 6px 3px 0; font: 800 12px/1.3 var(--sans); color: var(--soft); }