/* ============================================================
   MEDSY — LEARNING
   Medical-education product components: MCQ (single-best-answer
   question) and Flashcard (flip + spaced-repetition). Token-driven.
   ============================================================ */

/* ---------- MCQ ---------- */
.mcq{max-width:760px}
.mcq-stem{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--text-strong);font-weight:var(--fw-medium);margin-bottom:20px}
.mcq-stem .hy-tag{margin-bottom:14px}
.mcq-options{display:flex;flex-direction:column;gap:12px}
.mcq-option{
  display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-card);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;
  font:inherit;color:var(--ink);transition: border-color var(--dur-control) var(--ease-standard),background var(--dur-control),box-shadow var(--dur-control),transform var(--dur-control) var(--ease-spring);
}
.mcq-option:hover:not(:disabled){border-color:var(--line-mint);background:var(--mint-50);transform:translateY(-1px)}
.mcq-option:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--focus-ring)}
.mcq-key{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--mint-100);color:var(--forest);font-family:var(--f-caps);font-weight:700;font-size:.92rem;border:1px solid var(--line-mint);transition: var(--dur-control)}
.mcq-option-text{flex:1;padding-top:3px;line-height:1.5}
.mcq-mark{flex:none;width:24px;height:24px;display:grid;place-items:center;opacity:0;transform:scale(.5);transition: opacity var(--dur-control),transform var(--dur-control) var(--ease-spring)}
.mcq-mark .v-icon{width:22px;height:22px}
.mcq-option[disabled]{cursor:default}
.mcq-option.is-selected{border-color:var(--forest)}
/* answered feedback: correct settles with a small assured pop, wrong shakes it off */
.mcq-option.is-correct{border-color:var(--forest);background:var(--mint-100);animation: vd-pop-settle var(--dur-overlay) var(--ease-spring)}
.mcq-option.is-correct .mcq-key{background:var(--forest);color:#fff;border-color:var(--forest)}
.mcq-option.is-correct .mcq-mark{opacity:1;transform:scale(1);color:var(--forest)}
.mcq-option.is-wrong{border-color:var(--danger);background:var(--danger-soft);animation: vd-shake var(--dur-overlay) var(--ease-standard)}
.mcq-option.is-wrong .mcq-key{background:var(--danger);color:#fff;border-color:var(--danger)}
.mcq-option.is-wrong .mcq-mark{opacity:1;transform:scale(1);color:var(--danger-ink)}
.mcq-option.is-muted{opacity:.72}
/* A max-height cap silently truncates any explanation taller than the cap — and
   medical rationales run long. The grid 0fr→1fr reveal animates to the content's
   own height, so nothing is ever clipped. Same technique as .acc-body. */
.mcq-rationale{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;
  border:1px solid var(--line-mint);border-radius:var(--r);overflow:hidden;
  transition: grid-template-rows var(--dur-entrance) var(--ease-emphasized),opacity var(--dur-overlay) var(--ease-standard),margin-top var(--dur-overlay) var(--ease-standard)}
.mcq-rationale > div{min-height:0}
.mcq-rationale.show{grid-template-rows:1fr;opacity:1;margin-top:18px}
.mcq-rationale-head{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--mint-50);border-bottom:1px solid var(--line-mint);font-weight:var(--fw-bold);font-size:.9rem;color:var(--text-strong)}
.mcq-rationale-head.wrong{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-ink)}
.mcq-rationale-head .v-icon{width:18px;height:18px}
.mcq-rationale-body{padding:16px 18px;font-size:.96rem;line-height:1.6;color:var(--text-body)}
.mcq-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.mcq-progress{font-family:var(--f-caps);font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em}

/* ---------- FLASHCARD ---------- */
/* Both faces share one grid cell, so the card grows to the TALLER of the two
   instead of clipping at a fixed 280px — a long stem or a long answer used to
   spill outside the card. min-height keeps the familiar presence. */
.flashcard{perspective:1600px;width:100%;max-width:440px;cursor:pointer}
.flashcard-inner{display:grid;width:100%;min-height:280px;transition: transform var(--dur-entrance) var(--ease-spring);transform-style:preserve-3d}
/* hover peeks the card open a few degrees — says "I flip" before you commit */
.flashcard:not(.flipped):hover .flashcard-inner{transform:rotateY(14deg)}
.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}
.flashcard.flipped:hover .flashcard-inner{transform:rotateY(166deg)}
.flashcard-face{grid-area:1/1;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 32px;background:var(--surface-card)}
.flashcard-front{background:var(--grad-soft)}
.flashcard-back{transform:rotateY(180deg);background:var(--grad-deep);border:none}
.flashcard-tag{position:absolute;top:16px;left:16px;font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--forest);background:var(--surface-glass);padding:4px 9px;border-radius:var(--r-pill)}
.flashcard-back .flashcard-tag{color:var(--mint);background:var(--on-dark-chip)}
.flashcard-q{font-family:var(--f-display);font-weight:var(--fw-bold);font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.02em;color:var(--text-strong);line-height:1.2}
.flashcard-a{font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.5;color:var(--on-dark-text)}
.flashcard-hint{position:absolute;bottom:16px;left:0;right:0;font-size:.74rem;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;gap:6px}
.flashcard-back .flashcard-hint{color:var(--on-dark-faint)}
.flashcard-hint .v-icon{width:13px;height:13px}
.srs-controls{display:flex;gap:10px;justify-content:center;margin-top:18px;max-width:440px}
.srs-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px solid var(--line);background:var(--surface-card);border-radius:var(--r);padding:10px 8px;cursor:pointer;font:inherit;transition: border-color var(--dur-hover) var(--ease-standard),background var(--dur-hover) var(--ease-standard),color var(--dur-hover) var(--ease-standard),transform var(--dur-control) var(--ease-spring),box-shadow var(--dur-control) var(--ease-standard)}
.srs-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.srs-btn:active{transform:translateY(0) scale(.96)}
.srs-btn b{font-size:.92rem;font-weight:var(--fw-semibold)}
.srs-btn span{font-family:var(--f-caps);font-size:var(--fs-micro);color:var(--ink-faint)}
.srs-btn.again:hover{border-color:var(--danger);background:var(--danger-soft);color:var(--danger-ink)}
.srs-btn.hard:hover{border-color:#caa12f;background:var(--butter);color:var(--warn-ink)}
.srs-btn.good:hover{border-color:var(--forest);background:var(--mint-50);color:var(--forest)}
.srs-btn.easy:hover{border-color:var(--mint);background:var(--mint-100);color:var(--forest)}
.srs-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

/* answered-state keyframes */
@keyframes vd-pop-settle{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .flashcard-inner,.mcq-option,.mcq-key,.mcq-mark,.srs-btn{transition: none!important}
  .mcq-option.is-correct,.mcq-option.is-wrong{animation: none!important}
}


/* ============================================================
   PRESS STATES — question options, flashcards and review buttons
   Hover is not feedback on a touch screen, and a control that only
   responds to hover feels dead under a finger. Every interactive
   surface here answers a press with the same vocabulary the buttons
   use: small controls sink (translateY(1px) scale(.97)), lifted
   cards press back through their lift, and data cells dip in place.
   Presses are instant by design — no transition — so the response
   lands on touch-down rather than easing in after it.
   ============================================================ */
.mcq-option:active:not(:disabled){transform:scale(.99)}
.flashcard:active .flashcard-inner{transform-origin:center;filter:brightness(.98)}