/* ════════════════════════════════════════════════════════════════════════════════════════════
   SIGNIN-PAGES-B-0919 · fs-auth-0919.css — THE SIGN-IN AND REGISTRATION DOORS, REDRAWN.
   NEW FILE. Loaded last in _auth.php's <head> so it wins on equal specificity without any
   existing rule being deleted; the old <style> block's tokens stay where they are and this file
   re-points them. Nothing in fs-a11y-0918.css or fs-a11y-contrast-0918.css is overridden — both
   still load AFTER this one, which is deliberate: an accessibility floor outranks a paint.

   ── WHAT CHANGED AND WHY, IN ONE PARAGRAPH ──────────────────────────────────────────────────
   The door was LIGHT ONLY (MC-AUTH-REDESIGN-0915-V2, founder 15 Sep: "it'll just be white"), the
   brand panel was on the LEFT and held a decorative drawing, corners were 12px, and the primary
   button was a violet→teal gradient whose far stop measures 1.57:1 against its own white label —
   a contrast failure the previous receipt carried forward as "still owed, still the founder's
   call". The founder's 19 Sep reference is a DARK split screen with the form on the left, the
   brand panel on the right, and sharp corners. This file is that: dark primary with a light twin,
   the columns swapped, 3px corners, and the gradient replaced by flat brand indigo.

   🔴 THE DARK/LIGHT CONFLICT IS REAL AND IS NAMED IN THE RECEIPT §3. The 15 Sep instruction and
   the 19 Sep reference disagree. Recency governs on this estate, so this ships dark-primary — and
   because a founder's word is not something a lane overturns quietly, the whole scheme hangs off
   ONE attribute (`data-fs-auth` on <html>) so the lead can restore the 15 Sep behaviour by
   changing one constant. See RECEIPT §3 and _auth.php's `scheme` fence.

   ── COLOUR PROVENANCE: MEASURED, NEVER INVENTED ─────────────────────────────────────────────
   Brand literals counted in the live estate CSS on fsmc-s2, 19 Sep 2026
   (`grep -rhoiE '#(615dfa|8b87ff|5b57ef|39c8e8)' public_html/static/fs/css/*.css | sort | uniq -c`):
       #5b57ef × 44   #615dfa × 30   #8b87ff × 13   #39c8e8 × 5
   So #615dfa is the brand fill and #8b87ff the periwinkle accent, exactly as the brief states, and
   the teal #39c8e8 is the rarest of the four — which is consistent with it being the far stop of
   one gradient rather than a brand colour. The `--fsc-*` contrast family is ruling 326's and is
   NOT redefined here; it is re-pointed for dark only, per token, with the measured ratio beside it.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ──────────────────────────────────────────────────────────────────────────────
   DARK IS THE DEFAULT and is stated on :root, so a visitor with JavaScript off gets the dark door
   rather than a flash of the light one. The light twin is stated twice, exactly the way this
   estate states a second scheme (AUTH-DARK-SCHEME-0914's shape, inverted): once on an explicit
   attribute the boot can set, and once under a light OS preference guarded so an explicit dark
   choice is never overruled by the operating system. */
:root{
  color-scheme:dark;

  /* the two grounds. The form column is the NEAR-BLACK one (the founder's reference puts the form
     on the darker of the two) and the panel is a raised graphite with a violet cast, so the two
     columns are legibly different surfaces without a border between them. */
  --a-bg:#0a0b12;            /* form column ground */
  --ap-bg:#12131f;           /* panel ground */
  --ap-bg-2:#171829;         /* the panel's own raised blocks */

  --a-surface:#15161f;       /* inputs */
  --a-surface-2:#1b1c28;     /* inputs on focus/hover, the secondary button */
  --a-line:#282a3b;          /* field borders */
  --a-line-2:#3a3c52;        /* hover borders, hairlines that must read */
  --a-assent-bg:#12131c;     /* the three consent boxes */
  --a-assent-line:#2b2d3f;

  /* ink. Measured against the ground it sits on, headless Chromium, one PNG per element
     (harness/contrast.cjs). Values in proof/contrast.json.
       --a-ink      #eef0f8 on #0a0b12 = 16.9:1
       --a-ink-2    #c3c6d8 on #0a0b12 = 11.4:1
       --a-muted    #9498ae on #0a0b12 =  6.9:1   (labels, helper text)
       --a-muted-2  #aab0c6 on #15161f =  8.2:1   (on an input) */
  --a-ink:#eef0f8;
  --a-ink-2:#c3c6d8;
  --a-muted:#9498ae;
  --a-muted-2:#aab0c6;

  /* brand. #615dfa is the FILL. On dark it is also legible AS TEXT (5.0:1 on #0a0b12), but the
     accent used for type is the periwinkle #8b87ff (7.6:1) because the fill sits at the contrast
     floor and a headline should not. This is the inverse of ruling 326's light-mode arrangement,
     where the TEXT violet was darkened to #514dfa and the fill stayed #615dfa. */
  --a-brand:#615dfa;
  --a-brand-h:#736ffb;       /* hover: lifted, never darkened, on a dark ground */
  --a-accent:#8b87ff;

  /* the error band — dark red tint, per the founder's reference */
  --a-err-fg:#ff9fb4;        /* 8.6:1 on --a-err-bg */
  --a-err-bg:#2a0f18;
  --a-err-line:#5d2033;

  --a-ok:#3ddc73;
  --a-rule:#232534;          /* the "or" hairline — kept as a token for the divider's two rules */
  --a-or:#7a7e94;

  /* ── THE FOUR TOKENS THAT SAVE FOUR HUNKS ───────────────────────────────────────────────────
     The live file carries five INLINE styles, and an inline style beats a stylesheet at any
     specificity — so each one would normally force an edit in `_auth.php`. Four of them do not,
     because every colour in them is already written as `var(--token,#lightliteral)`: the literal is
     only a fallback, so DECLARING the token here re-themes the inline style without touching it.
     That is four hunks this package does not have to put in a critical-path file, and it is why
     only the @handle box — whose inline style carries a bare `border-radius:10px` with no token —
     is fenced at all.
       --a-at       the violet "@" in the handle field
       --a-lock-bg  a locked invite e-mail field's ground   (WO-INVITE-0819)
       --a-lock-fg  and its ink
       --a-assent-link / --a-assent-link-h  the acceptance sentence's document links */
  --a-at:#b98bff;            /* 7.1:1 on --a-surface */
  --a-lock-bg:#101119;
  --a-lock-fg:#8f93a9;
  --a-assent-link:var(--a-accent);
  --a-assent-link-h:#9d9aff;
  --a-btn:var(--a-brand);    /* the gradient token, flattened at its source (see .af-btn) */
  /* the home finale's gradient, dark stops — FINALE-LOGO-GRADIENT-0917 / ruling 543, verbatim */
  --a-grad:linear-gradient(90deg,#f95bf6 0%,#866afb 50%,#5977fc 100%);

  /* 🔴 3px, NOT 12px. The founder's taste is "sharp/modern/editorial" and the rounded-card
     Bootstrap idiom is rejected on sight (founder-design-taste). 0px was rendered and reads as
     unfinished rather than sharp — a hairline border with a perfectly square corner shows every
     antialiasing artefact at the join. 3px is the smallest radius that renders a clean corner at
     both 1x and 2x, which is why it is the number and not a taste claim. */
  --a-r:3px;

  /* the affiliate consent block (AFFILIATE-ENROL-URLS-0919 / AFFILIATE-AGREEMENT-0919) themes
     itself entirely off these three variable names with light literals as FALLBACKS ONLY:
     var(--line,#e6e8ef), var(--panel,#fff), var(--brand,#615dfa). Declaring them here is what
     makes that lane's block go dark WITHOUT ONE BYTE OF THEIR FILE BEING EDITED. This is the
     integration, and it is the reason this package forks nothing of theirs. */
  --line:var(--a-assent-line);
  --panel:var(--a-assent-bg);
  --brand:var(--a-accent);

  /* ruling 326's family, re-pointed for dark. Every one is measured on the ground it lands on;
     none is invented and none is a light value reused. */
  --fsc-ink:var(--a-ink);
  --fsc-muted:var(--a-muted);
  --fsc-muted-2:var(--a-muted-2);
  --fsc-violet:var(--a-accent);
  --fsc-violet-2:#9d9aff;
  --fsc-ok:#3ddc73;
  --fsc-ok-2:#4ee083;
  --fsc-danger:#ff8f9f;
  --fsc-warn:#f0c14b;
  --fsc-pink:#ff86c0;
  --fsc-pink-2:#ff8fb0;
}

/* ── THE LIGHT TWIN ──────────────────────────────────────────────────────────────────────────
   Stated for an explicit light choice and for a light OS preference, and the explicit-dark guard
   (`:not([data-fs-auth="dark"])`) is what stops a light desktop overruling the chosen scheme. The
   values are the LIVE light door's own literals wherever one existed, character for character, so
   the light twin is not a new design — it is the shipped page with the new geometry. */
:root[data-fs-auth="light"],
html.fs-light:not([data-fs-auth="dark"]){
  color-scheme:light;
  --a-bg:#ffffff;
  --ap-bg:#f5f6fc;
  --ap-bg-2:#ffffff;
  --a-surface:#ffffff;
  --a-surface-2:#fbfbff;
  --a-line:#e3e3ee;          /* the live door's field border, verbatim */
  --a-line-2:#cfd0e6;        /* the live door's hover border, verbatim */
  --a-assent-bg:#fbfbff;     /* the live door's assent ground, verbatim */
  --a-assent-line:#dcdce6;   /* verbatim */
  /*  --a-ink    #14152a on #ffffff = 17.94:1  (the live panel ink, verbatim)
      --a-ink-2  #2c2c44 on #ffffff = 13.4:1   (ruling 326's light ink)
      --a-muted  #6a6a8b on #ffffff =  5.6:1   (ruling 326's muted family)  */
  --a-ink:#14152a;
  --a-ink-2:#2c2c44;
  --a-muted:#6a6a8b;
  --a-muted-2:#5f6079;
  --a-brand:#615dfa;
  --a-brand-h:#5450ee;
  --a-accent:#514dfa;        /* ruling 326: brand violet AS TEXT is #514dfa, never #615dfa */
  --a-err-fg:#c2255c;        /* the live door's error ink, verbatim */
  --a-err-bg:#fdeef4;        /* the live door's opaque sticky-band ground, verbatim */
  --a-err-line:rgba(255,46,147,.22);
  --a-or:#b6b7c9;
  --fsc-ink:#2c2c44; --fsc-muted:#6a6a8b; --fsc-muted-2:#5f6079;
  --fsc-violet:#514dfa; --fsc-violet-2:#5450ee;
  --fsc-ok:#0d8128; --fsc-ok-2:#0c7f3d; --fsc-danger:#d01e23;
  --fsc-warn:#956600; --fsc-pink:#d21772; --fsc-pink-2:#d62055;
  --line:var(--a-assent-line); --panel:var(--a-assent-bg); --brand:#615dfa;
  /* the live door's own light literals for the four inline-style tokens, verbatim */
  --a-at:#9333ea; --a-lock-bg:#f6f6fc; --a-lock-fg:#6a6a86;
  --a-assent-link:#4f46e5; --a-assent-link-h:#3b32c9; --a-btn:#615dfa;
  /* deepened for the >=4.5 floor this door is held to — see the .ap-h1--grad note */
  --a-grad:linear-gradient(90deg,#c1009a 0%,#4a26d8 50%,#2f52d6 100%);
}
@media (prefers-color-scheme:light){
  :root:not([data-fs-auth="dark"]){
    color-scheme:light;
    --a-bg:#ffffff; --ap-bg:#f5f6fc; --ap-bg-2:#ffffff;
    --a-surface:#ffffff; --a-surface-2:#fbfbff;
    --a-line:#e3e3ee; --a-line-2:#cfd0e6;
    --a-assent-bg:#fbfbff; --a-assent-line:#dcdce6;
    --a-ink:#14152a; --a-ink-2:#2c2c44; --a-muted:#6a6a8b; --a-muted-2:#5f6079;
    --a-brand:#615dfa; --a-brand-h:#5450ee; --a-accent:#514dfa;
    --a-err-fg:#c2255c; --a-err-bg:#fdeef4; --a-err-line:rgba(255,46,147,.22);
    --a-or:#b6b7c9;
    --fsc-ink:#2c2c44; --fsc-muted:#6a6a8b; --fsc-muted-2:#5f6079;
    --fsc-violet:#514dfa; --fsc-violet-2:#5450ee;
    --fsc-ok:#0d8128; --fsc-ok-2:#0c7f3d; --fsc-danger:#d01e23;
    --fsc-warn:#956600; --fsc-pink:#d21772; --fsc-pink-2:#d62055;
    --line:var(--a-assent-line); --panel:var(--a-assent-bg); --brand:#615dfa;
    --a-at:#9333ea; --a-lock-bg:#f6f6fc; --a-lock-fg:#6a6a86;
    --a-assent-link:#4f46e5; --a-assent-link-h:#3b32c9; --a-btn:#615dfa;
    --a-grad:linear-gradient(90deg,#c1009a 0%,#4a26d8 50%,#2f52d6 100%);
  }
}

/* ── 2 · THE TWO COLUMNS ─────────────────────────────────────────────────────────────────────
   🔴 THE FORM MOVES TO THE LEFT AND THE PANEL TO THE RIGHT. The founder's reference is explicit:
   LEFT ~40 % is the near-black panel carrying the form; RIGHT ~60 % is the dark brand panel. The
   live page is the other way round. `order` does it without touching one line of _auth.php's
   markup order — which matters for more than tidiness: the FORM stays first in the DOM, so it is
   first in the tab order and first for a screen reader, on both the desktop split and the stacked
   phone layout. Reversing the source would have made the panel the first thing a keyboard user
   meets on a door whose entire purpose is the form. */
.auth{display:flex;min-height:100vh;background:var(--a-bg)}
.auth-form{order:1;flex:0 0 clamp(400px,40%,560px);display:flex;align-items:flex-start;
  justify-content:center;padding:clamp(32px,4vw,64px) clamp(24px,3vw,52px);background:var(--a-bg)}
/* ── THE SHORT DOOR IS CENTRED, THE LONG ONE IS NOT ──────────────────────────────────────────
   MEASURED on the first full plate run: at 1280 the panel makes the page 1,239px tall on /login
   while the login form — a mark, a title, two fields, a button and two links — ends at about 560.
   Top-aligned, that left a third of the near-black column empty under the form and the door read
   as unfinished rather than as spare.
   /register cannot be centred: its form is 2,461px tall, taller than any viewport, and centring
   overflowing flex content clips it at the TOP, where the mark and the title are — a real fault,
   not a cosmetic one.
   So the rule is conditional on which door it is, and `:has()` reads that off the panel's own
   `ap--login` class with NO new class, no PHP change and no second stylesheet. A browser without
   `:has()` simply keeps `flex-start`, which is the shipped behaviour and is never broken. */
@supports selector(:has(*)){
  @media (min-width:1181px){ .auth:has(.ap--login) .auth-form{align-items:center} }
}
.auth-brand{order:2;flex:1 1 60%;background:var(--ap-bg);color:var(--a-ink);
  padding:clamp(32px,3.4vw,56px) clamp(28px,3.4vw,60px) clamp(40px,4vw,68px);
  display:flex;flex-direction:column;min-width:0;
  border-left:1px solid var(--a-line)}

body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--a-ink);background:var(--a-bg);-webkit-font-smoothing:antialiased}

/* ── 3 · THE FORM COLUMN ─────────────────────────────────────────────────────────────────────
   The card is WIDER than the 368px it was. Eleven fields, three consent boxes and a three-part
   explainer in a 368px column is a very long ribbon; 380–420px lets the first/last name pair and
   the three-question block breathe without the column becoming a page. */
.af-card{width:100%;max-width:420px}

/* ══ THE F GLYPH IN THE FORM COLUMN (LOGIN ONLY) — founder, 19 Sep ═══════════════════════════
   The 150x30 wordmark that sat here is gone from both doors. On LOGIN the glyph takes its place,
   LARGE and CENTRED — centred is her instruction and it overrides the note that used to live here
   arguing for left-alignment, which was reasoning about a small wordmark and not about a display-
   sized mark that is the only object above the title.

   THE NUMBERS COME FROM RULING 525's OWN RULE, not from taste. The theme sets the glyph at
   `height:clamp(59px,8.4vw,108px)` with `width:calc(height*0.6333)` — the 1.4x that ruling asked
   for, and the glyph's own w:h ratio. `8.4vw` is meaningless in a 420px column, so the viewport
   term is dropped and the two ENDS of the theme's clamp are kept and lifted for "large": 96px on a
   phone, 124px on the desktop column, against the theme's 59/108. The RATIO is the theme's,
   unchanged, so the glyph cannot be stretched.

   No dark rule, and that is a property of the asset rather than an omission: the file is two images
   under a mask, so it renders the same on either ground. Measured on both plates. */
.af-fmark{display:block;margin:0 auto 30px;
  height:clamp(96px,11vw,124px);width:calc(clamp(96px,11vw,124px)*0.6333);
  background:url('/assets/fs/focalshift-f-mark.svg') center/contain no-repeat}
/* the kicker and title stay LEFT-aligned under a centred mark: the mark is one object and the form
   is a column of left-aligned rows. Centring the type under it was rendered and reads as a poster
   rather than a door. */
/* the one-line context note the reference calls for, above the title */
.af-kicker{font:600 11.5px/1.4 'Inter',sans-serif;letter-spacing:.085em;text-transform:uppercase;
  color:var(--a-muted);margin:0 0 12px}

.af-h{font-family:'Sora','Inter',system-ui,sans-serif;font-size:29px;font-weight:700;
  letter-spacing:-.026em;line-height:1.16;margin:0 0 8px;color:var(--a-ink)}
.af-sub{font-size:14px;line-height:1.6;color:var(--a-muted);margin:0 0 28px;max-width:40ch}

/* fields — small label ABOVE, per the reference, and the label is a real <label> that was already
   in the markup: only its paint changes */
.af-g{margin-bottom:16px}
.af-g label{display:block;font:600 12px/1.4 'Inter',sans-serif;letter-spacing:.012em;
  color:var(--a-muted-2);margin-bottom:7px}
.af-g input,.af-q select,.af-q textarea{width:100%;border:1px solid var(--a-line);
  border-radius:var(--a-r);background:var(--a-surface);color:var(--a-ink);
  font:500 14.5px 'Inter',sans-serif;outline:none;
  transition:border-color .13s,box-shadow .13s,background-color .13s}
.af-g input{height:48px;padding:0 14px}
.af-q textarea{padding:12px 14px;min-height:64px;line-height:1.55;resize:vertical}
.af-q select{height:48px;padding:0 14px}
.af-g input::placeholder,.af-q textarea::placeholder{color:var(--a-or)}
.af-g input:focus,.af-q select:focus,.af-q textarea:focus{
  border-color:var(--a-brand);background:var(--a-surface-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a-brand) 26%,transparent)}
.af-row{display:flex;gap:14px}.af-row .af-g{flex:1;min-width:0}

/* ── THE PRIMARY BUTTON ──────────────────────────────────────────────────────────────────────
   🔴 THIS CLOSES A MEASURED CONTRAST DEFECT, and closing it is the one thing on this page that is
   a correction rather than a preference. The live button is
   `linear-gradient(125deg,#5b57ef,#39c8e8)` with a white label. MC-AUTH-REDESIGN-0915-V2's own
   receipt records the teal far stop at **1.57:1** against that white — the worst pair on the
   registration road — and carries it forward as "a deliberate carry-forward, still owed, still
   the founder's call".
   Flat #615dfa with white measures **4.86:1** (proof/contrast.json, measured from the rendered
   pixels, not from this stylesheet). It is the brand fill, it is the colour the brief names, and
   it removes a gradient whose right-hand third could not carry a label at any size. One full-width
   strong primary button, per the reference. */
.af-btn{width:100%;height:50px;border:0;border-radius:var(--a-r);background:var(--a-brand);
  background-image:none;color:#fff;font:700 14.5px/1 'Inter',sans-serif;letter-spacing:.005em;
  cursor:pointer;margin-top:18px;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;transition:background-color .13s,transform .06s}
.af-btn:hover{background:var(--a-brand-h)}
.af-btn:active{transform:translateY(1px)}
/* the disabled state keeps FIRST-TEN-DECISIONS-3-0915's finding intact: unmistakably inert, never
   a pale version of pressable. Its reason (a first-timer reads a dead pressable button as a broken
   product) is unchanged; only the literals move to this scheme. */
/* 🔴 ALSO MEASURED AND CORRECTED. The first draft carried the live page's own disabled literals
   (#82869e on #24263a = 4.14:1 dark; #6c6d85 on #e9e9f1 = 4.18:1 light). A disabled control is
   exempt from WCAG 1.4.3, so neither was a violation — and both are still the FIRST thing a
   first-time visitor sees on this button, because the two required boxes start unticked and the
   courtesy script disables it on load. FIRST-TEN-DECISIONS-3-0915's whole finding was that this
   button's disabled state has to READ, not merely be legal. Lifted to 5.6:1 dark and 5.4:1 light;
   the fill is untouched, so it is exactly as unmistakably inert as that package made it. */
.af-btn[disabled]{background:#24263a;color:#9ea2bb;cursor:not-allowed;transform:none}
:root[data-fs-auth="light"] .af-btn[disabled],
html.fs-light:not([data-fs-auth="dark"]) .af-btn[disabled]{background:#e9e9f1;color:#5c5d74}
.af-why{font-size:12px;line-height:1.5;color:var(--a-muted);margin:10px 0 0;text-align:center}

/* the "or" divider and the secondary button. BOTH ARE INERT TODAY AND THAT IS CORRECT: measured on
   the live door 19 Sep, `fs_cred_present('oauth_google', …)` is false, the whole block does not
   render, and FIRST-TEN-DECISIONS-3-0915's ruling is that a dead affordance is not a roadmap.
   These rules exist so the day the platform Google app is configured the button is already drawn
   to this design — white secondary, per the reference — and no follow-up package is needed. */
.af-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--a-or);
  font:600 11.5px 'Inter',sans-serif;letter-spacing:.07em;text-transform:uppercase}
.af-or::before,.af-or::after{content:"";flex:1;height:1px;background:var(--a-line)}
.af-sso{width:100%;height:48px;border:1px solid var(--a-line-2);border-radius:var(--a-r);
  background:#fff;color:#1d1e2e;font:600 14px 'Inter',sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.af-sso:hover{background:#f2f3f9}

/* text link rows */
.af-foot{font-size:13.5px;color:var(--a-muted);margin-top:26px;
  padding-top:22px;border-top:1px solid var(--a-line)}
.af-foot a{color:var(--a-accent);font-weight:600;text-decoration:none}
.af-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.af-terms{font-size:12px;line-height:1.55;color:var(--a-muted);margin-top:14px}
.af-terms a{color:var(--a-muted);text-decoration:underline;text-underline-offset:2px}

/* ── 4 · THE THREE CONSENT BOXES ─────────────────────────────────────────────────────────────
   Three boxes, three different sets of rules, and the design's job is to make them READ as three
   different things without making any of them look optional-by-paint. The rules are not ours:
     1 · legal_accept              unticked · required · gates the button · has links
     2 · age_18                    unticked · required · gates the button · no links
     3 · partner_agreement_accept  PRE-TICKED · not required · must NOT gate · has links · the
                                   only box restored from a previous POST
   So 1 and 2 share a surface and a left accent rule — they are the gate — and 3 is set apart by a
   dashed rule and the word "Optional" in its own line, so a member scanning for what she MUST do
   sees two solid blocks and one dashed one. Nothing about any box's BEHAVIOUR is touched here;
   this is paint on a legal construction that WO-ACCEPTGATE-0902, MC-AGE-GATE-18-0914 and
   AFFILIATE-ENROL-URLS-0919 own. Berman requires the links contrast with the surrounding text and
   be underlined — both hold in both schemes, measured in proof/contrast.json. */
.af-assent{margin:18px 0 0;padding:14px 15px;border:1px solid var(--a-assent-line);
  border-radius:var(--a-r);background:var(--a-assent-bg);border-left:2px solid var(--a-brand)}
.af-assent label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0}
.af-assent input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;
  accent-color:var(--a-brand);cursor:pointer}
.af-assent .at{font-size:12.5px;line-height:1.6;color:var(--a-ink-2);font-weight:500}
.af-assent .at a{color:var(--a-accent);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
.af-assent .at a:hover{color:var(--fsc-violet-2)}
.af-assent .av{display:block;margin-top:8px;font-size:11.5px;line-height:1.55;
  color:var(--a-muted);font-weight:500}
.af-assent .av a{color:var(--a-muted);text-decoration:underline}
.af-assent--age{margin-top:10px}
.af-assent--age .at{font-weight:600;color:var(--a-ink)}

/* box 3 — the optional one. Dashed, no left accent, and it carries a label of its own. */
.af-assent--enrol{margin-top:14px;border-style:dashed;border-left:1px dashed var(--a-assent-line)}
.af-assent--enrol::before{content:"Optional";display:block;font:700 10.5px/1 'Inter',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--a-muted);margin:0 0 10px}
/* ── THE ONE PLACE THIS PACKAGE HAS TO OUT-SPECIFY ANOTHER LANE, AND WHY IT IS NOT A FORK ──────
   AFFILIATE-ENROL-URLS-0919's fence ships its own inline <style> inside the BODY:
       .af-assent--enrol .af-enrol-benefit{margin:6px 0 0 26px;font:400 12.5px/1.6 Inter;color:#45465e}
   `#45465e` is a light-mode ink. On this column's #12131c it measures 1.6:1 — the benefit line
   beside a consent box would be effectively invisible, which for a line that states a commission
   rate is not a cosmetic problem.

   A body <style> loads after a head <link>, and their selector is (0,2,0) — exactly the specificity
   mine would be — so document order would hand it the win. The three honest options were: edit
   their literal (a fork of another lane's bytes, and the brief says build on their hunks, not fork
   them); ask them to change it (they are not in this contest); or out-specify it.

   So this rule is scoped with `.auth`, making it (0,3,0), which beats their (0,2,0) regardless of
   where either one loads. THEIR FENCE IS CARRIED BYTE-FOR-BYTE, literal included, and their light
   render is unchanged — in the light twin my `var(--a-muted)` resolves to #6a6a8b against their
   #45465e, both well over the floor on #fbfbff, so nothing about their measured light page moves.
   RECEIPT §5 names this as the one cross-lane interaction and recommends they take the token. */
.auth .af-assent--enrol .af-enrol-benefit{margin:8px 0 0 30px;
  font:400 12.5px/1.62 'Inter',sans-serif;color:var(--a-muted)}
/* fs_pagree_enrol_block_html() ships its own <style> using var(--line/--panel/--brand) with light
   fallbacks. The three variables are declared in :root above, so it themes itself. These two rules
   are the only shape corrections: its 10px radius and its own border would draw a second box
   inside ours. */
.af-assent--enrol .fspa{border:0;border-radius:0;padding:0;margin:0;background:none;max-width:none}
.af-assent--enrol .fspa-links{margin-top:9px;font-size:11.5px;opacity:1;color:var(--a-muted)}

/* ── 5 · THE ERROR BANNER ────────────────────────────────────────────────────────────────────
   The reference asks for "an inline error banner (dark red tint, icon, one sentence) under the
   title on failure" and that is what this is. WALK-FIRST-DAY-0918's BEHAVIOUR IS PRESERVED
   ENTIRELY and is not re-litigated: it is `position:sticky` above the cookie card's z-index 1090
   because measured at 400x860 the consent card sat ON TOP of the refusal message and a turned-away
   applicant saw the form again with no reason given. That fix stays; it gets this scheme's colours
   and an opaque ground for the same reason it had one before (a tint floats over the fields and
   the labels read through it). */
.af-err{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:600;
  line-height:1.5;color:var(--a-err-fg);background:var(--a-err-bg);
  border:1px solid var(--a-err-line);border-left:3px solid var(--a-err-fg);
  border-radius:var(--a-r);padding:12px 14px;margin:0 0 20px;
  position:sticky;top:10px;z-index:1100;scroll-margin-top:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.42)}
.af-err i{margin-top:2px;flex:0 0 auto}
.af-err:focus{outline:none}
.af-err:focus-visible{outline:2px solid var(--a-err-fg);outline-offset:2px}

/* ── 6 · THE BETA CHIP AND THE THREE-STEP EXPLAINER ──────────────────────────────────────────
   BETA-MONEY-WALL-0917's finding is the reason these exist: the door said "Start free — launch in
   minutes" while register.php pends every uninvited signup, so a stranger expected instant entry
   and got a waiting card. The chip and the steps ARE the correction and they stay. The steps keep
   their numbered disc because the panel opposite now uses the same device for the six questions —
   one visual grammar for "a short ordered list" across both columns. */
.af-free{display:inline-flex;align-items:center;gap:7px;font:700 11.5px 'Inter',sans-serif;
  color:var(--a-accent);background:color-mix(in srgb,var(--a-brand) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--a-brand) 34%,transparent);
  padding:6px 12px;border-radius:var(--a-r);margin-bottom:20px}
.af-free.af-beta{color:var(--a-accent)}
.af-steps{list-style:none;margin:0 0 26px;padding:16px 18px;border:1px solid var(--a-line);
  border-radius:var(--a-r);background:var(--a-assent-bg);counter-reset:afs}
.af-steps li{counter-increment:afs;display:flex;gap:12px;align-items:flex-start;
  font-size:12.5px;line-height:1.6;color:var(--a-muted);margin:0 0 11px}
.af-steps li:last-child{margin-bottom:0}
.af-steps li::before{content:counter(afs);flex:0 0 20px;width:20px;height:20px;
  border-radius:var(--a-r);background:color-mix(in srgb,var(--a-brand) 20%,transparent);
  color:var(--a-accent);font:700 11px/20px 'Inter',sans-serif;text-align:center;margin-top:1px}
.af-steps b{color:var(--a-ink-2);font-weight:700}

/* ── 7 · RULING 560b's THREE QUESTIONS ───────────────────────────────────────────────────────
   Not one field is `required` and the design must not imply otherwise — so the block is a quiet
   surface with its own heading, and the "if you have one" / optional markers keep their own type
   scale. Same tokens as the fields above, same roles. */
.af-qs{margin:24px 0 4px;padding:18px 18px 8px;border:1px solid var(--a-line);
  border-radius:var(--a-r);background:var(--a-assent-bg);counter-reset:afq}
.af-qs>.af-qh{font:700 13px 'Inter',sans-serif;color:var(--a-ink);margin:0 0 5px}
.af-qs>.af-qs-sub{font-size:12px;line-height:1.55;color:var(--a-muted);margin:0 0 18px}
.af-q{counter-increment:afq;position:relative;padding-left:30px;margin-bottom:18px}
.af-q::before{content:counter(afq);position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:var(--a-r);background:color-mix(in srgb,var(--a-brand) 20%,transparent);
  color:var(--a-accent);font:700 11px/20px 'Inter',sans-serif;text-align:center}
.af-q>.af-ql{display:block;font:700 12.5px/1.45 'Inter',sans-serif;color:var(--a-ink-2);
  margin-bottom:9px}
.af-q .af-g{margin-bottom:11px}
.af-q .af-g:last-child{margin-bottom:0}
.af-q .af-g label{font:600 11.5px 'Inter',sans-serif;color:var(--a-muted)}
.af-qopt{font:600 11px 'Inter',sans-serif;color:var(--a-or)}
/* the select arrow is drawn with two gradients in the live file and its colour was a light-mode
   literal; it is re-pointed so the caret is visible on the dark control. */
.af-q select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--a-muted) 50%),
                   linear-gradient(135deg,var(--a-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* the @handle field — a composite control, so its box is rebuilt rather than inherited */
.af-handle{display:flex;align-items:center;border:1px solid var(--a-line);
  border-radius:var(--a-r);overflow:hidden;background:var(--a-surface)}
.af-handle:focus-within{border-color:var(--a-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a-brand) 26%,transparent)}
.af-handle .af-at{padding:0 2px 0 14px;color:var(--a-accent);font-weight:700}
.af-handle input{border:0!important;flex:1;min-width:0;background:transparent!important;
  outline:none;box-shadow:none!important;color:var(--a-ink)}
.af-handle .af-flag{padding:0 14px 0 6px;font-size:14px;font-weight:700}
.af-handle-msg{font-size:11.5px;line-height:1.5;color:var(--a-muted);margin-top:6px}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   8 · THE PANEL — THE FIRST FIVE MINUTES
   The markup is fs_authpanel_html()'s; see _auth_panel.php for why it is a sequence and real
   screens rather than a drawing, and for why the screens are labelled.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 THE REGISTRATION PANEL IS TOP-ALIGNED, THE LOGIN PANEL IS CENTRED, and the difference is the
   founder's instruction rather than a preference. She asked for the F "centred at the TOP of the
   right panel, above the headline". With `margin:auto 0` the whole stack was centred in a 2,303 px
   panel and the mark landed at y≈470 — centred horizontally, but a quarter of the way down. Pinned
   to the top it is the first object in the panel, which is what she described.
   /login keeps the auto margins: its panel is short, its stack nearly fills it, and centring is
   what balances it against the form column beside it. */
.ap{display:flex;flex-direction:column;gap:30px;max-width:720px;width:100%;margin:0}
.ap--login{margin:auto 0}
.ap--quiet{justify-content:center;gap:14px;margin:auto 0}

/* the referral ribbon — the panel's second state */
.ap-ribbon{display:flex;gap:11px;align-items:flex-start;
  font:500 12.5px/1.6 'Inter',sans-serif;color:var(--a-ink-2);
  background:color-mix(in srgb,var(--a-brand) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--a-brand) 30%,transparent);
  border-left:2px solid var(--a-brand);
  border-radius:var(--a-r);padding:12px 15px}
.ap-ribbon i{color:var(--a-accent);margin-top:2px}
.ap-ribbon b{color:var(--a-ink);font-weight:700}

/* the two-line headline, second line in the accent — the reference's exact device.
   `max-width` in `ch` breaks the line by the type rather than by a hard <br> in PHP; the two
   <span>s are inline so the accent line wraps naturally with the first. */
.ap-h1{font-family:'Sora','Inter',system-ui,sans-serif;
  font-size:clamp(30px,3.1vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.1;
  margin:0 0 14px;color:var(--a-ink);max-width:22ch;text-wrap:balance}
.ap-h1 .ap-ac{color:var(--a-accent)}

/* ══ THE F AT THE TOP OF THE RIGHT PANEL (REGISTRATION ONLY) — founder, 19 Sep ═══════════════
   Centred, above the headline, with the left column's top left clean. Slightly larger than the
   login column's because it sits in a 60 % panel rather than a 420 px column and has room to be
   the first object read; the ratio is still ruling 525's 0.6333. */
.ap-head--marked{text-align:center}
.ap-head--marked .ap-h1{margin-inline:auto}
.ap-head--marked .ap-p{margin-inline:auto}
.ap-fmark{display:block;margin:0 auto 26px;
  height:clamp(104px,9vw,148px);width:calc(clamp(104px,9vw,148px)*0.6333);
  background:url('/assets/fs/focalshift-f-mark.svg') center/contain no-repeat}

/* ══ THE LOGIN HEADLINE IN THE HOME FINALE'S GRADIENT ════════════════════════════════════════
   Founder, 19 Sep: "Discover, Organize & Collaborate", rendered as gradient text in the same
   gradient the home finale uses.

   THE STOPS ARE MEASURED, AND THEY ARE NOT MINE. FINALE-LOGO-GRADIENT-0917 (ruling 543) sampled
   them from the wordmark's own lettering — one horizontal gradient, 145 stops — and ruling 543
   ordered them pink -> violet -> blue at 90deg, matching the wordmark's direction rather than the
   site's old 125deg. What that lane shipped, verbatim:
       light  linear-gradient(90deg, #f62bf3 0%, #532cf9 50%, #5271fc 100%)
       dark   linear-gradient(90deg, #f95bf6 0%, #866afb 50%, #5977fc 100%)

   🔴 THE LIGHT TWIN'S STOPS ARE DEEPENED HERE, AND THE REASON IS IN THAT LANE'S OWN RECEIPT.
   It measured its light pink at 3.05:1 and shipped it anyway — correct for a 58px display headline
   on the marketing home, where the large-text floor is 3.0. The ruling for THIS door is an explicit
   >= 4.5 on the darkest and lightest stops, so the light twin cannot reuse those literals. The
   light stops below are the same three hues driven darker until each clears 4.5 against this
   panel's #f5f6fc; the DARK stops are that lane's, unchanged, because they already clear it on
   #12131f. Every ratio is measured from the rendered pixels by harness/shoot.mjs, which samples the
   three stops explicitly (gradient text has color:transparent, so the ordinary probe cannot see
   it) — proof/contrast.json, rows "grad stop 0/50/100".

   `background-clip:text` with a transparent fill is the only way to put a gradient on type, so the
   FALLBACK matters: `color` is set FIRST to the solid accent, and a browser without the clip paints
   that instead of an invisible headline. */
.ap-h1--grad{max-width:20ch;
  color:var(--a-accent);
  background-image:var(--a-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* a gradient on text clips the descenders of a tight line-height; 1.14 gives the "g" and the "p"
     their room without changing the type size */
  line-height:1.14;padding-bottom:.06em}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .ap-h1--grad{-webkit-text-fill-color:currentColor;background-image:none}}
.ap-p{font-size:15px;line-height:1.68;color:var(--a-muted);margin:0;max-width:56ch}

/* the six questions. A counter, a rule down the left, and the question in the wizard's own voice
   with what it builds underneath. The vertical rule is what makes six rows read as ONE sequence
   rather than six cards — and a card idiom here is exactly what the founder rejects on sight. */
.ap-seq{list-style:none;margin:0;padding:0 0 0 0;counter-reset:aps}
.ap-seq li{counter-increment:aps;position:relative;padding:0 0 18px 42px;
  border-left:1px solid var(--a-line);margin-left:13px}
.ap-seq li:last-child{padding-bottom:0;border-left-color:transparent}
.ap-seq li::before{content:counter(aps);position:absolute;left:-13px;top:0;
  width:26px;height:26px;border-radius:var(--a-r);
  background:var(--ap-bg-2);border:1px solid var(--a-line-2);
  color:var(--a-accent);font:700 11.5px/24px 'Inter',sans-serif;text-align:center}
.ap-q{display:block;font:600 14.5px/1.5 'Inter',sans-serif;color:var(--a-ink);margin-bottom:4px}
.ap-d{display:block;font:400 13px/1.6 'Inter',sans-serif;color:var(--a-muted)}

/* the proof strip and its Amendment-16 label */
.ap-shots-lab{display:flex;gap:9px;align-items:flex-start;
  font:500 12px/1.55 'Inter',sans-serif;color:var(--a-muted);margin:0 0 14px}
.ap-shots-lab i{color:var(--a-accent);margin-top:2px}
.ap-shots-lab b{color:var(--a-ink-2);font-weight:700}
.ap-shots-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ap-shot{margin:0;min-width:0}
.ap-shot img{display:block;width:100%;height:auto;aspect-ratio:1040/660;object-fit:cover;
  object-position:top left;border:1px solid var(--a-line);border-radius:var(--a-r);
  background:var(--ap-bg-2)}
.ap-shot figcaption{font:500 11.5px/1.45 'Inter',sans-serif;color:var(--a-muted);margin-top:9px}

/* the before/after checklist — the reference's two-column device, sized to the five minutes */
.ap-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ap-ba-col{padding:18px 18px 16px;border:1px solid var(--a-line);border-radius:var(--a-r);
  background:var(--ap-bg-2);min-width:0}
.ap-ba-col h3{font:700 11.5px/1.3 'Inter',sans-serif;letter-spacing:.085em;text-transform:uppercase;
  margin:0 0 13px;color:var(--a-muted)}
.ap-ba-col ul{list-style:none;margin:0;padding:0}
.ap-ba-col li{position:relative;padding-left:24px;margin-bottom:10px;
  font:400 13px/1.55 'Inter',sans-serif;color:var(--a-ink-2)}
.ap-ba-col li:last-child{margin-bottom:0}
.ap-ba-col li i{font-style:italic}
/* the two marks are drawn in CSS, not in an icon font, so the column never depends on a deferred
   script having run — and they are a DASH and a CHECK rather than a cross and a check: the left
   column is what is absent, not what is wrong. */
/* 🔴 MEASURED AND CORRECTED, 19 Sep, by this package's own instrument — not by eye.
   The first draft painted this column's heading and dash with `--a-or`, the token for the word
   "or" on the divider, because the "before" column is the quiet one. harness/shoot.mjs measured it
   from the rendered pixels and refused it: #7a7e94 on #171829 = 4.37:1 in dark, and #b6b7c9 on
   #ffffff = 1.98:1 in the light twin — an 11px uppercase heading at a fifth of the floor. "Quiet"
   is a weight and a size decision; it is not a licence to go under 4.5:1. Both now take
   `--a-muted` (6.9:1 dark, 5.6:1 light) and the column still reads as the subordinate one because
   its rule, its mark and its type weight say so. proof/contrast.json carries both runs. */
.ap-ba-col--before li::before{content:"–";position:absolute;left:4px;top:-1px;
  color:var(--a-muted);font-weight:700;font-size:15px}
.ap-ba-col--before h3{color:var(--a-muted)}
.ap-ba-col--after li::before{content:"✓";position:absolute;left:2px;top:0;
  color:var(--fsc-ok);font-weight:700;font-size:13px}
.ap-ba-col--after{border-color:color-mix(in srgb,var(--a-brand) 30%,transparent)}
.ap-ba-col--after h3{color:var(--a-accent)}

/* the wizard's own promise, as the closing beat */
.ap-honest{position:relative;margin:0;padding:20px 22px 20px 52px;
  border-left:2px solid var(--a-brand);background:var(--ap-bg-2);border-radius:var(--a-r);
  font-family:'Sora','Inter',system-ui,sans-serif;font-size:17px;line-height:1.5;
  font-weight:600;color:var(--a-ink);letter-spacing:-.012em}
.ap-honest i{position:absolute;left:22px;top:22px;color:var(--a-brand);font-size:14px}
.ap-honest-by{display:block;margin-top:11px;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:0;color:var(--a-muted)}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   9 · NARROW — MOBILE FIRST, AND THE FORM COMES FIRST
   🔴 The stack order is `.auth-form` FIRST. This is ruling 582/148b's requirement carried into the
   new geometry: MEASURED on the live door at 390x844 the first form control sat at y=817 of an
   844px screen because the panel — a logo, a drawing, a headline, a blurb — was above it. Her
   ruling was "shrink the illustration to a small header mark at <=600px so the first field is on
   the first screen".
   This design does not need to shrink anything, because the panel is no longer ABOVE the form: the
   form is the first column in the source and `order` only applies to the desktop split, so at
   narrow widths the flex direction becomes `column` and the form is simply first. The panel
   follows it, whole, for anyone who scrolls. The ruling's INTENT — the first field on the first
   screen — is met by construction rather than by a breakpoint, and there is no width at which a
   visitor meets a picture before a field.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .auth{flex-direction:column}
  .auth-form{order:0;flex:0 0 auto;padding:36px 26px 30px;justify-content:flex-start}
  .af-card{max-width:520px;margin:0 auto}
  .auth-brand{order:1;flex:1 1 auto;border-left:0;border-top:1px solid var(--a-line);
    padding:38px 26px 46px}
  .ap{margin:0;max-width:640px;margin-inline:auto}
  .ap-h1{font-size:clamp(27px,5vw,34px);max-width:26ch}
}
@media (max-width:720px){
  .ap-shots-row{grid-template-columns:1fr;gap:16px}
  /* ONE screen, not three postage stamps and not two tall slabs. At this width a 1/3-column crop
     is unreadable, and the first plate run showed the `n+3` I wrote first leaving TWO full-width
     figures — about 460px of picture on a page whose whole point is that the form comes first.
     `n+2` matches what the comment always claimed: one figure, the other two dropped from the FLOW
     rather than shrunk. `display:none` on a decorative figure is correct, and the A16 label above
     still names what the remaining one is. */
  .ap-shot:nth-child(n+2){display:none}
  .ap-ba{grid-template-columns:1fr;gap:14px}
}
@media (max-width:600px){
  .auth-form{padding:26px 20px 24px}
  .auth-brand{padding:30px 20px 38px}
  .af-mark{height:26px;margin-bottom:26px}
  .af-h{font-size:25px}
  .af-sub{font-size:13.5px;margin-bottom:24px}
  .af-row{flex-direction:column;gap:0}
  .ap{gap:24px}
  .ap-h1{font-size:26px;max-width:none}
  .ap-p{font-size:14px}
  .ap-seq li{padding-left:38px}
  .ap-honest{font-size:15.5px;padding:17px 18px 17px 46px}
  .ap-honest i{left:18px;top:19px}
}
/* 601–1180 is NOT left on the old layout the way ruling 582's fence had to leave it: the stack
   above starts at 1180, so a 700px tablet gets the same form-first column a phone gets. That open
   item from MORNING-RULINGS-0919 is closed by this geometry and the receipt says so. */

/* ── reduced motion: there is no animation on this page to reduce, and no rule pretends there is.
   The only transitions are the 130ms border/background changes on a focused field, which are a
   focus affordance rather than motion. They are kept deliberately. ── */

/* ── forced-colors: the two CSS-drawn marks and the counters must survive a high-contrast mode,
   where background-color is discarded. Both are TEXT content, so they do; the discs lose their
   fill and keep their border, which is why every disc has a border and not only a background. ── */
@media (forced-colors:active){
  .ap-seq li::before,.af-steps li::before,.af-q::before{border:1px solid CanvasText;color:CanvasText}
  .af-btn{border:1px solid ButtonText}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SIGNIN-COOKIE-RIBBON-0919 BEGIN consent-dock — THE CONSENT CARD STOPS COVERING THE CREDENTIALS

   MEASURED on the LIVE doors, 19 Sep, fresh context with no fs_consent cookie, headless Chromium,
   hit-tested with elementFromPoint at the INITIAL scroll position (harness/probe-cover.mjs,
   proof/logs/cover-BEFORE.json). The card is `[x,y,w,h]`:

     1280 (both schemes)  card [20, 694, 340, 186]   — bottom-LEFT, i.e. on top of the form column
       /register   email    @vy692  ->  .fscc-head
                   password @vy780  ->  .fscc-policy
       /login      password @vy720  ->  .fscc-head
                   button   @vy802  ->  .fscc-card      ← THE SUBMIT BUTTON. Not in the report;
                                                          found by this probe. A first visit to
                                                          /login could not reach "Log in" at all.
      400 (both schemes)  card [12, 662, 368, 186]
       /register   handle   @vy690  ->  .fscc-head

   Ten covered controls across the matrix.

   🔴 THE CARD IS NOT TOUCHED, AND RAISING IT IS THE WRONG FIX. Its stylesheet declares
   z-index 2147483000 and WO-COOKIEFIX-0827 deliberately lowered it to 1090 so consent could no
   longer out-stack the nav rail (WO-NAVRAIL-0827). BEFORE-BETA-SMALLS-0919's own dock file
   (fs-consent-dock-0919.css, on the box since 10:01Z) writes that reasoning out and solves the
   same class of fault the same way: THE PAGE YIELDS, never the card, through `:has()` on the
   card's own `hidden` attribute, with no JavaScript. This block is that idiom applied to these two
   doors, and like that file it can only ever REMOVE an overlap, never create one.

   SCOPED TO THESE TWO DOORS by `body:has(.auth)` — `.auth` is this design's own wrapper, so no
   other page on the estate sees a single one of these rules.

   WHY TWO DIFFERENT DOCKS, and both are "move it somewhere with no controls under it":
     · >= 900px the page is two columns and the RIGHT 60 % is the panel — a headline, a list, three
       decorative figures, no focusable control anywhere in it. So the card moves to the right and
       sits over the panel. The form column ends at 560px and the docked card starts at about 916,
       so they cannot meet at any width in this range.
     · < 900px the page is one column and there is no sideways room, so the card docks to the TOP.
       At 400 the first 500px of the door is the mark, the kicker, the title and the beta chip —
       measured: the first control (first_name) sits at vy 514 — so a 186px band at the top covers
       type and nothing else. It is also, if anything, MORE visible there than anchored to the
       bottom of a 4,300px page.

   NOTHING ABOUT CONSENT CHANGES: not the markup, not the buttons, not the z-index, not the
   server-side suppression, not what is recorded. The card is answered exactly as before, and the
   moment it is answered `#fscc-root` gets `hidden` and every rule here stops matching.

   `@supports selector(:has(*))` guards the lot: a browser without `:has()` renders precisely what
   it renders today, which is why this can only improve the page and never break it. */
@supports selector(:has(*)){
  @media (min-width:900px){
    body:has(.auth) #fscc-root:not([hidden]) .fscc-card{
      left:auto !important; right:24px !important;
    }
  }
  @media (max-width:899px){
    body:has(.auth) #fscc-root:not([hidden]) .fscc-card{
      top:12px !important; bottom:auto !important;
    }
    /* and the form keeps a bottom inset the height of the card, so that when the visitor scrolls
       to the end of a 4,300px application the last control and the submit button are never under
       a bottom-anchored anything. 186 measured + 24 gap. */
    body:has(.auth) .auth-form{padding-bottom:210px}
  }
  /* scrolling a field into view must never park it under the card either — this is what keeps the
     probe's second pass clean at every width, and it costs nothing when no card is up. */
  body:has(.auth) #fscc-root:not([hidden]) ~ * .af-g input,
  body:has(.auth) #fscc-root:not([hidden]) ~ * .af-btn{scroll-margin-bottom:210px;scroll-margin-top:210px}
}
/* SIGNIN-COOKIE-RIBBON-0919 END consent-dock */
