/* ═══════════════════════════════════════════════════════════════
   auth-page.css — /signup and /signin as real pages.

   Load order: tokens.css → chrome.css → page.css → auth-page.css.
   page.css supplies the hero and the sequence rule; this file adds the
   letter column and the form card.

   Declares no :root.
═══════════════════════════════════════════════════════════════ */

/* Letter left, form right. The letter is the page — the form is the
   thing you do once you have read it — so the letter gets the wider
   column and the form sticks alongside rather than sitting on top. */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 64px; align-items: start;
  padding-bottom: 90px;
}

/* ═══════════ the letter ═══════════ */
/* 640 words with no visible structure reads as one block: you cannot tell
   how long it is, or find your way back to a part you remember. The words
   are unchanged — these rules only give it a shape. */
.letter { max-width: 64ch; }

/* Jump chips. Also, incidentally, a table of contents: the six labels
   together are a summary of the argument. */
.letter-nav {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-bottom: 24px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hair);
}
.letter-nav a {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: none;
  font-size: 12.5px; color: var(--dim); text-decoration: none;
  transition: color .14s, border-color .14s, background .14s;
}
.letter-nav a:hover { color: var(--paper); border-color: rgba(124,152,208,.3); }
.letter-nav a.is-active { color: var(--gold); border-color: var(--gold-edge); background: var(--gold-soft); }

.letter-intro { padding: 26px 0 4px; }

/* The opening runs larger, so the eye has an entry point rather than
   meeting a uniform grey wall. */
.letter-lede { font-size: 17px !important; line-height: 1.7 !important; color: var(--paper) !important; }

/* Numbered and ruled. The numbers do the work of showing progress —
   "04" tells you where you are in a way a heading alone does not. */
.letter-section {
  padding: 30px 0;
  border-top: 1px solid var(--hair);
  scroll-margin-top: calc(var(--nav-height) + 24px);
}
.letter-n {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--gold);
}

.letter h2 {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 14px;
}
.letter p { font-size: 15.5px; line-height: 1.75; color: var(--dim); }
/* Tight within a section, loose between them: the gap should say which
   paragraphs belong together. */
.letter p + p { margin-top: 13px; }
.letter strong { color: var(--paper); font-weight: 600; }

.letter-sign {
  display: flex; align-items: center; gap: 13px;
  margin-top: 6px; padding-top: 26px; border-top: 1px solid var(--hair);
}
.letter-sign .mark {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: #000; border: 1.5px solid rgba(201, 165, 80, .45);
  display: flex; align-items: center; justify-content: center;
}
.letter-sign .mark svg { stroke: var(--gold); fill: none; stroke-linecap: round; }
.letter-sign .who { font-size: 14px; font-weight: 600; color: var(--paper); }
.letter-sign .role { font-family: var(--mono); font-size: 11px; color: var(--dimmer); margin-top: 2px; }
.letter-sign a { color: var(--gold); text-decoration: none; }

/* ═══════════ solo form ═══════════ */
/* /signin has no letter to sit beside — signing in needs no explanation,
   only the fields. A centred column at reading width, not the two-column
   layout stretched to fill. */
.auth-solo { max-width: 420px; margin: 0 auto; padding-bottom: 90px; }
.auth-solo .auth-card { position: static; }

.auth-solo-hd { text-align: center; margin-bottom: 22px; }
.auth-solo-hd h1 {
  font-size: clamp(26px, 3.2vw, 34px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1;
}
.auth-solo-hd p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.auth-solo-hd p b { color: var(--paper); font-weight: 600; }

/* ═══════════ the form ═══════════ */
.auth-card {
  position: sticky; top: calc(var(--nav-height) + 28px);
  background: var(--slate); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.auth-hd { padding: 20px 22px 16px; border-bottom: 1px solid var(--hair); }
.auth-hd h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.auth-hd p { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--dim); }
.auth-hd p b { color: var(--paper); font-weight: 600; }

.auth-body { padding: 18px 22px 22px; }

.field { margin-bottom: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label {
  display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px;
  font-size: 12.5px; color: var(--dim);
}
.field label .opt { font-size: 11.5px; color: var(--dimmer); }
.field input {
  width: 100%; height: 42px; padding: 0 13px;
  background: var(--well); border: 1px solid var(--line); border-radius: 8px;
  color: var(--paper); font-family: var(--sans); font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.field input::placeholder { color: var(--dimmer); }
.field input:focus {
  outline: none; border-color: rgba(0, 229, 153, .5);
  box-shadow: 0 0 0 3px rgba(0, 229, 153, .08);
}
.field input[aria-invalid="true"] { border-color: rgba(224, 112, 112, .55); }
.field-note { margin-top: 6px; font-size: 11.5px; color: var(--dimmer); }
.field-note.is-error { color: var(--error); }

/* Show-password toggle. A 10-character minimum with a masked field and
   a confirm box is three chances to typo something you cannot see. */
.reveal {
  display: flex; align-items: center; gap: 9px;
  margin: -2px 0 16px; cursor: pointer;
  font-size: 12.5px; color: var(--dim); user-select: none;
}
.reveal input {
  width: 15px; height: 15px; margin: 0; flex-shrink: 0;
  accent-color: var(--live); cursor: pointer;
}
.reveal:hover { color: var(--paper); }

.auth-submit {
  width: 100%; height: 44px; margin-top: 4px; border-radius: 9px; cursor: pointer;
  background: rgba(0, 229, 153, .12); border: 1px solid rgba(0, 229, 153, .45);
  color: var(--live); font-family: var(--sans); font-size: 14.5px; font-weight: 700;
  transition: background .15s, border-color .15s, opacity .15s;
}
.auth-submit:hover:not(:disabled) { background: rgba(0, 229, 153, .2); border-color: rgba(0, 229, 153, .65); }
.auth-submit:disabled { opacity: .55; cursor: default; }

.auth-msg {
  display: none; margin-top: 14px; padding: 12px 14px; border-radius: 9px;
  font-size: 13px; line-height: 1.6;
}
.auth-msg.is-shown { display: block; }
.auth-msg.is-error { border: 1px solid rgba(224,112,112,.4); background: rgba(224,112,112,.07); color: var(--error); }
.auth-msg.is-ok    { border: 1px solid rgba(0,229,153,.35);  background: rgba(0,229,153,.06);  color: var(--live); }

.auth-alt {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 13px;
}
.auth-alt a { color: var(--dim); text-decoration: none; width: fit-content; }
.auth-alt a:hover { color: var(--gold); }
/* Plain links in a column, not underlined green ones separated by a middle
   dot: at that size the underline is the loudest thing in the card and
   competes with the button above it. */
.auth-alt .is-quiet { color: var(--dimmer); font-size: 12.5px; }

/* The promise that has not changed. Deliberately the last thing in the
   card, so it is the last thing read before the button. */
.auth-free {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 22px; border-top: 1px solid var(--hair);
  background: rgba(0, 229, 153, .04);
  font-size: 12.5px; line-height: 1.6; color: var(--dim);
}
.auth-free svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; stroke: var(--live); fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.auth-free b { color: var(--live); font-weight: 600; }

@media (max-width: 620px) {
  .letter-nav { gap: 6px; }
  .letter-nav a { font-size: 12px; padding: 4px 10px; }
}

@media (max-width: 940px) {
  .auth-layout { grid-template-columns: 1fr; gap: 40px; }
  /* Form first on a phone: someone who arrived to sign up should not
     have to scroll the whole letter to reach the field. */
  .auth-col { order: -1; }
  .auth-card { position: static; }
}