/* BeamCue content and notice pages — v2. Loads after v2-core.css.
 * Covers legal text, 404, invitations, email/password flows, desktop connect
 * and the OAuth consent screen.
 */
.v2-notice { display: grid; place-items: center; padding: 72px 18px 96px; min-height: calc(100dvh - 78px); }
.v2-notice-card {
  width: min(560px, 100%); display: grid; gap: 14px; padding: 40px;
  border: 1px solid var(--line); border-radius: var(--radius-panel);
  background: var(--bg-2); box-shadow: var(--shadow-md);
}
.v2-notice-card h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.045em; }
.v2-notice-card p { color: var(--fg-2); font-size: 15px; line-height: 1.65; }
.v2-notice-card strong { color: var(--fg); }
.v2-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.v2-notice-card .v2-btn { justify-self: start; }
.v2-code { font-family: var(--font-mono); font-size: clamp(48px, 8vw, 76px); font-weight: 700; letter-spacing: -0.04em; color: var(--sig); line-height: 1; }
.v2-inline-error {
  padding: 12px 14px; border: 1px solid var(--danger); border-radius: var(--radius-control);
  background: var(--danger-dim); color: var(--fg); font-size: 14px; line-height: 1.55;
}

/* Django and allauth render these forms themselves, so style by element. */
.v2-form-stack { display: grid; gap: 4px; }
.v2-form-stack p { display: grid; gap: 6px; margin: 0 0 12px; }
.v2-form-stack label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.v2-form-stack input, .v2-form-stack select, .v2-form-stack textarea {
  width: 100%; min-height: var(--control-height); padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px;
}
.v2-form-stack .helptext, .v2-form-stack .helptext ul { color: var(--fg-3); font-size: 12px; line-height: 1.5; }
.v2-form-stack ul.errorlist { margin: 0; padding-left: 18px; color: var(--danger); font-size: 13px; }

/* ---------- legal / long-form ---------- */
.v2-doc { width: min(760px, 100%); margin: 0 auto; padding: 64px 18px 96px; }
.v2-doc h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.05em; margin: 14px 0 20px; }
.v2-doc .lead { color: var(--fg-2); font-size: 17px; line-height: 1.7; }
.v2-doc section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.v2-doc h2 { font-size: 21px; letter-spacing: -0.03em; margin-bottom: 12px; }
.v2-doc p { color: var(--fg-2); font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.v2-doc a { color: var(--sig); font-weight: 600; }
.v2-back { font-size: 13px; color: var(--fg-3); }
.v2-back:hover { color: var(--fg); }

/* ---------- OAuth consent ---------- */
.v2-consent { width: min(720px, 100%); margin: 64px auto; padding: 0 18px 96px; }
.v2-consent-card { display: grid; gap: 16px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--bg-2); }
.v2-consent-card h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.045em; }
.v2-consent-card h2 { font-size: 13px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-top: 8px; }
.v2-consent-card p { color: var(--fg-2); font-size: 15px; line-height: 1.65; }
.v2-consent-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v2-consent-card ul li {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--bg); color: var(--fg-2); font-size: 14px;
}
.v2-consent-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; margin-top: 8px; }

@media (max-width: 640px) {
  .v2-notice { padding: 36px 16px 64px; min-height: 0; }
  .v2-notice-card { padding: 24px; }
  .v2-consent-card { padding: 24px; }
}