/* ==========================================================================
   qikink-overrides.css — our only CSS, loaded AFTER qikink.css (design team's file, read-only,
   replaced as a whole). Tokens only: no typed colours, fonts or sizes the design system doesn't have.
   When the design team ships one of these in qikink.css, delete it here.

   Part 1 · signup split (24 Sep 2026, design-team confirmed) — scoped .split:not(.question)
   Part 2 · onboarding question page — where Figma differs from / is missing in qikink.css
   Part 3 · onboarding "Setting up" screen (Figma board 9) — not in qikink.css at all
   Part 4 · sign in + forgot password (Figma sign-in boards 1b/1c/1d, 30 Sep) — not in qikink.css yet
   Part 5 · WhatsApp number step (Figma 2b, 1 Oct) — not in qikink.css yet
   ========================================================================== */

/* ─── Part 1 · signup split ─── */
@media (min-width:768px){

  /* 1. photo column = Figma's 660 x 800 photo frame (ratio .825), scaled to the screen height.
        At Figma's 1200 x 800 frame this is exactly 660px (55%); never wider than 55%, never
        narrower than 35%. Export signup_1.png at the same shape (1320 x 1600, 2x). */
  .split:not(.question) .photo{width:clamp(35%, 100dvh * 660 / 800, 55%)}

  /* 2. form block centred in the pane (qikink.css already sets width:100%; max-width:540px here) */
  .split:not(.question) .pane-body{margin-inline:auto}

  /* 3. desktop logo follows the centred form's left edge.
        .pane-body max-width 540px, padding 64px  →  50% - 270px + 64px = 50% - 206px */
  .split:not(.question) .pane .logo-desk{left:max(64px, calc(50% - 206px))}
}

/* ─── Part 2 · onboarding question page ─── */

/* 4. Figma: the phone question screens have no photo (qikink.css draws a 150px banner). */
@media (max-width:767px){
  .split.question .photo{display:none}
}

/* 5. qikink.css spans .optout / .wide across both columns, but those classes sit on the button and the
      grid item is its <li>. Span the <li> (Figma: "Something else", "Other", "Prefer not to say",
      Q6's last option, and the open "Other" card). */
.options > li:has(> .optout),
.options > li:has(> .wide),
.options > li.is-open{grid-column:1 / -1}

/* 6. Q3 "Other" open (Figma 5b): the selected card grows a text box — label, input, Submit answer,
      Skip description. The <li> carries the card colour so the button and the panel read as one card. */
.options > li.is-open{background:var(--n-500);border-radius:var(--r-card)}
.remarks{padding:0 var(--s4) 13px}
.remarks-inner{border-top:var(--ctl-stroke);padding-top:14px}
.remarks-lbl{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--t-lead);letter-spacing:-.02em;color:var(--cream);margin-bottom:10px}
.remarks-row{display:flex;flex-direction:column;gap:var(--s2)}
@media (min-width:768px){
  .remarks-row{flex-direction:row;gap:10px}
  .remarks-row .inp{flex:1 1 auto;min-width:0}
  .remarks-row .btn{flex-shrink:0}
}

/* 7. qikink.css: .optcard.optout b / .optrow.optout b (text colour) come after the .sel rules, so a selected
      "Something else" / "Other" / "Prefer not to say" kept dark text on the navy card. Figma: cream. */
.optcard.optout.sel b,
.optrow.optout.sel b{color:var(--cream)}

/* 8. onboarding split: photo 40% / content 60% of the window (replaces qikink.css's fixed 340px column).
      The photo keeps qikink.css's object-fit:cover. Two option columns only while the pane has room. */
@media (min-width:768px){
  .split.question .photo{width:40%}
  .split.question .pane{container-type:inline-size}
}
@container (max-width:560px){
  .options.two{grid-template-columns:1fr}
}

/* 9. bulk quote form (#question.is-form, set by onboarding.js) — Figma "Get a bulk quote" (30 Sep).
      Only what qikink.css has no rule for: photo on the right at the DS 340px (phone: banner), the page padding,
      the card box, the form/summary grid and the field rows. Fields, labels, errors, buttons are the DS classes. */
.bq-card{background:var(--surface);border:var(--ctl-stroke);border-radius:var(--r-card);padding:15px;min-width:0}
.bq-steps{display:flex;flex-direction:column;gap:10px;min-width:0}
.bq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.bq-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.bq-row-qty{grid-template-columns:minmax(0,1fr) 110px}
.bq-row > .field + .field{margin-top:0}                      /* DS .field + .field adds 20px; rows use gap */
.bulk-banner{height:150px;margin:0 calc(-1 * var(--s4)) 14px}  /* phone: the photo as a banner under the bar */
@media (max-width:767px){ .split.question .bulk-banner{display:block} }   /* rule 4 hides .photo on the phone; not this one */
.bar .bulk-only.logo{display:block}
@media (min-width:768px){
  .bulk-banner{display:none}
  .split.question.is-form > .photo{order:2;width:clamp(340px, 40%, 640px)}   /* photo 40% of the window (340–640px), like the question pages */
    .split.question.is-form .pane{justify-content:center}
  .split.question.is-form .pane-body{padding:70px 44px 30px}
  .bq-card{padding:12px var(--s4) 14px}
  .bq-summary{padding:var(--s4) 18px}
}
@container (min-width:820px){                                 /* room for the summary beside the form */
  .bq-grid{grid-template-columns:minmax(0,1fr) 300px;gap:14px}
  .bq-row-qty{grid-template-columns:minmax(0,1fr) 150px}
  .bq-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 11. option icons (Figma tokens 28 Sep: --ico-opt 36px desktop, --ico-opt-m 20px phone, --ico-stroke 1.75).
       qikink.css still draws them at 40px / stroke 2. Phone cards follow the Figma 390 boards (padding, gap, 15px label). */
.optcard .art{width:36px;height:36px;flex:0 0 36px}
.optcard .art svg{width:36px;height:36px;stroke-width:1.75}
@media (max-width:767px){
  .optcard{padding:var(--s3) 14px;gap:var(--s3);min-height:0}
  .optcard .art{width:20px;height:20px;flex:0 0 20px}
  .optcard .art svg{width:20px;height:20px;stroke:var(--n-500)}
  .optcard.sel .art svg{stroke:var(--cream)}
  .optcard b{font-size:var(--t-lead)}
}

/* ─── Part 3 · "Setting up your workspace" (Figma board 9) ───
   Shown for 4 s after the last answer. The board's looping 3.2 s animation, re-timed to ONE run that
   lands and holds (no loop, no fade-out) so nothing restarts before the dashboard opens. */
.setup{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream)}
.setup-body{flex:1;display:grid;place-items:center;padding:var(--s4) var(--s4) var(--s6)}
.setup-card{width:100%;max-width:560px;background:var(--surface);border:var(--ctl-stroke);border-radius:var(--r-card);padding:var(--s6) var(--s4);text-align:center}

.setup-art{position:relative;width:200px;height:220px;margin:0 auto 26px;display:grid;place-items:center}
.setup-tee{width:190px;height:190px;stroke:var(--n-300);fill:var(--cream);stroke-width:1.6;stroke-linejoin:round}
/* print area centred on the garment body (board: x 52.97%, y 55.61%) */
.setup-print-area{position:absolute;left:52.97%;top:55.61%;transform:translate(-50%,-50%);width:60px;height:68px;overflow:hidden}
.setup-print{width:100%;height:100%;background:linear-gradient(150deg,var(--n-500),var(--n-400));border-radius:2px;display:grid;place-items:center}
.setup-print-art{width:28px;height:28px;stroke:var(--o-400)}                 /* Figma phone: orange mark */
.setup-head{position:absolute;left:-7px;right:-7px;height:3px;background:var(--o-500);border-radius:2px}

.setup-rows{text-align:left;max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.setup-row{display:flex;align-items:center;gap:var(--s3)}
.setup-ring{width:24px;height:24px;flex-shrink:0;border-radius:50%;border:2px solid var(--n-100);display:grid;place-items:center}
.setup-ring path{stroke:var(--surface);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}
.setup-label{font-size:var(--t-body);font-weight:500;line-height:1.4;color:var(--text-3)}

@media (min-width:768px){
  .setup .logo-desk{position:absolute;top:34px;left:44px;height:24px;width:auto}
  .setup-card{padding:var(--s8) var(--s8) 36px}
  .setup-art{margin-bottom:30px}
  .setup-print-art{stroke:var(--cream)}                                      /* Figma desktop: cream mark */
}

/* motion: print sweeps down (0.1–1.8 s), then the three rows land one after another and stay */
.setup:not([hidden]) .setup-print{clip-path:inset(0 0 100% 0);animation:setup-reveal 1.7s var(--ease-travel) .1s forwards}
.setup:not([hidden]) .setup-head{top:-2px;opacity:0;animation:setup-sweep 2s var(--ease-travel) .1s forwards}
.setup:not([hidden]) .setup-row{opacity:0;transform:translateY(6px);animation:setup-rise var(--dur-move) var(--ease-move) forwards}
.setup:not([hidden]) .setup-ring{animation:setup-ring var(--dur-tick) var(--ease-land) forwards}
.setup:not([hidden]) .setup-ring path{animation:setup-tick var(--dur-draw) var(--ease-move) forwards}
.setup:not([hidden]) .setup-label{animation:setup-lit var(--dur-fast) linear forwards}
/* stagger (selectors carry :not([hidden]) so they outrank the animation shorthands above) */
.setup:not([hidden]) .r1{animation-delay:.25s} .setup:not([hidden]) .r1 .setup-ring, .setup:not([hidden]) .r1 .setup-label{animation-delay:.55s} .setup:not([hidden]) .r1 .setup-ring path{animation-delay:.7s}
.setup:not([hidden]) .r2{animation-delay:1s}   .setup:not([hidden]) .r2 .setup-ring, .setup:not([hidden]) .r2 .setup-label{animation-delay:1.3s} .setup:not([hidden]) .r2 .setup-ring path{animation-delay:1.45s}
.setup:not([hidden]) .r3{animation-delay:1.75s} .setup:not([hidden]) .r3 .setup-ring, .setup:not([hidden]) .r3 .setup-label{animation-delay:2.05s} .setup:not([hidden]) .r3 .setup-ring path{animation-delay:2.2s}

@keyframes setup-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes setup-sweep{0%{top:-2px;opacity:1}85%{top:calc(100% - 1px);opacity:1}100%{top:calc(100% - 1px);opacity:0}}
@keyframes setup-rise{to{opacity:1;transform:none}}
@keyframes setup-ring{0%{background:transparent;border-color:var(--n-100);transform:scale(1)}50%{background:var(--ok);border-color:var(--ok);transform:scale(1.18)}100%{background:var(--ok);border-color:var(--ok);transform:scale(1)}}
@keyframes setup-tick{to{stroke-dashoffset:0}}
@keyframes setup-lit{to{color:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .setup .setup-print, .setup .setup-head, .setup .setup-row, .setup .setup-ring, .setup .setup-ring path, .setup .setup-label{animation:none!important}
  .setup .setup-print{clip-path:none}
  .setup .setup-head{display:none}
  .setup .setup-row{opacity:1;transform:none}
  .setup .setup-ring{background:var(--ok);border-color:var(--ok)}
  .setup .setup-ring path{stroke-dashoffset:0}
  .setup .setup-label{color:var(--ink)}
}

/* ─── Part 4 · sign in + forgot password (Figma 1b / 1c / 1d) ───
   The split, fields, OTP cells, buttons and help lines are qikink.css (same as signup).
   Only the pieces the sign-in boards add are here. */

/* 12. method switch (Password | One-time code) — the board's .seg segmented control, drawn with <button>s.
       Navy marks the selection; orange stays on the Sign in button. */
/* 12. method switch (Password | One-time code) — the board's .seg segmented control, drawn with <button>s.
       Navy marks the selection; orange stays on the Sign in button.
       Each button draws its own border (like .btn / .inp), so no edge can be clipped at any zoom. */
.seg{display:flex;margin:0 0 18px}
.seg > button{flex:1 1 0;min-height:var(--target-min);padding:10px var(--s2);border:var(--ctl-stroke);background:var(--surface);
  font:600 var(--t-small) var(--font-ui);color:var(--text);cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast)}
.seg > button:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.seg > button:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.seg > button + button{border-left:0}
.seg > button:hover:not(.on){background:var(--n-50)}
.seg > button.on{background:var(--n-500);border-color:var(--n-500);color:var(--cream)}
.seg > button:focus-visible{outline:var(--focus-ring);outline-offset:-3px}

/* 13. label row: "Password" left, "Forgot password?" right (board .lrow) */
.lrow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:6px}
.lrow .lbl{margin:0}
.lrow a{font-size:var(--t-small);font-weight:600;text-decoration:none;color:var(--o-700)}

/* 14. small grey line under a field ("Sent to your email…", the password rule) — board .meta */
.meta{font-size:var(--t-small);color:var(--text-2);margin:0}

/* 15. input with a control inside its right edge: "Change" (locked email) and the show-password eye */
.inp-affix{position:relative}
.inp-affix .inp{padding-right:84px}
.inp-affix .affix{position:absolute;top:50%;right:6px;transform:translateY(-50%);min-width:var(--target-min);min-height:36px;
  display:flex;align-items:center;justify-content:center;padding:0 var(--s2);border:0;border-radius:var(--r-ctl);background:transparent;
  font:600 var(--t-small) var(--font-ui);color:var(--o-700);cursor:pointer}
.inp-affix .affix:hover{background:var(--n-50)}
.inp-affix .affix:focus-visible{outline:var(--focus-ring);outline-offset:0}
.inp-affix .affix svg{width:18px;height:18px;fill:none;stroke:var(--text-2);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.inp-affix .affix.on svg{stroke:var(--ink)}
.inp-affix .inp[readonly]{background:var(--surface);color:var(--ink)}

/* 16. "New to Qikink? Sign up ·" — desktop only in the footer line (the phone shows Sign up in the bar) */
.desk-inline{display:none}
@media (min-width:768px){ .desk-inline{display:inline} }

/* ─── Part 5 · WhatsApp number (Figma 2b "+91 | 98200 12345") ─── */

/* 17. phone field: country code + number drawn as ONE DS input (same stroke, radius, focus and error as .inp).
       The code part shows "+91 ⌄"; a native <select> lies invisibly on top, so tapping it opens the
       phone's own country picker with full names (no library, no extra CSS file). */
.phone{display:flex;align-items:stretch;background:var(--surface);border:var(--ctl-stroke);border-radius:var(--r-ctl);
  transition:border-color var(--fast),box-shadow var(--fast)}
.phone:focus-within{border-color:var(--n-500);box-shadow:0 0 0 3px var(--n-100)}
.phone.is-err{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.phone .inp,.phone .inp:focus,.phone .inp.is-err{flex:1 1 auto;min-width:0;border:0;box-shadow:none;background:transparent}
.phone .inp:focus-visible{outline:none}
.phone-cc{position:relative;display:flex;align-items:center;gap:var(--s1);flex-shrink:0;padding:0 var(--s3) 0 var(--s4);
  border-right:var(--ctl-stroke);font:600 var(--t-body) var(--font-ui);color:var(--text-2)}
.phone-cc svg{width:14px;height:14px;fill:none;stroke:var(--text-2);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.phone-cc select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;font-size:var(--t-body)}
.phone-cc:has(select:focus-visible){outline:var(--focus-ring);outline-offset:-2px;border-radius:var(--r-ctl) 0 0 var(--r-ctl)}

.photo::after{display:none}