/* Mission Debrief answer key (js/bb-answer-key.js). Matches the Troubleshooting Methodology lab's .answer-step look. */
.bb-answer-key { margin-top: 18px; }
.bb-answer-key .answer-step { margin:14px 0 18px; padding:12px 14px; border-left:3px solid var(--bb-kelly, #4cbb17); background: var(--theme-learning-success-bg-1383, rgba(76,187,23,.07)); border-radius:0 8px 8px 0; }
.bb-answer-key .answer-step p { margin:4px 0; }
.bb-answer-key .answer-step ul { margin:2px 0 8px; padding-left:20px; }
.bb-answer-key .answer-step li { margin:3px 0; line-height:1.5; }
.bb-answer-key .answer-step .key-label { margin-top:10px; font:700 13px var(--font-code, monospace); letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.bb-answer-key .answer-step .key-prompt { opacity:.9; }
.bb-answer-key .answer-step .key-yes li::marker { content:"✓  "; color: var(--bb-kelly, #4cbb17); }
.bb-answer-key .answer-step .key-no li::marker { content:"✗  "; color:#ff6b6b; }
.bb-answer-key .answer-step em { opacity:.85; }
.bb-answer-key .answer-step .key-status { margin-left:8px; font-size:13px; padding:2px 8px; border-radius:999px; border:1px solid currentColor; }
.bb-answer-key .answer-step .key-status.ok { color: var(--bb-kelly, #4cbb17); }
.bb-answer-key .answer-step .key-status.redo { color:#ffb347; }
.bb-answer-key .answer-step .key-pick { font-size:12px; padding:1px 6px; border-radius:999px; border:1px solid currentColor; opacity:.8; }
.bb-answer-key .answer-step .key-note { margin-top:8px; opacity:.9; }
/* Reveal gate: blurred, collapsed, inline confirm (same as the Troubleshooting Methodology lab). */
.bb-answer-key .key-gate { position:relative; margin:10px 0 18px; }
.bb-answer-key .key-gate-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; border:1px dashed var(--bb-kelly, #4cbb17); border-radius:10px; background: var(--theme-learning-success-bg-1383, rgba(76,187,23,.07)); }
.bb-answer-key .key-gate-bar p { margin:0; flex:1 1 220px; }
.bb-answer-key .key-confirm { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.bb-answer-key .key-confirm[hidden], .bb-answer-key .key-gate [hidden] { display:none; }
.bb-answer-key .key-body { max-height:150px; overflow:hidden; filter:blur(7px); user-select:none; pointer-events:none; -webkit-mask-image:linear-gradient(#000 30%,transparent); mask-image:linear-gradient(#000 30%,transparent); transition:filter .3s; }
.bb-answer-key .key-gate.revealed .key-gate-bar { display:none; }
.bb-answer-key .key-gate.revealed .key-body { max-height:none; overflow:visible; filter:none; user-select:auto; pointer-events:auto; -webkit-mask-image:none; mask-image:none; }
/* Wrong-option reasons fold into an expander (2026-11-02). */
.bb-answer-key .answer-step details.key-why { margin-top:10px; }
.bb-answer-key .answer-step details.key-why > summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; margin-top:0; }
.bb-answer-key .answer-step details.key-why > summary::-webkit-details-marker { display:none; }
.bb-answer-key .answer-step details.key-why > summary::before { content:"▸"; transition:transform .15s; }
.bb-answer-key .answer-step details.key-why[open] > summary::before { transform:rotate(90deg); }
.bb-answer-key .answer-step details.key-why > summary:hover, .bb-answer-key .answer-step details.key-why > summary:focus-visible { opacity:1; color: var(--bb-kelly, #4cbb17); }
/* Mini diagrams inside answer-key steps (2026-11-02). Drawings keep the Cyber Elite look in every theme. */
.bb-answer-key .answer-step .key-figure { margin:10px 0 4px; padding:10px 12px; border:1px solid rgba(76,187,23,.35); border-radius:8px; background:#06110b; overflow-x:auto; }
.bb-answer-key .answer-step .key-figure svg { display:block; width:100%; min-width:560px; height:auto; }