/* Onboarding's frame: the centered shell every logged-out page is drawn in
   (centered_shell.css), so a visitor who signs up walks on into onboarding
   without the frame changing under them. That file draws the header, the
   name, the 64rem rules and the footer row; this one draws only what is
   onboarding's own -- a narrower column, the footer pinned as the way
   forward, and the screens inside.

   The shell carries .onboarding beside .app-shell--centered. Everything below
   hangs off that one root, so a screen's furniture is named for what it is
   (.hero, .found, .app-footer) and the cascade says whose it is.

   The exception is the hand-off at the bottom of this file: onboarding ends
   on a real page, so .onboarding-finish is drawn by
   layouts/application.html.erb, outside .onboarding, and keeps its prefix.

   Sizing note: media queries resolve rem against 16px while the root
   font-size steps from 16px to 20px (application.css's note), so a
   breakpoint written 40rem is 640px while a length written 8rem inside one
   is 160px on a phone, where the root is 20px. */

.onboarding {
  /* The column is narrower than the shell's 64rem: a Step asks for one
     decision. The header and the pinned footer keep the shell's width. */
  .app-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 48rem;
    /* Clears the pinned footer, which is fixed over this column. */
    padding-bottom: 5.35rem;
  }

  /* The frames carry the title, and the screens render app partials rather
     than whole pages -- so if a page's own heading or tabs ever come through
     the yield, they are onboarding's to drop. */
  .app-main > .section-tabs,
  .app-main > h1 {
    display: none;
  }

  /* ---------- The screen's own heading ---------- */

  /* No top margin: the shell's own padding is the space under its header. */
  .hero {
    margin: 0 0 1.75rem;
    text-align: center;

    .icon {
      display: inline-grid;
      place-items: center;
      width: 3.5rem;
      height: 3.5rem;
      margin-bottom: 0.6rem;
      border-radius: 999px;
      background: var(--color-warm-accent-bg);
      color: var(--color-warm-accent);
    }

    /* An h1, so its size and colour are every page heading's. */
    .title {
      margin: 0;
    }

    /* The site's address (onboarding_hero_title) is one piece: it moves to
       the next line whole. Only an address wider than the line breaks, and
       then anywhere, so a phone never scrolls sideways. */
    .title .address {
      display: inline-block;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .blurb {
      max-width: 36rem;
      margin: 0.4rem auto;
      color: var(--color-warm-muted);
    }
  }

  /* ---------- Tour screens (Website / Email / Form) ---------- */

  .found {
    .head,
    .row-top {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      flex-wrap: wrap;
    }

    .icon {
      display: grid;
      place-items: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: var(--radius-sm);
      background: var(--color-warm-accent-bg);
      color: var(--color-warm-accent);
    }

    .text {
      flex: 1;
      min-width: 10rem;
    }

    .name {
      margin: 0;
      font-weight: 700;
      color: var(--color-warm-heading);
    }

    .state {
      margin: 0;
      font-size: 0.7rem;
      color: var(--color-warm-muted);
    }

    .promise {
      margin: 0.6rem 0 0.3rem;
      max-width: 36rem;
      font-size: 0.7rem;
      color: var(--color-warm-muted);
    }
  }

  /* ---------- The pinned footer, and the bar that goes with it ---------- */

  /* The shell's own footer (centered_shell.css draws its inset, its 64rem
     cap and its rule), pinned to the foot of the window over the column. */
  .app-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    background: var(--color-bg);

    /* The track, and the count under it, on the side the buttons are not on;
       the buttons beside both. The count is the one place a Step is named, at
       every width: seven labels under seven segments ellipsised the longest
       names on a wide screen and had no room at all on a phone.

       Folded in from the onboarding footer UI prototype (2026-11-08,
       .claude/skills/prototype/UI.md) -- won out over the track as it was
       with the new names, an icon stepper naming only the current Step, the
       track on a row of its own with every name under it, the Steps grouped
       into Account / Monitoring / Notifications chapters, and a count that
       opens a list of every Step. The losing variants were deleted, not
       kept; they are named here so nobody rebuilds them. */
    .inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.45rem 1.25rem;
      padding-block: 0.6rem;
    }

    .track {
      display: flex;
      grid-row: 1;
      grid-column: 1;
      gap: 0.3rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .seg {
      flex: 1;
      min-width: 0;
      border-top: 4px solid var(--color-warm-border);

      &.done,
      &.current {
        border-color: var(--color-warm-accent);
      }
    }

    /* The footer's live region (onboarding/_footer). */
    .count {
      grid-row: 2;
      grid-column: 1;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      font-size: 0.8rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--color-warm-muted);

      strong {
        color: var(--color-warm-heading);
      }
    }

    .actions {
      display: flex;
      grid-row: 1 / span 2;
      grid-column: 2;
      gap: 0.5rem;

      .button {
        white-space: nowrap;
      }
    }

    .button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }

  /* One bar, drawn by the footer and placed by width: across the top of the
     window here, on the footer's top edge on a phone (below). The footer
     has no filter or transform, so nothing fixed inside it is held to it. */
  .progress {
    position: fixed;
    top: var(--impersonation-strip-height);
    right: 0;
    left: 0;
    z-index: 41;
    height: 4px;
    background: var(--color-warm-border);

    span {
      display: block;
      height: 100%;
      background: var(--color-warm-accent);
    }
  }

  /* ---------- Wide ---------- */

  @media (min-width: 40.0625rem) {
    .app-footer {
      /* The buttons' side of the row is reserved at the width of the widest of
         the five, so what is left for the track is the same on every screen
         and the markers keep one size. The widest is Back + Continue, 186px in
         Spanish against 178px in English (macOS); the rest is room for a wider
         system font. The buttons sit at the far end of what is reserved, on
         the header's controls' edge. */
      .actions {
        justify-content: flex-end;
        min-width: 13.75rem;
      }
    }
  }

  /* ---------- Phone ---------- */

  @media (max-width: 40rem) {
    /* The footer is two rows here, not one, so the column needs more
       clearance than the wide screen's single row asks for. (The side gutter
       is application.css's -- .app-main is the app's own element and takes
       the phone's --app-gutter there.) */
    .app-main {
      padding-bottom: 9rem;
    }

    /* The hero is a page heading at this width, so it loses the one part of
       itself that read as an illustration. */
    .hero {
      margin-bottom: 0;
      text-align: left;

      .icon {
        display: none;
      }

      .title {
        font-size: 1.25rem;
      }

      .blurb {
        margin: 0.4rem 0;
        font-size: 0.8rem;
      }
    }

    /* The bar rides the pinned footer's top edge at this width, out of
       flow: full-bleed whatever the rows below it do, and no row gap to
       cancel. Nothing is pinned to the top of a phone but the header. */
    .progress {
      position: absolute;
    }

    /* Two rows: the track across the whole width, then the count beside the
       buttons. Beside them the count has about 140px on a 390px phone, so it
       wraps to a second line before it cuts a name short. */
    .app-footer {
      .inner {
        gap: 0.5rem 0.6rem;
        padding-block: 0.6rem 0.7rem;
      }

      .track {
        grid-column: 1 / -1;
        gap: 0.25rem;
      }

      .seg {
        border-top-width: 6px;
      }

      .count {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.7rem;
        line-height: 1.3;
        white-space: normal;
      }

      .actions {
        grid-row: 2;
      }

      /* The buttons are the size their words make them and sit together at the
         end of the row, so the only space between them is the gap. The slack
         falls outside the pair rather than inside it: spread, it put 145px
         between Back and Continue with nothing to explain it. Continue still
         ends on the gutter. */
      .actions {
        justify-content: flex-end;
      }
    }

    /* A check row's phone treatment -- the cadence and last-checked becoming a
       subline under the text -- is not here. It is in application.css, on
       .row-stack, which wraps these screens too; it used to be written twice,
       once there and once here at a narrower breakpoint. */
  }
}

/* ---------- The hand-off: onboarding's ending, over the page after it ----------

   Onboarding ends on the real page rather than on one of its own, with a
   modal over it naming the five places in the app's frame, each a way there
   (onboarding/_finish). It was a note in the corner that covered nothing, and
   Users missed it.

   Folded in from the onboarding finish overlay UI prototype (2026-10-19,
   .claude/skills/prototype/UI.md) -- the centered card (a) won out over a
   whole-window finish that hid the page (b), a paged card with one place per
   page (d), and numbered markers on the real sidebar links (c, rejected);
   the reasoning is in .scratch/onboarding-finish-overlay/.

   Drawn by layouts/application.html.erb, so it is not inside .onboarding and
   cannot be nested into it. Its frame and parts are the house dialog's
   (application.css). */

.onboarding-finish {
  --dialog-width: 30rem;
  text-align: center;

  /* On a phone the card's own padding is what squeezes the rows. */
  @media (max-width: 40rem) {
    --dialog-pad: 1rem;
  }

  .header h2 {
    margin-top: 0.8rem;
  }

  .badge {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-pass-bg);
    color: var(--color-pass);
  }

  .places {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;

    li {
      border: 1px solid var(--card-border);
      border-radius: var(--radius);
    }

    form { display: contents; }
  }

  /* A link to the place, or for the place the User is on, a close: the same
     row either way. */
  .place {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.5rem 0.8rem;
    border: none;
    border-radius: inherit;
    background: none;
    font: inherit;
    text-align: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;

    &:hover,
    &:focus-visible {
      background: var(--color-warm-accent-bg);

      /* The sidebar's own hover: the icon chip fills (sidebar.css, .nav-primary .link). */
      .tile {
        background: var(--color-warm-accent);
        color: var(--color-on-accent);
      }

      .chevron {
        color: var(--color-warm-accent);
        transform: translateX(2px);
      }
    }
  }

  .tile {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius);
    background: var(--color-warm-accent-bg);
    color: var(--color-warm-accent);
    transition: background 0.12s ease, color 0.12s ease;
  }

  .text { flex: 1; }

  .blurb {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .chevron {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-muted);
    transition: transform 0.15s ease, color 0.15s ease;
  }

  .dismiss {
    width: 100%;
  }
}