/* FloosYo · Onboarding, browser only
   Loaded by onboarding/show.html.erb when the request is not from the native
   app; every rule is scoped to .onboarding--web, which only the browser gets.
   onboarding.css stays the source of truth for the slides themselves.

   On a phone-sized browser nothing changes: the flow is already a phone
   screen. From 640px up it is a full page: slide content centred, a
   full-width footer bar with a hairline top border, the CTA at the end side
   and the secondary links (sign in, skip, trial note) at the start side. */

@media (min-width: 640px) {
  .onboarding--web {
    --safe-top: 20px;
    --safe-bottom: 0px;
    --web-ob-bar-h: 112px;
    --web-ob-max: 1000px;
    --web-ob-gutter: max(24px, calc((100vw - var(--web-ob-max)) / 2));
  }

  /* Progress bar: same width as the footer's content row. */
  .onboarding--web .progress-row {
    max-width: var(--web-ob-max);
    margin-inline: auto;
  }

  /* Slides clear the footer bar instead of the phone's floating CTA. Not the
     paywall: it hides the bar, and padding its slide pushes the docked
     purchase sheet off the bottom (see .slide--paywall in onboarding.css). */
  .onboarding--web .slide:not(.slide--paywall) {
    padding-bottom: calc(var(--web-ob-bar-h) + 24px);
  }

  /* Footer bar: flat, full width, hairline on top. */
  .onboarding--web .bottom-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--web-ob-bar-h);
    padding: 24px var(--web-ob-gutter);
    background: var(--color-base-100);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  }
  /* Slides that draw their own buttons (auth, paywall) hide the shared CTA
     (onboarding#updateNav); with it gone the bar would be an empty strip. */
  .onboarding--web .bottom-nav:has(.nav-row .btn[hidden]) {
    display: none;
  }
  .onboarding--web .bottom-nav > * {
    order: 1;
    margin: 0;
  }
  .onboarding--web .bottom-nav > .nav-row {
    order: 2;
    margin-inline-start: auto;
    max-width: none;
  }

  /* CTA: sized to its label, not stretched across the bar. */
  .onboarding--web .nav-row .btn {
    flex: 0 0 auto;
    width: auto !important; /* the button carries an inline width:100% for the phone */
    min-width: 200px;
    padding-inline: 32px;
  }
}

/* Trial reminder slide: push permission is an iPhone-app feature, so the
   "Enable notifications" ask is hidden in the browser. */
.onboarding--web .reminder-enable-wrap {
  display: none;
}

/* Mouse users: drop the touch-only pan lock. */
@media (hover: hover) {
  .onboarding--web { touch-action: auto; }
}