/* Quick practice box on /interview-questions/<role>/ (2026-11-03). Uses legal.css tokens. */
.qp{scroll-margin-top:84px;margin:36px 0 8px;padding:24px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-2)}
.doc .qp h2{margin:0 0 6px;font-size:22px}
.qp .qp-sub{margin:0 0 18px;color:var(--body)}
.qp-step{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--green);margin:0 0 6px}
.qp-q{font-family:var(--font-display);font-size:20px;line-height:1.35;color:var(--ink);margin:0 0 18px}
.qp-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.qp button{font:inherit;cursor:pointer;border:0;border-radius:99px;transition:background .16s,opacity .16s}
.qp button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.qp .qp-go{background:var(--lime);color:var(--lime-ink);font-weight:600;font-size:15px;padding:12px 22px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.qp .qp-go:hover{background:var(--lime-deep)}
.qp .qp-go svg{width:18px;height:18px}
.qp .qp-stop{background:var(--ink);color:#fff;font-weight:600;font-size:15px;padding:12px 22px;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.qp .qp-link{background:none;color:var(--green);text-decoration:underline;text-underline-offset:3px;padding:8px 2px;font-size:15px}
.qp .qp-rec{width:10px;height:10px;border-radius:50%;background:#E5484D;animation:qpPulse 1.2s ease-in-out infinite}
@keyframes qpPulse{50%{opacity:.35}}
.qp .qp-time{font-variant-numeric:tabular-nums;color:var(--body);font-size:15px}
.qp textarea{width:100%;min-height:110px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;resize:vertical;margin:0 0 12px}
.qp textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.qp .qp-note{font-size:13px;color:var(--soft);margin:12px 0 0}
.qp .qp-wait{display:flex;align-items:center;gap:10px;color:var(--body)}
.qp .qp-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--green);animation:qpSpin .8s linear infinite}
@keyframes qpSpin{to{transform:rotate(360deg)}}
.qp .qp-said{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 14px;color:var(--body);font-size:15px}
.qp .qp-said b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
.qp .qp-verdict{display:inline-block;font-size:13px;font-weight:600;padding:4px 10px;border-radius:99px;margin:0 0 10px}
.qp .v-strong{background:#DCF5C4;color:#2F5A0B}
.qp .v-good{background:#FFF1C2;color:#6B4E00}
.qp .v-work{background:#FDE2E1;color:#9B1C1C}
.qp .qp-fb p{margin:0 0 10px}
.qp .qp-try{border-left:3px solid var(--green);padding:2px 0 2px 12px;margin:0 0 16px;color:var(--ink)}
.qp .qp-err{color:#9B1C1C;margin:0 0 12px}
@media (max-width:560px){.qp{padding:18px 16px}.qp-q{font-size:18px}}
@media (prefers-reduced-motion:reduce){.qp .qp-rec,.qp .qp-spin{animation:none}}
/* Role picker on /mock-interview/ (11-04) */
.qp .qp-pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.qp .qp-pick li{margin:0}
.qp .qp-pick a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--line-2);border-radius:99px;background:#fff;color:var(--ink);font-size:15px;text-decoration:none;transition:background .16s,border-color .16s}
.qp .qp-pick a:hover{border-color:var(--green)}
.qp .qp-pick a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.qp .qp-pick a[aria-pressed="true"]{background:var(--lime);border-color:var(--lime-deep);color:var(--lime-ink);font-weight:600}
.qp .qp-hint{color:var(--soft);margin:0}