/* Created: 10:18 15-Jul-2026 */
/* Updated: 02:52 10-Aug-2026 — B-3 logo 44px->64px, B-5 logo-link focus ring,
   B-12 one shared on-brand background across all five auth screens. */
/* Updated: 18:02 15-Jul-2026 — BRANDED. Was the generic dark scaffold this page was prototyped
   from (#0f1115 + blue #4f8cff): a palette that matched neither the logo NOR myleadfox.com, on a
   surface with no logo at all. */
/* Shared styles for the signed-out surface (login / register / verify / forgot / reset).
   ONE design across the five pages, so a change lands on all of them instead of four of five.

   LIGHT ONLY, on purpose. The brand surface is light (white nav, #f2f4f6 page) and the logo is a
   red fox + a **black** wordmark — on the old near-black card the wordmark was invisible. A dark
   theme here would need an inverted logo asset we do not have, so it would ship a broken mark.
   `color-scheme: light` tells the browser not to auto-darken form controls underneath us. */

:root { color-scheme: light;
        --bg:#f2f4f6;          /* brand page background */
        --card:#fff;
        --fg:#1a1a2e;          /* brand navy ink */
        --muted:#666;
        --border:#e3e8eb;      /* brand hairline */
        --accent:#FF0B29;      /* THE brand red — sampled from logo-nav.webp, owner decision */
        --accent-dark:#d10020;
        --accent-fg:#fff;
        --err:#d10020;
        --ok:#2db670; }
* { box-sizing:border-box; }
/* 🔴 `flex-direction:column` IS LOAD-BEARING — owner-reported design break, 11-Aug-2026.
   This was a single-child centring row. When S-02 added a `<section class="auth-note">` as a
   SIBLING of the card, flex laid the two out SIDE BY SIDE: the sign-up and reset cards were shoved
   to the far left with the prose floating beside them. Owner: "You f**ked up the design."
   Column stacks them — card centred, note beneath it — and a page with only a card is unaffected,
   because a lone flex child centres identically either way. Do not revert to a row. */
body { margin:0; min-height:100vh; display:flex; flex-direction:column;
       align-items:center; justify-content:center;
       background:var(--bg); color:var(--fg); padding:20px;
       font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }

/* ── B-12 — THE AUTH BACKGROUND. Owner-raised 00:37 10-Aug-2026: the pages sat on flat near-white
   and he wanted "kind of a shade", explicitly NOT distracting from the form, and on brand.
   Owner ruling 00:59 (Q-C): ONE background across all five screens, not a different one per page.
   That is why it lives on `body` in the shared stylesheet — there is exactly one definition, and
   no page can drift.

   WHY CSS AND NOT A GENERATED IMAGE, given he approved image generation: this is the page every
   single user hits before they can do anything, so it is the worst place in the product to add a
   download. A gradient costs zero bytes beyond this rule, cannot 404, needs no 2x export, scales
   to every viewport, and never causes layout shift. An illustration would buy texture we do not
   need behind a 380px form.

   WHY STATIC AND NOT ANIMATED: the /use-cases page already carries a 9px mobile horizontal
   overflow caused by animated decorative orbs, and it is still unreproducible and unfixed. There
   is no version of "nice login background" worth re-importing that bug onto the sign-in screen.

   The three washes are the brand red at 4-7% opacity plus one cool tone for depth, fading out well
   before they reach the card. `fixed` keeps them anchored on a short viewport instead of tiling. */
/* 🔻 STRENGTHENED 10-Aug-2026. The washes above shipped at 4-7% opacity and the owner, looking at
   the deployed page hours later, described it as "plain white". He was right: at 5% over #f2f4f6
   the wash is within a couple of RGB steps of the base colour, so it is present in the stylesheet
   and absent to the eye. The lesson is the one this project keeps relearning — "I added it" is not
   "it is visible", and the check is to LOOK at the rendered page, not to re-read the rule.
   Roughly tripled (.07 -> .20, .05 -> .16/.14) and the base tinted a step deeper, so the card now
   sits ON something. Still static, still zero bytes, still off under prefers-contrast. */
body { background-color:#eef1f5;
       background-image:
         radial-gradient(58rem 40rem at 12% -8%,  rgba(255,11,41,.20), rgba(255,11,41,0) 60%),
         radial-gradient(46rem 34rem at 96% 108%, rgba(255,11,41,.16), rgba(255,11,41,0) 62%),
         radial-gradient(52rem 38rem at 88% 4%,   rgba(26,26,46,.14),  rgba(26,26,46,0)  58%);
       background-repeat:no-repeat;
       background-attachment:fixed; }

/* `overflow-x:hidden` is a SEAT BELT, not the fix — the gradients are painted background layers
   and cannot widen the layout, so nothing here can overflow. It is here because the one decorative
   background in this codebase that DID overflow is still unexplained, and a login page is not
   where we find out we were wrong again. */
html, body { overflow-x:hidden; max-width:100%; }

/* Respect a user who has asked for less. Nothing animates, but a heavy wash is still visual
   noise, and `prefers-contrast: more` means someone is telling us the page is hard to read. */
@media (prefers-contrast: more) {
  body { background-image:none; }
}
/* A bigger card. Owner, 10-Aug-2026: "the box that we have for signup and login is very small. We
   have space on the left and right … increase the padding left, right and top … maybe make it
   three times what it is now."
   Horizontal padding 28px -> 80px (the ~3x he asked for) and top 32px -> 44px. The WIDTH has to
   grow with it or the tripled padding would eat the form: 380 -> 560 keeps the fields comfortably
   wider than before (content 400px, was 324px) rather than squeezing them.
   `min(92vw, …)` is unchanged and is what keeps this safe on a phone — at 360px wide the card is
   still 92vw, so the padding is what has to give there, hence the mobile override below. */
.card { width:min(92vw,560px); background:var(--card); border:1px solid var(--border);
        border-radius:14px; padding:44px 80px; box-shadow:0 8px 30px rgba(0,0,0,.12); }
/* Below ~600px the 80px sides would leave a ~200px form on a 360px phone. Fall back to the old
   comfortable padding — the owner's request is about the desktop whitespace he can see, and a
   phone has none of it to spend. */
@media (max-width:600px) { .card { padding:32px 24px; } }
/* ── B-3 — BIGGER LOGO. Owner-observed 00:21 10-Aug-2026; ruling 00:59 (Q-B): all five screens.
   44px -> 64px. The ceiling is not the card (380px wide, the mark is 4:1 so 64px tall is ~256px
   wide and still clears it) but LEGIBILITY OF THE STRAPLINE: the lockup carries a small
   "ECOMMERCE LEADS DATABASE" line under the wordmark, and that text is what degrades first when
   the mark is scaled. `width:auto` with an explicit height keeps the 4:1 ratio exactly, and the
   img still declares width/height so the browser reserves the box and the card does not jump.
   `max-width:100%` is what guarantees no overflow on a 320px phone, which is the failure mode a
   bigger logo would actually introduce. */
.logo { display:block; margin:0 auto 20px; height:64px; width:auto; max-width:100%; }

/* ── B-5 — the logo is now a LINK (see api/auth_pages.render). The anchor must not introduce
   underlines, a focus outline that clips, or a colour change — it is an image, not text. It DOES
   need a visible focus ring for keyboard users, because it is now interactive. */
.logo-link { display:block; text-decoration:none; border-radius:8px; }
.logo-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
/* The logo IMAGE already reads "MY LEAD FOX", so showing the wordmark again as text renders the
   name twice. Kept in the DOM and visually hidden: it is still the page's <h1> for screen readers
   and document outline, and it is what a reader sees if the image fails. Not display:none — that
   would remove it from the accessibility tree too, which is the whole point of keeping it. */
.brand { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
         clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sub, .brand + .sub { text-align:center; }
.sub { color:var(--muted); font-size:13px; margin:0 0 22px; }
label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 6px;
        text-transform:uppercase; letter-spacing:.04em; }
input { width:100%; padding:11px 13px; margin:0 0 16px; background:transparent; color:var(--fg);
        border:1px solid var(--border); border-radius:9px; font-size:15px; }
input:focus { outline:none; border-color:var(--accent);
              box-shadow:0 0 0 3px rgba(255,11,41,.14); }
button { width:100%; padding:12px; border:0; border-radius:9px; background:var(--accent);
         color:var(--accent-fg); font-size:15px; font-weight:600; cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }
.err { color:var(--err); font-size:13px; min-height:18px; margin:0 0 12px; }
.ok  { color:var(--ok);  font-size:13px; min-height:18px; margin:0 0 12px; }
.foot { margin:18px 0 0; text-align:center; font-size:13px; color:var(--muted); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* The OTP input: a 4-digit code reads better spaced out, and a numeric keypad on mobile
   removes a real source of mistyped codes. */
.code { font-size:26px; letter-spacing:14px; text-align:center; font-weight:600;
        font-variant-numeric:tabular-nums; padding-left:14px; }

/* Tabs (login page: password vs email-code). */
.tabs { display:flex; gap:4px; margin:0 0 20px; background:var(--bg); border-radius:9px; padding:4px; }
.tab { flex:1; padding:8px; border:0; border-radius:6px; background:transparent; color:var(--muted);
       font-size:13px; font-weight:600; cursor:pointer; }
.tab[aria-selected="true"] { background:var(--card); color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.hidden { display:none; }
.cf-turnstile { margin:0 0 14px; min-height:0; }
.hint { color:var(--muted); font-size:12px; margin:-8px 0 16px; }

/* ── B-1 — a frozen identity field must LOOK frozen ─────────────────────────────────────────────
   If it renders identically to an editable box, the user tries to type, nothing happens, and the
   page reads as broken — which is a worse outcome than the editable field this replaces. It is
   readonly, not disabled (see freezeIdentity in auth.js), so it must still look legible and
   selectable rather than greyed out to the point of looking dead. */
input.frozen, input.frozen:focus {
  background:#f6f7f9; color:var(--muted); cursor:default; border-color:var(--border);
  box-shadow:none;
}
.frozen-note { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
               margin:-10px 0 16px; font-size:12px; color:var(--muted); }
.frozen-note a { color:var(--accent); font-weight:600; text-decoration:none; }
.frozen-note a:hover, .frozen-note a:focus-visible { text-decoration:underline; }

/* ── B-11 — the Terms / Privacy consent checkbox ────────────────────────────────────────────────
   A checkbox with a wrapping label, so the whole line is a hit target rather than just the 13px
   box — on a phone that difference is the whole usability of the control. `align-items:flex-start`
   because the text wraps to two lines at this card width and a centred box would float beside the
   middle of the sentence. `text-transform:none` overrides the shared `label` rule, which uppercases
   field labels; uppercasing a sentence containing two links would be unreadable. */
label.check { display:flex; align-items:flex-start; gap:9px; margin:4px 0 18px;
              font-size:12.5px; line-height:1.45; color:var(--muted); font-weight:400;
              text-transform:none; letter-spacing:normal; cursor:pointer; }
label.check input[type=checkbox] { flex:0 0 auto; width:16px; height:16px; margin:1px 0 0;
                                   accent-color:var(--accent); cursor:pointer; }
label.check a { color:var(--accent); font-weight:600; text-decoration:none; }
label.check a:hover, label.check a:focus-visible { text-decoration:underline; }

/* Updated: 10:34 10-Aug-2026 — A-J: show/hide password toggle (owner, 10-Aug-2026).
   The button sits INSIDE the field. `button {width:100%}` above is a global rule for the big submit
   buttons, so every one of those defaults is overridden here explicitly — without `width:auto` the
   toggle would stretch across the whole input and cover the text it is meant to reveal.
   `height:calc(100% - 16px)` accounts for the 16px bottom margin `input` carries, so the button
   matches the FIELD rather than the field plus its gap. */
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:72px; }
button.pw-toggle {
  position:absolute; top:0; right:1px; height:calc(100% - 16px);
  width:auto; margin:0; padding:0 12px; border:0; border-radius:0 9px 9px 0;
  background:transparent; color:var(--muted); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
}
button.pw-toggle:hover { color:var(--fg); }
button.pw-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

/* Updated: 05:22 11-Aug-2026 — S-02: the indexed-page copy block.
   These three signed-out pages are INDEXED by the owner's ruling (11-Aug-2026), and Ahrefs
   measured them at 19-35 real words against its 50-word floor. The prose that fixes that has to
   look deliberate rather than appended, so it sits OUTSIDE the card, in muted type, at the card's
   own width — present for a reader and a crawler, quiet enough not to compete with the form. */
/* 🔴 OWNER RULING 11-Aug-2026 — THIS TEXT LIVES OUTSIDE THE CARD, BENEATH IT, AND IS WIDE.
   Verbatim: "this text for each and every page will go at the bottom out of the box", "never in
   the box outside the box", and "make that text more of a bigger paragraph so that it do not
   cover that much of a height". So it is WIDER than the 560px card on purpose — a wider column
   is a shorter one, and height is what he objected to. It must never be nested inside `.card`
   again: on /login it was, which made the sign-in box tall enough to dominate the page. */
.auth-note {
  /* 75% of the viewport (owner, 11-Aug-2026: "increase the width, make it up to 75% on all three
     pages"). Wider column = fewer, longer lines = less vertical space, which is the thing he
     objected to. The 1200px ceiling stops the measure becoming unreadably long on a wide monitor;
     the phone case is handled by the max-width:700px override below, not here. */
  width: min(75vw, 1200px);
  /* Pushed DOWN and away from the card — "move it down a bit … it's distracting at the moment".
     The large top margin is deliberate separation, not spacing sloppiness: this is a footnote,
     and it must not read as part of the form. */
  margin: 288px auto 48px;       /* 3x the previous 96px — owner, "move it three times more down" */
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}

/* ── PHONE ──────────────────────────────────────────────────────────────────────────────────
   Owner, 11-Aug-2026: "for the mobile you are screwing up the experience … remove the one
   paragraph session secured from the phone … that will make it less scrollable in phone", and
   "bring the box a bit down a bit down not much".
   `.note-more` carries the tail of each page's paragraph and is DROPPED here, so a phone gets a
   short note and the form stays reachable without scrolling. */
@media (max-width: 700px) {
  .note-more { display: none; }
  .auth-note { width: 92vw; margin: 72px auto 28px; }   /* 75vw is pointlessly narrow on a phone */
  /* A bit of headroom above the card. `justify-content:center` alone puts it hard against the top
     once the note makes the column taller than the viewport. */
  body { justify-content: flex-start; padding-top: 6vh; }
}
.auth-note h2 {
  margin: 0 0 8px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 700;
}
.auth-note p { margin: 0 0 10px; }
.auth-note a { color: var(--accent); }