/* =========================================================
   Apes Alpha -- shared auth design system
   Used by: auth/register.html, auth/login.html

   Both auth pages are deliberately built from one stylesheet
   rather than two inline <style> blocks. Sign-in and sign-up
   are the same moment in a user's head; when they are styled
   by separate ad-hoc CSS they drift apart, and a login screen
   that doesn't match the register screen it came from reads
   as an unfinished product exactly at the point where the
   reader is deciding whether to trust one.

   The layout is the "dual pane" pattern common to fintech
   onboarding: value proposition on one side, the form on the
   other, so the reader is reminded what they are signing up
   for at the moment they commit -- without the form having to
   share the page with anything that competes for the click.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.auth-scope {
  --ink:        #05070a;   /* deepest -- the pitch panel */
  --panel:      #12161d;   /* the form panel            */
  --panel-2:    #1a1f28;   /* inputs                    */
  --border:     #262c36;
  --border-2:   #333c49;   /* hover / stronger hairline */
  --text:       #e7ebf1;
  --muted:      #8a93a3;
  --accent:     #1f9be0;
  --accent-h:   #33abee;
  --green:      #17e88f;
  --danger:     #ff6b81;
  --radius:     12px;
  --radius-lg:  18px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Registration and login are the highest-value actions on the
   site, and the research on landing-page "attention ratio"
   (links on the page vs. conversion goals) is consistent:
   every nav item and footer link is a way to leave without
   converting, and removing them has measured signup lifts of
   20-100%. These two pages hide the site chrome entirely and
   offer exactly one exit -- the wordmark, back to the
   homepage -- instead of a full menu. */
/* This stylesheet is loaded only by the two auth templates,
   so these plain global selectors are safe here and are more
   dependable than a :has() scope would be. The type-to-search
   nudge is included: it is a floating tip about a keyboard
   shortcut, which is worth nothing to someone who has not
   signed in yet and costs a distraction floating over the one
   card on the page that matters. */
.navbar, footer.site-footer, .cs-tas-nudge { display: none !important; }

/* base.html also renders every flashed message in a Bootstrap
   alert bar above the page. These templates render the same
   messages inside the card where the reader is looking, so the
   unstyled duplicate at the top is suppressed rather than shown
   twice. */
.container-fluid > .alert { display: none !important; }

body { background: #0a0d12; }

.auth-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 20px 64px;
}

/* ---------- wordmark ---------- */
.auth-brand {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 24px;
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--text); text-decoration: none;
}
.auth-brand:hover, .auth-brand:focus { color: #fff; text-decoration: none; }
.auth-brand .mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 4px rgba(23,232,143,.14);
}

/* ---------- the two panes ---------- */
.auth-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* Below the breakpoint the FORM comes first. A reader on a
   phone who has to scroll past a pitch to reach the fields is
   a reader who may not scroll; simplified mobile forms that
   put the action up front measure materially higher
   completion. The pitch still follows, for anyone who wants
   the argument before committing. */
@media (max-width: 900px) {
  .auth-card { grid-template-columns: 1fr; }
  .auth-form-pane  { order: 1; }
  .auth-pitch-pane { order: 2; }
}

/* ---------- left: the pitch ---------- */
.auth-pitch-pane {
  position: relative;
  padding: 46px 40px;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-pitch-pane > * { position: relative; }
.auth-pitch-pane::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 140% at 8% 0%,   rgba(31,155,224,.20), transparent 55%),
    radial-gradient(120% 140% at 92% 100%, rgba(23,232,143,.14), transparent 55%);
}

.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  margin: 0 0 20px; padding: 6px 12px;
  font: 700 .66rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .09em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
}
.auth-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(23,232,143,.2);
}

.auth-title {
  margin: 0 0 14px;
  font-size: 1.78rem; font-weight: 800; line-height: 1.16; letter-spacing: -.022em;
  color: #fff;
}
.auth-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--green), #a9f3d5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-sub {
  margin: 0 0 28px;
  font-size: .93rem; line-height: 1.6; color: rgba(255,255,255,.6);
}

.auth-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.auth-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .875rem; line-height: 1.45; color: rgba(255,255,255,.86);
}
.auth-list .ck {
  flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 800;
  background: rgba(23,232,143,.14); color: var(--green);
}

/* Authority, not invented social proof: the primary sources
   the product is actually built on. Placed low in the pitch
   pane so it sits beside the form's CTA -- trust signals do
   the most work at the decision moment. */
.auth-sources {
  display: flex; flex-wrap: wrap; gap: 9px 18px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09);
}
.auth-sources span {
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ---------- right: the form ---------- */
.auth-form-pane {
  padding: 46px 42px; background: var(--panel);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-form-pane h1 {
  margin: 0 0 6px;
  font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; color: var(--text);
}
.auth-form-pane .auth-h-note {
  margin: 0 0 26px; font-size: .85rem; color: var(--muted);
}
.auth-form-pane .auth-h-note a { color: var(--accent); font-weight: 600; }

/* SSO first: it is the lowest-friction path and the one most
   readers prefer, so it leads rather than hiding under the
   email form. */
.auth-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px;
  background: #fff; color: #16181d;
  border: 1px solid #fff; border-radius: var(--radius);
  font-size: .92rem; font-weight: 700; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.auth-sso:hover {
  color: #16181d; text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.auth-sso img { width: 19px; height: 19px; }

.auth-or {
  display: flex; align-items: center; gap: 13px; margin: 24px 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}

/* ---------- fields ---------- */
.auth-form-pane .form-group { margin: 0 0 18px; }
.auth-form-pane label {
  display: block; margin: 0 0 7px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; color: #aeb6c4;
}

.auth-form-pane input.form-control {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px !important;
  font-size: .93rem !important; font-family: inherit;
  color: var(--text) !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.auth-form-pane input.form-control::placeholder { color: #5d6675; }
.auth-form-pane input.form-control:hover { border-color: var(--border-2) !important; }
/* A visible focus ring is both an accessibility requirement
   and the single cheapest cue that a form is well built. */
.auth-form-pane input.form-control:focus {
  outline: none;
  background: #1d2230 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(31,155,224,.22) !important;
}

/* Chrome paints autofilled inputs a pale blue-white, which on
   a dark form looks like a rendering bug at exactly the wrong
   moment. There is no property that disables it -- the only
   reliable fix is to flood the field with an inset shadow and
   re-declare the text colour. */
.auth-form-pane input:-webkit-autofill,
.auth-form-pane input:-webkit-autofill:hover,
.auth-form-pane input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #1d2230 inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* Show/hide beats a second "confirm password" field: asking
   for the password twice measurably lowers completion, while
   letting people read what they typed fixes the same
   mistake without the extra field. */
.auth-pw { position: relative; }
.auth-pw input.form-control { padding-right: 62px !important; }
.auth-pw-toggle {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  padding: 7px 10px; border: none; border-radius: 8px; background: none;
  font: 700 .7rem/1 inherit; letter-spacing: .05em; color: var(--muted);
  cursor: pointer;
}
.auth-pw-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
.auth-pw-toggle:focus-visible {
  outline: none; color: var(--text);
  box-shadow: 0 0 0 2px rgba(31,155,224,.55);
}

.auth-form-pane .text-danger,
.auth-form-pane .text-danger p {
  margin: 6px 0 0; font-size: .78rem; color: var(--danger) !important;
}

.auth-check { display: flex; align-items: center; gap: 9px; margin: 2px 0 22px; }
/* A default checkbox paints as a stark white square on a dark
   panel -- the one element on the form that looks like it was
   never styled. accent-color alone does not fix the unchecked
   state, so the box is drawn explicitly. */
.auth-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 17px; height: 17px; margin: 0;
  background: var(--panel-2);
  border: 1px solid var(--border-2); border-radius: 5px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.auth-check input[type="checkbox"]:hover { border-color: var(--accent); }
.auth-check input[type="checkbox"]:checked {
  background: var(--accent) center/11px no-repeat
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  border-color: var(--accent);
}
.auth-check input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(31,155,224,.3);
}
.auth-check label { margin: 0; font-size: .84rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.auth-check label:hover { color: var(--text); }

/* ---------- the one CTA ---------- */
.auth-submit {
  display: block; width: 100%;
  padding: 15px 18px;
  font-family: inherit; font-size: .97rem; font-weight: 800; letter-spacing: -.005em;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-h), var(--accent));
  border: none; border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(31,155,224,.3);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.auth-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(31,155,224,.38);
}
.auth-submit:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(31,155,224,.3); }
.auth-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31,155,224,.5); }

/* Reassurance directly under the button, where the hesitation
   actually happens. */
.auth-microcopy {
  margin: 14px 0 0; text-align: center;
  font-size: .76rem; line-height: 1.5; color: var(--muted);
}
.auth-microcopy a { color: var(--muted); text-decoration: underline; }
.auth-microcopy a:hover { color: var(--text); }

.auth-alt {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center; font-size: .86rem; color: var(--muted);
}
.auth-alt a { color: var(--accent); font-weight: 600; }
.auth-alt a:hover { color: var(--accent-h); }
.auth-alt p { margin: 0 0 6px; }
.auth-alt p:last-child { margin: 0; }

.auth-flash {
  margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid rgba(255,107,129,.35);
  border-radius: var(--radius);
  background: rgba(255,107,129,.09);
  font-size: .84rem; color: #ffb3bf;
}
.auth-flash p { margin: 0; }
.auth-flash p + p { margin-top: 6px; }

.auth-help {
  margin: 22px 0 0; text-align: center;
  font-size: .78rem; color: var(--muted);
}
.auth-help a { color: var(--accent); }

@media (max-width: 900px) {
  .auth-pitch-pane { padding: 38px 26px; }
  .auth-form-pane  { padding: 38px 26px; }
  .auth-title { font-size: 1.55rem; }
}
@media (max-width: 420px) {
  .auth-shell { padding: 20px 14px 48px; }
  .auth-pitch-pane, .auth-form-pane { padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-scope * { transition: none !important; }
  .auth-sso:hover, .auth-submit:hover { transform: none; }
}