/* ════════════════════════════════════════════════════════════════════════
   AUTH PAGES — editorial styling for login + register (Slice 3).
   Shared by login.html and register.html (both also load styles.css, which
   @imports tokens + primitives, so --ed-* and .ed-* are available here).
   Replaces the old per-file JS-injected styles (Playfair + DM Sans). Colour
   comes only from --ed-* tokens; no raw hex.

   Layout: two-pane on desktop (form left, inverse aside right); single column
   on mobile (aside hidden). Form internals keep the legacy hv-* class names
   the JS still uses, re-skinned here; structural pieces use .auth-* names.
   ════════════════════════════════════════════════════════════════════════ */

/* Border-box so width:100% inputs render the same outer width regardless of
   padding — the password/confirm fields carry extra right-padding for the eye
   toggle and would otherwise render wider than the plain inputs. */
*, *::before, *::after { box-sizing: border-box; }

#app { min-height: 100vh; }

body {
  margin: 0;
  font-family: var(--ed-font-sans);
  color: var(--ed-color-text-primary);
  background: var(--ed-color-bg-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Shell + panes ──────────────────────────────────────────────────────── */
.auth-shell { display: flex; min-height: 100vh; align-items: stretch; }
.auth-pane-form {
  flex: 1.05 1 0;
  display: flex; flex-direction: column;
  padding: var(--ed-space-32) var(--ed-space-40);
  background: var(--ed-color-bg-paper);
}
.auth-pane-aside {
  flex: 1 1 0;
  padding: var(--ed-space-40);
  display: flex; flex-direction: column; justify-content: center;
  /* background/text/border come from .ed-surface-inverse-panel */
}
.auth-form-inner {
  width: 100%; max-width: 400px;
  margin: auto;
  display: flex; flex-direction: column;
}

/* ── Top bar (logo + theme toggle) ──────────────────────────────────────── */
.auth-topbar { display: flex; align-items: center; justify-content: space-between; }
.auth-brand { display: inline-flex; align-items: center; gap: var(--ed-space-10); }
.auth-brand__mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ed-color-accent);
  color: var(--ed-color-accent-on-accent);
  font-family: var(--ed-font-serif); font-weight: var(--ed-weight-medium);
  font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-brand__word { font-family: var(--ed-font-serif); font-size: 20px; letter-spacing: var(--ed-tracking-heading); color: var(--ed-color-text-primary); }
.auth-theme-toggle {
  background: transparent; border: var(--ed-border-width) solid var(--ed-color-border-default);
  color: var(--ed-color-text-secondary); cursor: pointer;
  font-family: var(--ed-font-mono); font-size: var(--ed-font-size-body-sm);
  width: 32px; height: 32px; border-radius: var(--ed-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-theme-toggle:hover { color: var(--ed-color-text-primary); border-color: var(--ed-color-text-secondary); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.auth-eyebrow {
  font-family: var(--ed-font-mono); font-variant: small-caps;
  letter-spacing: var(--ed-tracking-label); font-size: var(--ed-font-size-label);
  color: var(--ed-color-text-muted);
  margin: var(--ed-space-40) 0 var(--ed-space-12);
}
.auth-h1 {
  font-family: var(--ed-font-serif); font-weight: var(--ed-weight-medium);
  font-size: var(--ed-font-size-h1); line-height: var(--ed-line-h1);
  letter-spacing: var(--ed-tracking-heading); color: var(--ed-color-text-primary);
  margin: 0 0 var(--ed-space-12);
}
.auth-sub {
  font-family: var(--ed-font-sans); font-size: var(--ed-font-size-body);
  line-height: var(--ed-line-body); color: var(--ed-color-text-secondary);
  margin: 0 0 var(--ed-space-24);
}

/* ── Google button + divider ────────────────────────────────────────────── */
.hv-google {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--ed-space-10);
  background: var(--ed-color-surface-raised); color: var(--ed-color-text-primary);
  border: var(--ed-border-width) solid var(--ed-color-border-default); border-radius: var(--ed-radius-sm);
  font-family: var(--ed-font-sans); font-size: var(--ed-font-size-body-sm); font-weight: var(--ed-weight-medium);
  padding: var(--ed-space-12) var(--ed-space-16); cursor: pointer; transition: border-color .15s ease;
  margin-bottom: var(--ed-space-20);
}
.hv-google:hover { border-color: var(--ed-color-text-secondary); }
.hv-divider {
  display: flex; align-items: center; gap: var(--ed-space-12);
  color: var(--ed-color-text-muted); font-size: var(--ed-font-size-caption);
  margin-bottom: var(--ed-space-20);
}
.hv-divider::before, .hv-divider::after { content: ''; flex: 1; height: var(--ed-border-width); background: var(--ed-color-border-subtle); }

/* ── Fields ─────────────────────────────────────────────────────────────── */
.hv-field { margin-bottom: var(--ed-space-16); }
.hv-label, .auth-label {
  display: block; font-family: var(--ed-font-sans); font-size: var(--ed-font-size-body-sm);
  font-weight: var(--ed-weight-medium); color: var(--ed-color-text-secondary); margin-bottom: var(--ed-space-6);
}
.hv-input {
  width: 100%; font-family: var(--ed-font-sans); font-size: var(--ed-font-size-body-sm);
  color: var(--ed-color-text-primary); background: var(--ed-color-surface-raised);
  border: var(--ed-border-width) solid var(--ed-color-border-default); border-radius: var(--ed-radius-sm);
  padding: var(--ed-space-10) var(--ed-space-12); outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.hv-input::placeholder { color: var(--ed-color-text-muted); }
.hv-input:focus { border-color: var(--ed-color-accent); box-shadow: 0 0 0 3px var(--ed-color-focus-ring); }
.hv-err {
  font-family: var(--ed-font-sans); font-size: var(--ed-font-size-caption);
  color: var(--ed-color-danger); min-height: var(--ed-space-16); margin-top: var(--ed-space-4);
}

/* Password field with a visibility toggle */
.auth-pw { position: relative; }
.auth-pw .hv-input { padding-right: 40px; }
.auth-pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--ed-color-text-muted);
}
.auth-pw-toggle:hover { color: var(--ed-color-text-secondary); }
.auth-pw-toggle svg { width: 18px; height: 18px; display: block; }

/* Confirm-password match line — danger on mismatch, success on match */
.auth-match { font-family: var(--ed-font-sans); font-size: var(--ed-font-size-caption); min-height: var(--ed-space-16); margin-top: var(--ed-space-4); }
.auth-match--mismatch { color: var(--ed-color-danger); }
.auth-match--ok { color: var(--ed-color-success); }

/* ── Submit + spinner ───────────────────────────────────────────────────── */
.hv-submit, .hv-btn { width: 100%; margin-top: var(--ed-space-4); }
.hv-spin {
  display: inline-block; width: 13px; height: 13px; margin-right: var(--ed-space-6); vertical-align: -1px;
  border: 2px solid var(--ed-color-accent-on-accent); border-top-color: transparent; border-radius: var(--ed-radius-full);
  animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hv-spin { animation: none; } }

/* ── Links ──────────────────────────────────────────────────────────────── */
.hv-links, .hv-center { display: flex; flex-direction: column; gap: var(--ed-space-10); margin-top: var(--ed-space-24); }
.hv-link, .hv-links a, .hv-center a {
  font-family: var(--ed-font-mono); font-size: var(--ed-font-size-breadcrumb); letter-spacing: var(--ed-tracking-crumb);
  color: var(--ed-color-accent-on-surface); text-decoration: none;
}
.hv-link:hover, .hv-links a:hover, .hv-center a:hover { color: var(--ed-color-text-primary); }
.hv-back { color: var(--ed-color-text-muted) !important; }
.auth-forgot { display: block; text-align: right; margin-top: calc(-1 * var(--ed-space-8)); margin-bottom: var(--ed-space-16); }
.auth-forgot a { font-family: var(--ed-font-mono); font-size: var(--ed-font-size-breadcrumb); color: var(--ed-color-text-muted); }
.auth-forgot a:hover { color: var(--ed-color-text-secondary); }

/* ── Aside content ──────────────────────────────────────────────────────── */
.auth-aside-inner { max-width: 380px; margin: auto; width: 100%; }
.auth-aside-eyebrow {
  font-family: var(--ed-font-mono); font-variant: small-caps; letter-spacing: var(--ed-tracking-label);
  font-size: var(--ed-font-size-label); color: var(--ed-color-text-inverse-panel-muted); margin-bottom: var(--ed-space-16);
}
.auth-quote {
  font-family: var(--ed-font-serif); font-style: italic; font-size: var(--ed-font-size-h2);
  line-height: var(--ed-line-h2); color: var(--ed-color-text-inverse-panel); margin: 0 0 var(--ed-space-20);
}
.auth-quote-attr { font-family: var(--ed-font-mono); font-size: var(--ed-font-size-breadcrumb); letter-spacing: var(--ed-tracking-crumb); color: var(--ed-color-text-inverse-panel-muted); }
.auth-vp { display: flex; flex-direction: column; gap: var(--ed-space-24); margin-top: var(--ed-space-32); }
.auth-vp__item { display: flex; gap: var(--ed-space-14); }
.auth-vp__num { font-family: var(--ed-font-mono); font-variant: small-caps; letter-spacing: var(--ed-tracking-label); font-size: var(--ed-font-size-label); color: var(--ed-color-text-inverse-panel-muted); padding-top: var(--ed-space-4); }
.auth-vp__title { font-family: var(--ed-font-serif); font-size: var(--ed-font-size-h3); line-height: var(--ed-line-h3); color: var(--ed-color-text-inverse-panel); margin: 0 0 var(--ed-space-4); }
.auth-vp__body { font-family: var(--ed-font-sans); font-size: var(--ed-font-size-body-sm); line-height: var(--ed-line-body); color: var(--ed-color-text-inverse-panel-muted); margin: 0; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.hv-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--ed-color-bg-inverse-panel); color: var(--ed-color-text-inverse-panel);
  border: var(--ed-border-width) solid var(--ed-color-border-inverse-panel); border-radius: var(--ed-radius-sm);
  padding: var(--ed-space-12) var(--ed-space-16); font-family: var(--ed-font-sans); font-size: var(--ed-font-size-body-sm);
  box-shadow: var(--ed-shadow-lg); display: none; max-width: 320px;
}
.hv-toast.show { display: block; animation: auth-slide-up .22s ease; }
.hv-toast.danger { border-color: var(--ed-color-danger); }
.hv-toast.warning { border-color: var(--ed-color-accent); }
@keyframes auth-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hv-toast.show { animation: none; } }

/* ── TOTP digit boxes (login 2FA) ───────────────────────────────────────── */
.hv-digit-row { display: flex; gap: var(--ed-space-8); justify-content: flex-start; margin-bottom: var(--ed-space-6); }
.hv-digit {
  width: 46px; height: 54px; text-align: center; font-family: var(--ed-font-mono); font-size: 22px;
  color: var(--ed-color-text-primary); background: var(--ed-color-surface-raised);
  border: var(--ed-border-width) solid var(--ed-color-border-default); border-radius: var(--ed-radius-sm);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.hv-digit:focus { border-color: var(--ed-color-accent); box-shadow: 0 0 0 3px var(--ed-color-focus-ring); }
@keyframes hv-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
.hv-shake { animation: hv-shake .38s ease; }
@media (prefers-reduced-motion: reduce) { .hv-shake { animation: none; } }

/* ── Footer credit ──────────────────────────────────────────────────────── */
.hv-footer-credit { margin-top: var(--ed-space-24); font-family: var(--ed-font-mono); font-size: var(--ed-font-size-breadcrumb); color: var(--ed-color-text-muted); }
.hv-footer-credit a { color: var(--ed-color-text-secondary); text-decoration: none; }
.hv-footer-credit a:hover { color: var(--ed-color-text-primary); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .auth-pane-aside { display: none; }
  .auth-pane-form { padding: var(--ed-space-24); }
  .ed-btn.hv-submit, .ed-btn.hv-btn { width: 100%; }
}