/* ==========================================================================
   kd6-auth.css — the account pages (sign in, sign up, forgot and reset
   password, invitation) in the v6 language. Packet A of the auth rebuild
   (SPEC §3). Motion lives in kd6-auth-motion.css; this file is the still look.

   LOAD ORDER (and nothing else; never tokens.css or kd5-tokens.css):
     /css/fonts/fonts.css, /css/kd6-tokens.css, /css/kd6-auth.css, /css/kd6-auth-motion.css, /css/kd6-auth-panel.css
     <head>: /js/i18n.js, then /pages/auth-boot.js
     end of <body>: /pages/auth-core.js, /pages/auth-motion.js, /pages/auth-panel.js, (google-auth.js),
     /pages/auth-<page>.js
     The blue panel's drawing (S252: the strokes and the letter that follow the steps) is kd6-auth-panel.css and
     auth-panel.js; this file keeps the static .au-poster below as the state and the picture without script.

   THE PAGE SKELETON (every class below is the contract between packets):
     <body class="au">
       <header class="au-side on-blue">
         <a class="au-brand" …> lockup (look.md §2, verbatim) </a>
         <p class="au-head"><span class="au-head__l" data-t>Your documents.</span>
                            <span class="au-head__l" data-t>For work.</span> …</p>
         <div class="au-poster" data-built="4" data-lit="0" aria-hidden="true">
           <i class="au-poster__s"></i> ×4 </div>
       </header>
       <div class="au-main">
         <main class="au-card">
           button.au-back[hidden] · ol.au-rail (sign-up, reset) · h1.au-ttl[tabindex=-1]
           span.au-rule · p.au-lede · p.au-sr[role=status] · scenes / .au-stage > .au-panel …
           p.au-msg[hidden] · button.au-btn · footer.au-foot
         </main>
       </div>
     </body>

   COMPONENTS: .au-back .au-rail(.au-rail__s > i + .au-rail__lab) .au-ttl .au-rule .au-lede
     .au-scene .au-stage .au-panel .au-fld .au-lab .au-inp .au-hint .au-fld__err .au-pw(.au-pw__eye)
     .au-meter .au-code(.au-code__in .au-code__cell .au-code__caret) .au-chip(.au-chip__change)
     .au-choice(.au-choice__tile .au-choice__t .au-choice__d .au-choice__then > span)
     .au-btn(--pri --blue --sec --google --microsoft; .au-btn__lab) .au-load .au-tick .au-msg(--err --info --ok)
     .au-wait .au-or .au-link .au-links .au-foot .au-legal .au-mark(.au-mark__s1..s4) .au-sr .au-list
     .au-choices (the radio group's grid) .au-msg__acts (actions under a refusal) .au-skel (a loading line)
   STATE CLASSES: .is-bad (field, code), .is-filled/.is-active/.is-full/.is-focus/.is-wrong/.is-right (code),
     .is-on (a chosen .au-choice where :has() is missing), .is-busy/.is-done/.is-wait (button),
     .is-todo/.is-now/.is-done/.is-gone (rail step); data-s="weak|fair|strong" (meter);
     data-built="0..4" and data-lit="0|1" (poster). KDAuth and KDAuthMotion set them; a page never needs to.
   The kit (tools/auth/kit.html, served by tools/auth/check.mjs at /kit) shows each one in every state, and
   tools/auth/frame.html (/kit/frame) the whole page.

   THEME: every colour that changes with the theme is an --au-* alias. They are set on :root and again
   under [data-theme="dark"] (the root attribute auth-boot.js sets, or any element: the kit forces one
   column dark). Brand constants (#ff762b orange, #ff4d2b ember) stay the same in both.

   RULES (Daniel's verdicts): flat colour, crisp edges. No glow, blur, backdrop filter, gradient text,
   gradient button, orange shadow, particles or spinner. The only gradient is the light canvas
   (pale blue to white, a ground, never a button). tools/test-auth-pages.mjs and check.mjs enforce it.
   ========================================================================== */

/* ---- theme aliases: light (also on any element marked light inside a dark one) ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --au-ground: #2a64a0;
  --au-canvas: linear-gradient(180deg, #eef5fc 0%, #ffffff 100%);
  --au-page: #ffffff;
  --au-card: #ffffff;
  --au-field: #ffffff;
  --au-raised: #eef6ff;
  --au-ink: #102d49;
  --au-ink-2: #2b4460;
  --au-slate: #56697f;
  --au-line: #dfe6ee;
  --au-line-hover: #c9d5e2;
  --au-link: #006bcb;
  --au-link-hover: #004e99;
  --au-accent: #006bcb;          /* markers: focus ring, done strokes, caret, meter */
  --au-ring: 0 0 0 3px rgba(0,107,203,.18);
  --au-card-shadow: inset 0 0 0 1px rgba(16,45,73,.07), 0 1px 2px rgba(16,45,73,.05), 0 16px 40px -24px rgba(16,45,73,.32);
  --au-lift: 0 1px 1px rgba(16,45,73,.04), 0 2px 6px rgba(16,45,73,.06);
  --au-err-ink: #8f3210;
  --au-err-bg: #fff0e6;
  --au-err-ring: #ffdcc6;
  --au-info-bg: #eef6ff;
  --au-info-ring: #e3f2ff;
  --au-poster: #004e99;
  --au-poster-k: 1;              /* opacity multiplier of the tonal strokes */
  --au-todo: #bfe3ff;            /* --v6-sky-200 */
  --au-rail-todo: #9ccdf3;       /* a step still to come: visible on white (about 1.6:1), still quiet */
  --au-tile: #f3f8fe;
  --au-tile-ring: inset 0 0 0 1px rgba(0,107,203,.1), 0 1px 2px rgba(16,45,73,.06);
  --au-orange: #ff762b;
  --au-on-orange: #102d49;
  --au-ember: #ff4d2b;
  --au-blue-btn: #006bcb;
  --au-blue-btn-hover: #005db1;
  --au-loose: 56px;              /* how far a poster stroke rests below its place */
  --au-lockup: #006bcb;          /* the lockup's blue on a light ground (.on-light) */
  --au-load-a: #006bcb;          /* busy strokes on a white pill: outer, middle */
  --au-load-b: #102d49;
}

/* ---- theme aliases: dark (switched with the dashboard; SPEC §0.8) -------- */
[data-theme="dark"] {
  color-scheme: dark;
  --au-ground: #163e66;
  --au-canvas: linear-gradient(#0b1f36, #0b1f36);
  --au-page: #0b1f36;
  --au-card: #11304f;
  --au-field: #0e2a47;
  --au-raised: #173a5e;
  --au-ink: #ffffff;
  --au-ink-2: rgba(236,244,252,.82);
  --au-slate: rgba(226,238,250,.6);
  --au-line: rgba(191,227,255,.14);
  --au-line-hover: rgba(191,227,255,.28);
  --au-link: #4fb3ff;
  --au-link-hover: #ffffff;
  --au-accent: #4fb3ff;
  --au-ring: 0 0 0 3px rgba(79,179,255,.28);
  --au-card-shadow: inset 0 0 0 1px rgba(191,227,255,.10), 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -24px rgba(0,0,0,.6);
  --au-lift: 0 1px 2px rgba(0,0,0,.25);
  --au-err-ink: #ffd7c2;
  --au-err-bg: rgba(255,118,43,.12);
  --au-err-ring: rgba(255,77,43,.38);   /* ember, not the orange: no orange in a box-shadow, even a hairline */
  --au-info-bg: rgba(79,179,255,.10);
  --au-info-ring: rgba(79,179,255,.24);
  --au-poster: #4fb3ff;
  --au-poster-k: .7;
  --au-todo: rgba(191,227,255,.32);
  --au-rail-todo: rgba(191,227,255,.3);
  --au-tile: rgba(191,227,255,.08);
  --au-tile-ring: inset 0 0 0 1px rgba(191,227,255,.14);
  --au-lockup: #b9deff;
  --au-load-a: #4fb3ff;
  --au-load-b: #ffffff;
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] wins everywhere except on a panel that is still painting its exit (auth-motion.js) */
[hidden]:not(.is-leaving) { display: none !important; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.au {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  font: 400 15px/1.55 var(--v6-body);
  color: var(--au-ink);
  background: var(--au-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* zero-specificity resets, so every component rule below wins over them */
:where(.au, .au-card) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.au, .au-card) :where(p) { margin: 0; }

/* ---- the blue side panel --------------------------------------------------- */
.au-side {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  padding: 44px 56px 48px;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: var(--au-ground);
  --au-head-fs: clamp(40px, 3.8vw, 56px);
}
.au-brand {
  display: inline-block;
  align-self: flex-start;
  border-radius: 8px;
  line-height: 0;
}
.au-brand:focus-visible { outline: 2px solid #ffffff; outline-offset: 6px; }

/* the lockup (look.md §2): coloured by its ground. On the blue panel 68px tall, 46px in the 88px phone band
   (S252: Daniel asked for a bigger logo, then bigger again) */
.lockup { display: block; height: 38px; width: auto; aspect-ratio: 276 / 80; overflow: visible; }
.au-side .lockup { height: 68px; }
.lockup .lk-s { stroke: #006bcb; }
.lockup .lk-k { fill: #006bcb; }
.lockup .lk-o { stroke: #ff762b; }
.lockup .lk-d { fill: #ff762b; }
.on-blue .lockup .lk-s { stroke: #ffffff; }
.on-blue .lockup .lk-k { fill: #ffffff; }
.on-light .lockup .lk-s { stroke: var(--au-lockup); }
.on-light .lockup .lk-k { fill: var(--au-lockup); }

/* the side headline: line 1 white, the others pale sky; flat, never gradient text */
.au-head {
  margin: auto 0;
  padding-bottom: 36px;
  font: 650 var(--au-head-fs)/1.02 var(--v6-display);
  letter-spacing: -.035em;
  color: #ffffff;
}
.au-head__l { display: block; }
.au-head__l + .au-head__l { color: #a9dcff; }

/* The mark as four flat tonal strokes (look.md §2 stroke geometry in the 80×72 box, offset by the
   mark's centre), on a box that carries the lean. data-built="n": strokes 1..n in place, the rest
   resting lower at half their tone. data-lit="1": stroke 2 turns orange (the one orange moment); on the desktop the strokes also gather into
   the mark under the headline (below). */
.au-poster {
  position: absolute;
  z-index: -1;
  left: 10%;
  top: 52%;
  width: 130%;
  aspect-ratio: 80 / 72;
  transform: translateY(-50%) rotate(-8deg) skewX(-14deg);
  pointer-events: none;
}
.au-poster__s {
  --o: .16;
  position: absolute;
  display: block;
  width: 8.125%;
  border-radius: 999px;
  background-color: var(--au-poster);
  opacity: calc(var(--o) * var(--au-poster-k));
  transform: translateY(0);
}
.au-poster__s:nth-child(1) { --o: .16; left: 23.4375%; top: 20.4861%; height: 59.0278%; }
.au-poster__s:nth-child(2) { --o: .22; left: 38.4375%; top: 13.5417%; height: 72.9167%; }
.au-poster__s:nth-child(3) { --o: .13; left: 53.4375%; top: 19.0972%; height: 61.8056%; }
.au-poster__s:nth-child(4) { --o: .18; left: 68.4375%; top: 26.0417%; height: 47.9167%; }
.au-poster[data-built="0"] .au-poster__s,
.au-poster[data-built="1"] .au-poster__s:nth-child(n+2),
.au-poster[data-built="2"] .au-poster__s:nth-child(n+3),
.au-poster[data-built="3"] .au-poster__s:nth-child(n+4) {
  transform: translateY(var(--au-loose));
  opacity: calc(var(--o) * var(--au-poster-k) * .5);
}
.au-poster[data-lit="1"] .au-poster__s:nth-child(2) {
  background-color: var(--au-orange);
  opacity: 1;
  transform: translateY(0);
}

/* Lit on the desktop (a deliberate change from SPEC §3.3's placement, review of packet A): the orange stroke
   must never cross the headline, whatever its words. So at the one orange moment the big tonal strokes
   gather into the mark itself, sized by the headline's type and set under it, flush with its left edge
   (stroke 1 starts at 23.4% of the box, hence the left offset). The box's top sits half of three 1.02 lines
   plus 8px below the headline's centre (the panel's centre line, 15px low: lockup above, 48px padding below);
   a headline that wraps to four lines on a narrow panel still clears it inside its 36px bottom padding.
   Checked at 960 to 2560 wide with every sign-up headline. The phone band keeps its own placement. */
@media (min-width: 960px) {
  .au-poster[data-lit="1"] {
    left: calc(62px - 1.33 * var(--au-head-fs));
    top: calc(50% + 15px + 1.53 * var(--au-head-fs) + 8px);
    width: calc(5.6 * var(--au-head-fs));
    transform: translateY(0) rotate(-8deg) skewX(-14deg);
  }
  /* gathered, the strokes are the mark: white with the orange second stroke, as the lockup on blue */
  .au-poster[data-lit="1"] .au-poster__s { background-color: #ffffff; opacity: 1; transform: translateY(0); }
  .au-poster[data-lit="1"] .au-poster__s:nth-child(2) { background-color: var(--au-orange); }
}

/* ---- the light ground and the card ---------------------------------------- */
.au-main {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
  background: var(--au-canvas);
}
.au-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-width: 0;
  padding: 40px;
  border-radius: 20px;
  color: var(--au-ink);
  background: var(--au-card);
  box-shadow: var(--au-card-shadow);
}

/* Back: a text button with a slanted chevron stroke (hidden on a first step; Esc does the same) */
.au-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 0 0 12px;
  padding: 0 4px 0 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: 500 14px/1 var(--v6-body);
  color: var(--au-link);
  cursor: pointer;
}
.au-back::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg) skew(-6deg, -6deg);
}
.au-back:hover { color: var(--au-link-hover); }

/* the step rail: the site's journey rail, one leaning stroke per step */
.au-rail {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 28px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.au-rail__s {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 180px;
  min-height: 28px;
  transition: max-width 240ms var(--au-ease), margin 240ms var(--au-ease), opacity 240ms var(--au-ease);
}
.au-rail__s > i {
  display: block;
  flex: none;
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background-color: var(--au-rail-todo);
  opacity: 1;
  transform: skewX(-14deg) rotate(-8deg) scaleY(.62);
  transition: transform 420ms var(--au-ease), opacity 300ms var(--au-ease), background-color 300ms var(--au-ease);
}
.au-rail__s.is-done > i { background-color: var(--au-accent); opacity: .72; transform: skewX(-14deg) rotate(-8deg) scaleY(.8); }
.au-rail__s.is-now > i { background-color: var(--au-orange); opacity: 1; transform: skewX(-14deg) rotate(-8deg) scaleY(1.28); }
.au-rail__lab {
  display: none;
  padding: 4px 8px;
  border-radius: 8px;
  font: 600 12px/1 var(--v6-body);
  white-space: nowrap;
  color: var(--au-ink);
  background: var(--au-raised);
}
.au-rail__s.is-now .au-rail__lab { display: inline-block; }
.au-rail__s.is-gone { max-width: 0; margin-left: -14px; opacity: 0; overflow: hidden; }
.au-rail__s.is-gone > i { transform: skewX(-14deg) rotate(-8deg) scaleY(0); }
.au-rail__s.is-gone:first-child { margin-left: 0; }

/* the title and its orange rule */
.au-ttl {
  margin: 0;
  font: 650 30px/1.12 var(--v6-display);
  letter-spacing: -.03em;
  color: var(--au-ink);
  overflow-wrap: break-word;
}
.au-ttl:focus { outline: none; }
.au-ttl:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 4px; border-radius: 4px; }
.au-rule {
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--au-orange);
  transform: skewX(-14deg);
  transform-origin: left center;
}
.au-lede {
  margin: 14px 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--au-slate);
  overflow-wrap: anywhere;
}
.au-lede b, .au-lede strong { font-weight: 600; color: var(--au-ink); }

/* scenes, the stage and its panels (auth-motion.js swaps them) */
.au-scene { min-width: 0; margin: 0; }
.au-stage {
  position: relative;
  margin: -4px;
  padding: 4px;
}
/* the height tween: on the .au-stage for panels, on the .au-card when whole scenes swap */
.is-sizing { overflow: hidden; transition: height var(--au-t-height, 280ms) var(--au-ease, ease); }
.au-panel { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.au-panel { min-inline-size: 0; }
.au-panel.is-leaving { display: block; position: absolute; top: 4px; left: 4px; right: 4px; pointer-events: none; }
.au-scene.is-leaving { display: block; pointer-events: none; }

/* fields */
.au-fld { margin: 0 0 18px; }
.au-lab, .au-panel > legend.au-lab {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  font: 600 13px/1.3 var(--v6-body);
  color: var(--au-ink);
}
.au-inp {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  font: 400 15px/1.3 var(--v6-body);
  color: var(--au-ink);
  background: var(--au-field);
  box-shadow: inset 0 0 0 1.5px var(--au-line);
  transition: box-shadow var(--au-t-hover, 140ms) var(--au-ease, ease);
  -webkit-appearance: none;
  appearance: none;
}
.au-inp::placeholder { color: var(--au-slate); opacity: .75; }
.au-inp:hover { box-shadow: inset 0 0 0 1.5px var(--au-line-hover); }
.au-inp:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--au-accent), var(--au-ring); }
.au-inp.is-bad { box-shadow: inset 0 0 0 1.5px var(--au-ember); }
.au-inp.is-bad:focus { box-shadow: inset 0 0 0 1.5px var(--au-ember), 0 0 0 3px rgba(255,77,43,.14); }
.au-inp[readonly] { background: var(--au-raised); }
/* the browser's autofill tint would paint over the field colour: keep ours */
.au-inp:-webkit-autofill, .au-inp:-webkit-autofill:hover, .au-inp:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--au-ink);
  transition: background-color 600000s 0s, box-shadow var(--au-t-hover, 140ms) var(--au-ease, ease);
}
.au-hint {
  display: block;
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--au-slate);
}
.au-hint a { color: var(--au-link); font-weight: 500; text-decoration: none; }
.au-hint a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-fld__err {
  position: relative;
  margin: 7px 0 0;
  padding-left: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--au-err-ink);
  overflow-wrap: anywhere;
}
.au-fld__err::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--au-ember);
  transform: skewX(-14deg) rotate(-8deg);
}
.au-fld__err .au-link { font-size: 13.5px; }

/* password: the field with a Show / Hide text button inside it */
.au-pw { position: relative; }
.au-pw .au-inp { padding-right: 64px; }
.au-pw__eye {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 36px;
  min-width: 50px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: 600 13px/1 var(--v6-body);
  color: var(--au-link);
  cursor: pointer;
}
.au-pw__eye:hover { background: var(--au-raised); }

/* the strength meter: three leaning strokes and a word */
.au-meter {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  margin: 9px 0 0;
}
.au-meter > i {
  display: block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background-color: var(--au-todo);
  transform: skewX(-14deg) rotate(-8deg);
  transition: background-color 300ms var(--au-ease, ease);
}
.au-meter[data-s="weak"] > i:nth-child(1),
.au-meter[data-s="fair"] > i:nth-child(-n+2),
.au-meter[data-s="strong"] > i:nth-child(-n+2) { background-color: var(--au-accent); }
.au-meter[data-s="strong"] > i:nth-child(3) { background-color: var(--au-orange); }
.au-meter__lab { margin-left: 7px; font-size: 13px; line-height: 1; color: var(--au-slate); }
.au-meter[data-s="strong"] .au-meter__lab { color: var(--au-ink); }

/* the six-cell code: one real input stretched over six drawn cells and a leaning caret */
.au-code {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 52px);
  gap: 8px;
  width: max-content;
  max-width: 100%;
}
.au-code__in {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  font-size: 16px;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
}
.au-code__in::selection { background: transparent; color: transparent; }
.au-code__in:-webkit-autofill { transition: background-color 600000s 0s; }
.au-code__cell {
  --i: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 12px;
  font: 650 24px/1 var(--v6-display);
  font-variant-numeric: tabular-nums;
  color: var(--au-ink);
  background-color: var(--au-field);
  box-shadow: inset 0 0 0 1.5px var(--au-line);
  transition: box-shadow var(--au-t-hover, 140ms) var(--au-ease, ease), background-color var(--au-t-hover, 140ms) var(--au-ease, ease);
}
.au-code:hover .au-code__cell { box-shadow: inset 0 0 0 1.5px var(--au-line-hover); }
.au-code__cell.is-filled { background-color: var(--au-raised); }
.au-code.is-focus .au-code__cell.is-active { box-shadow: inset 0 0 0 1.5px var(--au-accent), var(--au-ring); }
.au-code.is-wrong .au-code__cell { box-shadow: inset 0 0 0 1.5px var(--au-ember); }
.au-code.is-right .au-code__cell { box-shadow: inset 0 0 0 1.5px var(--au-accent); transition-delay: calc(var(--i) * 30ms); }
.au-code__caret {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 52px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.au-code__caret > i {
  display: block;
  width: 2.5px;
  height: 22px;
  border-radius: 2px;
  background: var(--au-accent);
  transform: skewX(-14deg) rotate(-8deg);
}
.au-code.is-focus:not(.is-full) .au-code__caret { opacity: 1; }
.au-code.is-bad .au-code__cell { box-shadow: inset 0 0 0 1.5px var(--au-ember); }

/* the address chip on a password step */
.au-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 40px;
  margin: 0 0 18px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  font: 600 14px/1.3 var(--v6-body);
  color: var(--au-ink);
  background: var(--au-raised);
}
.au-chip > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-chip__change {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font: 600 13px/1 var(--v6-body);
  color: var(--au-link);
  background: var(--au-card);
  box-shadow: inset 0 0 0 1px var(--au-line);
  cursor: pointer;
}
.au-chip__change:hover { box-shadow: inset 0 0 0 1px var(--au-accent); }

/* choice cards (a radio group): an icon tile, a title, one line, and the result line when chosen */
.au-choices { display: grid; gap: 10px; margin: 0 0 18px; }
.au-choice {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 14px 44px 14px 16px;
  border-radius: 14px;
  background: var(--au-card);
  box-shadow: inset 0 0 0 1.5px var(--au-line);
  cursor: pointer;
  transition: box-shadow var(--au-t-hover, 140ms) var(--au-ease, ease), background-color var(--au-t-hover, 140ms) var(--au-ease, ease);
}
.au-choice:hover { box-shadow: inset 0 0 0 1.5px var(--au-line-hover); }
.au-choice > input[type="radio"], .au-choice > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.au-choice::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 24px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--au-line-hover);
  background: var(--au-field);
  transition: box-shadow var(--au-t-hover, 140ms) var(--au-ease, ease);
}
.au-choice__tile {
  grid-row: 1 / span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--au-accent);
  background: var(--au-tile);
  box-shadow: var(--au-tile-ring);
  transition: background-color var(--au-t-hover, 140ms) var(--au-ease, ease), color var(--au-t-hover, 140ms) var(--au-ease, ease);
}
.au-choice__tile svg { width: 20px; height: 20px; }
.au-choice__t { display: block; padding-top: 1px; font: 600 15px/1.35 var(--v6-body); color: var(--au-ink); }
.au-choice__d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--au-slate); }
.au-choice__then {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms var(--au-ease, ease), opacity 220ms var(--au-ease, ease);
}
.au-choice__then > span {
  display: block;
  min-height: 0;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--au-ink-2);
}
.au-choice__then > span::before { content: ""; display: block; height: 8px; }
.au-choice:is(.is-on, :has(> input:checked)) {
  background-color: var(--au-raised);
  box-shadow: inset 0 0 0 1.5px var(--au-accent);
}
.au-choice:is(.is-on, :has(> input:checked))::after {
  box-shadow: inset 0 0 0 1.5px var(--au-accent), inset 0 0 0 5px var(--au-field), inset 0 0 0 10px var(--au-accent);
}
.au-choice:is(.is-on, :has(> input:checked)) .au-choice__tile { color: var(--au-accent); background: var(--au-card); }
.au-choice:is(.is-on, :has(> input:checked)) .au-choice__then { grid-template-rows: 1fr; opacity: 1; }
.au-choice:has(> input:focus-visible) { outline: 2px solid var(--au-accent); outline-offset: 2px; }
.au-choice.is-focus { outline: 2px solid var(--au-accent); outline-offset: 2px; }

/* buttons: pills. --pri is the one orange (ink text), --blue the intermediate Continue,
   --sec / --google the white pill with a hairline. Never an orange shadow, never a gradient. */
.au-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin: 6px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: 600 16px/1 var(--v6-body);
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--au-t-hover, 140ms) var(--au-ease, ease), box-shadow var(--au-t-hover, 140ms) var(--au-ease, ease),
    background-color 220ms var(--au-ease, ease), color 220ms var(--au-ease, ease), opacity 150ms var(--au-ease, ease);
}
.au-btn__lab { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.au-btn--pri {
  color: var(--au-on-orange);
  background-color: var(--au-orange);
  box-shadow: inset 0 0 0 1px rgba(16,45,73,.08), 0 1px 2px rgba(16,45,73,.18);
}
.au-btn--pri:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(16,45,73,.08), 0 1px 2px rgba(16,45,73,.18), 0 8px 18px -10px rgba(16,45,73,.4);
}
.au-btn--blue {
  color: #ffffff;
  background-color: var(--au-blue-btn);
  box-shadow: inset 0 0 0 1px rgba(16,45,73,.08), 0 1px 2px rgba(16,45,73,.18);
}
.au-btn--blue:hover:not(:disabled) {
  transform: translateY(-1px);
  background-color: var(--au-blue-btn-hover);
  box-shadow: inset 0 0 0 1px rgba(16,45,73,.08), 0 1px 2px rgba(16,45,73,.18), 0 8px 18px -10px rgba(16,45,73,.4);
}
.au-btn--sec, .au-btn--google, .au-btn--microsoft {
  color: var(--au-ink);
  background-color: var(--au-card);
  box-shadow: inset 0 0 0 1.5px var(--au-line), var(--au-lift);
}
.au-btn--sec:hover:not(:disabled), .au-btn--google:hover:not(:disabled), .au-btn--microsoft:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1.5px var(--au-accent), var(--au-lift);
}
.au-btn__g { flex: none; width: 18px; height: 18px; }
.au-btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
/* disabled: a flat quiet fill, never a faded colour (a faded orange reads brown on the dark card) */
.au-btn:disabled:not(.is-busy):not(.is-done):not(.is-wait) { color: var(--au-slate); background-color: var(--au-raised); box-shadow: none; cursor: default; }
.au-btn.is-busy, .au-btn.is-done { opacity: 1; cursor: progress; }
/* waiting out a limit: a quiet pill with the clock, not a faded orange */
.au-btn.is-wait, .au-btn.is-wait:hover {
  opacity: 1;
  cursor: default;
  transform: none;
  color: var(--au-ink-2);
  background-color: var(--au-raised);
  box-shadow: inset 0 0 0 1.5px var(--au-line);
  font-variant-numeric: tabular-nums;
}
.au-btn:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 3px; }
.au-btn + .au-btn { margin-top: 10px; }
#google-option .au-btn, #microsoft-option .au-btn { margin-top: 0; }
/* Google and Microsoft one above the other, the pair's gap as two buttons' (.au-btn + .au-btn) */
#google-option:not([hidden]) + #microsoft-option .au-btn { margin-top: 10px; }

/* busy: three leaning strokes (never a spinner); the label becomes a verb */
.au-load { display: inline-flex; align-items: center; gap: 4px; height: 16px; }
.au-load > i {
  display: block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background-color: #006bcb;
  transform: skewX(-14deg) rotate(-8deg);
  scale: 1 .8;
}
.au-load > i:nth-child(2) { background-color: #102d49; }
.au-btn--blue .au-load > i { background-color: #bfe3ff; }
.au-btn--blue .au-load > i:nth-child(2) { background-color: #ffffff; }
.au-btn--sec .au-load > i, .au-btn--google .au-load > i, .au-btn--microsoft .au-load > i { background-color: var(--au-load-a); }
.au-btn--sec .au-load > i:nth-child(2), .au-btn--google .au-load > i:nth-child(2), .au-btn--microsoft .au-load > i:nth-child(2) { background-color: var(--au-load-b); }

/* success inside a button: a leaning check drawn by two strokes */
.au-tick { position: relative; display: inline-block; width: 22px; height: 20px; transform: skewX(-8deg); }
.au-tick > i {
  position: absolute;
  left: 7px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 100%;
}
.au-tick > i:nth-child(1) { height: 8px; transform: rotate(-45deg); }
.au-tick > i:nth-child(2) { height: 17px; transform: rotate(40deg); }
.au-btn.is-done .au-btn__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }

/* the form-level line: under the last field, above the button */
.au-msg {
  position: relative;
  margin: 0 0 16px;
  padding: 12px 14px 12px 30px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.au-msg::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  transform: skewX(-14deg) rotate(-8deg);
}
.au-msg--err { color: var(--au-err-ink); background: var(--au-err-bg); box-shadow: inset 0 0 0 1px var(--au-err-ring); }
.au-msg--err::before { background: var(--au-ember); }
.au-msg--info, .au-msg--ok { color: var(--au-ink); background: var(--au-info-bg); box-shadow: inset 0 0 0 1px var(--au-info-ring); }
.au-msg--info::before, .au-msg--ok::before { background: var(--au-accent); }
.au-msg a, .au-msg .au-link { font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.au-msg__acts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
/* the wait bar: a 3px flat bar that empties over the wait (auth-core.js countdown) */
.au-wait { display: block; height: 3px; margin: 10px 0 2px; border-radius: 2px; overflow: hidden; background: var(--au-err-ring); }
.au-msg--info .au-wait, .au-msg--ok .au-wait { background: var(--au-info-ring); }
.au-wait > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--au-ember);
  transform: scaleX(1);
  transform-origin: left center;
  transition-property: transform;
  transition-timing-function: linear;
}
.au-msg--info .au-wait > i, .au-msg--ok .au-wait > i { background: var(--au-accent); }
.au-wait.is-run > i { transform: scaleX(0); }

/* "or" on a hairline */
.au-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 13px;
  line-height: 1;
  color: var(--au-slate);
}
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }

/* text buttons and links */
.au-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font: 500 14px/1.5 var(--v6-body);
  color: var(--au-link);
  text-decoration: none;
  cursor: pointer;
}
.au-link:hover { color: var(--au-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.au-link:disabled { color: var(--au-slate); cursor: default; text-decoration: none; }
.au-link .au-btn__lab { display: inline; overflow: visible; }
.au-link.is-wait { font-variant-numeric: tabular-nums; }
.au-link svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; }
.au-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; }
/* a line of links or a hint straight above a button keeps its distance */
.au-links + .au-btn, .au-hint + .au-btn { margin-top: 18px; }
.au-card a:focus-visible, .au-card button:focus-visible:not(.au-btn), .au-card input[type="radio"]:focus-visible {
  outline: 2px solid var(--au-accent);
  outline-offset: 3px;
}

.au-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--au-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--au-slate);
}
.au-foot a { color: var(--au-link); font-weight: 500; text-decoration: none; }
.au-foot a:hover { color: var(--au-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.au-legal { margin: 4px 0 18px; font-size: 13px; line-height: 1.5; color: var(--au-slate); }
.au-legal a { color: var(--au-link); font-weight: 500; text-decoration: none; }
.au-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the success mark: the 80×72 mark at 72px, its strokes drawn one after another */
.au-mark { display: block; width: 72px; height: 65px; margin: 0 0 18px -12px; } /* -12px: the drawn strokes, not the box, line up with the text */
.au-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.au-mark path { stroke: var(--au-accent); transform-box: fill-box; transform-origin: 50% 100%; }
.au-mark .au-mark__s2 { stroke: var(--au-orange); }

/* a short list with tiles (the company's three documents) */
.au-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.au-list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--au-ink);
  box-shadow: inset 0 0 0 1px var(--au-line);
}
.au-list .au-choice__tile { grid-row: auto; flex: none; width: 32px; height: 32px; border-radius: 10px; }
.au-list .au-choice__tile svg { width: 18px; height: 18px; }

/* visually hidden, still read */
.au-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
/* a skeleton line while one quick read is out (the invitation page, at most 150ms) */
.au-skel { display: block; height: 14px; margin: 6px 0 14px; border-radius: 7px; background: var(--au-raised); }
.au-skel + .au-skel { width: 64%; }

/* ---- phone and narrow (< 960px): a blue band with the lockup, then the card -- */
@media (max-width: 959.98px) {
  body.au { display: block; background: var(--au-page); }
  .au-side {
    --au-loose: 16px;
    position: relative;
    height: 88px;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
  }
  .au-brand { align-self: center; }
  .au-side .lockup { height: 46px; }
  .au-head { display: none; }
  .au-poster { left: auto; right: -14px; top: 50%; width: auto; height: 150%; }
  .au-main {
    display: block;
    min-height: 0;
    padding: 16px 16px 32px;
  }
  .au-card { margin: 0 auto; }
  .au-foot { flex-direction: column; align-items: center; text-align: center; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
  .au-side { padding: 0 32px; }
  .au-main { padding: 32px 32px 56px; }
  .au-card { padding: 36px; }
}
@media (max-width: 599.98px) {
  .au-card { padding: 24px 20px; }
  .au-ttl { font-size: 27px; }
  .au-inp, .au-code__in { font-size: 16px; }
  .au-code { width: 100%; grid-template-columns: repeat(6, minmax(0, 44px)); }
  .au-code__cell { height: 52px; font-size: 22px; }
  .au-code__caret { height: 52px; }
  .au-choice { padding: 13px 40px 13px 14px; column-gap: 12px; }
  .au-choice::after { right: 14px; }
}

/* reduced motion: nothing lifts or presses (the rest of the calm rules are in kd6-auth-motion.css) */
@media (prefers-reduced-motion: reduce) {
  .au-btn:hover:not(:disabled), .au-btn:active:not(:disabled) { transform: none; }
}