/* Minimal LLB MU-plugin stylesheet: login-only presentation and functional utility tokens. */
:root{--ll-ink:#16202a;--ll-muted:#63594d;--ll-line:#ded6ca;--ll-bg:#f8f4ee;--ll-card:#fffdf9;--ll-accent:#9a5728}
*{box-sizing:border-box}
body.login{margin:0;background:linear-gradient(135deg,#f8f4ee,#fffaf2);color:var(--ll-ink);font-family:Georgia,'Times New Roman',serif}
body.login #login{width:min(100% - 2rem,800px);padding-top:2rem}
body.login .language-switcher{display:none}
body.login #login>h1{display:none}
body.login .llb-login-brand{display:grid;justify-items:center;gap:36px;padding-top:36px;margin:0 0 36px;text-align:center}
body.login .llb-login-brand__studylaw{display:block;width:auto;height:2.34rem}
body.login .llb-login-brand__logo{display:block;width:auto;height:4.125rem}
body.login form{width:min(100% - 2rem,640px);margin:0 auto;border:1px solid var(--ll-line);border-radius:18px;box-shadow:0 18px 40px rgba(70,45,20,.08);font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:1.15rem}
/* WordPress core adds a .shake class + keyframe animation to <form> on
   login/lostpassword error (wp_shake_js(), a brief horizontal jitter).
   Disabled via the shake_error_codes filter in LLB-engine.php instead of
   fighting the animation here; this rule is a belt-and-suspenders fallback
   in case that script still gets enqueued for any reason. This was also
   very likely the real cause of an apparent centering "bug" chased earlier:
   a screenshot/measurement taken while the shake was still mid-animation
   reads as an inconsistent, transform-shifted position that has nothing to
   do with the form's actual static layout. */
body.login form.shake{animation:none}
body.login form input[type="submit"]{font-family:inherit}
body.login form input[type="text"],body.login form input[type="password"],body.login form input[type="email"]{font-family:inherit;font-size:1.15rem}
/* Chrome/Edge autofill imposes its own UA font on an input until the user
   focuses it, which read as "small" on first paint whenever the browser
   autofilled the username -- force our own font (and suppress the yellow
   autofill background via the long transition-delay trick) so it matches
   immediately. */
body.login form input:-webkit-autofill,
body.login form input:-webkit-autofill:hover,
body.login form input:-webkit-autofill:focus{
  font-family:inherit;
  font-size:1.15rem;
  -webkit-text-fill-color:var(--ll-ink);
  transition:background-color 9999s ease-in-out 0s;
}
body.login .button-primary{border:0;border-radius:999px;background:var(--ll-accent);font-weight:800}
body.login #backtoblog{display:none}
/* The default "Lost your password?" / "Log in" link and the lostpassword
   instruction notice both render as siblings *before* <form>, outside the
   card. #nav is replaced by .llb-login-inline-nav, injected inside the form
   itself via the login_form/lostpassword_form hooks. The notice is kept in
   place but restyled (no coloured accent, sans-serif) and visually fused to
   the top of the form immediately below it, so the two read as one card. */
body.login #nav{display:none}
/* UI-002 (invitation-access-and-affiliate-attribution charter,
   2026-08-20): WordPress core's own "Remember Me" checkbox, hidden
   rather than unhooked -- there is no filter/action to remove it from
   wp-login.php's own markup, and hiding it (matching #backtoblog above)
   leaves its underlying rememberme POST handling untouched. */
body.login .forgetmenot{display:none}
/* WordPress can stack more than one notice before the form (e.g. the
   lostpassword instruction *and* a "the email could not be sent" error at
   the same time) -- style every .notice generically and chain however many
   there are into the form below using :has(), rather than assuming exactly
   one, which previously left a detached red error box splitting the card
   in half. */
body.login .notice{width:min(100% - 2rem,640px);margin:0 auto;padding:1rem 1.5rem;border:1px solid var(--ll-line);border-radius:18px;box-shadow:none;background:var(--ll-card);color:var(--ll-ink);font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:1.05rem}
body.login .notice + .notice{border-top:0;margin-top:0}
body.login .notice:has(+ .notice),
body.login .notice:has(+ form){border-bottom:0;border-radius:18px 18px 0 0}
body.login .notice + .notice:has(+ form),
body.login .notice + .notice:has(+ .notice){border-radius:0}
/* box-shadow isn't clipped by sibling elements -- whichever box owns it
   would still visibly bleed onto whatever sits flush against it, so the
   fused notice(s)+form stack drops the shadow entirely rather than chase
   an unfixable overlap. The shadow only survives on a lone form with no
   preceding notice. */
body.login .notice + form{border-top:0;border-radius:0 0 18px 18px;box-shadow:none}
/* UI-002/UI-003: left-aligned, styled to match the register page's own
   "Password" label (.llb-register-form label, theme.css:756:
   font:700 .9rem/1.2) -- applies to both the login page's "Lost your
   password?" link and the Lost Password page's "Log in" link, since both
   render through this one shared class (legal_learning_login_inline_nav()). */
body.login .llb-login-inline-nav{display:block;width:100%;clear:both;margin:1rem 0 0;text-align:left;font:700 .9rem/1.2 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}
body.login .llb-login-inline-nav a{color:#7a3f18;font-weight:800;text-decoration:none}
/* UI-002/D7: the login page's own new Register link, 12px below the
   "Lost your password?" link above it. */
body.login .llb-login-register-link{margin-top:12px}
/* Passkey login button (Phase 5) -- login_form fires inside <form> before
   the username/password fields exist in source order, but visually reads
   fine first since it's an alternate, equally-valid sign-in path, not a
   secondary afterthought. UI-002: 18px space below it. */
body.login [data-passkey-login-status]:empty{display:none}
/* Alternative sign-in options sit below the primary Log In button
   (operator-requested, 2026-08-25). Done with flex order rather than by moving
   the login_form hooks, because WordPress fires that action at one fixed point
   in the form and every other consumer of it would move too.

   The form becomes a flex column with a single gap, so vertical rhythm is even
   by construction instead of by hand-tuned per-element margins -- the previous
   arrangement produced the 18px space below the passkey pill via padding on the
   *Google* pill, which only stayed even while both were present. Children have
   their margins zeroed so the gap is the only thing setting spacing.

   Hidden children (.forgetmenot, and the status paragraph while empty) are
   display:none and so contribute no gap. */
body.login #loginform{display:flex;flex-direction:column;gap:14px}
body.login #loginform>*{margin:0}
body.login #loginform>[data-passkey-login-status]{order:3}
body.login #loginform>.llb-google-login{order:4}
/* Submit row: "Lost your password?" on the left, Log In on the right. */
body.login #loginform p.submit{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.login #loginform p.submit .llb-login-inline-nav{margin:0}
/* Extra separation before the alternative sign-in options, so they read as a
   distinct group rather than a continuation of the primary action. */
body.login #loginform>.llb-passkey-login{order:2;margin-top:28px}
/* WordPress core gives the login inputs their own bottom margin, which stacks
   on top of the flex gap and made the first gap larger than the rest. Zeroed so
   the gap is the single thing setting vertical rhythm. */
/* Core sets margin:0 6px 16px 0 on the login inputs and margin:-10px 0 20px on
   p.submit. Those tie or beat the earlier selectors here on specificity, and
   they stack on the flex gap, so vertical rhythm came out uneven. Matched with
   element+class selectors that outrank them, leaving the gap as the only thing
   that sets spacing. */
body.login #loginform input.input,
body.login #loginform input[type=text],
body.login #loginform input[type=email],
body.login #loginform input[type=password]{margin:0}
body.login #loginform p.submit{margin:0;padding:0}
body.login .llb-passkey-login{text-align:center;margin:0}
body.login .llb-google-login{text-align:center;margin:0}
body.login .llb-passkey-login button,body.login .llb-google-login button{width:100%;min-height:2.5rem;border:1px solid var(--ll-line);border-radius:999px;background:#fff;color:var(--ll-ink);font:700 .95rem/1 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
body.login .llb-passkey-login button:hover,body.login .llb-google-login button:hover{background:var(--ll-bg)}
body.login .llb-signin-icon{width:1rem;height:1rem;flex:0 0 1rem}
body.login .llb-signin-icon--passkey{fill:currentColor}
body.login #loginform p.submit{margin:0;padding:0}