/* Auth page — form elements and states. Everything else (nav, cards, type,
   ground, grain, reveals, easing) is site.css. This sheet only exists because
   the marketing design system was built for reading, not for filling in —
   inputs, tabs, notices, errors and terms are not part of that vocabulary and
   they get their own here.

   It is a separate file, not a <style> block, because the CSP is
   `style-src 'self'` and inline styles are blocked. */

[hidden] { display: none !important; }

/* The auth card sits centered in a band, narrower than the bento grid. */
.auth-band {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(132px, 15vw, 196px) var(--gutter) var(--band);
  display: flex;
  justify-content: center;
}

.auth-card {
  width: min(100%, 472px);
}

/* A lead paragraph inside the auth card is narrower than the marketing
   standard — one line, no wrapping needed. */
.auth-card .lead {
  font-size: 15px;
  max-width: 100%;
}

/* Tab row — no extra top margin needed; the lead already has its own. */
.auth-tabs {
  margin-top: 4px;
}

/* Submit buttons sit flush left, not stretched to the form width. */
.auth-submit {
  justify-self: start;
}

/* Tabs — pill buttons that read their state from aria-pressed, which is
   what signin.js toggles. Unpressed = ghost, pressed = solid accent. */
.tab {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.6s var(--ease),
    background-color 0.6s var(--ease);
}

.tab[aria-pressed="false"] {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
}

.tab[aria-pressed="false"]:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.tab[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 18px 40px -22px var(--accent);
}

.tab[aria-pressed="true"]:hover {
  background: var(--accent-soft);
  box-shadow: 0 22px 46px -20px var(--accent);
}

.tab[aria-pressed="true"]:active {
  transform: scale(0.98);
}

/* Forms — a grid column matching the core's vertical rhythm. */
.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}

.auth-form label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: -10px;
}

/* Glass inputs — transparent fill, hairline ring, accent on focus. */
.auth-form input[type="email"],
.auth-form input[type="text"] {
  width: 100%;
  padding: 14px 17px;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
  border: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.5s var(--ease);
}

.auth-form input:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    0 0 0 3px oklch(0.766 0.176 152 / 0.18);
}

.auth-form input::placeholder {
  color: var(--ink-faint);
}

/* Buttons that adopt the .cta look need the browser chrome stripped. */
button.cta {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

button.cta[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Terms — a nested glass card inside the core, dimmer so it recedes. */
.terms {
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Terms disclosure — text collapsed behind a clickable summary. */
.terms-detail {
  margin-bottom: 12px;
}

.terms-detail summary {
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  color: var(--ink);
}

.terms-detail summary strong {
  font-weight: 600;
  font-size: 14px;
}

.terms-detail summary .muted {
  font-size: 11px;
  margin-left: 4px;
  color: var(--ink-faint);
}

.terms-detail summary::-webkit-details-marker {
  display: none;
}

.terms-detail summary::before {
  content: "▸ ";
  font-size: 10px;
  color: var(--ink-faint);
  transition: transform 0.3s var(--ease);
}

.terms-detail[open] summary::before {
  content: "▾ ";
}

.terms-detail p {
  margin: 12px 0 0;
  max-height: 11rem;
  overflow-y: auto;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Checkbox — accent-coloured tick, compact row. */
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  margin-top: 6px;
}

.check input[type="checkbox"] {
  accent-color: var(--accent);
  width: 17px;
  height: 17px;
  flex: none;
  margin: 1px 0 0;
}

/* Status messages — amber for notice, red for error, both with a soft
   glow box-shadow so they read as embedded, not floating. */
.notice {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  color: oklch(0.88 0.09 82);
  background: oklch(0.3 0.045 82 / 0.5);
  box-shadow: inset 0 0 0 1px oklch(0.6 0.09 82 / 0.32);
}

.error {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  color: oklch(0.85 0.14 22);
  background: oklch(0.28 0.05 22 / 0.55);
  box-shadow: inset 0 0 0 1px oklch(0.55 0.12 22 / 0.35);
}

/* Link button — ghost text that underlines. */
button.link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.5s var(--ease);
}

button.link:hover {
  color: var(--ink);
}

/* The code-sent paragraph — the email address stands out. */
.code-sent {
  font-size: 15px;
  color: var(--ink-soft);
}

.code-sent strong {
  color: var(--ink);
  font-weight: 600;
}

/* Dev-only hint — italic, extra-faint, not for production eyes. */
.dev-hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-style: italic;
}