/* public/auth.css — the sign-in surface only (spec V2/V3, register rows AUT-01..AUT-11).
   Consumes the shared visual system tokens from shared.css (canon §10) and the three PALMTree
   brand tokens (§17.30). It defines LAYOUT for one page; it does not redefine a token, and it does
   not invent a state block — .fw-error is the shared one, used as-is.

   SMS_ONLY r4 (01/09/2026): the request form's input is now a mobile number (type="tel") rather
   than an email address, and a second form state — code entry — was added. Both reuse every rule
   below unchanged: .pt-auth-input, .pt-auth-form, .pt-auth-submit and .pt-auth-alt do not know or
   care what kind of value they hold. Only the code-entry field's letter-spacing is new (see
   #code at the bottom of this file), added as a rule rather than an inline style so it lives with
   the rest of this page's styling instead of in server/modules/auth.js's markup string. */

.pt-auth-body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--fw-space-5);
  background: var(--fw-bg);
  color: var(--fw-text);
  font-family: var(--fw-sans);
}

/* ONE vertical rhythm. Every direct child of the card is separated from the next by exactly one
   step, set here as a grid row-gap; none of them carries a vertical margin of its own. Before this,
   each element declared its own bottom margin (16 / 12 / 24) and the closing line declared 48 on top
   of 48px of card padding, so the gaps ran 16, 12, 24, 48, 48 down the card and the line at the
   bottom looked orphaned. Gaps in one declaration cannot fall out of step with each other, and
   nothing can contribute spacing twice. The tight pairs — label to input, input to button — are set
   INSIDE .pt-auth-form, because those belong together and reading them as separate steps of the same
   rhythm is exactly the wrong grouping. */
.pt-auth-card {
  width: 100%;
  max-width: 27rem;
  box-sizing: border-box;
  display: grid;
  gap: var(--fw-space-5);
  padding: var(--fw-space-6);
  background: var(--fw-panel);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius-base);
  box-shadow: var(--brand-panel-shadow);
}

/* AUT-01 — the brand mark. Was an uppercase text wordmark; it is now the lock-up. Height rather
   than width, so the mark's cap height stays in a fixed relation to the type beneath it. */
.pt-auth-logo {
  display: block;
  height: 28px;
  width: auto;
}

.pt-auth-h1 {
  font-family: var(--brand-display-family);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 0;
  color: var(--fw-text);
}

.pt-auth-lede {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--fw-text-dim);
}

.pt-auth-lede strong { color: var(--fw-text); font-weight: 600; }

/* The field group. Label, input and button are ONE thing, so their spacing is set here and is
   deliberately tighter than the card's rhythm — spacing them at the same step as the card would read
   as three unrelated elements that happen to be adjacent. */
.pt-auth-form { display: block; margin: 0; }

.pt-auth-label {
  display: block;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--fw-text-dim);
  margin-bottom: var(--fw-space-2);
}

.pt-auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--fw-space-3) var(--fw-space-4);
  font: inherit;
  font-size: 1rem;
  color: var(--fw-text);
  background: var(--fw-panel-sunken);
  border: 1px solid var(--fw-line-strong);
  border-radius: var(--fw-radius-sm);
  transition: border-color var(--fw-dur) var(--fw-ease);
}

.pt-auth-input::placeholder { color: var(--fw-text-mute); }

.pt-auth-input:focus-visible {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--fw-neutral-soft);
}

.pt-auth-submit {
  width: 100%;
  padding: var(--fw-space-3) var(--fw-space-4);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--fw-on-accent);
  background: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  border-radius: var(--fw-radius-sm);
  cursor: pointer;
  transition: filter var(--fw-dur) var(--fw-ease);
}

/* Only when it FOLLOWS a field. In the link-sent state the resend form holds nothing but a hidden
   input and this button, and an unconditional margin-top there would add 16px on top of the card's
   own gap — the same double-spacing this file was just cleaned of. */
.pt-auth-input + .pt-auth-submit { margin-top: var(--fw-space-4); }

.pt-auth-submit:hover:not(:disabled) { filter: brightness(1.08); }

.pt-auth-submit:disabled {
  cursor: not-allowed;
  filter: none;
  color: var(--fw-text-mute);
  background: var(--fw-panel-raised);
  border-color: var(--fw-line-strong);
}

.pt-auth-alt {
  display: inline-block;
  justify-self: start;
  font-size: .85rem;
  color: var(--fw-text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.pt-auth-alt:hover { color: var(--fw-text); border-bottom-color: var(--fw-line-strong); }

/* .fw-error is the shared state block from shared.css; only its placement is set here, and it takes
   no margin — the card's row-gap already spaces it like everything else. */
.pt-auth-card .fw-error { margin: 0; }

.pt-auth-foot {
  margin: 0;
  font-family: var(--brand-display-family);
  font-size: .95rem;
  font-style: italic;
  color: var(--fw-text-mute);
}

@media (prefers-reduced-motion: reduce) {
  .pt-auth-input, .pt-auth-submit { transition: none; }
}

/* ---------------------------------------------------------------------------------------------
   v1.28.0 — the already-signed-in state. Its primary action is a LINK (navigate to the apps you
   already have access to, no side effect) and its secondary is a BUTTON inside a POST form (sign
   out, a real side effect). The elements are chosen by what they DO, so the skins have to travel:
   the link borrows the submit button's, the button borrows the quiet alt link's.
   --------------------------------------------------------------------------------------------- */
a.pt-auth-submit {
  display: block;
  text-align: center;
  text-decoration: none;
}
/* An email address has no break opportunities, so a long one would push the card wide rather than
   wrap inside it. The signed-in state is the only place an address is rendered as prose. */
.pt-auth-lede strong { overflow-wrap: anywhere; }

button.pt-auth-alt {
  padding: 0;
  font: inherit;
  font-size: .85rem;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------
   SMS_ONLY r4 (01/09/2026) — GET/POST /auth/verify, the code-entry state. #code is the same
   .pt-auth-input everything else uses; only its content-specific presentation is added here.
   --------------------------------------------------------------------------------------------- */
#code {
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* A mobile number, like an address before it, has no break opportunities that read well mid-
   digit — kept for the same reason .pt-auth-lede strong above already needed it for addresses. */