/* Sign in, make an account, and checkout. Page-only rules for /signin and /subscribe.
 *
 * ONE CHROME, 2026-09-11. The design lives in site.css and nothing in this file paints a
 * colour, a face or a size of its own: every value below is a var(--...) token from that
 * sheet. Each rule is either a layout the site has no equivalent for, or a page-scoped
 * correction to a shared class. If one of them turns out to belong to the whole site it
 * goes into live-site/style.css and comes back through tools/sync-site-chrome.sh. It never
 * settles here for good, and it never goes into funded.css, which is overrides only.
 */

/* ---- /signin: the two tabbed panels ------------------------------------- */

.auth-panel { margin-top: var(--s5); }

/* The site's .form is one grid column, which is right for a stack of fields and wrong for
   the two ways into an account. Password and emailed link are alternatives, so they sit on
   one line and wrap together when there is no room. */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.form__actions .btn { flex: 1 1 12rem; text-align: center; }

/* .form-fine is used on a <small> under the date-of-birth plate, and a <small> is inline,
   so the fine print sat beside the control instead of under it. */
.form .form-fine { display: block; }

/* ---- /subscribe --------------------------------------------------------- */

/* The Stripe billing paragraph is Funded's: it describes a card held now and charged on the
   open. paintProductChrome stamps generator-flow on the body for the Generator storefront,
   which has its own sentence in the trial note. */
body.generator-flow .field-note--billing { display: none; }

/* The term picker is a toggle group, not a tablist: the chips press, they do not select a
   panel. So they take the site's board tab plate and its own pulled-out-drawer treatment,
   keyed on the attribute a toggle actually carries. */
.board__tab[aria-pressed="true"] {
  color: var(--parchment);
  border-color: var(--brass);
  border-left-width: 4px;
  border-left-color: var(--brass);
}

/* The standard rate and the logo rate are the same plate twice, so they stack like the front
   page's single gen plate until there is room to read both. Past that they sit side by side
   and each plate drops back to one column, because half the width is not enough for the
   figure and the ledger to share a line. */
.softb-pair {
  display: grid;
  gap: var(--gap-row);
  margin-top: var(--s4);
}
@media (min-width: 1100px) {
  .softb-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Two named rows the plates share: the figure and its button, then the ledger. */
    grid-template-rows: auto auto;
  }
  .softb-pair .gen { grid-template-columns: minmax(0, 1fr); }
  .softb-pair .gen__now { border-right: 0; border-bottom: 1px solid var(--line); }

  /* THE PLATES WERE THE SAME HEIGHT AND THE INSIDES DID NOT LINE UP. Reported 2026-09-14
     as uneven. The grid already stretched both plates to the
     same height, so the boxes matched, but the standard plate carries a saving line and a
     logo note the logo plate does not, which pushed its button and its ledger caption
     lower than the other plate's. Two prices meant to be read against each other sat on
     two different baselines.

     Subgrid is what fixes it rather than a hand-tuned min-height: each plate spans the two
     rows above and adopts them, so the figures share one row and the ledgers share the
     next, whatever the copy inside them grows to. A browser without subgrid keeps exactly
     today's behaviour, which is the stretched-but-unaligned pair, not something worse. */
  @supports (grid-template-rows: subgrid) {
    .softb-pair .gen {
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
  }

  /* And the buttons, which live inside the first row. Aligning the rows is not enough on
     its own: the saving line still pushes the standard plate's button down within its own
     box. A column with the action pushed to the end puts both buttons on the same line. */
  .softb-pair .gen__now {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .softb-pair .gen__now > .btn,
  .softb-pair .gen__now > a,
  .softb-pair .gen__now > button {
    margin-top: auto;
    align-self: stretch;
  }
}

/* The saving is a fact about the price, not a badge: same size and weight as the period
   under the figure, sitting with it rather than shouting over it. */
.softb-card__save {
  margin: var(--s1) 0 0;
  color: var(--brass);
  font-size: var(--t-micro);
}

/* The term ledger on the reading side of a plate. .gen__row draws each line; this only
   stacks them. */
.softb-card__logo-terms { display: grid; }

.plan__logo { margin: var(--s3) 0 0; }

/* The promo field is one short input, not a full form column. */
.plan__code { max-width: 22rem; margin-top: var(--s5); }

/* "Funded is Coming soon" and the button that unfolds it read as one line. */
#funded-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

/* ---- Clerk ---------------------------------------------------------------
   The mount and the one rule that takes the legacy forms down.

   data-clerk is stamped on <html> by clerk-auth.js only AFTER Clerk.load() has resolved and
   the mount is on screen, never on the way there. So the order a visitor sees is: the old
   forms, then Clerk in their place. If Clerk is off, misconfigured, or blocked, the attribute
   is never set and this rule never matches, which is the fallback working rather than a
   fallback that has to be remembered. */
.clerk-mount { min-height: 22rem; }

[data-clerk="on"] .board__tabs,
[data-clerk="on"] #signin,
[data-clerk="on"] #signup { display: none; }

/* The mirror of the rule above. .clerk-only is guidance about the Clerk box, so it appears
   only when that box is the way in. With Clerk off the password form is the way in and the
   note would be telling somebody to use a button that is not on the page. */
.clerk-only { display: none; }
[data-clerk="on"] .clerk-only { display: block; }

/* The age step is ours, so it is styled like the rest of this page and not like Clerk. */
.auth-panel__title {
  margin: 0 0 var(--s4);
  font-size: var(--t-lead);
}

/* ---- /signin and /signup: the page head ----------------------------------
   Added 2026-09-17 after a review of the live page, which asked for left aligned formatting
   throughout and read the screen as unfinished. This is where somebody decides whether to make
   a free account, so an unfinished screen here costs an account.

   He was right on the facts. The page carried two headings saying the same thing, about 150px
   of nothing between them, a 3261px document for one short form, and a Clerk card whose header
   was centred beside a column that was left aligned. index.html dropped the duplicate hero; the
   three rules below are what that removal needs from the stylesheet. */

/* The page heading is now an h1 inside .section-head, and site.css sizes only h2 there. This is
   the page-scoped correction to a shared class that the header of this file describes, not a new
   type ramp: every value is the one .section-head h2 already uses. */
.section--auth .section-head h1 {
  margin: 0;
  font-size: var(--t-section);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

/* .hero + .section::before is what hides the engraved brass rule under a hero. There is no hero
   on this page any more, so without this the first thing below the masthead is a hairline drawn
   across the page with nothing above it to cut into. The padding is the height the hero used to
   give the masthead to clear. */
.section--auth { padding-top: var(--pad-hero-top); }
.section--auth::before { display: none; }

/* What a free account gets you, and what it does not. Two lines, each a claim over its
   qualifier, so they read as a pair of facts rather than a feature list. */
.auth-gets {
  display: grid;
  gap: var(--s4);
  max-width: 42ch;
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}
.auth-gets li {
  padding-left: var(--s4);
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.5;
}
.auth-gets li b {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.auth-gets a { color: var(--brass); }

/* The Clerk card is the form column, so it starts where the heading column starts rather than
   floating in the middle of its track. 26rem of reserved height was right when the card was the
   only thing on a tall page; it is now a hole above the fold while Clerk boots, so it reserves
   the height the sign-in card actually occupies and no more. */
.clerk-mount > * { margin-inline: 0; }