/*!
 * socialnet-theme.css - the colour of the SocialNet sign-in view.
 *
 * Scoped to #socialAuthGate throughout, so ONLY the signed-out page rotates. A member
 * who is signed in sees the app exactly as before.
 *
 * MUTED, PLEASANT, LIGHT (owner's direction). The card is a pale wash rather than the
 * deep slab it shipped as, which means the words on it had to stop being white. Every
 * piece of text on the card is therefore re-set here to a dark, hue-matched ink. If
 * you ever put the deep card back, these have to go back to white in the same commit,
 * or the page will be pale text on a pale ground.
 *
 * TWO THINGS ARE DELIBERATELY NOT THEMED:
 *
 * 1. BRANDING. The CogNeo bar, the CogNeo pill and the 369 logo plate keep their own
 *    colours at every hour. A logo that changes colour is not a logo.
 *
 * 2. CONTRAST. socialnet-theme.js solves each colour to a target luminance, so every
 *    text pair below holds the same ratio at all 1488 palettes. Nothing here should
 *    introduce a colour that is not solved that way.
 *
 * RESPONSIVE: below 1181px the original design drops the split screen, turns the page
 * white and moves the colour onto .auth-story. This file follows that exactly.
 */

#socialAuthGate {
  --sn-gate-a: #a9d7de;
  --sn-gate-b: #93c6d6;
  --sn-btn-a: #16585f;
  --sn-btn-b: #0d3e45;
  --sn-ink: #123036;
  --sn-ink-rgb: 18, 48, 54;
  --sn-ink-soft: #274b52;
  --sn-acc: #6b4a18;
  --sn-acc-on-dark: #6b4a18;
  --sn-acc-rgb: 150, 110, 45;
  --sn-acc-dim: #7d5722;
  --sn-field-bg: #eef7f9;
  --sn-field-line: #b9d9e0;
  --sn-field-focus: #2f7c88;
  --sn-shadow-rgb: 22, 88, 95;
}

/* ---------- wide screens: the split screen ---------- */
@media (min-width: 1181px) {
  #socialAuthGate {
    background:
      radial-gradient(circle at 10% 12%, #ffffff40, transparent 24rem),
      linear-gradient(90deg, var(--sn-gate-a) 0%, var(--sn-gate-b) 57%, #ffffff 57%, #ffffff 100%) !important;
    transition: background 2.4s ease;
  }
}

/* ---------- narrow screens: white page, colour on the card ---------- */
@media (max-width: 1180px) {
  #socialAuthGate { background: #ffffff !important; }
  #socialAuthGate .auth-story {
    background:
      radial-gradient(circle at 8% 8%, #ffffff40, transparent 18rem),
      linear-gradient(135deg, var(--sn-gate-a), var(--sn-gate-b)) !important;
    box-shadow: 0 22px 54px rgba(var(--sn-shadow-rgb), .15) !important;
    transition: background 2.4s ease, box-shadow 2.4s ease;
  }
}

/* ---------- the words on the pale card: dark, not white ---------- */
#socialAuthGate .auth-story h1,
#socialAuthGate .auth-company,
#socialAuthGate .auth-company b,
#socialAuthGate .auth-socialnet-wordmark,
#socialAuthGate .auth-promises b,
#socialAuthGate .auth-human-mosaic figcaption,
#socialAuthGate .auth-human-cluster figcaption {
  color: var(--sn-ink) !important;
  transition: color 2.4s ease;
}
#socialAuthGate .auth-story .auth-intro,
#socialAuthGate .auth-company small,
#socialAuthGate .auth-promises span,
#socialAuthGate .auth-signature {
  color: var(--sn-ink-soft) !important;
  transition: color 2.4s ease;
}
/* the underline beneath the wordmark was a white rule on a dark slab */
#socialAuthGate .auth-company:after,
#socialAuthGate .auth-socialnet-wordmark:after { background: rgba(var(--sn-ink-rgb), .3) !important; }

/* The wordmark is two-tone: "Social" in the ink and "Net" in a highlight. The
   highlight shipped as a pale cyan, which was right on the deep slab and invisible
   on a pale one, so it takes the solved accent instead and stays two-tone. */
#socialAuthGate .auth-socialnet-wordmark strong span {
  color: var(--sn-acc) !important;
  transition: color 2.4s ease;
}

/* ---------- the promise chips ---------- */
#socialAuthGate .auth-promises span {
  background: rgba(255, 255, 255, .58) !important;
  border-color: rgba(var(--sn-ink-rgb), .12) !important;
  box-shadow: 0 6px 18px rgba(var(--sn-shadow-rgb), .08) !important;
  transition: background 2.4s ease, border-color 2.4s ease;
}
/* the 01 / 02 / 03 */
#socialAuthGate .auth-promises i {
  color: var(--sn-acc-on-dark) !important;
  background: transparent !important;
  transition: color 2.4s ease;
}

/* ---------- the one deep thing on the page: the call to action ---------- */
#socialAuthGate .auth-entry .social-signin button {
  background: linear-gradient(100deg, var(--sn-btn-a), var(--sn-btn-b)) !important;
  box-shadow: 0 12px 24px rgba(var(--sn-shadow-rgb), .22) !important;
  color: #ffffff !important;
  transition: background 2.4s ease, box-shadow 2.4s ease;
}

/* ---------- accents ---------- */
#socialAuthGate .auth-story .eyebrow { color: var(--sn-acc) !important; transition: color 2.4s ease; }
#socialAuthGate .auth-orbit i:last-child { background: var(--sn-acc) !important; transition: background 2.4s ease; }
#socialAuthGate .auth-entry .eyebrow { color: var(--sn-acc-dim) !important; transition: color 2.4s ease; }

/* ---------- the copyright changes background with the layout ---------- */
@media (min-width: 1181px) {
  /* full ink, not soft: it is small type and it straddles both gradient stops */
  #socialAuthGate .social-copyright { color: var(--sn-ink) !important; opacity: .82; }
}
@media (max-width: 1180px) {
  #socialAuthGate .social-copyright { color: #55636e !important; }
}

/* ---------- the white panel ----------
   Owner's direction: every word on this side is a fixed dark grey, and only the
   FIELDS carry the hour's colour. Grey does not compete with 1488 changing hues and
   cannot be made unreadable by any of them, so nothing here is themed except the two
   inputs, whose tint is solved to stay very light. */
#socialAuthGate .auth-cogneo-nav,
#socialAuthGate .auth-entry a {
  background: #ffffff !important;
  color: #3b4550 !important;
  border-color: #dde3ea !important;
}
#socialAuthGate .auth-entry h2 { color: #2f3943 !important; }
#socialAuthGate .auth-entry .eyebrow { color: #4a5560 !important; }
#socialAuthGate .auth-entry > p:not(.eyebrow):not(.form-message):not(.private-note) { color: #5a6672 !important; }
#socialAuthGate .auth-entry .social-signin label { color: #3b4550 !important; }

/* the two text boxes: this is the one thing on the white side that follows the hour */
#socialAuthGate .auth-entry .social-signin input {
  background: var(--sn-field-bg) !important;
  border-color: var(--sn-field-line) !important;
  color: #2f3943 !important;
  transition: background 2.4s ease, border-color 2.4s ease;
}
#socialAuthGate .auth-entry .social-signin input::placeholder { color: #6b7681 !important; opacity: 1; }
#socialAuthGate .auth-entry .social-signin input:focus,
#socialAuthGate .auth-entry .social-signin input:focus-visible {
  border-color: var(--sn-field-focus) !important;
  box-shadow: 0 0 0 3px rgba(var(--sn-ink-rgb), .12) !important;
  outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #socialAuthGate,
  #socialAuthGate *,
  #socialAuthGate .auth-story { transition: none !important; }
}