/* Video library case page (11.10.2026): additions to style.css, zt.css and ds.css, same tokens. Page map: ../../video-library-page-map.md */

/* three personas in one row (the Risk persona component, one more column); photos cropped from her own persona cards */
.personas.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.persona .body { display: grid; gap: var(--s2); align-content: start; }
.persona .body p { margin: 0; }
.persona .chal .label { margin: 0 0 var(--s1); font-size: var(--t-16); font-weight: 600; color: var(--color-content-primary); } /* 15.10: 16px semibold, one step below the 20px Problem / Decision / Why headings */
.persona .chal ul { margin: 0; padding-left: var(--s3); color: var(--color-content-secondary); }
.persona .tag { display: inline-flex; align-items: center; gap: 6px; }
.persona .tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* visibility states (her pick 13.10, option D): the same video three times, one result each; the hidden one carries the eye-off overlay the real library uses. The video is a plain placeholder, not a screen. */
.vdrills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; max-width: 780px; }
.vdrills li { display: grid; gap: 10px; align-content: start; }
/* the three visibility states (15.10, her pick, option A of vstates-lime-options.html): lime in three strengths, so the amount of lime shows how visible the drill is. The play button is one dark circle with a white triangle on all three (her note: one color, not changing opacity). */
.vdrill { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-s); background: var(--color-accent-lime); display: grid; place-items: center; overflow: hidden; }
.vdrill.assign { background: rgba(200, 240, 50, .5); }
.vdrill.hid { background: rgba(200, 240, 50, .16); }
.vdrill::after { content: ""; width: 44px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%23111'/%3E%3Cpath d='M18 14l13 8-13 8z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.vdrill svg { position: absolute; z-index: 2; top: 10px; right: 10px; width: 28px; height: 28px; color: var(--color-content-primary); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vcap { display: flex; align-items: center; gap: 8px; font: 500 var(--t-16)/1.3 var(--font-body); color: var(--color-content-primary); }
.vcap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vsub { margin-top: -6px; font-size: var(--t-14); color: var(--color-content-secondary); }
/* phones (15.10, her note: three tall grey boxes one under another looked like a skeleton that did not load): the three states stay side by side, smaller; the icon sits above the caption so a word like "assignment" fits */
@media (max-width: 700px) {
  .vdrills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
  .prose .vdrills { padding: 0; }
  .prose .vdrills li { margin-bottom: 0; }
  .vdrills li { gap: 8px; }
  .vdrill::after { width: 28px; height: 28px; }
  .vdrill svg { top: 6px; right: 6px; width: 18px; height: 18px; }
  .vcap { flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--t-14); line-height: 1.3; }
  .vsub { margin-top: -2px; line-height: 1.35; overflow-wrap: anywhere; }
}

/* wider screens (the library screens are 1500 px wide in the source) */
.shot-frame.wide { width: min(100%, 880px); }
.shot-frame.mid { width: min(100%, 560px); }
.shot-frame.slim { width: min(100%, 250px); }

/* drill settings (her pick 13.10, option C; no numbers, a line and a dot instead, her note): the narrow panel with three notes, each at the height of its real field (percentages of the panel, 250 x 627) */
.annot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); }
.annot .stage { position: relative; width: 250px; }
.annot .shot-frame { margin: 0; }
.annot .mk { position: absolute; right: -4px; z-index: 2; width: 8px; height: 8px; border-radius: 999px; background: var(--color-content-primary); }
.annot .notes { position: relative; height: 627px; margin: 0; padding: 0; list-style: none; }
.annot .notes li { position: absolute; left: 0; right: 0; transform: translateY(-12px); color: var(--color-content-secondary); }
.annot .notes li::before { content: ""; position: absolute; left: calc(-1 * var(--s6) + 4px); top: 12px; width: calc(var(--s6) - 4px); height: 1px; background: var(--color-content-secondary); }
.annot .notes strong { color: var(--color-content-primary); }
/* phones (15.10, her note: the notes can sit to the right of the image): the panel on the left, the three notes in a column on the right. The dot and line are replaced by the numbers 1 to 3 (a numbered circle on the panel at the field, the same number in front of its note), since the notes no longer sit at the height of their field. */
@media (max-width: 700px) {
  .annot { grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: var(--s2); align-items: start; }
  .annot .stage { width: 100%; counter-reset: mk; }
  .annot .shot-frame.slim { width: 100%; }
  .annot .mk { right: -9px; margin-top: -6px; width: 20px; height: 20px; display: grid; place-items: center; counter-increment: mk; background: var(--color-content-primary); color: #fff; font: 600 12px/1 var(--font-body); }
  .annot .mk::before { content: counter(mk); }
  .annot .notes { height: auto; display: grid; gap: var(--s3); counter-reset: nt; }
  .annot .notes li { position: static; transform: none; display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-14); line-height: 1.5; counter-increment: nt; }
  .annot .notes li::before { content: counter(nt); position: static; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--color-content-primary); color: #fff; font: 600 12px/1 var(--font-body); }
}

@media (max-width: 900px) {
  .personas.three { grid-template-columns: 1fr; }
  .personas.three .persona:first-child { grid-row: auto; }
  .shot-frame.slim { width: min(100%, 250px); }
}

/* personas (13.10, her note: three cards of different height left a hole): the manager card, which carries the challenges, stands tall on the left; the coach and athlete cards stack on the right, so both sides end at the same height */
.personas.three { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: var(--s2); align-items: stretch; }
.personas.three .persona { grid-row: auto; grid-template-rows: auto; align-content: start; min-width: 0; }
.personas.three .persona:first-child { grid-row: span 2; }
@media (max-width: 900px) { .personas.three { grid-template-columns: 1fr; } .personas.three .persona:first-child { grid-row: auto; } }
/* between 901 and 1060px the cards are about 190 to 240px wide: the avatar and the name no longer fit on one line, so the name drops under the avatar instead of running out of the card */
.personas.three .persona header { flex-wrap: wrap; }
.personas.three .persona .who { min-width: 0; }

/* the figure is as wide as its frame (same numbers as the frame rules above), so the caption centers under the image and not under the page column (13.10) */
.shot:has(> .shot-frame.wide) { width: min(100%, 880px); }
.shot:has(> .shot-frame.mid) { width: min(100%, 560px); }
.shot:has(> .shot-frame.slim) { width: min(100%, 250px); }