/* signin.css — the three screens of section 1e: the ask, the wait, the
 * return. Linked by {{pagestyle "signin"}} AFTER {{stylesheet}}, so every
 * rule here wins over a foundation rule by order rather than by weight.
 *
 * Four documents carry it, and they are one flow: signin (ask),
 * signin_sent (wait), confirm (return) and error (the return that
 * failed). Nothing in here names a color; every value is a token from
 * app.css, because a pack sets its own accent and a literal hex cannot
 * follow it.
 *
 * These pages take the STRICT policy. No script, no style attribute, no
 * external anything — the two marks are inline SVG copied from the
 * design's own geometry and painted through CSS, which is why their
 * polygons carry a class and no fill attribute.
 */

.auth {
  /* One column, and a narrow one. The whole page is a mark, a sentence
   * and one control; --measure is the prose column and is twice as wide
   * as this content deserves. */
  --auth-column: 25rem;

  max-width: var(--auth-column);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
}

/* The mark. One of pack color's three jobs is the wordmark, and this is
 * it: the hexagon that is also the privacy promise. */
.auth-mark {
  display: block;
  margin-bottom: var(--sp-4);
}

.mark-fill {
  fill: var(--pack-accent);
}

.mark-hole {
  fill: var(--surface);
}

.mark-quiet {
  fill: var(--pack-accent-quiet);
  stroke: var(--pack-accent);
  stroke-width: 3;
}

.mark-line {
  fill: none;
  stroke: var(--pack-accent);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Caution is OURS and never the pack's, for the same reason the focus
 * ring is: an operator's hex must not be able to make a warning read as
 * decoration. */
.mark-caution {
  fill: none;
  stroke: var(--caution);
  stroke-width: 3;
  stroke-linejoin: round;
}

.auth h1 {
  /* --fs-5 is the landing headline and is too large for a card this
   * narrow: at 44px "That link is no longer usable" wraps to three
   * lines. */
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  letter-spacing: var(--tracking-snug);
}

.auth-lede {
  color: var(--ink-2);
  font-size: var(--fs-2);
  line-height: var(--lh-2);
}

.auth-lede strong {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

/* The label reads as an overline here rather than as a sentence: there is
 * one field on the page and its name is a heading for it. */
.auth label {
  color: var(--ink-2);
  font-size: var(--fs-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-1);
  text-transform: uppercase;
}

/* The input already carries the bottom margin app.css gives every control
 * — that gap is the fix for the button sitting flush against the field,
 * and this sheet must not take it back. */
.auth form {
  margin: 0;
}

.auth button[type="submit"] {
  width: 100%;
  font-size: var(--fs-3);
}

/* role="alert" is the invalid-address message. app.css paints
 * [role="status"] and not this, because a live region and an error are
 * not the same element. */
.auth [role="alert"] {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--caution);
  border-radius: var(--r-2);
  background: var(--caution-bg);
  color: var(--caution);
  font-size: var(--fs-2);
}

/* ------------------------------------------------------------ 2 · wait
 * The middle screen, and the design says it is the product: most of the
 * time anybody spends signing in is spent here, reading this.
 */

.auth-wait .auth-mark {
  margin-bottom: var(--sp-5);
}

/* The design defines an sp-pulse keyframe under a reduced-motion guard
 * and uses it nowhere. This is the one state in the application genuinely
 * waiting on something that is not the reader — a message in flight — so
 * it is where a pulse belongs.
 *
 * It animates the hexagon's FILL and not its opacity, which is the
 * design's own keyframe rewritten and is why the name differs. Pulsing
 * opacity fades the outline and the envelope with it, and the mark then
 * reads as a half-loaded image rather than as something breathing: seen
 * in the browser, at 0.35 opacity, and it looks like a fault. The outline
 * stays firm; only the interior moves. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sp-pulse-fill {
    0%,
    100% {
      fill-opacity: 0.35;
    }

    50% {
      fill-opacity: 1;
    }
  }

  .auth-wait .mark-quiet {
    animation: sp-pulse-fill 2.8s ease-in-out infinite;
  }
}

/* What to expect, in order, in a panel of its own. Paper inside surface,
 * so the instructions read as a note pinned to the card rather than as
 * more of the same paragraph. */
.steps {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--paper);
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-2);
  line-height: var(--lh-2);
}

.steps li:last-child {
  margin-bottom: 0;
}

/* A number, from the ordered list the markup already is — not a word, and
 * not a second copy of the ordering. decimal-leading-zero is the design's
 * 01/02/03. */
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  color: var(--pack-accent-firm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: var(--weight-bold);
}

.steps strong {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

/* The resend path is a link and not a button, because this page holds no
 * address to resend to — see signin_sent.tmpl. It is drawn as the
 * secondary control it is. */
.auth-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-primary);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.auth-action:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.auth-note {
  margin: var(--sp-3) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-1);
  line-height: var(--lh-1);
}

/* ---------------------------------------------------- 3 · the return
 * The confirm page, and the same page when the link is dead.
 */

.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--status-pending-line);
  border-radius: 999px;
  background: var(--status-pending-bg);
  color: var(--status-pending-ink);
  font-size: var(--fs-1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-1);
}

/* The expired link. The design draws this one as caution rather than as
 * failure, and the wording follows: nothing is wrong with the account. */
.auth-dead {
  border-color: var(--caution);
  background: var(--caution-bg);
}

.auth-dead h1,
.auth-dead .auth-lede,
.auth-dead .auth-lede strong {
  color: var(--caution);
}

.auth-dead .auth-action {
  border-color: var(--caution);
  background: var(--surface);
  color: var(--caution);
}