/* ==========================================================================
   Post-signup onboarding survey — stepper on /account. Matches the site's
   design system (hairline borders, Gabarito headings, blue accent, whitespace).
   Motion lives in survey.js (transform + height transitions); this owns layout.
   ========================================================================== */
.survey{ position:relative; }   /* NOT overflow:hidden — that clipped the footer button's drop shadow. Only .survey-viewport clips (for the slide). */
/* Card treatment adopted from the AnimatedStepper reference: large rounded
   corners + a big soft floating shadow (kept our tokens/buttons/colours). This
   overrides the default .acct-card look for the survey card specifically. */
.survey.acct-card{
  border-radius:30px;
  box-shadow:0 40px 90px -34px rgba(17,17,19,.18), 0 3px 10px rgba(17,17,19,.05);
  padding:clamp(24px,3.4vw,36px);
}
.survey.acct-card:hover{ transform:none;   /* interactive card — no hover-lift like the sibling account cards */
  box-shadow:0 40px 90px -34px rgba(17,17,19,.18), 0 3px 10px rgba(17,17,19,.05); }

/* header: step indicators + skip */
.survey-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; }
/* indicators span the width (connectors flex-grow, reference style); skip sits right */
.survey-steps{ flex:1; display:flex; align-items:center; }
.survey-dot{
  position:relative; flex:none; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--bg-soft);
  border:2px solid var(--line-strong); color:var(--ink-faint);
  font-family:var(--sans); font-weight:700; font-size:14px; line-height:0;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.survey-dot .ck{ position:absolute; inset:0; margin:auto; width:18px; height:18px; opacity:0;
  stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* active: white fill + blue ring/text, with a soft blue glow (reference's -inset glow) */
.survey-dot.is-active{ background:var(--bg); border-color:var(--blue); color:var(--blue);
  box-shadow:0 0 0 4px rgba(18,134,230,.14), 0 6px 16px rgba(18,134,230,.28); }
.survey-dot.is-done{ background:var(--blue); border-color:var(--blue); }
.survey-dot.is-done .n{ opacity:0; }
.survey-dot.is-done .ck{ opacity:1; }
.survey-conn{ flex:1 1 auto; min-width:16px; height:2px; margin:0 10px; border-radius:2px;
  background:var(--line-strong); position:relative; overflow:hidden; }
.survey-conn::after{ content:""; position:absolute; inset:0; background:var(--blue);
  clip-path:inset(0 100% 0 0); transition:clip-path .45s cubic-bezier(.33,1,.68,1); }
.survey-conn.is-filled::after{ clip-path:inset(0 0 0 0); }
@media (max-width:520px){ .survey-dot{ width:34px; height:34px; font-size:13px; } .survey-conn{ margin:0 6px; } }

.survey-skip{
  flex:none; background:none; border:0; cursor:pointer; padding:6px 4px;
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink-soft);
  transition:color .2s var(--ease);
}
.survey-skip:hover{ color:var(--ink); }

/* viewport clips the sliding track; JS animates its height per step */
.survey-viewport{ overflow:hidden; }
.survey-track{ display:flex; align-items:flex-start; width:100%; will-change:transform; }
.survey-step{
  flex:0 0 100%; width:100%; box-sizing:border-box; padding:2px;
  opacity:.35; transition:opacity .4s var(--ease);
}
.survey-step.is-active{ opacity:1; }

.survey-q{ font-family:var(--sans); font-weight:700; font-size:1.42rem; letter-spacing:-.025em; margin:0 0 6px; color:var(--ink); }
.survey-q:focus{ outline:none; }
.survey-qsub{ margin:0 0 18px; color:var(--ink-soft); font-size:.95rem; }
.survey-q + .survey-opts, .survey-q + .survey-handles{ margin-top:16px; }

/* option cards (single + multi) */
.survey-opts{ display:grid; gap:10px; }
.survey-opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:14px; border:1.5px solid var(--line-strong);
  background:var(--bg); font-family:var(--body); font-size:.97rem; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.survey-opt:hover{ border-color:var(--ink-faint); }
.survey-opt:active{ transform:scale(.99); }
.survey-opt.is-on{ border-color:var(--blue); background:var(--blue-wash); }
.survey-opt-mark{
  flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; line-height:0;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.survey-opt[role="checkbox"] .survey-opt-mark{ border-radius:7px; }
.survey-opt-mark .dot{ display:block; width:10px; height:10px; border-radius:50%; background:var(--blue); opacity:0; transform:scale(.4); transition:opacity .18s var(--ease), transform .18s var(--ease); }
.survey-opt-mark svg{ width:14px; height:14px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .18s var(--ease); }
.survey-opt.is-on .survey-opt-mark{ border-color:var(--blue); background:var(--blue); }
.survey-opt[role="radio"].is-on .survey-opt-mark{ background:var(--bg); }
.survey-opt.is-on .survey-opt-mark .dot{ opacity:1; transform:scale(1); }
.survey-opt.is-on .survey-opt-mark svg{ opacity:1; }
.survey-opt-label{ flex:1; }

/* free-text "other" + handle inputs */
.survey-other, .survey-handle-input{
  width:100%; box-sizing:border-box; font-family:var(--body); font-size:.95rem; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line-strong); border-radius:12px; outline:none;
  transition:border-color .18s var(--ease);
}
.survey-other{ margin-top:10px; padding:12px 14px; }
.survey-other:focus, .survey-handle-box:focus-within{ border-color:var(--blue); }

.survey-handles{ display:grid; gap:14px; }
.survey-handle{ display:block; }
.survey-handle-lbl{ display:block; font-family:var(--sans); font-weight:600; font-size:.85rem; color:var(--ink-soft); margin-bottom:6px; }
.survey-handle-box{ display:flex; align-items:stretch; border:1.5px solid var(--line-strong); border-radius:12px; overflow:hidden; background:var(--bg); transition:border-color .18s var(--ease); }
.survey-handle-at{ flex:none; display:grid; place-items:center; padding:0 4px 0 14px; color:var(--ink-faint); font-family:var(--sans); font-weight:600; font-size:1rem; }
.survey-handle-input{ border:0; border-radius:0; padding:12px 14px 12px 4px; }

/* footer buttons */
.survey-foot{ display:flex; align-items:center; gap:10px; margin-top:24px; }
.survey-back{ min-width:96px; }
.survey-next{ margin-inline-start:auto; min-width:140px; }
.survey-next.is-disabled{ opacity:.5; filter:grayscale(.2); cursor:not-allowed; }
.survey-err{ margin:14px 0 0; font-size:.9rem; color:#c02626;
  animation:surveyErrIn .24s var(--ease) both; }
@keyframes surveyErrIn{ from{ opacity:0; transform:translateY(4px); } }

/* completion + resume prompt */
.survey-thanks{ text-align:center; padding:18px 8px 10px; }
.survey-thanks-ck{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 14px; border-radius:50%; background:var(--blue); }
.survey-thanks-ck svg{ width:26px; height:26px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.survey-thanks h3{ font-family:var(--sans); font-weight:700; font-size:1.2rem; letter-spacing:-.02em; margin:0 0 6px; }
.survey-thanks p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

.survey-resume{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-radius:16px; border:1px dashed var(--line-strong);
  background:var(--bg-soft); color:var(--ink-soft); font-size:.92rem;
  /* matches .settings-grid's own gap, so this reads as a card in the same
     stack rather than being welded to whatever renders right below it
     (on /account that's the panel/rail grid — no margin here read as touching). */
  margin-bottom:26px;
}
.survey-resume span{ flex:1; min-width:200px; }
.survey-resume-btn{
  flex:none; background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:var(--sans); font-weight:700; font-size:.92rem; color:var(--blue);
}
.survey-resume-btn:hover{ text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
  .survey-track, .survey-viewport, .survey-step, .survey-conn::after, .survey-dot{ transition:none !important; }
  .survey-step:not(.is-active){ display:none; }
  .survey-err{ animation:none; }
}