/* qcard.css — the question card (rule G82). SOURCE OF TRUTH: tools/qcard/qcard.css in psychometrictest-ai;
   the copies in each app folder are made by tools/qcard/sync.sh — never edit a copy.
   Markup:  <div class="qc-deck"><div class="qc-under qc-u2"></div><div class="qc-under qc-u1"></div>
              <div class="… qc-card"> question, answers, <button class="qc-next">Next →</button> </div></div>      */
html.qc-on{overflow-x:clip}                                   /* a card flying off never widens the page */
.qc-deck{position:relative;padding-bottom:20px}
.qc-under{position:absolute;left:0;right:0;top:0;bottom:20px;border:2.5px solid #14181F;border-radius:24px;background:#FFFFFF;transform-origin:50% 100%;pointer-events:none}
.qc-under.qc-u1{transform:translateY(10px) scale(.965);background:var(--qc-next-fill,#FFFFFF)}
.qc-under.qc-u2{transform:translateY(20px) scale(.93);background:#FFD93B}
.qc-deck[data-qc-peek="1"] .qc-u2,.qc-deck[data-qc-peek="0"] .qc-under{display:none}
.qc-card{position:relative;z-index:2;background:var(--qc-fill,#FFFFFF);border:2.5px solid #14181F;border-radius:24px;
  touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;   /* sideways = the card; up-down and pinch stay the browser's */
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s ease;will-change:transform}
.qc-card.qc-dragging{transition:none;cursor:grabbing}
.qc-card.qc-rise{transition:none;transform:translateY(10px) scale(.965)}
.qc-card.qc-from-left{transition:none;transform:translateX(-60%) rotate(-8deg);opacity:0}
.qc-card.qc-fly-left,.qc-ghost.qc-fly-left{transform:translateX(-135%) rotate(-14deg);opacity:0}
.qc-card.qc-fly-right,.qc-ghost.qc-fly-right{transform:translateX(135%) rotate(14deg);opacity:0}
.qc-ghost{position:absolute;z-index:3;margin:0;pointer-events:none;box-sizing:border-box}
.qc-card.qc-shake{animation:qc-shake .32s}
@keyframes qc-shake{25%{transform:translateX(-9px)}60%{transform:translateX(7px)}}
/* the word that shows on the card while it is dragged; it sits on the side that stays on screen */
.qc-stamp{position:absolute;top:12px;z-index:3;white-space:nowrap;font:800 13px 'Bricolage Grotesque','Segoe UI',sans-serif;letter-spacing:.04em;text-transform:uppercase;
  border:2.5px solid currentColor;border-radius:10px;padding:4px 10px;background:#FFFFFF;opacity:0;pointer-events:none}
.qc-stamp.qc-s-next{right:12px;color:#188A5E;transform:rotate(8deg)} .qc-stamp.qc-s-pick{right:12px;color:#D9442B;transform:rotate(8deg)}
.qc-stamp.qc-s-back{left:12px;color:#2B6CB8;transform:rotate(-8deg)} .qc-stamp.qc-s-first{left:12px;color:#5A6472;transform:rotate(-8deg)}
/* the refusal: one second, where the person is looking */
.qc-toast{position:fixed;left:50%;top:50%;z-index:2147483000;transform:translate(-50%,-50%);background:#14181F;color:#FFFFFF;
  font:800 14px 'Bricolage Grotesque','Segoe UI',sans-serif;border-radius:999px;padding:9px 18px;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.qc-toast.qc-on{opacity:1}
.qc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Next: on every question from the start, grey until an answer is picked (G82.10). It has ONE place: the end of the card,
   after the answers. It never floats: a floating Next covered answers and took taps meant for them (found by the
   independent check, 12 Oct 2026). */
.qc-next{align-self:center;display:block;margin:4px auto 0;font:800 16px 'Bricolage Grotesque','Segoe UI',sans-serif;color:#FFFFFF;background:#D13F26;
  border:2.5px solid #14181F;border-radius:999px;padding:11px 26px;cursor:pointer}
.qc-next:disabled{background:#D9DEE6;color:#7C8696;border-color:#B7BFCB;cursor:default}
.qc-next:focus-visible,.qc-arrow:focus-visible{outline:3px solid #2B6CB8;outline-offset:2px}
/* the chosen answer: solid dark fill of the card's own colour, white text, yellow edge (G82.9) */
.qc-card .qc-sel{background:var(--qc-deep,#14181F)!important;color:#FFFFFF!important;border-color:#14181F!important;box-shadow:4px 4px 0 #FFD93B!important}
.qc-card .qc-kick{color:var(--qc-deep,#D9442B)}
/* back / forward arrows by the progress bar */
.qc-arrow{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid #DDE6F1;background:#FFFFFF;color:#14181F;font-size:17px;line-height:1;cursor:pointer}
.qc-arrow:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){
  .qc-card{transition:opacity .12s}
  .qc-card.qc-fly-left,.qc-card.qc-fly-right,.qc-ghost.qc-fly-left,.qc-ghost.qc-fly-right,.qc-card.qc-from-left,.qc-card.qc-rise{transform:none}
  .qc-ghost{transition:opacity .12s}
  .qc-card.qc-shake{animation:none}
}