/* The QR popup, shared by the quick page and the full page: [questions | videos] beside the QR.
   Layout from the UI/UX pass (design notes in README "Questions"). Page-specific list styles stay in each page. */
/* 80% of the screen on desktop, 95% on phones */
dialog.qrpop{border:0;padding:0;border-radius:18px;background:var(--surface);color:var(--ink);width:80vw;max-width:80vw;
  height:80vh;height:80dvh;max-height:80dvh;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
dialog.qrpop[open]{display:flex;flex-direction:column}
dialog.qrpop::backdrop{background:rgba(3,20,22,.72);backdrop-filter:blur(4px)}
.qp-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.qp-head h2{flex:1;font-size:1.2rem;min-width:10ch}
.qp-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0;flex:1 1 auto;overflow:hidden}
.qp-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:0;overflow:hidden}
.qp-main > *{min-height:0;overflow:auto;overscroll-behavior:contain}
.qp-list{padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.qp-list h3{margin:0;font-size:1.05rem}
.qp-qr{padding:18px;display:flex;flex-direction:column;align-items:center;gap:12px;background:linear-gradient(180deg, var(--hero-2), var(--hero-1));
  color:var(--hero-ink);text-align:center;overflow:auto;min-height:0}
.qp-qr .fine{color:var(--hero-muted)}
.qp-qr .qr-card{background:#fff;border-radius:18px;padding:14px;width:min(100%,260px);aspect-ratio:1;flex:none;box-shadow:0 0 0 6px rgba(79,207,196,.25),0 18px 40px rgba(0,0,0,.45)}
.qp-qr .qr-card svg{width:100%;height:100%;display:block}
.qp-qr .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}
.qp-qr .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-self:stretch}
.qp-qr .actions .primary,.qp-qr .actions a{grid-column:1 / -1}
.qp-qr .actions .primary{background:var(--glow);border-color:var(--glow);color:#2A1500}
.qp-qr .btn{width:100%;padding:10px 12px}
.qp-qr .btn:not(.primary){background:rgba(255,255,255,.08);color:var(--hero-ink);border-color:rgba(255,255,255,.25)}

/* patient's questions */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.qp-q{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;border-right:1px solid var(--line);scroll-margin-top:8px}
.qp-q-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.qp-q-head h3{margin:0;font-size:1.05rem;flex:1;min-width:12ch}
.qp-q-head .n{color:var(--muted);font-weight:400}
.qp-conn{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;color:var(--muted);white-space:nowrap}
.qp-conn::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid currentColor;flex:none}
.qp-conn[data-state="on"]{color:var(--good);font-weight:700}
.qp-conn[data-state="on"]::before{background:currentColor}
.qp-q ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qq{background:var(--surface2);border-radius:12px;padding:12px 14px 12px 12px;border-left:5px solid var(--line);display:flex;flex-direction:column;gap:8px}
.qq-meta{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.qq-how{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.qq svg,.qp-need svg{width:17px;height:17px;flex:none}
.qq-time{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.qq-new{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 9px}
.qq-text{margin:0;font-size:1.08rem;font-weight:700;line-height:1.35;text-wrap:pretty}
.qq-status{margin:0;display:flex;align-items:flex-start;gap:7px;font-size:.92rem;font-weight:700;line-height:1.35}
.qq-status cite{font-style:normal;font-weight:400;color:var(--muted)}
.qq-a{margin:0;font-size:.97rem;line-height:1.45;padding-left:24px}
.qq-foot{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.qq-foot .fine{flex:1;min-width:16ch;color:var(--ink)}
.qq[data-state="answered"]{border-left-color:var(--good)}
.qq[data-state="answered"] .qq-status{color:var(--good)}
.qq[data-state="open"]{background:var(--amber-soft);border-left-color:var(--amber)}
.qq[data-state="open"] .qq-status{color:var(--amber)}
.qq[data-state="open"] .btn.small{background:var(--surface)}
.qq[data-state="done"]{border-left-color:var(--muted)}
.qq[data-state="done"] .qq-status{color:var(--muted)}
@keyframes qq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes qq-ring{from{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}to{box-shadow:0 0 0 3px transparent}}
.qq.is-new{animation:qq-in .35s ease-out, qq-ring 6s ease-out .35s both}
.qp-q-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.qp-q-empty svg{width:34px;height:34px;color:var(--accent);opacity:.85}
.qp-q-empty strong{color:var(--ink);font-size:1.02rem}
.qp-q-empty p{margin:0;max-width:40ch}
.qp-need{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.9rem;font-weight:700;color:var(--warn-ink);background:var(--warn-bg);
  border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);border-radius:999px;padding:5px 12px;text-decoration:none;cursor:pointer}

/* tablet: questions over videos in one scrolling column, QR pinned right */
@media (max-width:1100px){
  .qp-body{grid-template-columns:minmax(0,1fr) 300px}
  .qp-main{display:block;overflow:auto}
  .qp-main > *{overflow:visible}
  .qp-q{border-right:0;border-bottom:1px solid var(--line)}
  .qp-qr .qr-card{width:min(100%,240px)}
}
/* phone: one column; order = QR, questions, videos */
@media (max-width:720px){
  dialog.qrpop{width:95vw;max-width:95vw;height:95vh;height:95dvh;max-height:95dvh;border-radius:14px}
  .qp-body{display:flex;flex-direction:column;overflow:auto}
  .qp-main{overflow:visible}
  .qp-qr{order:-1;overflow:visible;flex:none}
  .qp-qr .qr-card{width:min(100%,250px)}
  .qp-head{padding:12px 16px}
  .qp-q,.qp-list{padding:16px}
  .qq-a{padding-left:0}
  .qp-head h2{flex:1 1 calc(100% - 50px)}
  .qp-head .icon-btn{order:1}
  .qp-need{order:2}
  .qp-head .fine{order:3}
}
@media (prefers-reduced-motion: reduce){.qq.is-new{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)}}
/* How long the link works (js/links.js), and the code's "getting ready" / failed state. */
.qp-qr .linklen{display:flex;align-items:center;gap:8px;color:var(--hero-ink);font-weight:700;font-size:.95rem}
.qp-qr .linklen select{width:auto;background:rgba(255,255,255,.08);color:var(--hero-ink);border-color:rgba(255,255,255,.3);padding:6px 10px}
.qp-qr .linklen select option{color:#0E2227;background:#fff}
.qp-qr .qr-card .qr-wait{height:100%;margin:0;display:grid;place-items:center;text-align:center;color:#062B30;font-weight:700}
.qp-qr .fine.error{color:#FFB4AB}
.qp-qr #qpRetry{width:auto}