/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING — the three screens that decide whether we get any data at all
   ═══════════════════════════════════════════════════════════════════════════

   This flow asked for someone's income and their EMIs while showing them a
   money-bag emoji with a DOLLAR sign on it. Seven emoji across three steps,
   rendered in whatever font the device happened to ship — which means the
   same screen looked different on every phone, and on none of them looked
   like the rest of this site.

   They are drawn now, in the same 24px stroked language as the bottom bar
   and the process steps. The rupee is a real rupee.

   The goal step also had no answer to a tap beyond a border colour. On a
   touch screen your finger is covering the thing that changed colour, so
   the selection genuinely was invisible at the moment it happened. It now
   lifts, fills, and the icon pops — feedback you can feel rather than one
   you have to move your hand to verify.
   ═══════════════════════════════════════════════════════════════════════════ */

.ob-icon{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;margin:0 auto 14px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(31,164,99,.14),rgba(31,164,99,.05));
  border:1px solid rgba(31,164,99,.22);
  color:var(--brand-green,#0E7C4A);
  font-size:0;
}
.ob-icon .ob-ico{display:block;width:30px;height:30px;}
.ob-icon .ob-ico svg{width:30px;height:30px;display:block;}
[data-theme="dark"] .ob-icon{
  background:linear-gradient(145deg,rgba(24,201,121,.16),rgba(24,201,121,.05));
  border-color:rgba(24,201,121,.26);
  color:#5FD9A0;
}

/* The step icon draws itself on arrival. Same trick as the process steps:
   the stroke length is finite and known at author time here because these
   are small, hand-written paths, so a single dash value covers them. */
.ob-step.active .ob-icon .ob-ico svg{
  animation:ob-draw .75s cubic-bezier(.3,.9,.3,1) both;
}
@keyframes ob-draw{
  from{stroke-dasharray:72;stroke-dashoffset:72;opacity:.3;transform:scale(.9)}
  to  {stroke-dasharray:72;stroke-dashoffset:0;opacity:1;transform:scale(1)}
}

/* ── Goal cards ──────────────────────────────────────────────────────── */

.ob-goal-card{
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
  min-height:104px;
  padding:16px 12px;
  border-radius:16px;
  border:1.5px solid rgba(8,92,58,.14);
  background:var(--card-bg,#fff);
  cursor:pointer;
  text-align:center;
  font-size:13.5px;font-weight:700;
  color:var(--text-color);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .22s ease, background .22s ease,
             transform .22s cubic-bezier(.2,.8,.3,1.1), box-shadow .22s ease;
}
.ob-goal-card .ob-gi{display:block;color:var(--brand-green,#0E7C4A);}
.ob-goal-card .ob-gi svg{
  width:28px;height:28px;display:block;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.3);
}
.ob-goal-card:active{transform:scale(.97);}

/* Chosen. Lifts off the sheet, fills, and the icon pops — three signals so
   one of them survives whatever the finger is covering. */
.ob-goal-card.selected{
  border-color:var(--brand-green,#1FA463);
  background:linear-gradient(150deg,rgba(31,164,99,.14),rgba(31,164,99,.05));
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(31,164,99,.18);
}
.ob-goal-card.selected .ob-gi svg{transform:scale(1.14);}
.ob-goal-card.selected::after{
  content:"";
  position:absolute;top:9px;right:9px;
  width:17px;height:17px;border-radius:50%;
  background:var(--brand-green,#1FA463);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat;
  animation:ob-pop .34s cubic-bezier(.2,.9,.3,1.5) both;
}
.ob-goal-card.selected::before{
  content:"\2713";
  position:absolute;top:9px;right:9px;
  width:17px;height:17px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;z-index:1;
  animation:ob-pop .34s cubic-bezier(.2,.9,.3,1.5) both;
}
@keyframes ob-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* The ripple that makes a tap feel answered. Driven by a class the script
   adds and removes, so it can replay on every tap rather than only once. */
.ob-goal-card.ob-ripple::after{animation:none;}
.ob-goal-card .ob-wash{
  position:absolute;left:50%;top:50%;
  width:10px;height:10px;border-radius:50%;
  background:rgba(31,164,99,.26);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  animation:ob-wash .5s ease-out forwards;
}
@keyframes ob-wash{to{transform:translate(-50%,-50%) scale(34);opacity:0}}

[data-theme="dark"] .ob-goal-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  color:var(--text-color);
}
[data-theme="dark"] .ob-goal-card .ob-gi{color:#5FD9A0;}
[data-theme="dark"] .ob-goal-card.selected{
  border-color:#18C979;
  background:linear-gradient(150deg,rgba(24,201,121,.18),rgba(24,201,121,.06));
}

@media (prefers-reduced-motion:reduce){
  .ob-step.active .ob-icon .ob-ico svg{animation:none;}
  .ob-goal-card,.ob-goal-card .ob-gi svg{transition:none;}
  .ob-goal-card.selected{transform:none;}
  .ob-goal-card.selected::after,.ob-goal-card.selected::before{animation:none;}
  .ob-goal-card .ob-wash{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — the part that makes it feel made rather than assembled
   ═══════════════════════════════════════════════════════════════════════════

   The three steps were swapping with display:none. Everything below exists
   to replace that snap with travel the eye can follow:

     the sheet arrives   scale + lift, with the scrim blurring in behind it
     steps travel        forward enters from the right, Back from the left
     the sheet resizes   height animates between steps instead of jumping
     the icon draws      each step's glyph writes itself on arrival
     the rail fills      progress is one continuous track, not three dots

   One easing is used throughout — cubic-bezier(.2,.75,.25,1), a quick start
   that settles rather than bounces. Spring overshoot is reserved for the two
   places a finger actually touches: a goal card, and the primary button.
   ═══════════════════════════════════════════════════════════════════════════ */

#onboarding-overlay{
  opacity:0;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:opacity .3s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease;
}
#onboarding-overlay.is-open{
  opacity:1;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}

#onboarding-overlay .onboarding-modal{
  opacity:0;
  transform:translateY(22px) scale(.965);
  transform-origin:50% 60%;
  transition:opacity .42s ease, transform .55s cubic-bezier(.16,.9,.3,1.04);
  box-shadow:0 34px 90px -28px rgba(6,40,31,.5), 0 2px 10px rgba(6,40,31,.08);
  overflow:hidden;              /* so the height morph clips cleanly */
}
#onboarding-overlay.is-open .onboarding-modal{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ── Step travel ─────────────────────────────────────────────────────── */

.ob-step{opacity:1;}
.ob-step.ob-in-r{animation:ob-enter-r .42s cubic-bezier(.2,.75,.25,1) both;}
.ob-step.ob-in-l{animation:ob-enter-l .42s cubic-bezier(.2,.75,.25,1) both;}
.ob-step.ob-out{animation:ob-leave .15s ease-in both;}
@keyframes ob-enter-r{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ob-enter-l{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes ob-leave {to{opacity:0;transform:translateY(-6px)}}

/* The contents arrive just behind the panel, so the step reads as a thing
   that assembled rather than a block that appeared. */
.ob-step.is-shown .ob-icon{animation:ob-rise .5s cubic-bezier(.2,.8,.3,1.02) .02s both;}
.ob-step.is-shown .ob-heading{animation:ob-rise .5s cubic-bezier(.2,.8,.3,1.02) .07s both;}
.ob-step.is-shown .ob-sub{animation:ob-rise .5s cubic-bezier(.2,.8,.3,1.02) .11s both;}
.ob-step.is-shown .form-group,
.ob-step.is-shown .ob-goals{animation:ob-rise .5s cubic-bezier(.2,.8,.3,1.02) .15s both;}
@keyframes ob-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Progress: one rail, not three unrelated pills ───────────────────── */

.ob-dots{display:flex;gap:6px;justify-content:center;align-items:center;}
.ob-dot{
  height:4px;width:26px;border-radius:4px;
  background:rgba(8,92,58,.14);
  transition:width .42s cubic-bezier(.2,.75,.25,1), background .3s ease;
}
.ob-dot.done{background:rgba(31,164,99,.5);}
.ob-dot.active{background:var(--brand-green,#1FA463);width:40px;}
[data-theme="dark"] .ob-dot{background:rgba(255,255,255,.14);}
[data-theme="dark"] .ob-dot.active{background:#18C979;}

/* ── Inputs ──────────────────────────────────────────────────────────── */

#onboarding-overlay .form-input{
  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
#onboarding-overlay .form-input:focus{
  outline:none;
  border-color:var(--brand-green,#1FA463);
  box-shadow:0 0 0 4px rgba(31,164,99,.14);
}

/* ── The primary button ──────────────────────────────────────────────── */

#onboarding-overlay .btn-accent{
  transition:transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .22s ease, filter .2s ease;
}
#onboarding-overlay .btn-accent:active{transform:scale(.975);}
#onboarding-overlay .btn-accent:not([disabled]):hover{filter:brightness(1.04);}
#onboarding-overlay .btn-accent[disabled]{opacity:.5;}

@media (prefers-reduced-motion:reduce){
  #onboarding-overlay,
  #onboarding-overlay .onboarding-modal{transition:none;}
  #onboarding-overlay .onboarding-modal{opacity:1;transform:none;}
  .ob-step.ob-in-r,.ob-step.ob-in-l,.ob-step.ob-out,
  .ob-step.is-shown .ob-icon,.ob-step.is-shown .ob-heading,
  .ob-step.is-shown .ob-sub,.ob-step.is-shown .form-group,
  .ob-step.is-shown .ob-goals{animation:none;}
  .ob-dot{transition:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PANEL WAS MADE OF GLASS, AND GLASS IS NOT A SURFACE — 9 Nov 2026

   style.css:3418 gives this modal `background: var(--bg-glass)`, and
   --bg-glass is rgba(248,249,250,.75). Three quarters opaque, sitting on an
   overlay of rgba(0,0,0,.65) under a 14px backdrop blur. Composited, the
   card is not white. Measured: rgb(208,209,210) — a mid grey.

   Everything inside inherited that, and four things failed outright:

     the input field      1.30:1 against the card — a field nobody can see
     the BUTTON's label   2.06:1 — the primary action, unreadable
     the sub line         4.40:1 — needs 4.5
     the skip link        4.40:1 — needs 4.5

   The button was white on #18C979, which is --brand-green. That token name
   is a trap: --brand-green resolves to #18C979, the DECORATIVE mint that
   foundation.css measures at 2.17:1 on white and forbids for text. The
   brand green is #1FA463, and neither of them belongs under a white label.

   Glass is for something you are meant to see through. This panel asks a
   stranger for their income, their EMIs and their credit score. It should
   be a solid thing. Every value below is a --mo-* token, no new hex.
   ═══════════════════════════════════════════════════════════════════════════ */

#onboarding-overlay .onboarding-modal{
  background:var(--mo-surface);          /* opaque; flips on its own in dark */
  border:1px solid var(--mo-line);
  border-radius:var(--mo-r-lg);
  padding:var(--mo-s5) var(--mo-s5) var(--mo-s4);
  max-width:400px;
}

/* ── Progress rail ─────────────────────────────────────────────────────── */
#onboarding-overlay .ob-dots{margin-bottom:var(--mo-s5);}
#onboarding-overlay .ob-dot{background:var(--mo-ink-200);}
#onboarding-overlay .ob-dot.done{background:var(--mo-green-200);}
#onboarding-overlay .ob-dot.active{background:var(--mo-accent);}
[data-theme="dark"] #onboarding-overlay .ob-dot{background:var(--mo-line);}
[data-theme="dark"] #onboarding-overlay .ob-dot.active{background:var(--mo-green-400);}

/* ── The icon tile — a 14%-alpha green on a grey card is nothing at all ── */
#onboarding-overlay .ob-icon{
  width:52px;height:52px;margin:0 auto var(--mo-s3);
  border-radius:var(--mo-r-md);
  background:var(--mo-green-100);
  border:1px solid var(--mo-green-200);
  color:var(--mo-green-700);
}
[data-theme="dark"] #onboarding-overlay .ob-icon{
  background:var(--mo-surface-2);
  border-color:var(--mo-line);
  color:var(--mo-green-300);
}

/* ── Words ─────────────────────────────────────────────────────────────── */
#onboarding-overlay .ob-heading{
  font-size:var(--mo-t-xl);
  font-weight:var(--mo-w-black);
  letter-spacing:var(--mo-track-tight);
  color:var(--mo-text);
  margin:0 0 var(--mo-s2);
}
/* The word "moneyed" was set in --brand-green (#18C979, 2.17:1). --mo-accent
   is the token foundation.css designates for anything that carries text:
   green-700 on light, green-400 on the dark ground. */
#onboarding-overlay .ob-heading span{color:var(--mo-accent);}
#onboarding-overlay .ob-sub{
  font-size:var(--mo-t-sm);
  line-height:var(--mo-lh-snug);
  color:var(--mo-text-soft);
  margin:0 auto;
  max-width:34ch;
}
#onboarding-overlay .form-group label{
  color:var(--mo-text);
  letter-spacing:0;
}

/* ── The field ─────────────────────────────────────────────────────────── */
#onboarding-overlay .form-input{
  background:var(--mo-surface);
  /* --mo-line is a 1.42:1 hairline on white: correct for a divider, invisible
     as the edge of a control. The checklist asks 3:1 for a control border and
     --mo-ink-400 is the lightest step on the ramp that clears it, in BOTH
     themes - 4.04:1 on white, 3.47:1 on the dark field. */
  border:1px solid var(--mo-ink-400);
  border-radius:var(--mo-r-md);
  color:var(--mo-text);
  font-size:var(--mo-t-md);
  min-height:48px;
  padding:0 var(--mo-s3);
  width:100%;
}
#onboarding-overlay .form-input::placeholder{color:var(--mo-ink-400);}
#onboarding-overlay .form-input:focus{
  border-color:var(--mo-accent);
  box-shadow:0 0 0 3px var(--mo-green-100);
  outline:none;
}
[data-theme="dark"] #onboarding-overlay .form-input{background:var(--mo-surface-2);}
[data-theme="dark"] #onboarding-overlay .form-input:focus{box-shadow:0 0 0 3px var(--mo-surface-2);}

/* ── The one button that matters ───────────────────────────────────────── */
#onboarding-overlay .btn-accent{
  background:var(--mo-green-700);        /* white on it: 5.85:1 */
  color:var(--mo-white);
  border:0;
  border-radius:var(--mo-r-md);
  min-height:48px;
  font-size:var(--mo-t-md);
  font-weight:var(--mo-w-bold);
}
#onboarding-overlay .btn-accent:hover{background:var(--mo-green-800);}
[data-theme="dark"] #onboarding-overlay .btn-accent{
  background:var(--mo-green-400);
  color:var(--mo-ink-900);               /* dark label on the bright step */
}

/* ── Skip. 44px, because the audit counted 43 targets under it already ─── */
#onboarding-overlay .ob-skip{
  color:var(--mo-text-soft);
  font-size:var(--mo-t-sm);
  min-height:44px;
  margin-top:var(--mo-s2);
}
#onboarding-overlay .ob-skip:hover{color:var(--mo-accent);}

/* ── Goal cards, step 3 ────────────────────────────────────────────────── */
#onboarding-overlay .ob-goal-card{
  background:var(--mo-surface);
  border:1.5px solid var(--mo-line);
  color:var(--mo-text);
}
#onboarding-overlay .ob-goal-card.selected{
  border-color:var(--mo-accent);
  background:var(--mo-green-100);
  color:var(--mo-green-800);
}
[data-theme="dark"] #onboarding-overlay .ob-goal-card{
  background:var(--mo-surface-2);
  border-color:var(--mo-line);
}
[data-theme="dark"] #onboarding-overlay .ob-goal-card.selected{
  background:var(--mo-good-bg);
  border-color:var(--mo-green-400);
  color:var(--mo-green-300);
}