/* ==========================================================================
   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 two split only when there is room for both.
   Wider than .wrap--mid's 60rem, because both columns now hold real controls -
   starving one to fit the other is the wrong trade when the page can just be
   wider. */
.account-page { max-width: 74rem; }

.account-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 56rem) {
  /* Equal columns so the two sides line up. Both hold cards of the same weight
     now - what you do with the brief on the left, what is in it on the right -
     and an uneven split reads as one of them being the afterthought. */
  .account-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Both columns start on the same line.
 *
 * .form-card carries its own margin-top, which is right on /subscribe and
 * /login where a form follows a paragraph of prose. Here it meant whichever
 * column happened to begin with a form sat one step lower than the one
 * beginning with a plain card - the left starts with Delivery (.card) and the
 * right with What you get (.card.form-card), so the two tops never matched.
 * The gap between the columns' cards is the .stack rhythm either way. */
.account-grid > .stack > :first-child { margin-top: 0; }

/* ------------------------------------------------------------ delivery --- */
/* Stacked blocks inside the Delivery card. Each is a label, its control, and
   the sentence that says what it does - so the two are visibly the same kind
   of thing at different sizes, rather than two columns of unequal height. */
.deliv + .deliv { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-2); }
.deliv__lbl {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.deliv__note { margin: var(--sp-2) 0 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); }
.deliv form { margin: 0; }

/* The spot picker: chips that wrap, not full-width rows. Six spots as stacked
   rows made the card taller than everything beside it. */
.spotpick { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.spotpick__i {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card-2);
  font-size: var(--step--1);
  cursor: pointer;
}
.spotpick__i:has(input:checked) { border-color: var(--trout); background: var(--tint); color: var(--deep); }
.spotpick__i:focus-within { outline: 2px solid var(--trout); outline-offset: 2px; }

/* 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;
}