/* ═══════════════════════════════════════════════════════════
   AUTH / PORTAL PAGE FAMILY — SHARED STYLES
   Cream/olive/heritage palette used by the studio & client login,
   invite, and portal pages — distinct from the main site's dark-hero
   palette in styles.css. Previously copy-pasted independently in each
   page's own <style> block: login.html, studio-login.html,
   accept-invite.html, logged-in-collaborator.html, logged-in-studio.html.

   Load this AFTER styles.css — the --heritage/--serif/--mono/--body/--rule
   aliases below let styles.css's shared classes (.h1, .h2, .body,
   .interest-form, .btn-primary--light, .btn-ghost, etc.) resolve
   correctly against this palette instead of the main site's.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #FFF5EC;
    --ink: #1e1b11; --ink-mid: #5c5244; --ink-dim: #8c7f6e;
    --terracotta: #b8472a; --olive: #5c6830;
    --border: #d6d0c0; --border-mid: #c0b9a6;

    /* Aliases so styles.css's shared classes resolve against this palette */
    --heritage: #8C5A3C;
    --serif: 'Source Serif 4', Georgia, serif;
    --mono: 'Overpass', sans-serif;
    --body: 'Hanken Grotesk', sans-serif;
    --rule: rgba(30,27,17,0.11);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    line-height: 1.65;
    overflow-x: hidden;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    /* Was 9999 — sat far above nav's own z-index:200 (styles.css),
       which on iOS Safari appears to throw off how nav::before's
       backdrop-filter:blur composites against scrolled content (two
       stacked position:fixed layers both using effects). This grain
       texture doesn't need to render above the nav specifically — 1 is
       still above ordinary page content (z-index:auto) but no longer
       competes with it. */
    z-index: 1;
}

a { color: inherit; text-decoration: none; }

/* Google sign-in button */
.btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.875rem; }

/* Select dropdowns */
select { background: #F9E9DB; border: 1px solid var(--border); color: var(--ink); font-family: var(--body); font-size: 0.9rem; padding: 0.6rem 0.75rem; outline: none; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231e1b11' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px 8px; padding-right: 2.5rem; }
select:hover { border-color: var(--border-mid); }
select:focus { border-color: var(--ink-mid); }

/* Extends styles.css's .body--light/.body--dark modifier pattern for
   the one auth-only case they don't cover: error/failure copy. */
.body--error { color: var(--terracotta); }

/* ═══ AUTH PAGE SKELETON ═══
   Shared two-panel layout for login.html, studio-login.html, and
   accept-invite.html — was independently copy-pasted in each page's
   own <style> block with only the class prefix (login-/invite-)
   differing. Text inside uses styles.css's shared .title/.h1/.h2/.body
   classes; these classes are structure/layout only. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }

.auth-page { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.auth-left { background: var(--heritage); padding: 10rem 4rem 4rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 88%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 18%, black 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    pointer-events: none;
}
.auth-left__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.auth-left .body { max-width: 380px; margin-top: 3rem; }

.auth-right { padding: 10rem 4rem 4rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 480px; width: 100%; margin: 0 auto; }
.auth-right__mobile-intro { display: none; }

/* Kicker/eyebrow line above a heading — pairs with styles.css's .label
   for typography, this only supplies the layout + decorative tick. */
.auth-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.auth-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--border-mid); }

@media (max-width: 800px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-left { display: none; }
    .auth-right { padding: 8rem 1.5rem 3rem; max-width: 100%; }
    .auth-right__mobile-intro { display: block; margin-bottom: 2.5rem; }
    .auth-right__mobile-intro .body { margin-top: 3rem; margin-bottom: 0; }
}

/* ═══ AUTH FORM ═══ */
.login-form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.login-form__field { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
/* Matches .interest-form .form-field's label (styles.css) — same
   role, a real label above the field rather than relying on the
   placeholder alone. */
.login-form__field label { font-family: var(--body); font-size: 1rem; font-weight: 300; line-height: 1.75; letter-spacing: normal; color: var(--ink); }
/* Flush underline field, matching the IAN/creative-collaborations
   interest-form's open text fields (styles.css .interest-form
   .form-field input) rather than this page's old filled box. */
.login-form input { background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--ink); font-family: var(--body); font-weight: 250; font-size: 1rem; line-height: 1.75; letter-spacing: normal; padding: 0.5rem 0; width: 100%; outline: none; transition: border-color 0.2s; }
.login-form input:focus { border-color: var(--heritage); }
.login-form input::placeholder { font-family: var(--body); font-weight: 250; font-size: 1rem; letter-spacing: normal; text-transform: none; color: var(--ink-dim); opacity: 0.5; }
.login-form__error { display: none; margin-bottom: 0; }
.login-form__error.visible { display: block; }
/* Password requirements, shown only while creating a new password —
   toggled off for the sign-in variant of the same field. */
.login-form__hint { font-family: var(--body); font-size: 0.8rem; font-weight: 300; line-height: 1.5; color: var(--ink-dim); margin-top: -0.15rem; }
.btn-primary--light:disabled { opacity: 0.5; cursor: not-allowed; }

/* Password visibility toggle — wraps a password <input> so the eye
   button can sit inside it. Swaps between two pre-drawn icons (open/
   slashed) rather than transforming one, since this engine doesn't
   reliably apply `transform` to an SVG root element in some contexts
   (see the FAQ chevron fix in styles.css for the same issue). */
.password-field { position: relative; width: 100%; }
.password-field input { padding-right: 2rem; }
.password-toggle { position: absolute; top: 50%; right: 0.875rem; transform: translateY(-50%); background: none; border: none; padding: 0; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--heritage); cursor: pointer; }
.password-toggle:hover { color: var(--ink); }
.password-toggle svg { width: 100%; height: 100%; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.showing .icon-eye { display: none; }
.password-toggle.showing .icon-eye-off { display: block; }

/* "or"-style divider between two sign-in options. Text inside pairs
   with styles.css's .annotation (matches login.html's existing
   inline "or" span) rather than declaring its own font styling. */
.divider { width: 100%; display: flex; align-items: center; gap: 1rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--heritage); opacity: 0.8; }
/* styles.css's ".divider span" (written for a different divider markup
   elsewhere on the site) and ".annotation" both leak block/flex/height/
   margin onto this "or" text itself, shrinking its own box to 1px tall
   pinned to the top of the row — the flanking lines end up centered on
   the divider but the text doesn't, and that 1px box's background paints
   a faint stray line above the letters. Resetting it back to plain
   inline text lets align-items:center place it correctly, and heritage
   matches this page's accent-on-light-background convention. Sized
   down slightly from the site's normal .annotation so it doesn't crowd
   the shortened lines on either side. */
.divider .annotation { display: inline; flex: none; height: auto; background: none; margin-bottom: 0; font-size: 0.7rem; color: var(--heritage); }

.form-toggle { width: 100%; background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 0; text-align: center; transition: color 0.2s; }
.form-toggle:hover { color: var(--ink); }
/* "Forgot password?" (login.html) matches the input placeholders'
   own size/tracking exactly instead of the larger, wider-tracked
   .annotation default it inherited — same mono/uppercase/color, just
   sized like the rest of the form's own text. Scoped to .login-form
   so accept-invite.html's own .form-toggle (a plain .body link, not
   .annotation) is untouched. */
.login-form .form-toggle { font-size: 0.75rem; letter-spacing: 0.1em; }

/* ─── BACK LINK ─── */
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; margin-top: 2.5rem; transition: color 0.2s; }
.back-link:hover { color: var(--ink); }

/* ─── AUTH LOGO ───
   accept-invite.html still skips the main site nav (login.html and
   studio-login.html now use the standard <nav>, styled below), so this
   pins the same wordmark to the same top-left spot on its own for that
   page, linking home. Cream by default to sit on .auth-left's heritage
   panel; switches to dark ink at the breakpoint where that panel hides
   and the light .auth-right becomes the whole page (same breakpoint as
   the rest of this file's mobile layout). */
.auth-logo { position: fixed; top: 1.5rem; left: 3rem; z-index: 10; display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.auth-logo svg path, .auth-logo svg circle { stroke: #FFF5EC; fill: #FFF5EC; }
.auth-logo .wordmark { color: #FFF5EC; }
.auth-logo .wordmark__studio { color: #12100D; }

@media (max-width: 800px) {
    .auth-logo { top: 1.25rem; left: 5vw; }
    .auth-logo svg path, .auth-logo svg circle { stroke: #12100D; fill: #12100D; }
    .auth-logo .wordmark { color: #12100D; }
    .auth-logo .wordmark__studio { color: var(--heritage); }
    /* Desktop needs no backdrop — .auth-logo always sits over
       .auth-left's own solid heritage panel, which doesn't scroll. On
       mobile .auth-left is hidden and .auth-right (which does scroll)
       becomes the whole page, so without this the logo is just a
       transparent fixed label with scrolling content passing right
       behind it — same solid-bar treatment nav--auth-split already
       gets at this breakpoint. */
    .auth-logo::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 4.5rem;
        background: #FFF5EC;
        backdrop-filter: blur(6px);
    }
}

/* ─── STANDARD NAV, AUTH VARIANT ───
   login.html/studio-login.html use the real site <nav> rather than the
   lone .auth-logo above, but the standard solid nav::before bar reads
   as a third band stacked above the heritage/cream split instead of
   floating over it — so on desktop it goes transparent and the logo
   gets the same cream-on-heritage treatment .auth-logo used to have
   (it's always over the left panel); nav links need no override, they
   sit over the cream right panel where nav--light's normal dark
   already reads fine. Mobile keeps the standard solid bar — the
   two-tone split stacks vertically there, so there's nothing behind
   the nav worth revealing, and .auth-page's own 10rem top padding
   already assumes an opaque bar to clear. */
/* nav.nav--light::before (styles.css) is more specific than a plain
   nav::before would be here — has to be matched, not just re-stated,
   or styles.css's solid bar wins regardless of load order.
   Scoped to nav--auth-split (login.html/studio-login.html only) —
   unscoped, these rules also matched logged-in-collaborator.html's
   plain white-background nav, which shares this stylesheet but sits
   over solid --bg rather than the heritage/cream split, making the
   "Eval Design" half of the wordmark cream-on-cream (invisible). */
nav.nav--auth-split.nav--light::before { background: transparent; backdrop-filter: none; }
nav.nav--auth-split .nav__logo .nav-wordmark { color: #FFF5EC; }
nav.nav--auth-split .nav__logo .wordmark__studio { color: #12100D; }

@media (max-width: 800px) {
    nav.nav--auth-split.nav--light::before { background: #FFF5EC; backdrop-filter: blur(6px); }
    nav.nav--auth-split .nav__logo .nav-wordmark { color: #12100D; }
    nav.nav--auth-split .nav__logo .wordmark__studio { color: var(--heritage); }
}

/* ─── INVALID / EMPTY STATE ─── */
.invalid-state { text-align: center; padding: 2rem 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.invalid-state .body { margin-bottom: 0; }