/* ==========================================================================
   Fotowrzutka — auth pages (/signup + /login). Wave 4 branding.
   Dedicated, standalone stylesheet: these templates do NOT load
   /static/style.css (the generic "elegant" theme) — they mirror the dark,
   cinematic marketing look from docs/design-direction.md:
   espresso-olive night background, Fraunces (display) + Schibsted Grotesk
   (text), candle-gold accent. Self-hosted fonts only (production CSP blocks
   CDNs). Mobile-first; the card fits a 360px viewport with no horizontal
   scroll. Kept separate from marketing.css so redesigning auth never touches
   marketing or the shared gallery/admin stylesheet.
   ========================================================================== */

/* ---------- self-hosted fonts (Google Fonts, SIL OFL) ---------- */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 560;font-display:swap;
  src:url('/static/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 560;font-display:swap;
  src:url('/static/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/static/fonts/schibsted-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/static/fonts/schibsted-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens (dark "night" palette, from design-direction.md 2.2) ---------- */
:root{
  --bg:#16150F; --surface:#201E16; --surface-2:#2A2820; --line:#34322A;
  --ink:#F2ECDF; --muted:#A8A292;
  --gold:#E9B04A; --gold-soft:#F3CE86; --gold-deep:#C9862A; --blush:#EC9782;
  --accent-fill:var(--gold); --accent-on:#1B1A12;
  --field-bg:#1B1A13;              /* input well, a touch darker than the card */
  --placeholder:#8C8676;           /* readable placeholder on --field-bg (~4.6:1) */
  --font-display:'Fraunces','Bodoni 72',Georgia,serif;
  --font-text:'Schibsted Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-md:16px; --r-lg:24px; --r-pill:999px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body.fw-auth{
  font-family:var(--font-text);font-size:1rem;line-height:1.55;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  /* soft candle bokeh, like the marketing hero — static (no loop) */
  background-image:
    radial-gradient(60% 45% at 78% 8%,rgba(233,176,74,.16),transparent 60%),
    radial-gradient(55% 40% at 12% 88%,rgba(236,151,130,.10),transparent 62%),
    radial-gradient(120% 90% at 50% 0%,rgba(42,40,32,.55),transparent 70%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- shell + card ---------- */
.fw-auth-shell{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,2rem);
}
.fw-auth-card{
  width:100%;max-width:420px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,5vw,2.4rem) clamp(1.25rem,4.5vw,2rem);
  box-shadow:0 26px 70px rgba(10,9,5,.55);text-align:center;
}

/* ---------- header ---------- */
.fw-brand{
  display:inline-block;font-family:var(--font-display);font-weight:560;
  font-size:1.15rem;letter-spacing:.01em;color:var(--gold);
  transition:color .2s var(--ease-out);
}
.fw-brand:hover{color:var(--gold-soft)}
.fw-eyebrow{
  margin-top:1.4rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.fw-title{
  font-family:var(--font-display);font-weight:480;font-size:clamp(1.9rem,1.3rem + 3vw,2.5rem);
  line-height:1.1;margin:.35rem 0 0;color:var(--ink);text-wrap:balance;
}
.fw-title em{font-style:italic;color:var(--gold-soft)}
.fw-sub{margin-top:.7rem;color:var(--muted);font-size:.98rem;text-wrap:pretty}

/* thin gold rule under the header */
.fw-rule{
  height:1px;width:64px;margin:1.3rem auto .2rem;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
}

/* ---------- form ---------- */
.fw-form{display:flex;flex-direction:column;gap:.9rem;margin-top:1.4rem;text-align:left}
.fw-field{display:flex;flex-direction:column;gap:.4rem}
.fw-label{font-size:.8rem;letter-spacing:.02em;color:var(--muted);font-weight:600}

/* One rule covers text/email/password AND date. min-width:0 + appearance:none +
   box-sizing:border-box are what stop iOS Safari's native date control from
   using its intrinsic (min-content) width and overflowing the card. */
.fw-input{
  width:100%;min-width:0;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
  font-family:var(--font-text);font-size:1rem;/* >=16px: iOS won't zoom on focus */
  color:var(--ink);background:var(--field-bg);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:.85rem 1rem;line-height:1.3;outline:none;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.fw-input::placeholder{color:var(--placeholder);opacity:1}
.fw-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,176,74,.22)}
.fw-input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px var(--field-bg) inset;
  caret-color:var(--ink);
}

/* Date field: honest height that matches the text inputs on iOS (where the
   native control otherwise collapses/expands unpredictably) and a picker
   glyph that is visible on the dark well. */
.fw-input[type=date]{
  min-height:calc(1.3em + 1.7rem + 2px);        /* line-height + vertical padding + borders */
  color:var(--ink);
}
.fw-input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.fw-input[type=date]::-webkit-datetime-edit{color:var(--ink)}
.fw-input[type=date]:invalid,
.fw-input[type=date]:in-range:not(:focus):placeholder-shown{color:var(--placeholder)}
.fw-input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(78%) sepia(38%) saturate(560%) hue-rotate(357deg) brightness(95%);
  cursor:pointer;opacity:.85;
}
.fw-input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}

.fw-hint{color:var(--muted);font-size:.82rem;line-height:1.45;margin-top:-.2rem}

/* terms consent */
.fw-check{display:flex;align-items:flex-start;gap:.65rem;font-size:.9rem;color:var(--ink);cursor:pointer}
.fw-check input{width:20px;height:20px;flex:none;margin-top:.05rem;accent-color:var(--gold);cursor:pointer}
.fw-check a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.fw-check a:hover{color:var(--gold-soft)}

.fw-error{
  color:#F0B4A2;background:rgba(236,151,130,.10);border:1px solid rgba(236,151,130,.32);
  border-radius:12px;padding:.6rem .8rem;font-size:.9rem;
}

/* success / info notice (e.g. after a password reset) — calm gold, not an error */
.fw-notice{
  color:var(--gold-soft);background:rgba(233,176,74,.10);border:1px solid rgba(233,176,74,.32);
  border-radius:12px;padding:.6rem .8rem;font-size:.9rem;margin-bottom:1rem;
}

/* ---------- buttons ---------- */
.fw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  font-family:var(--font-text);font-size:1rem;font-weight:600;line-height:1;
  padding:.95rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .14s var(--ease-out),box-shadow .2s ease,background .2s ease,
             border-color .2s ease,filter .2s ease;
}
.fw-btn:active{transform:translateY(1px)}
.fw-btn-primary{background:var(--accent-fill);color:var(--accent-on);box-shadow:0 8px 26px rgba(233,176,74,.24)}
.fw-btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 0 0 1px rgba(233,176,74,.45),0 10px 32px rgba(233,176,74,.3)}
.fw-btn-primary:active{transform:translateY(0);filter:brightness(.97)}

/* Google chip: keep the recognizable light Google button on the dark page. */
.fw-btn-google{background:#fff;color:#3c4043;border-color:#dadce0;font-weight:600}
.fw-btn-google:hover{background:#f7f8f8;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.fw-btn-fb{background:transparent;color:var(--ink);border-color:rgba(242,236,223,.28)}
.fw-btn-fb:hover{border-color:var(--gold);color:var(--gold)}
.g-btn-inner{display:inline-flex;align-items:center;justify-content:center;gap:12px}
.g-logo{flex:none;background:#fff;border-radius:2px;padding:1px;box-sizing:content-box}

/* ---------- divider "lub" ---------- */
.fw-divider{display:flex;align-items:center;gap:.9rem;margin:1.25rem 0;color:var(--muted);
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.fw-divider::before,.fw-divider::after{content:"";height:1px;flex:1;background:var(--line)}

/* stack OAuth buttons */
.fw-oauth{display:flex;flex-direction:column;gap:.6rem}

/* ---------- footer links ---------- */
.fw-alt{margin-top:1.4rem;font-size:.92rem;color:var(--muted);text-align:center}
.fw-alt a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.fw-alt a:hover{color:var(--gold-soft)}
.fw-links{font-size:.9rem;color:var(--muted)}
.fw-links a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* other-brand galleries list (login) */
.fw-other{list-style:none;margin:1.1rem 0;padding:0;display:flex;flex-direction:column;gap:.5rem;text-align:left}
.fw-other li a{
  display:block;padding:.7rem .9rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;color:var(--ink);font-size:.92rem;
}
.fw-other li a:hover{border-color:var(--gold-deep)}