/* ============================================================================
   Question Center (support.html) — fast, guided support triage.
   Uses tokens only. Choice-driven wizard: 2–3 taps to submit.
   ============================================================================ */
.qc{ max-width:720px; margin:0 auto; }
.qc-shell{ position:relative; padding:clamp(20px,4vw,34px);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  border-radius:var(--r-2xl); box-shadow:var(--glass-sheen), var(--sh-3);
  -webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur-lg)) saturate(var(--glass-sat)); }

/* progress + back row */
.qc-top{ display:flex; align-items:center; gap:var(--sp-3); min-height:34px; margin-bottom:var(--sp-4); }
.qc-back{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--r-pill);
  font-size:.85rem; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--line);
  transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); visibility:hidden; }
.qc-back:hover{ background:var(--bg-2); transform:translateX(-2px); }
.qc-back.show{ visibility:visible; }
.qc-dots{ display:flex; gap:7px; margin-left:auto; }
.qc-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line-strong);
  transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.qc-dots i.on{ background:var(--grad-blue); transform:scale(1.15); box-shadow:var(--glow-blue); }

/* step container animates on each render */
.qc-steps{ position:relative; }
.qc-step{ animation:qcIn .34s var(--ease-out) both; }
@keyframes qcIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.qc-step h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:6px; }
.qc-step .qc-sub{ color:var(--muted); margin-bottom:var(--sp-4); }

/* choice cards */
.choice-grid{ display:grid; gap:var(--sp-3); }
.choice{ display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  padding:16px 18px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-1); cursor:pointer;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.choice:hover{ transform:translateY(-2px); border-color:var(--blue-200); box-shadow:var(--sh-2), var(--glow-blue); }
.choice:active{ transform:translateY(0) scale(.99); }
.choice .cico{ flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-md);
  color:var(--blue-600); background:var(--blue-50); border:1px solid var(--blue-100); }
.choice .cico svg{ width:26px; height:26px; }
.choice .ctext{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.choice .ct{ font-weight:650; color:var(--ink); font-size:1.02rem; }
.choice .cs{ font-size:.86rem; color:var(--muted); }
.choice .carrow{ margin-left:auto; color:var(--blue-500); font-weight:700; font-size:1.1rem;
  transition:transform var(--dur-2) var(--spring); }
.choice:hover .carrow{ transform:translateX(4px); }

/* context chip shown on the details step */
.qc-context{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:var(--r-pill);
  font-size:.84rem; font-weight:600; color:var(--blue-700); background:var(--blue-50); border:1px solid var(--blue-100);
  margin-bottom:var(--sp-4); }
.qc-context svg{ width:16px; height:16px; }

/* details form */
.qc-form .field{ margin-bottom:var(--sp-4); }
.qc-form textarea{ min-height:120px; resize:vertical; }
.qc-optional{ color:var(--faint); font-weight:400; }
.qc-error{ color:var(--bad); font-size:.85rem; margin:-6px 0 var(--sp-3); min-height:1em; }
.qc-submit{ width:100%; }

/* success */
.qc-success{ text-align:center; padding:var(--sp-4) 0; }
.qc-check{ width:74px; height:74px; margin:0 auto var(--sp-4); border-radius:50%; display:grid; place-items:center;
  color:#fff; background:var(--grad-blue); box-shadow:var(--glow-blue-strong), var(--sh-2);
  animation:qcPop .5s var(--spring-lg) both; }
.qc-check svg{ width:38px; height:38px; }
@keyframes qcPop{ 0%{ transform:scale(.2); opacity:0; } 60%{ opacity:1; } 100%{ transform:scale(1); } }
.qc-success h2{ margin-bottom:6px; }
.qc-recap{ display:inline-block; text-align:left; margin:var(--sp-4) auto 0; padding:14px 18px; border-radius:var(--r-md);
  background:var(--bg-2); border:1px solid var(--line); font-size:.9rem; color:var(--ink-2); }
.qc-recap b{ color:var(--ink); }

/* quick answers (self-serve, instant) */
.quick{ max-width:720px; margin:var(--sp-7) auto 0; }
.quick h3{ text-align:center; margin-bottom:var(--sp-4); }
.quick details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:var(--sp-3); overflow:hidden; transition:box-shadow var(--dur-2) var(--ease); }
.quick details[open]{ box-shadow:var(--sh-2); }
.quick summary{ list-style:none; cursor:pointer; padding:15px 18px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.quick summary::-webkit-details-marker{ display:none; }
.quick summary::after{ content:"+"; font-size:1.3rem; color:var(--blue-500); font-weight:400;
  transition:transform var(--dur-2) var(--spring); }
.quick details[open] summary::after{ transform:rotate(45deg); }
.quick .qa-body{ padding:0 18px 16px; color:var(--ink-2); }

@media (max-width:560px){
  .choice{ padding:14px; } .choice .cico{ width:42px; height:42px; }
}