/* PORCH — Connect on a phone.
   Connect can't become a .pwalk: the page IS a guided form, and the walk
   stylesheet hides every non-walk child. So instead of swapping the page out,
   this gives Connect the walk's grammar — one screen at a time, the skyline
   under it, thumb-reachable actions. Everything lives inside max-width:820px,
   so the desktop build is untouched.

   Selectors are scoped `.riverlight [data-page="connect"]` to match the
   specificity riverlight.css already uses for this page; a bare .card or
   .welcome rule here is silently dead. The card's horizontal padding is a
   variable so the sticky action bar's negative bleed cannot drift from it. */

.cwalk-city{ display: none; }

@media (max-width: 820px){

  /* ---- the sky the walk pages share --------------------------------- */
  .cwalk-city{
    display: block;
    position: fixed;
    left: 50%; bottom: 0;
    width: 112vw;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    opacity: .3;
  }
  .cwalk-city img{
    display: block;
    width: 100%; height: auto;
    filter: brightness(.34) saturate(.6);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 58%);
    mask-image: linear-gradient(180deg, transparent, #000 58%);
  }
  .cwalk-city s.beam{
    position: absolute;
    left: 50%; bottom: 12%;
    width: 2px; height: 46vh;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(244,201,122,.34), rgba(244,201,122,0));
  }
  .riverlight [data-page="connect"] .wrap,
  .riverlight [data-page="connect"] .connect-foot{ position: relative; z-index: 1; }

  /* ---- arrival ------------------------------------------------------- */
  .riverlight [data-page="connect"] .welcome{
    min-height: calc(100svh - var(--porch-bar-h, 56px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 4px 34px;
  }
  /* The flex rule above outranks .welcome.gone, which left the hidden
     welcome taking a full screen above the form after "Let's talk". */
  .riverlight [data-page="connect"] .welcome.gone{ display: none; }
  .riverlight [data-page="connect"] .welcome h1{
    font-size: clamp(38px, 11.5vw, 52px);
    margin-bottom: 18px;
  }
  .riverlight [data-page="connect"] .welcome p{
    font-size: 16px; line-height: 1.68; margin-bottom: 15px;
  }
  .riverlight [data-page="connect"] .welcome .w-rule{ margin: 20px auto; }
  .riverlight [data-page="connect"] .welcome .begin{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    justify-content: center;
    min-height: 54px;
    font-size: 15px;
  }

  /* ---- the form, one step per screen --------------------------------- */
  .riverlight [data-page="connect"] .form-zone.shown{
    /* The body already clears the bar; adding it again left a band of empty
       space above the form. */
    padding-top: 8px;
  }
  /* Once the form is showing, it starts right under the bar. */
  .riverlight [data-page="connect"] > .wrap:has(.form-zone.shown){ padding-top: 0; }
  .riverlight [data-page="connect"] .form-zone.shown .rail{ margin-bottom: 14px; }

  .riverlight [data-page="connect"] .rail{
    position: sticky;
    top: var(--porch-bar-h, 56px);
    z-index: 3;
    padding: 12px 0 14px;
    background: linear-gradient(180deg, rgba(15,26,38,.94) 60%, rgba(15,26,38,0));
  }

  .riverlight [data-page="connect"] .card{
    --cwalk-pad: 20px;
    --cwalk-pad-b: 24px;
    padding: 26px var(--cwalk-pad) calc(var(--cwalk-pad-b) + env(safe-area-inset-bottom));
    border-radius: 6px;
    overflow: hidden;
  }
  .riverlight [data-page="connect"] .prompt{ font-size: 24px; }

  /* Fields a thumb can hit, and a font size iOS will not zoom into. */
  .riverlight [data-page="connect"] input[type="text"],
  .riverlight [data-page="connect"] input[type="email"],
  .riverlight [data-page="connect"] input[type="tel"],
  .riverlight [data-page="connect"] textarea{
    font-size: 16px;
    min-height: 48px;
    padding-bottom: 12px;
  }
  .riverlight [data-page="connect"] textarea{ min-height: 120px; }

  .riverlight [data-page="connect"] .choices .choice{
    min-height: 52px;
    font-size: 15px;
    text-align: left;
  }

  .riverlight [data-page="connect"] .actions{
    position: sticky;
    bottom: 0;
    margin: 22px calc(var(--cwalk-pad) * -1)
            calc((var(--cwalk-pad-b) * -1) - env(safe-area-inset-bottom));
    padding: 14px var(--cwalk-pad) calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(20,33,47,.97) 72%, rgba(20,33,47,0));
    gap: 12px;
  }
  .riverlight [data-page="connect"] .actions button{ min-height: 50px; }
  .riverlight [data-page="connect"] .actions .btn-next{ flex: 1 1 auto; }

  .riverlight [data-page="connect"] .connect-foot{
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
  }
}