/* cert-practice.css - CertSafari-style practice quiz (layers on main.css theme) */

.cp-wrap{max-width:900px;margin:0 auto;padding:0 22px}
.cp-crumb{padding:20px 0 0;color:var(--faint);font-size:.84rem}
.cp-crumb a{color:var(--muted)}

/* ---- HUB ---- */
.cp-hubhead{padding:30px 0 8px}
.cp-hubhead h1{font-size:2rem;letter-spacing:-.6px;font-weight:800;margin-bottom:8px}
.cp-hubhead .sub{color:var(--muted);font-size:1rem;max-width:640px}
.cp-fresh{display:flex;gap:14px;flex-wrap:wrap;color:var(--faint);font-size:.82rem;margin-top:10px}
.cp-fresh b{color:var(--accent-2)}

/* progress strip */
.cp-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.cp-prog{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.cp-prog .l{font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:8px}
.cp-prog .v{font-weight:800;margin-bottom:8px}
.cp-prog .bar{height:6px;background:var(--bg-soft);border-radius:999px;overflow:hidden}
.cp-prog .bar span{display:block;height:100%;width:0;border-radius:999px;transition:.4s}
.cp-prog.cov .bar span{background:linear-gradient(90deg,var(--blue),#8ec4de)}
.cp-prog.mas .bar span{background:linear-gradient(90deg,var(--green),#9ccf7f)}
.cp-prog.perf .bar span{background:linear-gradient(90deg,var(--accent),var(--accent-3))}

/* utility rows (saved / notes) */
.cp-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.cp-row .ico{width:38px;height:38px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--border);display:grid;place-items:center;font-size:1.05rem;flex:0 0 auto}
.cp-row h3{font-size:1rem;margin-bottom:2px}
.cp-row p{color:var(--muted);font-size:.86rem}
.cp-row .link{margin-left:auto;color:var(--accent-2);font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;background:none;border:none;font-family:inherit}
.cp-row .link:hover{text-decoration:underline}

/* mode cards */
.cp-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 20px}
.cp-mode{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.cp-mode .head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.cp-mode .head .ico{width:40px;height:40px;border-radius:11px;background:var(--bg-soft);border:1px solid var(--border);display:grid;place-items:center;font-size:1.2rem}
.cp-mode h2{font-size:1.15rem;font-weight:800}
.cp-mode p{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.cp-kv{display:flex;justify-content:space-between;font-size:.86rem;padding:7px 0;border-top:1px solid var(--border);color:var(--muted)}
.cp-kv b{color:var(--text)}
.cp-mode select{width:100%;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:11px 13px;font-size:.9rem;font-family:inherit;margin-bottom:14px;outline:none}
.cp-mode select:focus{border-color:var(--accent)}
.cp-mode label{display:block;font-size:.74rem;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:700}

/* buttons */
.cp-btn{border:1px solid transparent;border-radius:10px;padding:12px 20px;font:700 .92rem Inter,sans-serif;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}
.cp-btn.primary{background:var(--accent);color:#fff}.cp-btn.primary:hover{background:#c4633f}
.cp-btn.ghost{background:var(--bg-soft);color:var(--text);border-color:var(--border)}.cp-btn.ghost:hover{border-color:var(--accent)}
.cp-btn.sm{width:auto;padding:9px 16px;font-size:.85rem}

/* ---- SETUP MODAL ---- */
.cp-modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(8,7,6,.86);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.cp-modal.open{display:flex}
.cp-modal-box{background:var(--bg-soft);border:1px solid var(--border-lit);border-radius:18px;max-width:520px;width:100%;padding:28px}
.cp-modal-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.cp-modal-top .ico{width:40px;height:40px;border-radius:11px;background:rgba(217,119,87,.14);border:1px solid rgba(217,119,87,.3);display:grid;place-items:center;font-size:1.2rem}
.cp-modal-top h2{font-size:1.3rem;font-weight:800}
.cp-modal-close{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1}
.cp-modal p.intro{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.cp-modal h4{font-size:.85rem;font-weight:700;margin:16px 0 10px}
.cp-optcards{display:flex;flex-direction:column;gap:10px}
.cp-optcard{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s;background:var(--card)}
.cp-optcard:hover{border-color:var(--accent)}
.cp-optcard.sel{border-color:var(--accent);background:rgba(217,119,87,.08)}
.cp-radio{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--border);margin-top:2px;position:relative}
.cp-optcard.sel .cp-radio{border-color:var(--accent)}
.cp-optcard.sel .cp-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.cp-optcard .t{font-weight:700;font-size:.95rem}
.cp-optcard .d{color:var(--muted);font-size:.84rem;margin-top:2px}
.cp-countinput{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:11px 13px;font-size:1rem;font-family:inherit;outline:none;text-align:center;margin-bottom:12px}
.cp-countinput:focus{border-color:var(--accent)}
.cp-quick{display:flex;gap:8px;justify-content:center}
.cp-quick button{flex:1;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:10px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.cp-quick button:hover{border-color:var(--accent)}
.cp-quick button.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.cp-modal-actions{display:flex;gap:12px;margin-top:24px}
.cp-modal-actions .cp-btn{width:auto;flex:1}

/* ---- QUIZ ---- */
.cp-quizhead{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:24px 0 6px}
.cp-quizhead .title{font-size:.95rem;font-weight:700;color:var(--muted)}
.cp-quizhead .score{text-align:right}
.cp-quizhead .score b{font-size:1rem}
.cp-quizhead .score .vd{font-size:.78rem;color:var(--accent-2);cursor:pointer}
.cp-qbar{height:5px;background:var(--card);border-radius:999px;overflow:hidden;margin-bottom:22px}
.cp-qbar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-3));width:0;transition:.3s}
.cp-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;margin-bottom:24px}
.cp-qcount{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.cp-subdomain{display:inline-block;background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:.8rem;color:var(--muted);margin-bottom:16px}
.cp-qtext{font-size:1.12rem;font-weight:650;line-height:1.55;margin-bottom:20px}
.cp-qtext code{background:var(--code-bg);color:var(--accent-2);padding:1px 6px;border-radius:5px;font-size:.9em}

/* result banner (review mode) */
.cp-banner{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:15px 18px;margin-bottom:18px;border:1px solid}
.cp-banner .bico{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem}
.cp-banner.correct{background:rgba(127,176,105,.1);border-color:rgba(127,176,105,.4)}
.cp-banner.correct .bico{background:var(--green);color:#0f0e0d}
.cp-banner.correct h3{color:var(--green)}
.cp-banner.incorrect{background:rgba(196,99,99,.1);border-color:rgba(196,99,99,.4)}
.cp-banner.incorrect .bico{background:#dd8a8a;color:#0f0e0d}
.cp-banner.incorrect h3{color:#dd8a8a}
.cp-banner h3{font-size:1rem;margin-bottom:2px}
.cp-banner p{color:var(--muted);font-size:.86rem}

/* options */
.cp-opts{display:flex;flex-direction:column;gap:12px}
.cp-opt-wrap{border-radius:12px}
.cp-opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:15px 16px;cursor:pointer;transition:.15s;font-family:inherit;color:var(--text);font-size:.95rem;line-height:1.5;position:relative}
.cp-opt:hover:not(.locked){border-color:var(--accent)}
.cp-opt code{background:var(--code-bg);color:var(--accent-2);padding:1px 5px;border-radius:4px;font-size:.88em}
.cp-oradio{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--border);margin-top:1px;position:relative}
.cp-opt.sel .cp-oradio{border-color:var(--accent)}
.cp-opt.sel .cp-oradio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.cp-opt.locked{cursor:default}
.cp-opt.correct{border-color:rgba(127,176,105,.55);background:rgba(127,176,105,.1)}
.cp-opt.wrong{border-color:rgba(196,99,99,.55);background:rgba(196,99,99,.1)}
.cp-mark{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.75rem}
.cp-opt.correct .cp-mark{background:var(--green);color:#0f0e0d}
.cp-opt.wrong .cp-mark{background:#dd8a8a;color:#0f0e0d}

/* per-option explanation accordion */
.cp-exp{margin-top:8px}
.cp-exp summary{list-style:none;cursor:pointer;background:var(--bg-soft);border:1px solid var(--border);border-radius:9px;padding:10px 14px;font-size:.86rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.cp-exp summary::-webkit-details-marker{display:none}
.cp-exp summary::after{content:"\25be";margin-left:auto}
.cp-exp[open] summary::after{content:"\25b4"}
.cp-exp .body{padding:12px 14px;color:var(--muted);font-size:.88rem;line-height:1.6}

/* per-question action buttons */
.cp-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.cp-abtn{background:var(--bg-soft);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:12px;font:600 .88rem Inter,sans-serif;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.cp-abtn:hover{border-color:var(--accent)}
.cp-abtn.on{border-color:var(--accent);color:var(--accent-2);background:rgba(217,119,87,.08)}
.cp-submit{margin-top:20px}

/* note editor */
.cp-note{margin-top:12px;display:none}
.cp-note.open{display:block}
.cp-note textarea{width:100%;min-height:80px;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:12px;font-family:inherit;font-size:.9rem;outline:none;resize:vertical}
.cp-note textarea:focus{border-color:var(--accent)}

/* results */
.cp-result-hero{text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:36px;margin:26px 0}
.cp-result-score{font-size:3.4rem;font-weight:900;line-height:1}
.cp-result-score.pass{color:var(--green)}.cp-result-score.fail{color:var(--accent-2)}
.cp-result-hero p{color:var(--muted);margin-top:8px}
.cp-dresult{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:12px}
.cp-dhead{display:flex;justify-content:space-between;margin-bottom:7px;font-size:.9rem}
.cp-dbar{height:6px;background:var(--bg-soft);border-radius:999px;overflow:hidden}
.cp-dbar span{display:block;height:100%}
.cp-centre{text-align:center;margin:26px 0}
.cp-centre .cp-btn{width:auto;display:inline-flex}

/* saved/notes list overlay */
.cp-list-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.cp-list-panel h3{margin-bottom:10px}
.cp-list-item{border-top:1px solid var(--border);padding:12px 0;font-size:.9rem}
.cp-list-item:first-of-type{border-top:none}
.cp-list-item .d{color:var(--muted);font-size:.82rem;margin-top:4px}
.cp-empty{color:var(--muted);font-style:italic;font-size:.9rem}

.cp-screen{display:none}.cp-screen.active{display:block}

@media(max-width:700px){
  .cp-modes{grid-template-columns:1fr}
  .cp-progress{grid-template-columns:1fr}
  .cp-actions{grid-template-columns:1fr 1fr}
}