/* auth — sign in, and the invitation that lets someone in.
 *
 * Two screens live in `<main>` outside the tab system: `#signin` and `#redeem`. Shared
 * primitives (buttons, inputs, .signin-card, .or, .loading, .flag) live in style.css and
 * are reused rather than restated. Only what these screens add is here.
 *
 * Both screens are the first thing an external consultant ever sees of this product, and
 * for a redemption dead end they may be the only thing. So every state prints a word, and
 * nothing here carries meaning in colour alone.
 */

/* --------------------------------------------------------------------------
   The two screens
   -------------------------------------------------------------------------- */

/* The wordmark is the page's one structural statement: display weight, expanded, tight.
   The invitation screen sets it a step down and centred, because there the sheet below
   is the subject and the wordmark is only saying whose console this is. */
/* The mark heads the sheet above the wordmark. It is sized off the wordmark rather than
   fixed, so the two stay in proportion as the clamp moves. */
#signin .signin-mark {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sm);
}

#signin h1 {
  font-size: clamp(2rem, 10vw, 3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variation-settings: 'wdth' 118;
  margin-bottom: var(--xs);
}

#signin > p.muted {
  font-size: 1rem;
  margin-bottom: var(--lg);
}

/* Centred and a step down, to match the quieter wordmark this screen sets. */
#redeem .redeem-mark {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto var(--sm);
}

#redeem h1 {
  text-align: center;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-variation-settings: 'wdth' 112;
  margin-bottom: var(--lg);
}

/* --------------------------------------------------------------------------
   The plate

   A ruled sheet with registration marks cut into its corners. The sign-in plate is a
   working surface — hairline rule, ink corner marks. The invitation plate is a document
   being presented, so it takes the ink border and the one depth device this system
   allows: a hard 3px offset with zero blur. One per screen, never on a button.
   -------------------------------------------------------------------------- */

.au-plate {
  position: relative;
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  padding: var(--lg) var(--md);
}

.au-plate--sheet {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

/* Corner registration marks. Decorative, so they are aria-hidden in the markup and
   drawn from borders rather than from a glyph. */
.au-tick {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.au-tick--tl { top: -1px; left: -1px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.au-tick--tr { top: -1px; right: -1px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.au-tick--bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.au-tick--br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* On the document plate the marks are trim marks, so they take the rule colour and read
   as printer's furniture rather than as a second frame. */
.au-plate--sheet .au-tick { border-color: var(--rule); }

/* The plate is the box, so the sheets inside it stop being boxes of their own.
   `.signin-card` is used both for the form and for the invitation preamble app.js
   writes; inside a plate neither draws a second frame. */
.au-plate .signin-card,
#redeem-body .signin-card {
  background: transparent;
  border: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   The form
   -------------------------------------------------------------------------- */

/* Field names are section marks: mono, caps, and in ink rather than secondary, because
   this screen is read on a phone in daylight. */
.signin-card label {
  margin-bottom: 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink);
}

/* An email address is a legally identified value and a password is read character by
   character. Both are measured values, so both set in mono. */
.signin-card label input {
  margin-top: var(--xs);
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 10px;
}

/* The invited address is locked because the invitation names a person. The field says so
   by sinking into the page; the sentence above it says why in words. */
.signin-card input:read-only {
  background: var(--paper-sunk);
  color: var(--ink-secondary);
}

/* Buttons hold one box: 18/28 filled, 17/27 outlined against a 1px rule. Title type,
   per DESIGN.md's button spec — mono is for values, not for labels on controls. */
.au-plate .signin-card button,
#redeem-body .signin-card button,
#signin-btn,
.au-not-now,
.au-retry,
#redeem-body > button {
  display: block;
  width: 100%;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 17px 27px;
}

.au-plate .signin-card button.primary,
#redeem-body .signin-card button.primary {
  padding: 18px 28px;
}

.au-plate .or { margin: var(--md) 0; }

/* --------------------------------------------------------------------------
   Progress

   A control that is working says so. `.loading` supplies the mono face and the animated
   dots, which fall back to a printed ellipsis under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.au-busy {
  margin: var(--sm) 0 0;
  padding: var(--sm) var(--md);
  background: var(--paper);
  border: 1px solid var(--rule);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Refusal on the sign-in screen

   Colour is never the only carrier, so the plate prints the state as a word before it
   prints the sentence. Marking Ink, because the word is well under 24px.
   -------------------------------------------------------------------------- */

#signin-error.au-alert {
  display: block;
  background: var(--paper-lit);
  border-left: 2px solid var(--mark-ink);
  padding: var(--md);
  margin: var(--lg) 0 0;
  color: var(--ink);
  max-width: none;
}

#redeem-body #signin-error.au-alert { margin: 0; }

.au-alert-word {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mark-ink);
  margin-right: var(--sm);
}

.au-alert-said { color: var(--ink); }

#signin-note.au-note {
  border-left: 1px solid var(--rule);
  padding-left: var(--md);
  margin: var(--md) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  max-width: none;
}

/* --------------------------------------------------------------------------
   The invitation
   -------------------------------------------------------------------------- */

#redeem-body {
  display: flex;
  flex-direction: column;
  gap: var(--md);
}
/* The flex gap sets the rhythm, so the blocks stop carrying their own bottom margins.
   Written with both ids because style.css's `#redeem .muted` would otherwise outrank it. */
#redeem #redeem-body > * { margin-top: 0; margin-bottom: 0; }

/* The preamble app.js writes: what you were invited as, and who has to sign in. */
.au-invite {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--md);
}
#redeem .au-invite > * { margin: 0; }

.au-invite .lede { font-size: 1rem; color: var(--ink); }

/* The role, held in a sunk well the way a stamped field is. It is a term the Act's own
   vocabulary supplies, so it prints exactly as stored and sets in mono. */
.au-role {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: var(--sm) var(--md);
  text-align: center;
}
.au-role-value {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* A role the preview did not state prints as absent, in prose, never as an empty well. */
.au-role-value.absent {
  font-family: var(--display);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ink-secondary);
}

.au-who,
.au-meta {
  font-size: 0.875rem;
  color: var(--ink-secondary);
  max-width: none;
}
.au-who strong,
.au-value {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}

.au-message {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
}
.au-message-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.au-message p.note {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: var(--md);
  color: var(--ink);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Dead ends

   Every way a redemption can fail lands here. The panel states the condition as a word,
   the sentence that explains it, and the remedy for that specific condition — a link
   that cannot be checked is not the same problem as a link somebody already used.
   -------------------------------------------------------------------------- */

.au-dead {
  display: flex;
  align-items: flex-start;
  gap: var(--md);
  background: var(--paper-sunk);
  border-left: 2px solid var(--mark-ink);
  padding: var(--md);
}
.au-dead .au-mark {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--mark-ink);
}
.au-dead-col {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  min-width: 0;
}
.au-dead-word {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mark-ink);
}
.au-dead p.error {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
  max-width: none;
}
#redeem .au-dead p.muted {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-secondary);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Foot

   A notice, not an authority. The design's `STATUTORY_NOTICE:` prefix is dropped: no
   statute is cited for it, and this system does not invent a footer authority.
   -------------------------------------------------------------------------- */

.au-notice {
  margin: var(--md) 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Narrow. A reviewer opens an invitation link on the phone in their hand.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  #signin, #redeem { margin: var(--xl) auto; padding: 0; }
  .au-plate { padding: var(--md) 12px; }
  .au-dead { flex-direction: column; gap: var(--sm); padding: var(--md) 12px; }
  .au-plate .signin-card button,
  #redeem-body .signin-card button,
  #signin-btn,
  .au-not-now,
  .au-retry,
  #redeem-body > button {
    font-size: 1rem;
    padding: 16px 12px;
  }
  .au-plate .signin-card button.primary,
  #redeem-body .signin-card button.primary { padding: 17px 12px; }
}