/* ════════════════════════════════════════════════════════════════
   MuzamMaths — Topic Practice (Question bank + Videos tabs)
   Used by mm-practice-ui.js (the website) and react/*.js (same markup,
   same class names). Reuses the site's colour variables; every var()
   has a fallback so the React files also look right outside index.html.
   ════════════════════════════════════════════════════════════════ */
.pq{--pq-blue:#1D4ED8;--pq-blue-bg:#DBEAFE;--pq-blue-bd:#BFDBFE;
    --pq-green:#047857;--pq-green-bg:#D1FAE5;--pq-green-bd:#A7F3D0;
    --pq-amber:#B45309;--pq-amber-bg:#FEF3C7;--pq-amber-bd:#FDE68A;
    font-family:'DM Sans',system-ui,sans-serif;color:var(--text,#1A1A1A);}
.pq *,.pq *::before,.pq *::after{box-sizing:border-box;}
.pq-lbl{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text3,#888);margin-bottom:9px;}
.pq-note{font-size:12px;color:var(--text2,#555);margin:12px 0 0;}
.pq-note a,.pq-link{color:var(--pri-accent,#2563EB);cursor:pointer;background:none;border:0;padding:0;font:inherit;text-decoration:underline;}

/* ── badges ── */
.pq-badge{display:inline-block;font-size:10.5px;font-weight:500;line-height:1;padding:4px 8px;border-radius:999px;border:1px solid;white-space:nowrap;}
.pq-badge-amber{color:var(--pq-amber);background:var(--pq-amber-bg);border-color:var(--pq-amber-bd);}
.pq-badge-green{color:var(--pq-green);background:var(--pq-green-bg);border-color:var(--pq-green-bd);}
.pq-badge-blue{color:var(--pq-blue);background:var(--pq-blue-bg);border-color:var(--pq-blue-bd);}
.pq-pill{font-size:11px;color:var(--text2,#555);background:var(--bg3,#F0F5FC);border-radius:999px;padding:3px 9px;white-space:nowrap;}

/* ── Question bank: chapter accordion ── */
.pq-ch{border:.5px solid var(--border,#D8E4F0);border-radius:var(--radius-lg,14px);margin-bottom:8px;overflow:hidden;background:var(--bg,#fff);}
.pq-ch-h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;cursor:pointer;}
.pq-ch-h:hover{background:var(--bg2,#F8FAFF);}
.pq-ch-h:focus-visible{box-shadow:inset 0 0 0 3px rgba(37,99,235,.28);}
.pq-ch-h[aria-disabled="true"]{cursor:default;opacity:.65;}
.pq-ch-h[aria-disabled="true"]:hover{background:none;}
.pq-ch-n{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:500;color:var(--pq-blue);background:var(--pq-blue-bg);}
.pq-ch-t{flex:1;min-width:0;font-size:14px;font-weight:500;}
.pq-chev{flex:none;width:8px;height:8px;border-right:2px solid var(--text3,#888);border-bottom:2px solid var(--text3,#888);transform:rotate(-45deg);transition:transform 150ms;margin:0 4px;}
.pq-ch-h[aria-expanded="true"] .pq-chev{transform:rotate(45deg);}
.pq-ch-b{border-top:.5px solid var(--border,#D8E4F0);padding:6px 14px 14px;}
.pq-ch-b[hidden]{display:none;}

.pq-sub{padding:12px 0;border-bottom:.5px dashed var(--border,#D8E4F0);}
.pq-sub:last-child{border-bottom:0;padding-bottom:0;}
.pq-sub-t{margin:0 0 9px;font-size:13.5px;font-weight:500;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.pq-ref{font-size:10.5px;color:var(--text3,#888);font-weight:400;}
.pq-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;}
.pq-card{border:.5px solid var(--border,#D8E4F0);border-radius:var(--radius,10px);padding:11px 12px;background:var(--bg2,#F8FAFF);display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.pq-card-h{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;font-size:13px;}
.pq-card-h small{font-size:11px;color:var(--text3,#888);}
.pq-btns{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;}
.pq-btn{display:inline-flex;align-items:center;gap:6px;font:500 12px 'DM Sans',system-ui,sans-serif;padding:8px 13px;border-radius:var(--radius-sm,7px);border:1px solid var(--pri,#1E40AF);background:var(--pri,#1E40AF);color:var(--pri-ink,#fff);text-decoration:none;cursor:pointer;}
.pq-btn:hover{background:var(--pri-hover,#1D4ED8);border-color:var(--pri-hover,#1D4ED8);}
.pq-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.35);}
.pq-btn-alt{background:var(--bg,#fff);color:var(--pri,#1E40AF);}
.pq-btn-alt:hover{background:var(--blue-bg,#E6F1FB);color:var(--pri,#1E40AF);}
.pq-btn[aria-disabled="true"]{background:var(--n-100,#F1F5F9);border-color:var(--n-200,#E2E8F0);color:var(--n-500,#64748B);cursor:default;pointer-events:none;}
.pq-empty{font-size:12.5px;color:var(--text3,#888);padding:6px 0;}

/* ── Videos: pill filter + grid ── */
.pq-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.pq-fpill{font:500 12px 'DM Sans',system-ui,sans-serif;padding:7px 14px;border-radius:999px;border:1px solid var(--n-200,#E2E8F0);background:var(--bg,#fff);color:var(--n-500,#64748B);cursor:pointer;display:inline-flex;gap:7px;align-items:center;}
.pq-fpill:hover{background:var(--n-100,#F1F5F9);color:var(--n-900,#0F172A);}
.pq-fpill[aria-pressed="true"]{background:var(--pri,#1E40AF);border-color:var(--pri,#1E40AF);color:var(--pri-ink,#fff);}
.pq-fpill:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.28);}
.pq-fpill i{font-style:normal;font-size:10.5px;opacity:.7;font-variant-numeric:tabular-nums;}
.pq-vsec{margin-bottom:18px;}
.pq-vsec-t{margin:0 0 8px;font-size:12px;font-weight:500;color:var(--text2,#555);}
.pq-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px;}
.pq-vcard{all:unset;box-sizing:border-box;display:flex;flex-direction:column;border:.5px solid var(--border,#D8E4F0);border-radius:var(--radius-lg,14px);overflow:hidden;cursor:pointer;background:var(--bg,#fff);}
.pq-vcard:hover{border-color:var(--border2,#C2D4E8);box-shadow:var(--shadow-card,0 4px 12px rgba(15,23,42,.05));}
.pq-vcard:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.35);}
.pq-vthumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;}
.pq-vthumb-blue{background:linear-gradient(135deg,#DBEAFE,#EFF6FF);}
.pq-vthumb-green{background:linear-gradient(135deg,#D1FAE5,#ECFDF5);}
.pq-play{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 1px 4px rgba(15,23,42,.15);}
.pq-play::after{content:"";margin-left:3px;border-left:11px solid var(--pri,#1E40AF);border-top:7px solid transparent;border-bottom:7px solid transparent;}
.pq-vthumb .pq-badge{position:absolute;top:8px;left:8px;}
.pq-dur{position:absolute;right:8px;bottom:8px;font-size:10.5px;background:rgba(15,23,42,.75);color:#fff;border-radius:5px;padding:2px 6px;}
.pq-vinfo{padding:9px 11px 11px;}
.pq-vtitle{font-size:13px;font-weight:500;line-height:1.35;}
.pq-vmeta{font-size:11px;color:var(--text3,#888);margin-top:3px;}

/* ── video player dialog ── */
.pq-modal{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.72);display:grid;place-items:center;padding:16px;}
.pq-modal-box{width:min(920px,100%);background:#0F172A;border-radius:12px;overflow:hidden;position:relative;}
.pq-frame{aspect-ratio:16/9;width:100%;}
.pq-frame iframe{width:100%;height:100%;border:0;display:block;}
.pq-modal-t{color:#E2E8F0;font:500 13px 'DM Sans',system-ui,sans-serif;padding:10px 14px;}
.pq-modal-x{position:absolute;top:6px;right:6px;z-index:1;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:rgba(15,23,42,.7);color:#fff;font-size:20px;line-height:1;}
.pq-modal-x:focus-visible{outline:none;box-shadow:0 0 0 3px #93C5FD;}

/* ── Topic Practice row dialogs: Topical Mastery + Topical Solve ── */
.pq-sheet{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg,#fff);border-radius:14px;padding:20px 20px 18px;box-shadow:0 20px 50px rgba(15,23,42,.35);}
.pq-sheet-wide{width:min(860px,100%);}
.pq-sheet .pq-modal-x{top:10px;right:10px;background:var(--n-100,#F1F5F9);color:var(--text,#1A1A1A);}
.pq-sheet-t{margin:0;font-size:16px;font-weight:500;padding-right:40px;}
.pq-sheet-s{margin:3px 0 14px;font-size:12px;color:var(--text2,#555);}
.pq-paper{border:.5px solid var(--border,#D8E4F0);border-radius:var(--radius,10px);background:var(--bg2,#F8FAFF);padding:11px 12px;margin-bottom:9px;}
.pq-paper-t{margin:0 0 9px;font-size:13px;font-weight:500;}
.pq-paper-t small{font-size:11px;font-weight:400;color:var(--text3,#888);margin-left:5px;}
.pq-solve{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;border:.5px solid var(--border,#D8E4F0);border-radius:var(--radius,10px);background:var(--bg2,#F8FAFF);padding:11px 12px;margin-bottom:9px;cursor:pointer;}
.pq-solve:hover{border-color:var(--border2,#C2D4E8);background:var(--blue-bg,#E6F1FB);}
.pq-solve:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.35);}
.pq-solve b{display:block;font-size:13px;font-weight:500;}
.pq-solve small{display:block;font-size:11px;color:var(--text3,#888);margin-top:2px;}
.pq-solve-i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--pq-green-bg);display:grid;place-items:center;}
.pq-solve-i::after{content:"";margin-left:3px;border-left:10px solid var(--pq-green);border-top:6px solid transparent;border-bottom:6px solid transparent;}
.pq-solve[aria-disabled="true"]{cursor:default;opacity:.6;pointer-events:none;}
.pq-back{all:unset;box-sizing:border-box;cursor:pointer;font-size:12px;color:var(--pri-accent,#2563EB);margin:0 0 8px;display:inline-block;}
.pq-back:hover{text-decoration:underline;}
.pq-back:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.35);border-radius:4px;}
.pq-sheet .pq-frame{border-radius:10px;overflow:hidden;background:#0F172A;}

@media (max-width:520px){.pq-cards{grid-template-columns:1fr;}.pq-vgrid{grid-template-columns:1fr 1fr;}}
@media (prefers-reduced-motion:reduce){.pq-chev{transition:none;}}

/* Topic Practice rows: three buttons need room on a phone */
.st-acts{flex-wrap:wrap;}