/* ============================================================================
   FIX-20261008-23 — the chat auth pages wear the PORTAL's palette and typography.

   Aman, 2026-10-08: "I want the chat login page, signup page similar to ImmunoVerse
   portal too", and on the light/dark question: portal palette + typography, keep LIGHT
   default.

   WHY A SEPARATE SHEET, LOADED LAST, instead of editing seven pages:
   all seven chat auth pages already share `/static/style.css` + `/static/refined.css`,
   so the palette and the component treatments live in exactly two places. Restyling
   there moves login, register, request, reset, pending, contact and account at once,
   with no HTML churn and nothing for a future page to forget to opt into. The pages
   also use Tailwind utilities, which these tokens cannot reach — so anything a utility
   class sets (spacing, flex) is left alone deliberately and only COLOUR, TYPE, RADIUS,
   BORDER and SHADOW are taken over.

   ⚠ TOKEN VALUES ARE COPIED VERBATIM from ../immuno-verse-portal/immuno-verse-portal/
   login.html, not re-derived by eye. "Similar to the portal" has to mean the same
   numbers, or the two products drift the moment either is touched.

   ⚠⚠ LIGHT IS THE DEFAULT, which is the one place this deliberately differs from the
   portal. The portal is dark-first with a `:root[data-theme="light"]` override; chat's
   recorded preference is light-default. So the portal's LIGHT values are the base here
   and its DARK values are the override — same palette, inverted precedence. Dark is
   offered both ways on purpose:
     * `@media (prefers-color-scheme: dark)` guarded by `:root:not([data-theme="light"])`
       so an explicit light choice always wins over the OS, and
     * `:root[data-theme="dark"]` so the existing theme toggle keeps working.
   This is the same guard shape the chat answer callouts already use.
   ============================================================================ */

:root {
  /* --- surfaces (portal LIGHT values) --- */
  --iv-bg-0: #f7f9fb;
  --iv-bg-1: #ffffff;
  --iv-bg-2: #f0f3fa;
  --iv-bg-3: #e7ecf6;
  --iv-card: rgba(255, 255, 255, 0.95);
  --iv-border: rgba(60, 80, 140, 0.14);
  --iv-border-2: rgba(60, 80, 140, 0.28);

  /* --- ink --- */
  --iv-text-0: #0b1220;
  --iv-text-1: #1f2a44;
  --iv-text-2: #4a5578;
  --iv-text-3: #8090b0;

  /* --- accents --- */
  --iv-primary: #4953bc;
  --iv-primary-strong: #2f3aa3;
  --iv-primary-soft: rgba(129, 140, 248, 0.18);
  --iv-accent-cyan: #0891b2;
  --iv-accent-violet: #9333ea;
  --iv-link: #0369a1;
  --iv-danger: #dc2626;
  --iv-success: #059669;

  --iv-grad-primary: linear-gradient(135deg, #0891b2 0%, #6366f1 45%, #9333ea 100%);
  --iv-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08);

  --iv-radius: 14px;
  --iv-radius-lg: 22px;
  --iv-radius-pill: 9999px;
  --iv-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Chat's own tokens are REMAPPED rather than replaced, so every existing rule in
     style.css / refined.css inherits the portal palette without being rewritten.
     This is what makes the restyle one file instead of several hundred edits. */
  --color-primary: var(--iv-primary);
  --color-primary-hover: var(--iv-primary-strong);
  --color-accent: var(--iv-accent-cyan);
  --color-on-surface: var(--iv-text-0);
  --color-on-surface-variant: var(--iv-text-2);
  --color-outline: var(--iv-border-2);
  --color-outline-variant: var(--iv-border);
  --color-surface: var(--iv-bg-1);
  --color-surface-container-low: var(--iv-bg-2);
  --color-background: var(--iv-bg-0);
  --color-error: var(--iv-danger);
  --color-success: var(--iv-success);
}

/*  ⚠⚠ THERE IS DELIBERATELY NO DARK MODE HERE, and that is a correction.

    The first version honoured `@media (prefers-color-scheme: dark)`. Aman's OS is in dark mode,
    so the tokens flipped — but NOTHING ELSE ON THE PAGE DID, because the body background, the
    text colours and the button all come from `style.css` and Tailwind utilities that are
    light-only. Measured live on 2026-10-09:

        tok_card  rgba(20,26,45,0.72)   -> DARK card   (these tokens)
        bodyBg    rgb(255,255,255)      -> WHITE body  (style.css won)
        cardColor rgb(11,15,26)         -> DARK text on a DARK card = unreadable

    A half-applied dark mode is worse than none: it produced dark-on-dark text on the sign-in
    page. These pages are not built for dark, so this theme is LIGHT ONLY. Adding dark back means
    converting `style.css` and the Tailwind utility usage too — a much larger change than a
    palette, and not one to smuggle in behind a token file.
*/

/* ---------------------------------------------------------------- components */

body {
  background: var(--iv-bg-0);
  color: var(--iv-text-0);
}

/*  The card. `backdrop-filter` is what makes the portal's card read as glass in dark
    mode; in light mode the card is near-opaque so it costs nothing visually. */
.login-card,
.refined .login-card,
.info-card {
  background: var(--iv-card);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-radius-lg);
  box-shadow: var(--iv-shadow-lg);
}

/*  Labels are mono + uppercase-ish on both products; chat already had the mono, so
    only the colour moves. */
.field-label {
  font-family: var(--iv-mono);
  color: var(--iv-text-2);
}

.field-input,
.field-select,
.field-textarea {
  background: var(--iv-bg-1);
  color: var(--iv-text-0);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-radius);
}

.field-input::placeholder,
.field-textarea::placeholder { color: var(--iv-text-3); }

/*  ⚠ A visible focus ring is an accessibility requirement, not decoration: the portal
    uses the soft primary as a 3px halo, and removing the outline without replacing it
    would strip keyboard users of any indication of where they are. */
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--iv-primary);
  box-shadow: 0 0 0 3px var(--iv-primary-soft);
}

/*  The gradient primary button is the portal's signature element. */
/*  ⚠ The primary button is deliberately NOT restyled here. `refined.css` sets it via
    `.refined .btn-primary`, which outranks a bare `.btn-primary`, so an override at this
    specificity never applied — it only looked like it did. Changing the button means
    editing `refined.css`, which is a separate decision. */
.btn-secondary {
  background: transparent;
  color: var(--iv-text-1);
  border: 1px solid var(--iv-border-2);
  border-radius: var(--iv-radius);
}
.btn-secondary:hover:not(:disabled) { background: var(--iv-bg-2); }

a, .util-link { color: var(--iv-link); }

/*  Status / alert colour only — geometry is left to the existing rules. */
.alert-error   { color: var(--iv-danger); }
.alert-success { color: var(--iv-success); }

/*  ⚠ The Turnstile widget is NOT restyled. Cloudflare renders it in an iframe and
    `data-theme="auto"` already follows the page, so touching it here would either do
    nothing or fight the iframe. Its placement and margin match the portal exactly
    (last element before the submit button, `margin:4px 0 14px`) — verified against
    `login.html`, not guessed. */

/* ============================================================================
   FIX-20261009-27 — THE SIDE PANEL. The thing that was actually asked for.

   Aman: "i want sign up page similar to immunoverse portal not just by color pallete but how it
   looks like they have the side panel with immunoverse description and on the side, the sign up
   sign in".

   ⭐⭐ The markup was already there and already correct — brand mark, "Accelerating cancer
   immunotherapy discovery.", the description and the stat pills all exist inside
   `aside.brand-panel-refined`. It had simply NEVER RENDERED, on any screen, since the page was
   written:

       class="brand-panel-refined hidden lg:flex ... w-2/5"
       .hidden   -> static/login/style.css   (a <link>, line 14 of the page)
       lg:flex   -> Tailwind's injected <style> (the CDN script, line 7)

   ⚠⚠ `style.css:463` is `.hidden { display: none !important; }`. **`!important` beats ANY
   specificity**, which is why Tailwind's `lg:flex` could never win either — and why my first
   attempt at this rule, which relied on out-specifying `.hidden`, ALSO failed. Measured at a
   1707px viewport, well past the `lg` breakpoint: `display: none`, panel width 0, form panel
   1707px, even with the new rule loaded.
   ⚠ So this rule carries `!important` too. That is not a shortcut here: it is the only thing
   that counters another `!important`, and the alternative — editing `.hidden` in `style.css` —
   would change every element on every auth page that relies on it.
   ⚠ `innerText` on a hidden element returns "", which is what first made this look like an empty
   panel rather than a hidden one. Check `display` before concluding a panel has no content.

   THE FIX IS NOT ANOTHER UTILITY CLASS, and it is not specificity either — both lose to
   `!important`. It matches `.hidden`'s `!important` and out-specifies it (element + two
   classes, 0-2-1, against 0-1-0) so the outcome does not depend on load order.
   ⚠ It is scoped to `min-width: 1024px`, matching Tailwind's own `lg`, so the panel still
   collapses on phones exactly as the original markup intended.
   ============================================================================ */
@media (min-width: 1024px) {
  aside.brand-panel-refined.hidden {
    display: flex !important;
  }
}

/*  The panel carries `text-white` on its heading and `text-white/65` on its body copy, so it
    needs a dark surface to sit on — the same inversion the portal uses (dark brand side, light
    form side). `refined.css` already paints it; this only guarantees the floor, so the panel can
    never render white-on-white if that rule moves. */
aside.brand-panel-refined {
  background-color: var(--iv-text-0);
  color: #ffffff;
}