/* ==========================================================================
   COMPONENTS · AUTH — the members' desk. The four session surfaces (sign in,
   sign up, forgot, reset) are one piece of furniture: a quiet, single column on
   the paper ground, a serif greeting in the periodical's voice, then THE DESK
   PANEL — a leaf sheet closed by the one rubric register rule the family always
   carries (nameplate bar, masthead, colophon). The reader is presenting a card
   at a membership desk, not filling in a login form.

   Composes the system's form primitives (.op-field, .op-btn, input/label) and
   the s1 chrome (.op-nameplate, .op-colophon). New here: the desk shell, the
   restrained in-ink "notice" (the honest error/again grammar shared by all
   four), the free-account value ledger (sign up), the kind password-requirement
   list (reset), a humane reveal toggle, and the standing assurance line.
   ========================================================================== */

/* — The desk: a centred, unhurried column on the warm paper ground — */
.op-auth {
  padding-block: var(--space-2xl) var(--space-3xl);
}
.op-auth__inner {
  max-width: 30rem;
  margin-inline: auto;
}
/* Sign up earns a little more width for its value ledger beside the form */
.op-auth--wide .op-auth__inner { max-width: 58rem; }

/* — A mockup-only affordance: flip between the resting state and its honest
     again-state(s). Set as quiet furniture so it never disturbs the desk. — */
.op-auth__statebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--rule);
}
.op-auth__statebar-label {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-2xs);
}
.op-auth__state {
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 0.28em 0.85em;
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-auth__state:hover { border-color: var(--rule-strong); color: var(--text); }
.op-auth__state.is-active {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-color: var(--surface-inverse);
}
.op-auth__state:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* — The greeting, in the periodical's voice, above the panel — */
.op-auth__head {
  margin-bottom: var(--space-md);
}
.op-auth__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2xs) 0 0;
}

/* — THE DESK PANEL — the leaf sheet you fill in, closed by the one rubric rule — */
.op-auth__panel {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);     /* the family's single register rule */
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-raised);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
/* Sign up: panel + value ledger, two-up on wide screens */
.op-auth__spread {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 48rem) {
  .op-auth--wide .op-auth__spread {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-lg);
    align-items: start;
  }
}

.op-auth__form { display: grid; gap: var(--space-md); }

/* The forgot-password link parked at the end of the password label row */
.op-auth__label-link {
  margin-left: auto;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
}

/* — A control with a humane "show" toggle pressed into its right edge — */
.op-auth__control { position: relative; display: block; }
.op-auth__control input { padding-right: 4.2em; }
.op-auth__reveal {
  position: absolute;
  top: 50%;
  right: 0.55em;
  transform: translateY(-50%);
  font-family: var(--font-furniture);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  padding: 0.2em 0.3em;
  cursor: pointer;
}
.op-auth__reveal:hover { color: var(--accent); }
.op-auth__reveal:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* — The remember-me / consent row — */
.op-auth__check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-xs);
  row-gap: var(--space-3xs);
  align-items: start;
}
.op-auth__check input { width: auto; margin-top: 0.18em; box-shadow: none; }
.op-auth__check-label {
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
}
.op-auth__check-help {
  grid-column: 2;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* — THE NOTICE — the honest, in-ink error/again grammar shared by all four.
     Stated plainly: a small-caps status word + a calm sentence on a neutral
     well, marked only by a left register rule in the right archival ink. Never
     a wall of red — "poor news" reads as editorial candour, not an alarm. — */
.op-auth__notice {
  --nt-line: var(--rule-strong);
  --nt-ink: var(--text);
  display: grid;
  gap: var(--space-3xs);
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--nt-line);
  border-radius: var(--radius-xs);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.op-auth__notice-status {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--nt-line);
}
.op-auth__notice-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--nt-ink);
  margin: 0;
}
.op-auth__notice--error   { --nt-line: var(--critical); }
.op-auth__notice--sent    { --nt-line: var(--rule-strong); }
.op-auth__notice--success { --nt-line: var(--positive); }
.op-auth__notice--caution { --nt-line: var(--warning); }

/* — A large, finished confirmation (forgot "sent", reset "done"): the panel's
     whole body is the message, with a single onward key. — */
.op-auth__done {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}
.op-auth__done-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}
.op-auth__done-text strong { color: var(--text); font-weight: var(--weight-semibold); }
.op-auth__done .op-mono { font-family: var(--font-data); color: var(--text); }

/* — THE FREE-ACCOUNT VALUE LEDGER (sign up) — what the account keeps, set as a
     quiet contents list, no growth-hack gloss. — */
.op-auth__value {
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}
.op-auth__value-list {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.op-auth__value-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-xs);
  align-items: baseline;
}
/* a short rubric register tick, the only spot of the sacred colour in the well */
.op-auth__value-list li::before {
  content: "";
  inline-size: 1.1em;
  block-size: 2px;
  background: var(--accent);
  transform: translateY(-0.28em);
}
.op-auth__value-term {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text);
}
.op-auth__value-note {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-top: 0.1em;
}
.op-auth__value-foot {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule-faint);
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* — THE KIND PASSWORD REQUIREMENTS (reset / sign up) — stated, not gamified — */
.op-auth__reqs {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3xs);
}
.op-auth__reqs li {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  padding-left: 1.25em;
  position: relative;
}
.op-auth__reqs li::before {
  content: "·";
  position: absolute;
  left: 0.35em;
  color: var(--text-secondary);
  font-family: var(--font-data);
}

/* — The masked secure-link reference (reset), set in mono as a printed serial — */
.op-auth__token {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums lining-nums;
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-auth__token b { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* — The submit row + the in-family crossings beneath it — */
.op-auth__actions { margin-top: var(--space-2xs); }
.op-auth__alt {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-faint);
  font-family: var(--font-furniture);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}
.op-auth__alt a { font-weight: var(--weight-semibold); }

/* — The standing assurance line, the desk's quiet promise (shared) — */
.op-auth__assurance {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  max-width: 30rem;
  margin: var(--space-md) auto 0;
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
.op-auth__assurance svg {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  margin-top: 0.15em;
  color: var(--text-secondary);
}

/* — Helper utility: a state hidden until its toggle selects it — */
[data-auth-state] { display: none; }
[data-auth-state].is-shown { display: block; }

@media (max-width: 30rem) {
  .op-auth { padding-block: var(--space-xl) var(--space-2xl); }
  .op-auth__panel { padding: var(--space-md); }
  .op-auth__title { font-size: var(--text-xl); }
}