/* The Email step's one screen. It was two -- Select before the consent
   round-trip and Results after it -- which shared a row, so the row's rules were
   already here once. `.onboarding-list` was Results' wrapper and is now the only one;
   `.email-select` was the other, and its single rule (borderless rows) came with
   it, so the merged list wears Select's borders rather than Results'.

   THIS FILENAME IS A CASCADE DECISION, not a label. Propshaft serves one
   <link> per stylesheet in alphabetical order and there is no @layer, so
   `onboarding_email.css` sorting AFTER `onboarding.css` is what lets these
   rules override the shared onboarding furniture -- .found's 1.5rem gap in
   particular. Renaming this file silently reorders the cascade.

   Folded in from the ?proto= prototype's inline <style> (the drawings on
   prototype/onboarding-email-select and prototype/onboarding-email-results):
   the section spacing and its ratio, the greyed row, the house checkbox
   restatement and the preview list all come from there with their `proto-`
   prefixes dropped.

   And again from the status-tone prototype (prototype/onboarding-email-status-
   tone, .scratch/onboarding-email-status-tone, 2026-09-25), which is where the
   band, the tone glyph, the pill heading the right column, the tick beside it
   and the two type sizes come from -- seven drawings, five tick placements,
   `hush` and `right`.

   WHAT IS NOT HERE IS THE POINT OF IT. Every tone, ring, glyph and pill is the
   app's own (application.css's status-tone--*, icons.css, .status-pill), and
   the row wears the WEBSITE row's classes wherever one exists --
   .row-glyph for the mark, .resource-verdict-glyph for the band's, and
   --row-gutter for the phone margin. What is left below is layout. */

.onboarding {
  .onboarding-list {
    .row {
      border: 0;
    }
  }
  /* ---------- Sections ----------

     THE RATIO IS WHAT MAKES A SECTION READ AS A GROUP rather than as a word.
     A heading sat as close to the rows above it as to its own, so the grouping
     had to be inferred from the wording; the space belongs to the heading.
     Rows are 1rem apart, a heading takes 2.4rem, and a heading that starts a
     new reason takes 3rem. */
  .card section {
    color: var(--color-warm-heading);

    border-top: 1px solid var(--color-warm-border);
    padding-top: 1rem;
    padding-bottom: 1rem;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }

    &:first-of-type {
      border: 0;
      padding-top: 0;
    }

    &.email-actions {
      font-size: 0.8rem;
    }

    .resource-section-heading {
      margin-bottom: 1rem;
      font-size: 1rem;
    }

    > .note {
      margin: -1rem 0 1rem;
      color: var(--color-warm-muted);
      line-height: inherit;
    }

    .row {
      /* .row-top aligns to the TOP (a 2rem mark beside two or three lines of
         text centres itself into the middle of the paragraph), where a row that
         opens otherwise stretches. */
      > .row-top {
        align-items: flex-start;
      }

      .name {
        font-size: 1rem;
      }

      /* .note, the greyed row, the acts and the tags are rows.css's, shared with
         Site#show's tabs. */

      /* The right edge, where everything operable lives, headed by the status
         pill. A COLUMN, and the column is application.css's .row-right: the
         pill says what the row is and the controls under it are what to do
         about it, and the two reading top-to-bottom is what keeps the pill
         from looking like a third button beside two real ones. This adds
         only room -- a wider gap for a line of controls under the pill, and
         clearance from the words.

         WIDE SCREENS ONLY. Nested this deep the rule outweighs
         application.css's phone rule for the same column, and once did
         (markup-audit 06): a phone row kept a right-aligned column the width
         of the screen. Below 52rem the phone rule alone draws it. */
      @media (min-width: 52.0625rem) {
        .row-right {
          padding-left: 0.9rem;
          gap: 0.4rem;
        }
      }

    }
  }

  .verdict {
    display: flex;
    align-items: center;
    gap: 1rem;

    color: var(--color-warm-heading);
    font-size: 1rem;
    font-weight: 700;

    p {
      margin: 0;
    }
  }

  /* Submitted by the footer's primary through the controller; it has no
     controls of its own and nothing to show. */
  .email-decline {
    display: none;
  }

  /* ---------- A row on a phone ----------

     NO RULE HERE: a row on a phone is the website row's, application.css's
     52rem block, so the two screens break in the same place. The head wraps
     there (.row-top), and the right column turns into a row under the text,
     starting at the ROW's left margin (`.row-stack .row-right`). This file's
     own rule for .row-right stops at 52rem so that it does not outweigh it.

     --row-gutter IS THE SHARED TERM FOR THAT MARGIN. application.css
     declares it on .row-stack (the glyph plus the head's gap) and both these
     screens are inside one, which is why the head's gap above is the website
     row's 0.9rem and not a number of this file's own: change one and the
     other follows. */
}