/* antibiotic-mechanisms-of-action-quiz: target key, chart groups, 30S/50S split, drug sorter */
.target-key li{margin:.6rem 0}
.cell-pin circle{fill:var(--accent);stroke:none}
.cell-pin text{fill:var(--panel);font-size:24px;font-weight:700}
th.chart-group{background:var(--accent);color:var(--panel);font-size:.9rem;letter-spacing:.04em}
.swipe-hint{font-size:.92rem;color:var(--muted);margin:.4rem 0 -.6rem}
@media(min-width:800px){.swipe-hint{display:none}}
.split{display:grid;gap:1rem;margin:1.2rem 0}
.split>div{padding:.3rem 1.1rem .5rem;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.split h3{margin:.7rem 0 .2rem}
.split ul{list-style:none;padding:0;margin:.3rem 0}
.split li{margin:.3rem 0}
@media(min-width:640px){.split{grid-template-columns:1fr 1fr}}
.sort-list{list-style:none;padding:0;margin:1rem 0}
.sort-row{margin:0 0 .9rem;padding:.8rem 1rem;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.sort-drug{margin:0 0 .5rem}
.sort-drug span{color:var(--muted);font-size:.92rem}
.sort-btns{display:flex;flex-wrap:wrap;gap:.45rem}
.sort-btns[hidden]{display:none}
.sort-btns button{font:inherit;font-size:.92rem;min-height:44px;padding:.4rem .8rem;border-radius:8px;cursor:pointer;background:transparent;color:var(--text);border:1px solid var(--muted)}
.sort-btns button:hover{border-color:var(--accent)}
.sort-btns button:focus-visible,.sort-reset button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sort-btns button[aria-pressed=true]{border-width:2px;font-weight:650}
.sort-row.is-right .sort-btns button[aria-pressed=true]{background:var(--accent);color:var(--panel);border-color:var(--accent)}
.sort-row.is-wrong .sort-btns button[aria-pressed=true]{border-color:var(--flow)}
.sort-fb{margin:.5rem 0 0}
.sort-fb:empty{margin:0}
.sort-row.is-right .sort-fb,.sort-row.is-wrong .sort-fb{padding:.55rem .85rem;border-radius:8px;border-left:4px solid;background:var(--soft,#f1eedf)}
.sort-row.is-right .sort-fb{border-color:var(--accent)}
.sort-row.is-wrong .sort-fb{border-color:var(--flow)}
.sort-row .quiz-solution{margin-top:.3rem}
.sort-score{position:sticky;top:0;z-index:2;margin:.6rem 0;padding:.5rem .9rem;font-weight:650;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.sort-score[hidden],.sort-reset[hidden]{display:none}
.sort-reset button{font:inherit;font-size:.95rem;font-weight:650;min-height:44px;padding:.5rem 1.1rem;border-radius:8px;cursor:pointer;background:transparent;color:var(--accent);border:2px solid var(--accent)}

/* The guide CTA uses the requested trial-button colors in both themes. */
.start-btn{background:#3f6fb0;color:#fff}
.dark .start-btn{background:#8fb6ea;color:#171e1b}