/* Sign-in overlay in the shared system (George, 2026-10-20): the landing's two-tone Geist headline, teal pill
   actions, rounded fields and sentence-case labels, so signing in looks like the site and the app.
   Loaded last on every page (base.html). site.css forces several older auth rules with !important
   (black square buttons, bold text everywhere), so the overrides below match that strength. */

.vc-auth-fullscreen {
  --au-canvas:#f8f8f7; --au-surface:#ffffff; --au-ink:#1a1a1a; --au-ink-strong:#101010; --au-muted:#5c5c5c;
  --au-soft-ink:color-mix(in srgb, #101010 55%, transparent);
  --au-line:#e4e3e1; --au-line-strong:#d3d2cf; --au-accent:#1f6b7a; --au-accent-2:#14525e; --au-on-accent:#ffffff;
  --au-tint:rgba(31,107,122,0.09); --au-focus:#14525e; --au-danger:#b42318; --au-danger-tint:#fdecea;
  --au-head:"VC Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --au-body:"VC Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="dark"] .vc-auth-fullscreen {
  --au-canvas:#070b1c; --au-surface:#0f1428; --au-ink:#ffffff; --au-ink-strong:#ffffff; --au-muted:#b4b7c3;
  --au-soft-ink:rgba(255,255,255,0.62);
  --au-line:rgba(255,255,255,0.16); --au-line-strong:rgba(255,255,255,0.3); --au-accent:#7fb8c2; --au-accent-2:#c2dfe5;
  --au-on-accent:#070b1c; --au-tint:rgba(127,184,194,0.14); --au-focus:#c2dfe5; --au-danger:#f97066; --au-danger-tint:rgba(249,112,102,0.12);
}

/* --- Form column ------------------------------------------------------------------------------------- */
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col { background:var(--au-canvas) !important; color:var(--au-ink) !important; font-family:var(--au-body); }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col p { font-weight:400 !important; }
.vc-auth-mobile-brand { margin-bottom:28px; }
.vc-auth-mobile-wordmark { font-family:var(--au-head); font-size:1.375rem; font-weight:600; letter-spacing:-0.02em; color:var(--au-ink-strong); text-transform:none; }

html[data-theme] .vc-auth-fullscreen .vc-auth-title { margin:0; font-family:var(--au-head) !important; font-size:clamp(2rem, 3.2vw, 2.625rem);
  font-weight:500 !important; letter-spacing:-0.035em; line-height:1.08; color:var(--au-ink-strong) !important; text-wrap:balance; }
html[data-theme] .vc-auth-fullscreen .vc-auth-title em { font-style:normal !important; text-decoration:none !important; border:0 !important;
  background:none !important; padding:0 !important; box-shadow:none !important; color:var(--au-soft-ink) !important; }
.vc-auth-lead { margin:12px 0 0; max-width:36ch; color:var(--au-muted); font-size:1rem; line-height:1.55; }

/* Labels: sentence case, the app's body type. */
html[data-theme] .vc-auth-fullscreen .vc-auth-label { display:block; margin:0 0 6px; font-family:var(--au-body) !important; font-size:0.875rem !important;
  font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--au-ink) !important; }
.vc-auth-optional-tag { margin-left:6px; color:var(--au-muted); font-size:0.8125rem; font-weight:400; opacity:1; }

/* Fields: rounded, the composer's ring and teal focus. */
html[data-theme] .vc-auth-fullscreen .vc-auth-input { width:100%; min-height:48px; padding:0 16px; border:1px solid var(--au-line-strong) !important;
  border-radius:12px !important; background:var(--au-surface) !important; color:var(--au-ink) !important; font:inherit; font-size:1rem;
  box-shadow:none !important; transition:border-color 0.15s, box-shadow 0.15s; }
html[data-theme] .vc-auth-fullscreen select.vc-auth-input { padding-right:36px; }
html[data-theme] .vc-auth-fullscreen .vc-auth-input::placeholder { color:var(--au-muted); opacity:0.8; }
html[data-theme] .vc-auth-fullscreen .vc-auth-input:focus { outline:none; border-color:var(--au-accent) !important; box-shadow:0 0 0 4px var(--au-tint) !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-input:disabled { opacity:0.7; background:var(--au-canvas) !important; }

/* Primary action: the teal pill used across the site and app. */
html[data-theme] .vc-auth-fullscreen .vc-auth-submit { min-height:48px; margin-top:4px; border:0 !important; border-radius:9999px !important;
  background:var(--au-accent) !important; color:var(--au-on-accent) !important; font-family:var(--au-head) !important; font-size:0.9375rem !important;
  font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; transition:background-color 0.15s, transform 0.15s; }
html[data-theme] .vc-auth-fullscreen .vc-auth-submit:hover:not(:disabled) { background:var(--au-accent-2) !important; transform:translateY(-1px); }
html[data-theme] .vc-auth-fullscreen .vc-auth-submit:focus-visible { outline:2px solid var(--au-focus); outline-offset:3px; }
html[data-theme] .vc-auth-fullscreen .vc-auth-submit svg { color:currentColor !important; }

/* Google: a quiet pill with the same ring as the fields. */
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-google { min-height:48px; padding:0 20px; border:1px solid var(--au-line-strong) !important;
  border-radius:9999px !important; background:var(--au-surface) !important; color:var(--au-ink) !important; font-family:var(--au-head) !important;
  font-size:0.9375rem !important; font-weight:500 !important; transition:border-color 0.15s, background-color 0.15s; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-google:hover:not(:disabled) { border-color:var(--au-ink) !important; background:var(--au-tint) !important; }

/* Text actions ("Sign up", "Sign in", "Use a different email"): links, not boxed buttons. */
.vc-auth-switch { margin:20px 0 0; text-align:center; color:var(--au-muted); font-size:0.9375rem; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-link { display:inline; min-height:0; padding:0 2px !important; border:0 !important;
  background:none !important; color:var(--au-accent) !important; font:inherit; font-weight:600 !important; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-link:hover { color:var(--au-accent-2) !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-link-small { display:inline-block; margin-top:10px; font-size:0.9375rem; font-weight:500 !important; }

/* Readout chips (sign-up, optional). */
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-chip-btn { min-height:36px; padding:0 14px !important; border-radius:9999px !important;
  font-size:0.8125rem !important; font-weight:500 !important; transition:border-color 0.15s, background-color 0.15s, color 0.15s; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-chip-btn.vc-auth-chip { border:1px solid var(--au-line-strong) !important; background:var(--au-surface) !important; color:var(--au-ink) !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-chip-btn.vc-auth-chip:hover { border-color:var(--au-accent) !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-chip-btn.vc-auth-chip-on { border:1px solid var(--au-accent) !important; background:var(--au-accent) !important; color:var(--au-on-accent) !important; }

/* Optional details, divider, terms, errors. */
html[data-theme] .vc-auth-fullscreen .vc-auth-optional { border-top:1px solid var(--au-line); padding-top:14px; }
html[data-theme] .vc-auth-fullscreen .vc-auth-optional > summary { margin:0; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col .border-surface-200 { border-color:var(--au-line) !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col .bg-white { background:var(--au-canvas) !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col label[for$="terms"] { color:var(--au-muted) !important; font-size:0.8125rem; line-height:1.5; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col label[for$="terms"] a { color:var(--au-accent) !important; }
.vc-auth-check { width:16px; height:16px; accent-color:var(--au-accent); }
.vc-auth-error { display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 14px; border-radius:12px; background:var(--au-danger-tint);
  color:var(--au-danger); font-size:0.9375rem; line-height:1.45; }
.vc-auth-error svg { flex:0 0 auto; width:16px; height:16px; margin-top:2px; }

/* Close: the app's round icon button. */
html[data-theme] .vc-auth-fullscreen .vc-auth-close { width:40px !important; height:40px !important; border:1px solid var(--au-line) !important;
  border-radius:9999px; background:var(--au-surface) !important; color:var(--au-muted) !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-close:hover { color:var(--au-ink-strong) !important; border-color:var(--au-line-strong) !important; }

/* --- Left panel: Ahmed's slideshow (2026-10-20) in the landing's visual system -------------------------------
   His content and behaviour (base.html authHeroSlides: three examples, the typed "Try" prompt, previous / pause /
   next) dressed as the landing hero: the image in an inset rounded frame, the prompt as the landing's white
   composer, round dark controls top right, Geist wordmark and a mono example label. Overrides site.css's dark
   full-bleed version. */
html[data-theme] .vc-auth-fullscreen .vc-auth-hero { position:relative; flex-direction:column; justify-content:flex-start !important;
  padding:0 !important; background:var(--au-canvas) !important; border-right:1px solid var(--au-line); }
html[data-theme] .vc-auth-fullscreen .vc-auth-hero::before { display:none; }
html[data-theme] .vc-auth-fullscreen .vc-auth-hero > :first-child { position:absolute !important; top:40px; left:44px; right:auto; z-index:3; }
html[data-theme] .vc-auth-fullscreen .vc-auth-hero-brand { font-family:var(--au-head); font-size:1.5rem; font-weight:600; letter-spacing:-0.02em;
  text-transform:none; color:#ffffff !important; }

/* The frame: inset from the panel edge with the landing hero's radius and shadow. */
html[data-theme] .vc-auth-fullscreen .vc-auth-slides { position:absolute; inset:16px; z-index:0; overflow:hidden; border-radius:32px;
  background:#161b21; box-shadow:0 0 0 1px var(--au-line), 0 18px 52px rgba(16,24,32,0.12); }
html[data-theme] .vc-auth-fullscreen .vc-auth-slides::after { background:linear-gradient(180deg, rgba(9,12,20,0.55) 0%, rgba(9,12,20,0) 30%,
  rgba(9,12,20,0) 62%, rgba(9,12,20,0.35) 100%); }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-label { top:78px; left:28px; font-family:"VC Geist Mono", ui-monospace, monospace;
  font-size:0.8125rem; letter-spacing:0.02em; color:rgba(255,255,255,0.86) !important; }

/* The prompt: the landing's white composer, typing "Try ..." with a blinking caret and a teal send dot. */
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-prompt { left:24px; right:24px; bottom:24px; max-width:none; display:flex; align-items:center;
  gap:12px; min-height:64px; padding:12px 12px 12px 22px; border:0; border-radius:28px; background:#ffffff;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 0 0 1px rgba(16,24,32,0.08), 0 18px 52px rgba(9,12,20,0.28);
  font-family:var(--au-body); font-size:1.0625rem !important; font-weight:400 !important; line-height:1.45; }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-prompt,
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-prompt * { color:#1a1a1a !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-prompt > span:first-child { flex:0 1 auto; min-width:0; }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-caret { flex:0 0 auto; margin-left:-12px; margin-right:auto; color:#5c5c5c !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-prompt::after { content:""; flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:#1f6b7a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/20px no-repeat; }

/* Controls: the landing's round dark buttons, top right of the image. */
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-controls { top:28px; right:28px; left:auto; bottom:auto; gap:8px; }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-ctrl { width:40px; height:40px; border:0; background:rgba(9,12,20,0.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#ffffff !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-ctrl:hover { background:rgba(9,12,20,0.82); }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-ctrl svg { color:#ffffff !important; }
html[data-theme] .vc-auth-fullscreen .vc-auth-slide-ctrl:focus-visible { outline:2px solid #ffffff; outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
  .vc-auth-fullscreen .vc-auth-submit, .vc-auth-fullscreen .vc-auth-input, .vc-auth-fullscreen .vc-auth-google { transition:none; }
  html[data-theme] .vc-auth-fullscreen .vc-auth-submit:hover:not(:disabled) { transform:none; }
}
/* The optional section's summary keeps its row layout so the +/− sits at the far right. */
html[data-theme] .vc-auth-fullscreen summary.vc-auth-label { display:flex !important; align-items:center; gap:0; margin:0; }
html[data-theme] .vc-auth-fullscreen .vc-auth-optional > summary::after { color:var(--au-muted); font-size:1.125rem; }
/* Touch targets inside the overlay. */
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-link-small { display:inline-flex; align-items:center; min-height:40px; margin-top:4px; }
html[data-theme] .vc-auth-fullscreen input.vc-auth-check { width:18px; height:18px; flex:0 0 auto; margin-top:2px; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col button.vc-auth-chip-btn { min-height:40px; }
html[data-theme] .vc-auth-fullscreen .vc-auth-form-col form > button.vc-auth-submit { margin-top:8px; }