/* BERT explainer animations player (agent-managed, #621). Pairs with bert-explainer-v1.js.
   Markup stays plain and Studio-editable: figure.shot.bx > a.bx-link (poster img + play label) + figcaption cue list. */
.bx{margin:32px auto 0;max-width:760px}
.bx-more{text-align:center}
.bx-link{position:relative;display:block;border-radius:12px;overflow:hidden;background:#0b1622;color:#fff;text-decoration:none}
.bx-link img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.shot.bx .bx-link img{border-radius:0;box-shadow:none;border:0}
.bx-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;background:rgba(13,34,55,.88);border:1px solid rgba(159,195,207,.6);font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.bx-play::before{content:"";flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#00a3a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M12 9l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E") center/30px no-repeat}
.bx-link:hover .bx-play,.bx-link:focus-visible .bx-play{background:#00707a}
.bx-link:focus-visible{outline:3px solid #00a3a0;outline-offset:3px}
.bx video{display:block;width:100%;height:auto;background:#0b1622;border-radius:12px}
.bx-cues{list-style:none;margin:10px 0 0;padding:0;font-size:15px;line-height:1.45;color:var(--muted,#5a6b78)}
.bx-cues li{margin:0 0 4px;padding-left:14px;position:relative}
.bx-cues li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent,#00707a)}
/* while playing: only the current caption, larger */
.bx.bx-playing .bx-cues li{display:none}
.bx.bx-playing .bx-cues li.bx-on{display:block;font-size:17px;font-weight:600;color:var(--ink,#1c2a36);padding-left:0;min-height:2.9em}
.bx.bx-playing .bx-cues li.bx-on::before{display:none}
/* compact placements (FAQ answer, white paper card): a small poster; captions are read out, not shown, until it plays */
.bx-compact{display:inline-block;vertical-align:middle;width:180px;max-width:180px;margin:14px 0 0}
.bx-compact + .bx-watch{display:inline-block;vertical-align:middle;margin:14px 0 0 16px}
.bx-compact.bx-open{display:block;width:auto}
.bx-compact.bx-open + .bx-watch{display:block;margin:8px 0 0}
.bx-compact .bx-play{font-size:0;padding:0;gap:0;border:0;background:none;box-shadow:none}
.bx-compact .bx-play::before{width:40px;height:40px;background-size:40px}
.bx-compact .bx-cues{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bx-compact.bx-open{max-width:760px}
.bx-compact.bx-open .bx-cues{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.bx-watch{font-weight:700}
/* card slot (Results white paper): fills the card's image slot */
.rs-card .bx-slot{display:block;width:auto;margin:0;max-width:none}
/* stand-alone page (#623, /how-bert-works/): 1280 px source, so it may run wider; left-aligned with the page text */
.bx-page{margin:28px 0 0;max-width:960px}
.bx-page + .actions{margin-top:24px}
.rs-card .bx-slot .bx-link{border-radius:0}
.rs-card .bx-slot .bx-play{font-size:0;padding:0;gap:0;border:0;background:none;box-shadow:none}
.rs-card .bx-slot .bx-play::before{width:52px;height:52px;background-size:52px}
.rs-card .bx-slot video{border-radius:0}
/* same 2:1 slot as the other white paper thumbnails */
.rs-card .bx-slot .bx-link img{aspect-ratio:2/1;object-fit:cover}
.rs-card .bx-slot.bx-open .bx-cues{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;padding:0 16px}
.band .wrap > p.bx-more,.bx-more{margin:10px auto 0;max-width:760px;font-size:15px;text-align:center}
/* phone lightbox */
.bx-dialog{padding:0;border:0;background:#050c14;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:#fff}
.bx-dialog::backdrop{background:rgba(5,12,20,.92)}
.bx-dlg-in{box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:max(56px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}
.bx-dlg-in video{width:100%;max-width:min(560px,calc((100vh - 220px) * .8));height:auto;border-radius:12px;background:#0b1622}
.bx-dialog.bx-wide .bx-dlg-in video{max-width:min(1100px,calc((100vh - 200px) * 1.778))}
.bx-dialog.bx-wide .bx-dlg-cap{max-width:900px}
.bx-dlg-title{margin:0 0 10px;font-size:16px;font-weight:700;color:#fff;text-align:center}
.bx-dlg-cap{margin:14px 0 0;max-width:560px;min-height:3em;font-size:17px;line-height:1.45;text-align:center;color:#e6f1f4}
.bx-close{position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(13,34,55,.9);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.bx-close:focus-visible{outline:3px solid #00a3a0;outline-offset:2px}
html.bx-lock,html.bx-lock body{overflow:hidden}
@media (max-width:760px){
 .bx-play{font-size:14px;padding:8px 14px 8px 10px}
 .bx-compact{width:140px;max-width:140px}
 .rs-card .bx-slot .bx-play::before{width:40px;height:40px;background-size:40px}
 .bx-compact + .bx-watch{display:block;margin:8px 0 0}
}
@media (prefers-reduced-motion:reduce){
 /* static end frame + every caption listed (cue sheet rule), compact placements included */
 .bx-cues li{display:list-item}
 .bx-compact{display:block;width:auto;max-width:760px}
 .bx-compact .bx-link{max-width:180px}
 .bx-compact .bx-cues{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
 .bx-compact + .bx-watch{display:block;margin:8px 0 0}
 .rs-card .bx-slot .bx-link{max-width:none}
 .rs-card .bx-slot .bx-cues{padding:0 16px}
 /* the end frame carries the end-card text: keep the play label in the corner, clear of it */
 .bx:not(.bx-compact):not(.bx-slot) .bx-play{left:14px;top:auto;bottom:14px;transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){
 /* phone: icon only (the label text stays for screen readers) so it never covers the end card */
 .bx:not(.bx-compact):not(.bx-slot) .bx-play{left:10px;bottom:10px;font-size:0;padding:0;gap:0;border:0;background:none;box-shadow:none}
 .bx:not(.bx-compact):not(.bx-slot) .bx-play::before{width:40px;height:40px;background-size:40px}
}