/* =============================================================================
   Playlytix Portal — standalone auth pages (layout: false)
   Loaded by views/auth/*.ejs alongside main.css (tokens + self-hosted fonts).
   2026-08-24 rebuild (owner-approved designer proposal): a compact single
   column on the plain page ground — slim brand topbar, no split shell, no
   brand panel, no holo-grid / radial gradient / glow. Labels sit ABOVE the
   inputs, like every other form in the product.
   ========================================================================== */

.auth-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base); }
/* With body.footer-pinned (all auth views), the page yields so the site
   footer sits at the viewport bottom instead of below the fold (owner note
   2026-08-24: the login footer needed a scroll to exist). flex-basis AUTO +
   shrink 0 — `flex: 1` (basis 0) let a page TALLER than the viewport
   compress and overflow into the footer (owner caught it on register). */
body.footer-pinned .auth-page { min-height: 0; flex: 1 0 auto; }

/* --- Brand topbar (partials/auth-topbar) ----------------------------------- */
.auth-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}
.auth-topbar-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.auth-topbar-mark { width: 30px; height: auto; }
.auth-topbar-word { height: 14px; width: auto; }
.auth-topbar-brand .cursor-blink { color: var(--primary); font-family: var(--font-mono); font-size: 0.9rem; }
.auth-topbar-help { font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; }
.auth-topbar-help:hover { color: var(--primary); text-decoration: underline; }

/* --- The column ------------------------------------------------------------ */
.auth-main { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--space-5); flex: 1; }
.auth-card { width: 100%; }
.auth-card h1 { font-size: 1.9rem; margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
.auth-card .sub { color: var(--text-secondary); margin: 0 0 var(--space-5); }
.auth-card .kicker { display: block; margin-bottom: var(--space-2); }
/* Hairline between the header block and what follows (the proposal's rule). */
.auth-rule { border: 0; border-top: 1px solid var(--border-default); margin: 0 0 var(--space-5); }

/* --- Fields (label above input — the portal's form voice) ------------------ */
.auth-field { margin-bottom: var(--space-4); }
.auth-field label { display: block; margin-bottom: var(--space-2); font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.auth-input-wrap { position: relative; }
.auth-field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.auth-field.has-toggle input { padding-right: 52px; }
.auth-field input:focus {
  outline: none;
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

/* Password show/hide toggle (inside .auth-input-wrap, centred on the input). */
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; /* 44px touch rule (2026-08-20 tester report) */
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.pw-toggle:hover { color: var(--text-secondary); background: rgba(255, 255, 255, 0.04); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle .icon-off { display: none; }
.pw-toggle.is-on .icon-on { display: none; }
.pw-toggle.is-on .icon-off { display: block; }

/* Keep autofilled inputs on-theme. */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px #15181c inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-out;
}

/* --- Submit button -------------------------------------------------------- */
.auth-submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50px;
  margin-top: var(--space-3);
  border: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.08s ease;
}
.auth-submit:hover { box-shadow: var(--shadow-sm); filter: brightness(1.05); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { cursor: not-allowed; }
.auth-submit .btn-label { position: relative; }
.auth-submit .spinner {
  display: none;
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(4, 18, 31, 0.35);
  border-top-color: var(--primary-ink);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.auth-submit.is-loading .btn-label { visibility: hidden; }
.auth-submit.is-loading .spinner { display: block; }

/* --- Divider + OAuth ------------------------------------------------------ */
.auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.08em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-default); }

/* Login's compact provider pair (register keeps full-width buttons — each
   carries its "what they share with us" disclosure underneath). */
.auth-oauth-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.auth-oauth-row .oauth-btn { margin-bottom: 0; }
@media (max-width: 480px) { .auth-oauth-row { grid-template-columns: 1fr; } }

.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1px solid var(--border-default);
  text-decoration: none;
  transition: filter 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.oauth-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.oauth-btn:active { transform: translateY(0); }
.oauth-btn svg { width: 20px; height: 20px; }
/* Quiet ghost buttons — the provider's mark carries its brand colour, the
   button itself stays in the scoreboard voice (only the CTA gets a fill). */
.oauth-discord { background: rgba(88, 101, 242, 0.08); color: var(--text-secondary); border-color: rgba(88, 101, 242, 0.45); }
.oauth-discord svg { color: #7D8AF5; }
.oauth-discord:hover { border-color: #5865F2; color: var(--text-primary); }
.oauth-google { background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); border-color: var(--border-strong); }
.oauth-google:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text-primary); }

/* The acceptance box (2026-08-18; replaced the .auth-consent statement) — must be unmissable and understandable:
   a real checkbox, secondary (not muted) text, links underlined. Empty by
   default; `required` gives the native prompt on the email path, the server
   gives the lawyer's error text on every path. */
.auth-accept { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.auth-accept input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }
.auth-accept input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.auth-accept a { color: var(--text-primary); text-decoration: underline; }
.auth-accept a:hover { color: var(--primary); }
/* Explanatory copy one click behind (native disclosure — no JS, works on
   touch, keyboard-reachable). .auth-more sits under the box; .auth-tip sits
   under a provider button. */
.auth-more, .auth-tip { font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }
.auth-more { margin: 0 0 var(--space-4); }
.auth-tip { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.auth-more summary, .auth-tip summary { cursor: pointer; color: var(--text-secondary); list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.auth-more summary::-webkit-details-marker, .auth-tip summary::-webkit-details-marker { display: none; }
.auth-more summary::before, .auth-tip summary::before { content: '+'; font-family: var(--font-mono); color: var(--text-muted); width: 1em; text-align: center; }
.auth-more[open] summary::before, .auth-tip[open] summary::before { content: '\2013'; }
.auth-more summary:hover, .auth-tip summary:hover { color: var(--primary); }
.auth-more summary:focus-visible, .auth-tip summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.auth-more p, .auth-tip p { margin: var(--space-2) 0 0 calc(1em + var(--space-2)); }
/* The provider buttons became <button>s (they submit the register form). */
button.oauth-btn { font-family: inherit; }
/* The OPTIONAL marketing group — separated from the mandatory box by the
   "Optional, and entirely your choice." line and spacing alone (owner call
   2026-08-18: the earlier hairline frame read as clutter; the lawyer's rule
   only asks for visual separation, which the label already provides). */
.auth-optional { margin: var(--space-5) 0 var(--space-4); }
.auth-optional-kicker { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.auth-optional .auth-accept { margin: 0 0 var(--space-2); }
.auth-optional .auth-more { margin: 0; }
/* T&C re-consent interstitial (/auth/terms): his intro, the change list, his
   two paragraphs, then the box + Accept. Full page, not a modal. */
.auth-reconsent-intro { margin: 0 0 var(--space-2); font-size: 0.92rem; color: var(--text-secondary); }
.auth-changes { margin: 0 0 var(--space-4); padding-left: 1.2em; font-size: 0.9rem; line-height: 1.55; color: var(--text-primary); }
.auth-changes li + li { margin-top: var(--space-1); }
.auth-reconsent-p { margin: 0 0 var(--space-3); font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }
.auth-reconsent-p a { color: var(--primary); }
.auth-reconsent-decline { margin-top: var(--space-3); }
.auth-reconsent-decline a { color: var(--text-secondary); text-decoration: underline; }
/* Visible register-page note (the Discord "Important note"). */
.auth-note { margin: var(--space-4) 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }
.auth-note strong { color: var(--text-secondary); font-weight: 600; }
/* (The controller-identity note moved to the site footer 2026-08-18 — see
   .site-footer-controller in main.css §42.) */

/* Helper line under a field (username rules + the "not your real name"
   privacy warning). Visible on purpose — a warning behind a hover icon is
   invisible on touch. Sits in the field's bottom margin, so pull it up. */
.auth-hint { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }
.auth-hint + .auth-hint { margin-top: calc(-1 * var(--space-2)); }

.auth-foot { margin-top: var(--space-5); text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.auth-foot a { color: var(--primary); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
/* A form button that reads as a foot link (the sign-out escape on the
   username page — sign-out is a POST). */
.auth-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--primary); cursor: pointer; }
.auth-linkbtn:hover { text-decoration: underline; }

/* The /support form: a select + textarea in the auth field voice, and the
   visually-removed honeypot (position, not display — some bots skip
   display:none fields). */
.auth-field select:not(.combo-native), .auth-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
}
.auth-field select:not(.combo-native) { height: 48px; }
.auth-field textarea { resize: vertical; }
.auth-field select:focus, .auth-field textarea:focus {
  outline: none;
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }

/* --- Alerts --------------------------------------------------------------- */
.auth-alert {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  font-size: 0.88rem;
  border: 1px solid var(--border-default);
}
.auth-alert.error { background: var(--error-bg); border-color: rgba(251, 113, 133, 0.35); color: var(--error); }
.auth-alert.success { background: var(--success-bg); border-color: rgba(52, 211, 153, 0.3); color: var(--success); }

/* --- Motion --------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }

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

/* --- Notice pages (verify-sent / verify-result / forgot / reset) ----------
   The same plain-ground look: no card frame, just the centred column under
   the topbar with the small PNG emblem. */
.auth-notice {
  width: 100%; max-width: 420px;
  margin: 0 auto; padding: var(--space-8) var(--space-5);
  text-align: center; flex: 1;
}
.auth-notice .auth-logo-mark { display: block; width: 64px; height: auto; margin: 0 auto var(--space-4); }
.auth-notice h1 { font-size: 1.5rem; margin: 0 0 var(--space-2); }
.auth-notice .sub { color: var(--text-secondary); margin: 0 0 var(--space-5); font-size: 0.95rem; }
.auth-notice form { text-align: left; }
.auth-notice .auth-foot { margin-top: var(--space-5); }

/* "Forgot password?" link on the login form. */
.auth-forgot { text-align: right; margin: calc(-1 * var(--space-2)) 0 var(--space-2); font-size: 0.85rem; }
.auth-forgot a { color: var(--text-secondary); }
.auth-forgot a:hover { color: var(--primary); text-decoration: underline; }

/* "Stay signed in" + forgot link on one row. */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: calc(-1 * var(--space-2)) 0 var(--space-2); }
.auth-row .auth-forgot { margin: 0; }
.auth-remember { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.auth-remember input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.auth-remember input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 480px) {
  .auth-topbar { padding: var(--space-3) var(--space-4); }
  .auth-main { padding: var(--space-6) var(--space-4); }
}