/* Topic quiz pages: builds on legal.css with a play button, question list and topic grid. */
.kicker { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .03em; margin: 6px 0 0; }
h1 { font-size: 40px; color: var(--gold); text-wrap: balance; }
.lede { font-size: 17.5px; max-width: 62ch; }
.small { color: var(--muted); font-size: 14.5px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 16px; text-decoration: none;
  font: 800 17px/1 Archivo, system-ui, sans-serif; font-stretch: 110%; color: #2B1800; background: linear-gradient(180deg, #FFE08A, #FFC83D 45%, #FFB000);
  box-shadow: 0 5px 0 #B97A00, 0 12px 26px rgba(255,176,0,.28), inset 0 1px 0 rgba(255,255,255,.7); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #B97A00; }
.btn.ghost { color: var(--ink); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.qs { list-style: none; counter-reset: q; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.qs > li { counter-increment: q; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 12px; }
.qs .lvl { display: inline-block; font: 800 12px/1 Archivo, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.qs .lvl::before { content: counter(q) ".  "; color: var(--muted); }
.qs .q { margin: 8px 0 6px; font-size: 17px; font-weight: 600; color: var(--ink); }
.qs details { color: var(--muted); font-size: 14.5px; }
.qs summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 4px 0; }
.qs details ul { margin: 6px 0 2px; padding-left: 20px; }
.qs details li { color: #E4DDF7; margin: 3px 0; }
.grid { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.grid a { display: block; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.grid a:hover { border-color: rgba(255,200,61,.55); color: var(--gold); }
.fine { color: #8A7DC0; font-size: 12.5px; margin-top: 10px; }
@media (max-width: 520px) { h1 { font-size: 32px; } .cta .btn { flex: 1 1 100%; } }