/* ==========================================================================
   forms.css — sign-in, subscribe, account, unsubscribe.

   Extends base.css. It defines NO tokens: every colour, space, radius and font
   here is a var() from base.css, so a change there propagates rather than being
   silently overridden. Mobile-first like the rest of the site — the base rule is
   the phone rule and wider screens are additive min-width queries only.

   .choice / .choice-grid live in base.css and are already exactly what the
   location and day pickers need; nothing below redefines them, it only adds the
   one variant (.choice--wide) and the page chrome around them.
   ========================================================================== */

/* ------------------------------------------------------- page furniture --- */
.auth-page,
.sub-page,
.account-page { padding-top: var(--sp-2); }

.auth-page__title,
.sub-page__title,
.account-page__title { margin-bottom: var(--sp-3); }

/* An email address as an H1 must not blow out the line on a narrow phone. */
.account-page__title {
  font-size: var(--step-2);
  overflow-wrap: anywhere;
}

.auth-page__aside { margin-top: var(--sp-4); }

/* ------------------------------------------------------------- the card --- */
.form-card { margin-top: var(--sp-5); }
.form-card > *:last-child { margin-bottom: 0; }

/* Sticky-ish action block: the primary button spans the thumb-reachable width
   on a phone (.btn--block already handles the width switch at 40rem). */
.form-card__actions {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: var(--sp-3);
}

/* --------------------------------------------------------- fieldsets ------ */
/* A <fieldset> carries the grouping for screen readers; it is stripped of its
   default border so it reads as a section, not a box inside a box. */
.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-5);
  min-width: 0;   /* fieldsets refuse to shrink below content width without this */
}
.fieldset__legend {
  padding: 0;
  margin-bottom: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A full-width choice that is a statement rather than one of a set — the
   "only mail me when there is something to plan" preference. */
.choice--wide { margin-top: var(--sp-2); }

/* ------------------------------------------------------- check-your-mail -- */
.sent-to {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin-bottom: var(--sp-3);
}
.sent-summary {
  list-style: none;
  margin: var(--sp-2) 0 var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--card-2);
  border: 1px solid var(--line-2);
  display: grid;
  gap: var(--sp-1);
}
.sent-summary li { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.sent-summary strong {
  flex: none;
  min-width: 4.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- account --- */
/* One column on a phone; the editor and the side rail split only when there is
   genuinely room for both. */
.account-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 56rem) {
  .account-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

/* Stacked buttons on a phone: three side-by-side actions at 44px tall each is
   how you get a mis-tap on "pause" when you meant "send me one". */
.btn-row--stack { display: grid; gap: var(--sp-3); }
.btn-row--stack form { margin: 0; }
@media (min-width: 40rem) {
  .btn-row--stack { grid-template-columns: 1fr 1fr; }
  .btn-row--stack .btn--block { width: 100%; }
}

/* ------------------------------------------------------------- send log --- */
.sendlog { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.sendlog__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-2);
  align-items: baseline;
}
.sendlog__row:last-child { border-bottom: 0; }
.sendlog__when { grid-column: 1; color: var(--ink-3); }
.sendlog__status {
  grid-column: 2; grid-row: 1;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.sendlog__what {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sendlog__error {
  grid-column: 1 / -1;
  color: var(--rust);
  overflow-wrap: anywhere;
}
.sendlog__row--sent .sendlog__status { color: var(--deep); }
.sendlog__row--failed .sendlog__status { color: var(--rust); }
.sendlog__row--skipped .sendlog__status { color: var(--amber); }

/* A flash used inside a card is a note, not a page-level banner. */
.card .flash { margin-top: var(--sp-4); }
.card code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 5px;
}