/* auth.css -- THE AUTH MAKEOVER (Code B Design; Lane A order 2026-10-18, after FD-2; the founder-
   reviewed mock design/auth-makeover, corpus C-6921): the five auth pages, sign-in, sign-up, reset,
   confirm and account, and the register's two error pages, 404 and 500 (Lane A D64-131), which take
   the embers and nothing else from here (their dress is /app/register.css's, with reset's and confirm's).

   SERVED ONLY WHILE ROK_MAKEOVER IS ON, as /app/auth.css (execution/engines/routes/makeover_routes.py,
   ASSETS). Flag off it 404s: every element it reveals keeps its `hidden`, the token card stays where it
   was, and each page looks as it did. Sign-in and sign-up link it after /app/tokens.css and
   /app/threshold.css. Reset, confirm and account link it ALONE: tokens.css redefines --ink as the
   parchment ink, which intake.css's chrome would read as its text colour. So the embers' rules use
   literal colours, and only the two door pages' rules read the tokens.

   WHAT IT DOES
     * THE EMBERS, on every auth page: a sparse rise of gold sparks in the two gutters beside the
       page's 46rem column. Each lane is placed as a share of its gutter, and each drift is a share
       of it too, so no ember meets a word at any width, a phone's 1rem gutter included. On the
       two door pages' desk the field rises over the door instead (see THE DOOR below).
     * NO TOKEN CARD and no invite field on any auth page: the beta token is gone (Lane A D63-24
       step 3), so the rules that hid the card and dressed sign-up's invite field went with it.
     * THE DOOR PAGES' MARK AND WORDMARK AT SIZE, sign-in and sign-up: the mark above the wordmark at
       the lockup ratio the founder ruled for /welcome (C3: the mark is 4.0x the wordmark's size). The
       threshold's lines and dress come from /app/threshold.css, which the two pages share.
     * THE DOOR, on sign-in and sign-up: the gate opening into light beside the words, a still (the
       founder: "the door opening for sign-up is perfect"; then, Lane A D63: "SIGN-IN gets the sign-up
       page's design ... Same composition, swap the form", with "the sign-in page's ember field" carried
       over to both). Its doorway light breathes, and the ember field rises over it.

     * THE REGISTER'S PANELS (Lane A D64-131): sign-up's and reset's "check your inbox", and reset's
       and confirm's done. auth.js marks the body data-state="sent" or "done" when the answer comes
       back; these rules then set the page's cards and its plain status line aside and show the panel
       for that state. Flag off, the panels keep `hidden`, the status line says what it always said,
       and auth.js waits for nothing (it holds a beat only while a panel shows).

   PRESENTATION ONLY: no copy, no field and no behaviour. It loads nothing; the mark and the scene
   are the page's own <img>s. Motion is transform, opacity and filter only, and runs only under
   prefers-reduced-motion: no-preference; under reduce, nothing moves and no ember is drawn. */

/* ------------------------------------------------------------------ the embers, every auth page */
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers[hidden] { display: block; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers {
  --col: min(46rem, calc(100vw - 2rem));        /* intake.css: the column, inside 1rem of padding */
  --gut: calc((100vw - var(--col)) / 2);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) :is(header, main, footer) { position: relative; z-index: 1; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span {
  position: absolute;
  bottom: -8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F0D79E;                          /* --gold-hi, literal: see the head */
  box-shadow: 0 0 8px rgba(240, 215, 158, .75);
  opacity: 0;
}
/* three to a gutter, each lane a share of it and each drift inside it: 16-24s, slower than the
   lander's hero, an ambient rise rather than a show */
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span:nth-child(1) {
  left: calc(var(--gut) * .22); --dx: calc(var(--gut) * .14); --d: 19s; --l: -4s; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span:nth-child(2) {
  left: calc(var(--gut) * .5); --dx: calc(var(--gut) * -.12); --d: 23s; --l: -15s; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span:nth-child(3) {
  left: calc(var(--gut) * .72); --dx: calc(var(--gut) * -.1); --d: 16s; --l: -9s; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span:nth-child(4) {
  left: calc(100vw - var(--gut) * .78); --dx: calc(var(--gut) * .1); --d: 21s; --l: -12s; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span:nth-child(5) {
  left: calc(100vw - var(--gut) * .5); --dx: calc(var(--gut) * .12); --d: 17s; --l: -2s; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
        [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span:nth-child(6) {
  left: calc(100vw - var(--gut) * .25); --dx: calc(var(--gut) * -.14); --d: 24s; --l: -19s; }

@media (prefers-reduced-motion: no-preference) {
  body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
          [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers span { animation: au-ember var(--d) linear var(--l) infinite; }
  body:is([data-page="signin"], [data-page="signup"]) .au-light { animation: au-flicker 5.2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"],
          [data-page="account"],
        [data-page="notfound"], [data-page="error"]) .au-embers[hidden] { display: none; }
}
@keyframes au-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .85; }
  70% { opacity: .35; }
  100% { transform: translate(var(--dx), -100vh); opacity: 0; }
}

/* ------------------------------------------ the door and its register: THE ONE LOCKUP (Lane A D68-34a)
   The founder: "the one that has the name and logo closer together -- the one that should be used
   everywhere", the app included. It is the account hub's lockup (account_hub.css, .hub-brand) value for
   value: the mark beside the wordmark, 34 px, a .7rem gap, Cinzel 700 at .95rem, .32em, in capitals, in
   parchment. It replaces C3's mark over the wordmark at 4.0x on the sign-in door, sign-up, reset, confirm
   and the 404 and error pages. Centred here, so the wordmark's trailing tracking is taken back. */
body:is([data-page="signin"], [data-page="signup"]) header { text-align: center; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"], [data-page="notfound"], [data-page="error"]) header .sow-lockup {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
}
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"], [data-page="notfound"], [data-page="error"]) header .sow-lockup .au-mark[hidden] { display: block; }
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"], [data-page="notfound"], [data-page="error"]) header .sow-lockup .au-mark {
  width: 34px; height: 34px; margin: 0; flex: none; filter: drop-shadow(0 0 10px rgba(200, 163, 90, .35));
}
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"], [data-page="notfound"], [data-page="error"]) header .sow-lockup h1 {
  margin: 0 -.32em 0 0; font: 700 .95rem/1 "Cinzel", serif; letter-spacing: .32em;
  text-transform: uppercase; color: var(--parchment);
}
body:is([data-page="signin"], [data-page="signup"]) header .sub { margin-top: .5rem; }

/* ---------------------------------------- the door pages: the scene, the gate opening into light
   Lane A's correction to the order: the founder's words were "the door opening for sign-up is perfect".
   Lane A D63 then gave sign-in the same composition, the embers carried over to both. A still, as the
   mock: the app's CSP has no media-src. On a desk the page is two panes, the scene on the left and
   every word on the right; on a phone the scene is a band above the words. The scene is alive through
   its light, not its picture: the doorway light breathes (opacity and filter). The ember field rises
   over it: a two-pane desk has no gutters, so on a desk the field is the scene's pane, its lanes shares
   of the pane, two of them in the doorway. On a phone the field keeps the gutters. The gate's own lane
   of embers is retired, so the embers are one layer (L1: the embers, the light and the threshold's
   seam). Nothing in either ever meets a word, because no word is in the pane, the band or a gutter. */
body:is([data-page="signin"], [data-page="signup"]) .au-scene[hidden] { display: block; }
body:is([data-page="signin"], [data-page="signup"]) .au-scene { position: relative; overflow: hidden; z-index: 0; }
body:is([data-page="signin"], [data-page="signup"]) .au-embers { z-index: 1; }                /* over the scene; the words, later, over both */
body:is([data-page="signin"], [data-page="signup"]) .au-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
body:is([data-page="signin"], [data-page="signup"]) .au-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 70%, rgba(7, 11, 22, .9)),
              linear-gradient(0deg, rgba(7, 11, 22, .55), transparent 35%);
}
body:is([data-page="signin"], [data-page="signup"]) .au-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(11% 34% at 50% 40%, rgba(255, 214, 140, .42), transparent 72%);
}

/* a desk: two panes, the scene sticky on the left, the words in the right column */
@media (min-width: 48rem) {
  body:is([data-page="signin"], [data-page="signup"]) {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(26rem, 1fr);
    align-content: start;
    padding: 0;
  }
  body:is([data-page="signin"], [data-page="signup"]) .au-scene {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  body:is([data-page="signin"], [data-page="signup"]) :is(header, main, footer) {
    grid-column: 2;
    width: calc(100% - 3rem);
    margin-inline: auto;
  }
  /* the field is the scene's pane: the grid's own first track, 1.2 of 2.2 shares, or what 26rem leaves */
  body:is([data-page="signin"], [data-page="signup"]) .au-embers {
    --pane: min(calc(100vw * 6 / 11), calc(100vw - 26rem));
    right: auto;
    width: var(--pane);
  }
  body:is([data-page="signin"], [data-page="signup"]) .au-embers span:nth-child(1) { left: calc(var(--pane) * .14); --dx: calc(var(--pane) * .03); }
  body:is([data-page="signin"], [data-page="signup"]) .au-embers span:nth-child(2) { left: calc(var(--pane) * .3); --dx: calc(var(--pane) * -.03); }
  body:is([data-page="signin"], [data-page="signup"]) .au-embers span:nth-child(3) { left: calc(var(--pane) * .46); --dx: calc(var(--pane) * .02); }
  body:is([data-page="signin"], [data-page="signup"]) .au-embers span:nth-child(4) { left: calc(var(--pane) * .54); --dx: calc(var(--pane) * -.02); }
  body:is([data-page="signin"], [data-page="signup"]) .au-embers span:nth-child(5) { left: calc(var(--pane) * .7); --dx: calc(var(--pane) * .03); }
  body:is([data-page="signin"], [data-page="signup"]) .au-embers span:nth-child(6) { left: calc(var(--pane) * .86); --dx: calc(var(--pane) * -.03); }
}
/* a phone: the scene is a band above the words */
@media (max-width: 47.99rem) {
  body:is([data-page="signin"], [data-page="signup"]) .au-scene { height: 40vh; margin: 0 -1rem; }
  body:is([data-page="signin"], [data-page="signup"]) .au-scene::after {
    background: linear-gradient(0deg, rgba(7, 11, 22, .95), transparent 45%);
  }
}

@keyframes au-flicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  13% { opacity: .82; filter: brightness(.96); }
  29% { opacity: .97; filter: brightness(1.05); }
  47% { opacity: .88; }
  63% { opacity: 1; filter: brightness(1.03); }
  81% { opacity: .82; }
}

/* ----------------------------------------------- the register's panels (Lane A D64-131), flag-on only */
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"])[data-state] main > .card:not(.rg-panel),
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"])[data-state] .status:not(.err) {
  display: none;
}
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"])[data-state="sent"] .rg-panel[data-for="sent"][hidden],
body:is([data-page="signin"], [data-page="signup"], [data-page="reset"], [data-page="confirm"], [data-page="account"])[data-state="done"] .rg-panel[data-for="done"][hidden] {
  display: block;
}