/*
 * auth.css [WP-A2] — account button + panel styles (CONTRACT-V2 §2, §3.7).
 * Loaded by auth.js itself (a <link> it injects at runtime) as well as
 * directly by views/app.php, so it stays self-contained via
 * var(--brand-token, literal-fallback) — every brand color/font below
 * carries a literal fallback matching brand.css's tokens, so this renders
 * correctly on the walk viewer (brand.css loaded) AND on a bare page that
 * never loaded it at all (e.g. a bare /invite redeem page).
 *
 * Restyled to the "All Subjects" editorial brand: the account button lives
 * inside #walk-menu's white sheet (#account-slot), so it now reads as a
 * light Carbon chip rather than dark glass; the panel is a white card with
 * hairline rules and crimson actions.
 */

.vp-auth-btn {
  font: 500 13px var(--font-sans, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
  color: var(--g-100, #161616);
  background: var(--g-10, #f4f4f4);
  border: 1px solid var(--g-20, #e0e0e0);
  border-radius: 3px;
  padding: 7px 14px;
  cursor: pointer;
  flex: none;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vp-auth-btn:hover { background: var(--g-20, #e0e0e0); }
.vp-auth-btn.vp-auth-active {
  background: var(--crimson, #a62122);
  border-color: var(--crimson, #a62122);
  color: var(--g-white, #fff);
}

/* Fallback mount point when neither #account-slot nor #topbar exist (e.g. a
   bare /invite fallback page) — a small fixed corner container. */
.vp-auth-floating {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1400;
  display: flex;
  align-items: center;
}
.vp-auth-floating .vp-auth-btn {
  background: var(--g-100, #161616);
  color: var(--paper, #f3efe8);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 20px rgba(22, 22, 22, 0.25);
}

/* ---------- panel ---------- */
.vp-auth-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1400;
  width: min(340px, calc(100vw - 28px));
  max-height: min(76vh, 640px);
  overflow-y: auto;
  background: var(--g-white, #fff);
  color: var(--g-100, #161616);
  border-radius: 6px;
  box-shadow: 0 16px 44px rgba(22, 22, 22, 0.22);
  border: 1px solid var(--g-20, #e0e0e0);
  padding: 16px;
  font: 13.5px var(--font-sans, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
  line-height: 1.45;
}
/* .vp-auth-panel positions itself absolute against its mount point — #topbar
   is already `position: fixed` (app.css) and .vp-auth-floating is `position:
   fixed` (above), both valid containing blocks already; nothing to add here. */

/* Inside the walk menu sheet the mount point scrolls and clips: an absolute
   panel gets cut off (entirely so on phones). Present it as a fixed,
   viewport-centered card there instead — never clipped, always scrollable. */
#walk-menu .vp-auth-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}

.vp-auth-section + .vp-auth-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--g-20, #e0e0e0);
}
.vp-auth-section h3 {
  margin: 0 0 8px;
  font-family: var(--font-mono, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--g-70, #525252);
}
.vp-auth-section p {
  margin: 0 0 10px;
  color: var(--g-70, #525252);
}
.vp-auth-hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--g-50, #8d8d8d);
}

.vp-auth-panel form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vp-auth-panel input[type="text"],
.vp-auth-panel input[type="number"],
.vp-auth-panel select {
  font: inherit;
  padding: 7px 9px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--g-50, #8d8d8d);
  background: var(--g-10, #f4f4f4);
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vp-auth-panel input:focus,
.vp-auth-panel select:focus {
  outline: none;
  border-bottom-color: var(--crimson, #a62122);
  box-shadow: 0 1px 0 0 var(--crimson, #a62122);
}
.vp-auth-row { display: flex; gap: 8px; }
.vp-auth-row > * { flex: 1; min-width: 0; }

.vp-auth-panel button {
  font: 500 13px var(--font-sans, sans-serif);
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--crimson, #a62122);
  color: var(--g-white, #fff);
  transition: background 0.15s;
}
.vp-auth-panel button:hover { background: var(--crimson-hover, #8e1c1d); }
.vp-auth-panel button.vp-auth-secondary {
  background: var(--g-white, #fff);
  border-color: var(--g-30, #c6c6c6);
  color: var(--g-100, #161616);
}
.vp-auth-panel button.vp-auth-secondary:hover { background: var(--g-10, #f4f4f4); }
.vp-auth-panel button:disabled { opacity: 0.5; cursor: default; }

.vp-auth-creds { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vp-auth-creds li {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--g-100, #161616);
  background: var(--g-10, #f4f4f4); border-radius: 3px; padding: 5px 9px;
}
.vp-auth-creds li::before { content: "🔑"; font-size: 11px; }
.vp-auth-creds-empty { font-size: 12.5px; color: var(--g-50, #8d8d8d); margin: 0 0 10px; }

.vp-auth-invite-result { margin-top: 8px; display: flex; gap: 6px; }
.vp-auth-invite-result[hidden] { display: none; }
.vp-auth-invite-result input {
  flex: 1; min-width: 0; font-size: 12px;
}

.vp-auth-redeem { background: var(--g-10, #f4f4f4); border-radius: 4px; padding: 12px; margin-top: -2px; }

@media (max-width: 480px) {
  .vp-auth-panel { width: calc(100vw - 20px); right: -10px; }
}