/* Question Bank entry: two choices side by side. Each card takes the colour
   of its home-page tile (Board Review olive, Question Bank purple) so the
   reader recognises where each path leads. */
.page-questions { --qb-fellow: #637017; --qb-rowan: #884db6; }
body.page-questions.dark { --qb-fellow: #cbd98a; --qb-rowan: #d4a7f2; }

.qb-chooser { max-width: 980px; margin: 0 auto 3.5rem; padding: 1.75rem 1.5rem 0; }
.qb-chooser .page-title { color: var(--text-color); font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 650; letter-spacing: -.035em; margin: 0 0 .5rem; text-align: center; }
.qb-intro { max-width: 60ch; margin: 0 auto 1.75rem; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; text-align: center; }

.qb-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.qb-choice { --qb-color: var(--qb-fellow); position: relative; display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; padding: 1.5rem 1.5rem 1.35rem; color: var(--text-color); text-decoration: none; background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 24px); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.qb-choice[data-choice="rowan"] { --qb-color: var(--qb-rowan); }
.qb-choice:hover { border-color: var(--qb-color); box-shadow: 0 8px 24px rgba(20, 16, 28, .1); transform: translateY(-1px); }
.qb-choice:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }

.qb-choice-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--qb-color); background: color-mix(in srgb, var(--qb-color) 12%, transparent); font-size: 1.35rem; }
.qb-choice-body { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.qb-choice-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.qb-choice-title { font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.qb-choice-text { color: var(--text-secondary); font-size: .97rem; line-height: 1.6; }
.qb-choice-action { align-self: flex-start; margin-top: .35rem; padding: .5rem 1rem; font-size: .92rem; font-weight: 600; color: #fff; background: var(--qb-color); border-radius: 999px; }
body.dark .qb-choice-action { color: #1b1426; }

.qb-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; font-size: .78rem; font-weight: 650; border-radius: 999px; white-space: nowrap; }
.qb-badge-free { color: var(--qb-fellow); background: color-mix(in srgb, var(--qb-fellow) 13%, transparent); }
.qb-badge-code { color: var(--qb-rowan); background: color-mix(in srgb, var(--qb-rowan) 13%, transparent); }
.qb-badge i { font-size: .72rem; }

.qb-footnote { max-width: 60ch; margin: 1.5rem auto 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.55; text-align: center; }

/* Code dialog (native <dialog>: focus stays inside, Escape closes). */
.qb-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; width: min(400px, calc(100vw - 32px)); padding: 0; color: var(--text-color); background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 24px); box-shadow: 0 24px 60px rgba(20, 16, 28, .28); }
.qb-dialog::backdrop { background: rgba(20, 16, 28, .5); }
.qb-dialog-form { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 1.5rem 1.25rem; }
.qb-dialog-title { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; }
.qb-dialog-help { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.qb-dialog-input { width: 100%; min-height: 48px; padding: .65rem .85rem; font: inherit; font-size: 1rem; color: var(--text-color); background: var(--surface-2); border: 1.5px solid var(--border-color); border-radius: 12px; }
.qb-dialog-input:focus { outline: none; border-color: var(--qb-rowan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qb-rowan) 25%, transparent); }
.qb-dialog-error { margin: 0; color: #b4233a; font-size: .92rem; font-weight: 600; }
body.dark .qb-dialog-error { color: #ff9aa8; }
.qb-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .25rem; }
.qb-btn { min-height: 44px; padding: .55rem 1.2rem; font: inherit; font-weight: 600; border-radius: 999px; cursor: pointer; }
.qb-btn-quiet { color: var(--text-color); background: transparent; border: 1px solid var(--border-color); }
.qb-btn-quiet:hover { background: var(--surface-2); }
.qb-btn-primary { color: #fff; background: var(--qb-rowan); border: 0; }
body.dark .qb-btn-primary { color: #1b1426; }
.qb-btn-primary:disabled { opacity: .6; cursor: progress; }
.qb-dialog-note { margin: .25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }
.qb-dialog-note a { color: var(--accent-color); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .qb-chooser { padding: 1.25rem 1rem 0; }
  .qb-choices { grid-template-columns: 1fr; gap: .85rem; }
  .qb-choice { padding: 1.2rem 1.1rem 1.1rem; gap: .9rem; }
  .qb-choice-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 1.15rem; }
  .qb-choice-title { font-size: 1.18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-choice { transition: none; }
  .qb-choice:hover { transform: none; }
}