/* =====================================================================
   Elora Funding — Mobile app layer
   Loaded LAST. Everything here is scoped to a phone/tablet viewport or to
   a touch pointer, so the desktop composition is untouched.

   Principles borrowed from native iOS:
     · one motion curve for anything that travels (--sp), one for anything
       that only fades (--sf)
     · 16px minimum on every text control, because anything smaller makes
       iOS Safari zoom the viewport on focus and the layout never recovers
     · 44px minimum touch target
     · the answer stays on screen while you change the inputs
   ===================================================================== */

:root{
  /* iOS-style decelerate. Long tail, no overshoot — reads as physical. */
  --sp:cubic-bezier(.32,.72,0,1);
  --sf:cubic-bezier(.4,0,.2,1);
}

/* ── Injected group toggle ──────────────────────────────────────────────
   mobile.js moves each group heading's text into a button so the group can
   collapse on a phone. These rules make that button invisible as a control
   at every width, so the desktop heading looks exactly as it did. */
.calc__gbtn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;margin:0;padding:0;background:none;border:0;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  text-align:left;cursor:default;
  appearance:none;-webkit-appearance:none;
}
.calc__gbtn>span{display:block;min-width:0}
.calc__gbtn .chev{
  display:none;flex:0 0 auto;width:18px;height:18px;color:var(--ink-3);
  transition:transform 360ms var(--sp);
}
.calc__gbtn[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.calc__gbtn:focus-visible{outline:2px solid var(--navy-l);outline-offset:3px;border-radius:4px}

/* The three-step progress line animates to its new width instead of jumping. */
#heroProgFill{transition:width 520ms var(--sp)}

/* ── Touch foundation ─────────────────────────────────────────────────── */
@media (hover:none){
  /* Kill the grey flash and the 300ms tap delay; we draw our own press. */
  a,button,label,summary,[role="tab"],input[type="range"],.calc__prod{
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  /* Stop a scroll inside the tool from chaining to the page/rubber-banding. */
  .calc__prods,.calc__tabs{overscroll-behavior-x:contain}
}

@media (max-width:900px){

  /* ── No focus zoom ─────────────────────────────────────────────────────
     iOS zooms the page whenever a focused control is under 16px. Every
     text control the visitor can tap is pinned to 16px here. */
  .calc__inp input,select.calc__sel,
  .field input,.field select,.field textarea{font-size:16px}
  .calc__inp input,select.calc__sel{padding-top:13px;padding-bottom:13px}
  .calc__inp__pre,.calc__inp__suf{font-size:15px}
  .calc__inp--cur input{padding-left:28px}

  /* ── Tap targets ───────────────────────────────────────────────────── */
  .calc__tab,.calc__seg button,.calc__prod{min-height:44px}
  .calc__seg button{display:flex;align-items:center;justify-content:center}

  /* ── Segmented control ─────────────────────────────────────────────────
     The three calculators become one iOS segmented control with a single
     pill that slides between them, instead of three independent buttons
     swapping their own backgrounds. --seg-x/--seg-w are written by
     mobile.js from the selected tab's box. */
  .calc__tabs{
    position:relative;width:100%;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;padding:3px;margin-bottom:14px;
    background:var(--paper-3);border:1px solid var(--line);
    border-radius:12px;overflow:visible;align-items:stretch;
  }
  .calc__tabs::before{
    content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:0;
    width:var(--seg-w,33.333%);transform:translate3d(var(--seg-x,3px),0,0);
    background:var(--paper);border-radius:9px;
    box-shadow:0 1px 4px rgba(10,42,94,.16),0 0 0 .5px rgba(10,42,94,.05);
    transition:transform 420ms var(--sp),width 420ms var(--sp);
  }
  .calc__tabs.is-init::before{transition:none}
  .calc__tab{
    position:relative;z-index:1;padding:8px 6px;font-size:12.5px;
    line-height:1.25;white-space:normal;text-align:center;hyphens:none;
    background:transparent;box-shadow:none;
    transition:color 260ms var(--sf);
  }
  .calc__tab[aria-selected="true"]{background:transparent;box-shadow:none;color:var(--navy)}
  .calc__tab:active{color:var(--navy)}

  /* ── Collapsible input groups ──────────────────────────────────────────
     A phone cannot show fifteen inputs at once, so the advanced group of
     each calculator starts closed. Primary inputs stay open — nothing that
     drives the headline number is hidden behind a tap. The toggle lives
     inside the heading so the heading stays a heading for screen readers. */
  .calc__grouph.is-tog{padding-bottom:0;border-bottom:0}
  .calc__grouph.is-tog .calc__gbtn{
    min-height:44px;cursor:pointer;
    padding-bottom:8px;border-bottom:1px solid var(--line-2);
  }
  .calc__grouph.is-tog .chev{display:block}
  .calc__gwrap{overflow:hidden;will-change:height}
  .calc__gwrap[hidden]{display:none}
  .calc__gwrap>*:first-child{margin-top:12px}

  /* ── Product picker becomes a snap carousel ────────────────────────────
     Seven stacked cards is a wall of scrolling. One snapping row, edge to
     edge, with the next card peeking so it reads as swipeable. */
  .calc__prods{
    display:flex;gap:10px;grid-template-columns:none;min-width:0;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scroll-padding-left:16px;
    margin-inline:-16px;padding:2px 16px 10px;
    scrollbar-width:none;
  }
  .calc__prods::-webkit-scrollbar{display:none}
  .calc__prod{
    flex:0 0 min(68vw,290px);scroll-snap-align:start;
    transition:border-color 200ms var(--sf),background 200ms var(--sf),
               box-shadow 200ms var(--sf),transform 140ms var(--sf);
  }

  /* ── Results ───────────────────────────────────────────────────────── */
  .calc__panel{padding:16px;border-radius:14px}
  .calc__hero__v{font-size:30px}
  .calc__mets{grid-template-columns:1fr 1fr}
  .calc__met dd{font-size:16px}
  .calc__bars{height:64px}

  /* Leave room for the live result bar so it never sits on top of the
     last row of the tool. */
  body.calc-live .calc--lead{padding-bottom:84px}
}

/* ── Sliders ────────────────────────────────────────────────────────────
   A 20px thumb is a desktop thumb. Touch gets 28px, a real shadow, and a
   visible grow on press so the finger gets feedback under the fingertip. */
@media (hover:none){
  input[type=range].calc__range{height:34px}
  input[type=range].calc__range::-webkit-slider-thumb{
    width:28px;height:28px;margin-top:-11.5px;
    border:.5px solid rgba(10,42,94,.18);
    box-shadow:0 3px 8px rgba(10,42,94,.18),0 1px 1px rgba(10,42,94,.14);
    transition:transform 160ms var(--sf),box-shadow 160ms var(--sf);
  }
  input[type=range].calc__range::-moz-range-thumb{
    width:28px;height:28px;border:.5px solid rgba(10,42,94,.18);
    box-shadow:0 3px 8px rgba(10,42,94,.18);
  }
  input[type=range].calc__range:active::-webkit-slider-thumb{
    transform:scale(1.16);
    box-shadow:0 5px 14px rgba(10,42,94,.24),0 1px 1px rgba(10,42,94,.14);
  }
  .calc__sl__v{transition:color 200ms var(--sf)}

  /* ── Press feedback ─────────────────────────────────────────────────── */
  .calc__prod:active,.calc__seg button:active,
  .btn:active,.mres__cta:active,.herocard__cta:active{transform:scale(.972)}
  .btn,.herocard__cta{transition:transform 140ms var(--sf),
    background 200ms var(--sf),box-shadow 200ms var(--sf),color 200ms var(--sf)}
  .calc__seg button{transition:transform 140ms var(--sf),
    background 200ms var(--sf),color 200ms var(--sf)}
}

/* =====================================================================
   LIVE RESULT BAR
   On a phone the inputs and the results stack, so the answer scrolls off
   screen exactly when the visitor starts changing numbers. This pins the
   headline metric of the active calculator to the bottom of the screen
   while the tool is in view, and carries its own CTA so there is always a
   way forward. It replaces the generic call/apply bar rather than
   stacking on it.
   ===================================================================== */
.mres{
  position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:96;display:none;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(10,42,94,.10);
  transform:translateY(112%);
  transition:transform 400ms var(--sp);
}
.mres.is-on{transform:translateY(0)}
.mres__in{display:flex;align-items:center;gap:12px}
.mres__m{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
.mres__l{
  font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mres__v{
  font-size:21px;font-weight:700;line-height:1.1;letter-spacing:-.022em;
  color:var(--navy);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color 240ms var(--sf);
}
.mres__v.is-good{color:var(--green)}
.mres__v.is-warn{color:#9A6A12}
.mres__v.is-bad{color:#B3261E}
.mres__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  min-height:46px;padding:0 17px;border-radius:var(--r-btn);
  background:var(--green);color:#fff;font-size:14.5px;font-weight:700;
  letter-spacing:-.004em;border:0;cursor:pointer;font-family:inherit;
  box-shadow:0 1px 2px rgba(10,42,94,.16);
  transition:transform 140ms var(--sf),background 200ms var(--sf);
}
.mres__cta svg{width:15px;height:15px;flex:0 0 auto}
.mres__cta:active{background:var(--green-d)}

@media (max-width:900px){
  .mres{display:block}
  /* The live bar owns the bottom of the screen while the tool is in view. */
  body.calc-live .mobar{transform:translateY(115%)!important}
}

/* =====================================================================
   REDUCED MOTION
   Everything above degrades to instant. Nothing here is load-bearing for
   comprehension — the values, states and layout are all still correct.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .calc__tabs::before,.calc__grouph.is-tog .chev,.calc__gwrap,
  .mres,.mres__v,.calc__prod,.calc__sl__v,
  .btn,.herocard__cta,.calc__seg button,
  input[type=range].calc__range::-webkit-slider-thumb{
    transition-duration:1ms!important;
  }
  .calc__prod:active,.calc__seg button:active,.btn:active,
  .mres__cta:active,.herocard__cta:active{transform:none}
  .calc__prods{scroll-snap-type:none}
}