/* Course finder (templates/courses/finder.html, static/js/finder.js): one question at a time on a card. */
.finder-page { max-width: 760px; }
.pp-back { margin: 0 0 1rem; font-weight: 600; }
.pp-back a { text-decoration: none; }
.fd-kicker { margin: 0; font: 700 .78rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.fd-head h1 { margin: .5rem 0 .4rem; font: 800 clamp(2rem, 5vw, 3rem)/1.05 var(--display); }
.fd-head p { margin: 0; color: var(--muted); }
.fd-progress { height: 10px; margin: 1.6rem 0 1rem; border: 2px solid var(--fg); border-radius: 999px; background: #fff; overflow: hidden; }
.fd-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.fd-card { padding: 1.6rem 1.5rem; border: 2px solid var(--fg); border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 var(--fg); }
.fd-step { margin: 0 0 .3rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.fd-q { margin: 0 0 1.1rem; font: 800 1.5rem/1.2 var(--display); }
.fd-opts { display: grid; gap: .6rem; }
.fd-opt { display: block; width: 100%; text-align: left; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; font: inherit; font-weight: 600; line-height: 1.35; color: var(--fg); transition: border-color .12s, background .12s, transform .12s; }
.fd-opt:hover, .fd-opt:focus-visible { border-color: var(--fg); background: var(--accent-soft); transform: translateX(3px); outline: none; }
.fd-nav { display: flex; justify-content: space-between; margin-top: 1rem; }
.fd-back { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: .95rem; color: var(--accent); }
.fd-back[hidden] { display: none; }
.fd-result h2 { margin: .3rem 0 .5rem; font: 800 clamp(1.6rem, 4vw, 2.2rem)/1.1 var(--display); }
.fd-result p { margin: 0 0 1.1rem; line-height: 1.6; }
.fd-also { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); color: var(--muted); }
.fd-again { margin-left: 1rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: .95rem; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .fd-progress span, .fd-opt { transition: none; } }