/* ============================================================
   Course interactions: shared flip cards + click-to-match.
   Used by the Skilljar course pages (AI Fluency, Small Business,
   Subagents). Link AFTER app.css + hub.css so tokens resolve.
   Tokens: --ink --ink-mid --gold --gold-tint --gold-line --line
   --card --bad --display --body --mono --ease. No em dashes.
   ============================================================ */

/* flip cards: scenario on the front, the answer on the back */
.flips{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 22px}
@media(min-width:560px){.flips{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.flips{grid-template-columns:repeat(4,1fr)}}
.flip{perspective:900px;cursor:pointer;min-height:158px}
.flip .inner{position:relative;width:100%;height:100%;min-height:158px;transition:transform .5s var(--ease);transform-style:preserve-3d}
.flip.flipped .inner{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:center;font-size:.92rem;line-height:1.45}
.flip .front{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.flip .front .tap{margin-top:12px;font-family:var(--mono);font-size:.64rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.flip .back{background:var(--ink);color:#eef2fb;transform:rotateY(180deg)}
.flip .back b{display:block;font-family:var(--display);font-weight:800;font-size:1.02rem;margin-bottom:5px}
.flip:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:14px}

/* click-to-match: click a term, then its description */
.match{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;margin:6px 0 0}
.match .col{display:grid;gap:10px;align-content:start}
.match button{background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;font-family:var(--body);font-size:.92rem;text-align:left;cursor:pointer;color:var(--ink);width:100%;min-height:44px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.match button:hover{border-color:var(--gold-line)}
.match button.sel{border-color:var(--gold);background:var(--gold-tint)}
.match button.done{background:var(--gold-tint);border-color:var(--gold-line);color:var(--ink-mid);font-weight:600;cursor:default}
.match button.no{animation:ci-shake .3s var(--ease);border-color:var(--bad)}
@keyframes ci-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.match button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.match-note{font-size:.9rem;color:var(--ink-mid);margin:12px 0 0}

/* three-bucket sort: extends the match mechanic. Tasks in the left column,
   buckets in the right. Several tasks share a bucket, so the TASK locks
   green and the bucket only flashes, staying clickable. */
.sort{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 0}
@media(min-width:680px){.sort{grid-template-columns:1.1fr 1fr}}
.sort .col{display:grid;gap:10px;align-content:start}
.sort button{background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;font-family:var(--body);font-size:.92rem;text-align:left;cursor:pointer;color:var(--ink);width:100%;min-height:44px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.sort button:hover{border-color:var(--gold-line)}
.sort button.sel{border-color:var(--gold);background:var(--gold-tint)}
.sort button.done{background:var(--gold-tint);border-color:var(--gold-line);color:var(--ink-mid);font-weight:600;cursor:default}
.sort button.no{animation:ci-shake .3s var(--ease);border-color:var(--bad)}
.sort .bucket{min-height:64px;font-weight:700;line-height:1.3;font-family:var(--display)}
.sort .bucket small{display:block;font-family:var(--body);font-weight:400;color:var(--ink-mid);font-size:.78rem;margin-top:4px}
.sort .bucket.flash{border-color:var(--gold);background:var(--gold-tint);color:var(--ink);animation:ci-pop .35s var(--ease)}
.sort button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@keyframes ci-pop{40%{transform:scale(1.03)}}

@media(prefers-reduced-motion:reduce){.flip .inner{transition:none}.match button.no,.sort button.no,.sort .bucket.flash{animation:none}}