/* A&P Builder: patient videos for today's diagnoses (js/ap-videos.js). Rows, preview, "All videos", and the QR
   popup's list, full screen and handout, as on the video picker page (public/index.html); popup layout in qrpop.css. */
.apv{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px;container-type:inline-size}
.apv-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.apv-h strong{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:var(--muted)}
.apv-sum{font-size:.9rem;color:var(--muted)}
.apv-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.apv-rows > li{position:relative}
.apv .tile{width:100%;display:grid;grid-template-columns:auto 128px minmax(0,1fr);align-items:center;gap:8px 16px;text-align:left;font:inherit;color:inherit;
  cursor:pointer;padding:10px 150px 10px 14px;background:var(--surface);border:2px solid var(--line);border-radius:14px;transition:border-color .15s, background-color .15s}
.apv .tile:hover{border-color:var(--accent)}
.apv .tile[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.apv .tile .check{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.05rem;border:2px solid var(--line);color:transparent}
.apv .tile[aria-pressed="true"] .check{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.apv .tile .pic{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--surface2)}
.apv .tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.apv .tile .pic.hosted{background:radial-gradient(120% 90% at 70% 40%, var(--hero-2), var(--hero-1))}
.apv .tile .pic.hosted img{object-fit:contain}
.apv .tile .dur{position:absolute;right:5px;bottom:5px;font-family:var(--mono);font-size:.75rem;font-weight:600;background:rgba(3,20,22,.82);color:#fff;border-radius:4px;padding:2px 6px}
.apv .tile .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.apv .tile .dx{font-size:1.25rem;font-weight:700;line-height:1.15}
.apv .tile .full{font-size:.85rem;color:var(--muted)}
.apv .tile .vtitle{font-size:.9rem;color:var(--muted);margin-top:3px}
.apv .tile[aria-pressed="true"] .vtitle{color:var(--ink)}
.apv .allv{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;align-items:stretch}
.apv .allv .btn:first-child{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.apv-bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* narrow: on a phone, and in the second opinion's side rail (#apVideos, ~460px) */
@container (max-width:600px){
  .apv .tile{grid-template-columns:auto 92px minmax(0,1fr);padding:10px 10px 54px;gap:6px 12px}
  .apv .tile .dx{font-size:1.1rem}
  .apv .allv{top:auto;bottom:10px;transform:none;right:10px;flex-direction:row}
  .apv-bar .btn{flex:1}
}
@media (max-width:640px){
  .apv .tile{grid-template-columns:auto 92px minmax(0,1fr);padding:10px 10px 54px;gap:6px 12px}
  .apv .tile .dx{font-size:1.1rem}
  .apv .allv{top:auto;bottom:10px;transform:none;right:10px;flex-direction:row}
}
/* preview and "All videos" */
dialog.apv-dlg{border:0;padding:0;border-radius:16px;background:var(--surface);color:var(--ink);width:min(900px,calc(100vw - 24px));box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog.apv-dlg::backdrop{background:rgba(3,20,22,.72);backdrop-filter:blur(4px)}
dialog.apv-dlg form{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}
.apv-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.apv-dlg-h h2{margin:0;font-size:1.1rem}
dialog.apv-dlg form .apv-dlg-h{padding:12px 0 0}
.apv-frame{aspect-ratio:16/9;background:#000}
.apv-frame iframe,.apv-frame video{width:100%;height:100%;border:0;display:block}
.av-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.av{width:100%;display:grid;grid-template-columns:auto 112px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;font:inherit;color:inherit;
  padding:8px 10px;border:2px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.av[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.av .check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);color:transparent;font-weight:700}
.av[aria-pressed="true"] .check{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.av img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block;background:var(--surface2)}
.av img.hosted{background:radial-gradient(120% 90% at 70% 40%, var(--hero-2), var(--hero-1));object-fit:contain}
.av .t{font-weight:700;line-height:1.3}
.av .d{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.av .first{font-size:.75rem;font-weight:700;color:var(--good)}
/* the QR popup's video list, the full screen for the patient, the handout */
.qp-list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:n}
.qp-list li{display:grid;grid-template-columns:auto 96px minmax(0,1fr);gap:10px;align-items:center;background:var(--surface2);border-radius:10px;padding:8px;counter-increment:n}
.qp-list li::before{content:counter(n);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-weight:600;font-size:.85rem}
.qp-list li img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
.qp-list li img.hosted{background:radial-gradient(120% 90% at 70% 40%, var(--hero-2), var(--hero-1));object-fit:contain}
.qp-list .vt{font-weight:700;line-height:1.3}
.qp-list .vs{font-size:.85rem;color:var(--muted)}
.qr-card{background:#fff;border-radius:18px;padding:14px;width:min(100%,260px);aspect-ratio:1;box-shadow:0 0 0 6px rgba(79,207,196,.25),0 18px 40px rgba(0,0,0,.45)}
.qr-card svg{width:100%;height:100%;display:block}
.valid{display:inline-flex;gap:8px;background:rgba(242,178,92,.14);border:1px solid rgba(242,178,92,.5);color:#FFD9A3;border-radius:999px;padding:5px 12px;font-weight:700;font-size:.9rem}
.qr-screen{position:fixed;inset:0;z-index:30;overflow:auto;color:#EAF6F4;background:#031416;isolation:isolate;display:grid;place-items:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
.qr-screen[hidden]{display:none}
.qr-screen video,.qr-screen .bg-img{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.qr-screen::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(3,20,22,.1), rgba(3,20,22,.45) 45%, rgba(3,20,22,.9) 75%)}
.fs-inner{width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center}
.fs-copy{justify-self:end;max-width:30rem;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:20px;background:rgba(3,20,22,.72);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fs-copy h2{font-size:clamp(1.7rem,4vw,2.6rem);color:#fff;margin:0}
.fs-copy .lead{font-size:1.15rem;color:#B7D6D3;margin:0}
.fs-copy ol{margin:0;padding-left:1.4em;font-size:1.05rem}
.fs-card{width:min(78vw,52vh,400px);padding:18px;border-radius:22px}
.qr-screen .btn{background:rgba(255,255,255,.08);color:#EAF6F4;border-color:rgba(255,255,255,.25)}
@media (max-width:820px){.fs-inner{grid-template-columns:1fr;justify-items:center;text-align:center}.fs-copy{justify-self:center;align-items:center}.fs-copy ol{text-align:left}.fs-card{order:-1}}
@media (prefers-reduced-motion: reduce){.qr-screen video{display:none}}
#handout{display:none}
@media print{
  @page{margin:18mm}
  body.apv-printing{background:#fff;color:#000;padding:0}
  body.apv-printing > *:not(#handout){display:none!important}
  body.apv-printing #handout{display:block;font-family:var(--sans);color:#000}
  #handout h1{font-size:26pt;margin:0 0 4pt}
  #handout .who{font-size:13pt;margin:0 0 14pt;color:#333}
  #handout .qr{width:62mm;height:62mm;float:right;margin:0 0 8mm 8mm}
  #handout .qr svg{width:100%;height:100%}
  #handout ol{font-size:14pt;padding-left:1.2em;margin:0 0 12pt}
  #handout li{margin:0 0 6pt}
  #handout .how{font-size:13pt;margin:0 0 10pt}
  #handout .until{font-size:13pt;font-weight:700;margin:0 0 10pt}
  #handout .url{font-family:var(--mono);font-size:10pt;word-break:break-all;color:#333}
}