/* ═══════════════════════════════════════════════════════════════════════════
   RivCut credit application — mobile stepped wizard
   Loaded on credit-application.html only, AFTER css/rc-app.css.

   Ports the prototype's `isCredit` wizard (RivCut Mobile App.dc.html:1161+,
   steps at :1541). The desktop page is one long form of 9 sections and 48
   required fields; on a phone that is an enormous scroll with no sense of
   progress. This shows ONE section at a time.

   IMPORTANT: no DOM is moved. Every .form-section stays exactly where it is
   and is shown or hidden with CSS, so all 48 field ids, every handler, the
   signature canvas and the real form submit keep working untouched. Desktop
   >=1024px shows all nine sections exactly as today.

   `screen and` is deliberate — Chrome's print viewport is ~816px, so a bare
   max-width block would collapse a printed application down to one section.
   ═══════════════════════════════════════════════════════════════════════ */

/* Inert until js/rc-credit.js opts the page in, so a JS failure leaves the
   full scrolling form rather than a page showing one section and no way out. */
.rc-cr { display: none; }

@media screen and (max-width: 1023px) {

  body.rc-cr-on .rc-cr { display: block; }

/* ── one section at a time ───────────────────────────────────────────── */
  body.rc-cr-on .form-section { display: none !important; }
  body.rc-cr-on .form-section.rc-step-on {
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: rc-in .24s var(--rc-ease, ease);
  }
  /* The wizard header carries the number and title, so the in-form one is
     redundant on a phone. */
  body.rc-cr-on .form-section.rc-step-on .form-section-header { display: none !important; }

  /* The page's own submit button is replaced by the sticky footer action. */
  body.rc-cr-on .btn-submit { display: none !important; }
  body.rc-cr-on .form-actions,
  body.rc-cr-on .submit-row { display: none !important; }

  body.rc-cr-on .page-wrap {
    padding-bottom: calc(24px + var(--rc-cta-h, 0px) + var(--rc-tabbar-h, 0px)) !important;
  }

  /* The page preamble is 415px: a 302px hero card plus a 113px notice box.
     With the sticky wizard header on top of that, the first field landed at
     y=811 in an 844px viewport behind a fixed footer at y=703 — the customer
     saw a step title and no fields at all. The wizard header carries the
     title, and the notice's one load-bearing sentence (applying is optional)
     is folded into the step 1 subtitle in js/rc-credit.js, so nothing is
     lost. Desktop keeps both. */
  body.rc-cr-on .page-header,
  body.rc-cr-on .notice-box { display: none !important; }

/* ── sticky step header ──────────────────────────────────────────────── */
  .rc-cr-head {
    position: sticky;
    top: calc(var(--rc-promo-h, 0px) + var(--rc-nav-h, 64px));
    z-index: 15;
    background: #F4F6F8;
    margin: 0 -16px 16px;
    padding: 12px 16px 14px;
    box-shadow: 0 8px 14px -12px rgba(11, 31, 59, .3);
  }
  body.rc-cr-on { background: #F4F6F8 !important; }

  .rc-cr-count {
    font: 600 12px 'IBM Plex Sans', system-ui, sans-serif;
    color: #8A9099;
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  .rc-cr-title {
    font: 800 22px/1.15 'Geist', system-ui, sans-serif;
    letter-spacing: -.5px;
    color: var(--dark, #0B1F3B);
    margin-top: 5px;
  }
  .rc-cr-sub { font-size: 13px; color: #6E7580; line-height: 1.55; margin-top: 6px; }

  /* Reuse the page's own #progressBar, which shipped as nine dead dots that
     no JS ever referenced. Now it tracks the wizard. */
  body.rc-cr-on .progress-bar {
    display: flex !important;
    gap: 4px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }
  body.rc-cr-on .progress-dot {
    flex: 1 !important;
    width: auto !important;
    height: 5px !important;
    border-radius: 5px !important;
    background: #DFE3E8 !important;
    transition: background .25s var(--rc-ease, ease);
  }
  body.rc-cr-on .progress-dot.rc-done { background: #4C8DFF !important; }
  body.rc-cr-on .progress-dot.active  { background: var(--blue, #0d4fb4) !important; }

/* ── the step body, restyled as one app card ─────────────────────────── */
  .rc-cr-card {
    background: #fff;
    border: 1px solid var(--rc-line, #DFE3E8);
    border-radius: 16px;
    padding: 18px 16px;
  }

  body.rc-cr-on .form-group { margin-bottom: 16px !important; }
  body.rc-cr-on .form-group:last-child { margin-bottom: 0 !important; }
  body.rc-cr-on label {
    display: block !important;
    font: 600 13px 'IBM Plex Sans', system-ui, sans-serif !important;
    color: var(--gray-700, #4A4F57) !important;
    margin-bottom: 6px !important;
  }
  body.rc-cr-on .form-row { flex-direction: column !important; gap: 0 !important; }

/* ── missing-field notice (prototype's stepMissing) ──────────────────── */
  .rc-cr-missing {
    background: #FFF8E8;
    border: 1px solid #F5DFA8;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .rc-cr-missing-h {
    font: 700 12.5px 'Geist', system-ui, sans-serif;
    color: #92400e;
    margin-bottom: 5px;
  }
  .rc-cr-missing ul { margin: 0; padding-left: 16px; }
  .rc-cr-missing li { font-size: 12.5px; color: #A16207; line-height: 1.6; }

/* ── sticky footer actions ───────────────────────────────────────────── */
  .rc-cr-foot {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--rc-tabbar-h, 0px);
    z-index: 994;
    display: flex;
    gap: 10px;
    padding: 12px 16px 14px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border-top: 1px solid var(--rc-line, #DFE3E8);
  }
  .rc-cr-btn {
    min-height: 50px;
    border: 0;
    border-radius: 13px;
    font: 700 14px 'Geist', system-ui, sans-serif;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .rc-cr-back {
    flex: 0 0 96px;
    background: #F4F6F8;
    color: #4A4F57;
  }
  .rc-cr-next {
    flex: 1;
    background: var(--blue, #0d4fb4);
    color: #fff;
    box-shadow: 0 8px 22px rgba(13, 79, 180, .25);
  }
  /* Never disabled: a dead button on a phone cannot explain itself, and the
     thing blocking it may be several fields up. Tapping it reveals what is
     missing and jumps there. */
  .rc-cr-next.is-blocked {
    background: #EDEFF3;
    color: #8A9099;
    box-shadow: none;
  }

/* ── keep the heavy bits readable inside a step ──────────────────────── */
  body.rc-cr-on .terms-scroll {
    max-height: 46vh !important;
    max-height: 46dvh !important;
    overscroll-behavior: contain !important;
  }
  body.rc-cr-on .sig-canvas-wrap canvas { width: 100% !important; }
}