/* ---------------------------------------------------------------------------
   "Prove it" / "Give me a chance": the men at his spot, side by side
   (src/prove_view.js). His row lit gold; every grade on the practice
   report's own ladder (.gs chips, training.css). Solid colour only, no
   stripes, no tints, bold words.
--------------------------------------------------------------------------- */
.pv-cmp { container-type: inline-size; margin: 10px 3px 3px; padding: 8px 8px 6px; background: var(--ink); color: #fff; box-shadow: var(--frame); min-width: 0; }
.pv-h { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: 0 2px 6px; }
.pv-h > b { font: 400 21px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.pv-head { margin-left: auto; }

.pv-hd, .pv-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 64px 132px; gap: 4px 10px; align-items: center; }
.pv-hd { padding: 0 8px 4px; }
.pv-hd i { font: 900 9.5px/1.1 var(--sans); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); text-align: center; }
.pv-hd > span:nth-child(2) { font: 900 9.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
.pv-rows { display: grid; gap: 5px; }
.pv-row { margin: 2px; padding: 5px 8px 5px 5px; background: var(--card); box-shadow: var(--frame-2); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.pv-row.me { background: var(--card-hov); box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); margin: 5px 4px; color: var(--card-ink); }
.pv-row.me .pv-nm { color: var(--card-ink); }
.pv-fc { display: block; line-height: 0; text-decoration: none; }
.pv-fc .rm-fc { margin: 2px; }
.pv-who { display: grid; gap: 3px; min-width: 0; }
.pv-nml { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pv-nml .rk { margin-left: 0; flex: none; }
.pv-nm { font: 400 19px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; color: var(--card-ink); text-decoration: none;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-nm:hover { text-decoration: underline; }
.pv-tags { display: flex; flex-wrap: wrap; align-items: center; }
.pv-tags .rm-bd { margin: 2px 4px 2px 2px; padding: 3px 6px 2px; }
.pv-wks { display: flex; gap: 6px; justify-content: center; }
.pv-wks > .pv-c, .pv-wks > i { width: 48px; display: grid; }
.pv-c .gs { width: 100%; }
.pv-all { display: flex; justify-content: center; }
.pv-all .gs { min-width: 40px; font-size: 21px; padding: 4px 6px 3px; }
.pv-vd { display: flex; justify-content: flex-end; }
.pv-vd .rm-bd { margin: 2px; }
.gs.gs-none { --gb: var(--ink-2); --gi: var(--soft); }

/* a narrow window (the talk's side, a phone): the grades under the name */
@container (max-width: 600px) {
  .pv-hd { display: none; }
  .pv-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "f who vd" "f wks all"; gap: 4px 8px; }
  .pv-fc { grid-area: f; align-self: start; }
  .pv-who { grid-area: who; }
  .pv-vd { grid-area: vd; }
  .pv-wks { grid-area: wks; justify-content: flex-start; }
  .pv-all { grid-area: all; }
  .pv-wks > .pv-c { width: auto; min-width: 34px; gap: 3px; }
  .pv-c::before { content: attr(data-w); font: 900 8.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); text-align: center; white-space: nowrap; }
  .pv-all::before { content: 'Overall'; align-self: center; margin-right: 6px; font: 900 9.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
  .pv-all .gs { font-size: 18px; min-width: 30px; }
}

/* on the Goals board the board runs the row's full width */
.gl-row > .pv-cmp { grid-column: 1 / -1; margin-top: 4px; }
/* in the practice report: one per storyline, under the marks */
.tr-pvs { display: grid; gap: 8px; margin: 4px 0 12px; }
.tr-pvs .pv-cmp { margin-top: 0; }