@layer components {
  form .row { display:flex; flex-wrap:wrap; gap: .75rem }
  
  form input[type="text"], form input[type="email"], form select, form textarea {
    width:100%; padding:.6rem .75rem; border-radius:.6rem; border: var(--hairline); background: var(--color-bg); color: var(--color-ink);
  }
  
  /* Lay out: [Name group] [Email group] [Submit] as a 3-column grid, so Submit
     stays inline with the inputs and never wraps off on its own. When space
     tightens the grid drops columns (below) and Submit spans the inputs' width. */
  form.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    column-gap: 1rem;
    row-gap: .75rem;
    /* Cap + centre the form so inputs don't sprawl on wide pages. Applies to
       every intake form (waitlist, Hack Day RSVP, …), not just one section —
       the old #signup-scoped rule in sections.css is now redundant. */
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    /* One control height for both the inputs and the Submit button, so they
       line up top and bottom on a row (the button was 44px vs ~47px inputs). */
    --control-height: 2.95rem;
  }

  /* Label above input. Column width comes from the grid track. */
  .form-container .form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;                  /* space between label and input */
    min-width: 0;                /* let the 1fr column shrink without overflow */
  }

  /* Submit sits in the auto (3rd) column, bottom-aligned with the inputs. */
  .form-container .submit-btn {
    align-self: end;                      /* sit on the same bottom line */
    height: var(--control-height, 44px);  /* match input height (fallback 44px) */
    display: inline-flex;                 /* center the label inside */
    align-items: center;
    justify-content: center;
    margin: 0;                            /* eliminate UA margins that misalign */
    white-space: nowrap;                  /* keep the label on one line */
    min-width: 9em;                       /* reserve width so the "Submitting…" label doesn't reflow the column */
  }

  /* Inputs take the same control height as the button so the row lines up. */
  .form-container input { height: var(--control-height); }

  /* eliminate stray margins that can throw off the baseline */
  .form-container label,
  .form-container input { margin: 0; }

  /* Honeypot stays hidden */
  .additional-field { display: none; }

  /* Tablet: Name + Email share the top row; Submit drops below, spanning the
     full width of both inputs. */
  @media (max-width: 720px) {
    form.form-container { grid-template-columns: 1fr 1fr; }
    .form-container .submit-btn { grid-column: 1 / -1; width: auto; }
  }
  /* Mobile: stack the fields, Submit full width under them. */
  @media (max-width: 460px) {
    form.form-container { grid-template-columns: 1fr; }
  }

  /* Inline submission status — shown right below the form, in place of the
     corner toast, so it's obvious what happened. On success the form hides and
     this confirmation takes its place, so the cleared/gone fields can't read as
     an error. Colours match the toast palette; it collapses to nothing until a
     message is set, and role="status" announces it to assistive tech. */
  .form-status {
    max-width: 760px;
    margin: 1rem auto 0;
    padding: 0.85rem 1.25rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
  }
  .form-status:empty { margin: 0; padding: 0; }
  .form-status--success { background: #d4edda; color: #155724; }
  .form-status--error   { background: #f8d7da; color: #721c24; }

}