/* Capture cards, shared by the report page (report.css: .screen) and the job page's live frame and card strip
   (job.css: .live-sc slides, .lc cards). A still from that part of the video, veiled 80 % black, with the extracted
   text on top. Page-specific placement (position, size, padding of the badge and the timecode) stays in each page's CSS. */

/* The card and the slide: type, padding and the stacked layout */
.screen, .live-sc { color: var(--screen-ink); padding: 6% 7%; display: flex; flex-direction: column; justify-content: center; gap: .25em; overflow: hidden;
  font: 700 clamp(.95rem, 2.3vw, 1.3rem)/1.18 var(--head); text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .6); }
.screen.quote, .live-sc.q { font: italic 500 clamp(.9rem, 2.1vw, 1.15rem)/1.35 var(--body); }

/* The veiled still (a card on the report, a card in the strip) */
.screen, .lc { background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), var(--still, none) center / cover no-repeat, var(--screen); }

/* The text block that fit.js sizes */
.screen .txt, .live-sc-txt { display: flex; flex-direction: column; gap: .04em; width: max-content; max-width: 66%; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: normal; word-break: keep-all; }
.screen.quote .txt, .live-sc.q .live-sc-txt { text-transform: none; line-height: 1.12; letter-spacing: 0; }
.screen .l, .live-sc-txt .l { display: block; }

/* The kind badge and the timecode pill */
.screen .kind, .live-sc-kind, .lc-kind { position: absolute; font: 600 .6rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #c58bff; background: rgba(171, 79, 246, .22); border-radius: 4px; }
.screen .tcode, .live-sc-tc, .lc-tc { position: absolute; font: 600 .68rem/1 var(--mono); color: #202124; background: #ff6234; border-radius: 4px; }
.screen .kind, .screen .tcode, .live-sc-kind, .live-sc-tc { text-shadow: none; }