/* Lemma sign-in: the owner's two designs, shown in turn (app/main.py LOGIN_LOOKS):
   A = docs/lemma-site/m12-login-a.png (1536 x 1024), B = docs/lemma-site/m13-login-b.png (1672 x 941).
   The design is a stage scaled to fit the window (--u = one design pixel); the picture is the design with the card and
   the words taken out (media/lemma/login-a|b.webp), so the words and the form sit back on it as text. The card never
   shrinks below --c (readable form on small laptops). Only Lemma addresses load this file; Autom8Way keeps login.css.
   The forgot, link and reset pages fill the same card with the lg-* classes. */
.lgx{--ink:#0e1530;--grey:#5b6680;--blue:#1a5cff;--line:#dde2eb;position:relative;min-height:100vh;overflow:hidden;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.lgx-a{--W:1536;--H:1024;--pic:url("/static/media/lemma/login-a.webp");background:#eef1f6}
.lgx-b{--W:1672;--H:941;--pic:url("/static/media/lemma/login-b.webp");background:#f2f6fc}
.lgx::before{content:"";position:absolute;inset:-60px;background:var(--pic) center/cover;filter:blur(30px)}   /* fills past the stage */
.lgx a{text-decoration:none}
.lgx-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100vw,calc(100vh * var(--W) / var(--H)));aspect-ratio:var(--W)/var(--H);container-type:size;
  background:var(--pic) 0 0/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 98%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}
.lgx-stage>*{--u:calc(100cqw / var(--W));--c:max(var(--u),.82px)}
/* the words on the picture */
.lgx-art{position:absolute;inset:0;pointer-events:none}
.lgx-art>*{position:absolute;margin:0}
.lgx-art a{pointer-events:auto}
/* A */
.lgx-a-title{left:calc(1080 * var(--u));top:calc(334 * var(--u));font-size:calc(43.5 * var(--u));line-height:calc(50 * var(--u));font-weight:300;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.lgx-a-title span{color:#1a5cff;font-weight:400}
.lgx-a-tags{left:calc(1081 * var(--u));top:calc(465 * var(--u));font-size:calc(11.5 * var(--u));line-height:calc(14 * var(--u));font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:#4d5878;white-space:nowrap}
.lgx-a-f{top:calc(889 * var(--u));font-size:calc(13 * var(--u));line-height:calc(19 * var(--u));color:#66708a;white-space:nowrap}
.lgx-a-f b{display:block;font-size:calc(14.5 * var(--u));font-weight:500;color:var(--ink)}
.lgx-a-f1{left:calc(1006 * var(--u))}.lgx-a-f2{left:calc(1160 * var(--u))}.lgx-a-f3{left:calc(1345 * var(--u))}
/* B */
.lgx-b-eyebrow{left:calc(736 * var(--u));top:calc(321 * var(--u));font-size:calc(13.5 * var(--u));line-height:calc(16 * var(--u));font-weight:500;letter-spacing:.5em;text-transform:uppercase;color:#7d879c;white-space:nowrap}
.lgx-b-title{left:calc(735 * var(--u));top:calc(352 * var(--u));font-size:calc(52 * var(--u));line-height:calc(53 * var(--u));font-weight:700;letter-spacing:0;color:#0c1328;white-space:nowrap}
.lgx-b-title span{background:linear-gradient(90deg,#2b6cf6 0%,#5c6cf3 45%,#a35ae8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lgx-b-lead{left:calc(737 * var(--u));top:calc(476 * var(--u));font-size:calc(18 * var(--u));line-height:calc(25.5 * var(--u));color:#5d6780;white-space:nowrap}
.lgx-b-mods{inset:0;padding:0;list-style:none}
.lgx-b-mods li{position:absolute;font-size:calc(13 * var(--u));line-height:calc(16 * var(--u));color:#5d6780;white-space:nowrap}
.lgx-b-mods b{display:block;margin-bottom:calc(4 * var(--u));font-size:calc(14 * var(--u));line-height:calc(16 * var(--u));font-weight:600;color:var(--ink)}
.lgx-b-mods .m1{left:calc(1162 * var(--u));top:calc(171 * var(--u))}
.lgx-b-mods .m2{left:calc(1263 * var(--u));top:calc(262 * var(--u))}
.lgx-b-mods .m3{left:calc(1318 * var(--u));top:calc(380 * var(--u))}
.lgx-b-mods .m4{left:calc(1284 * var(--u));top:calc(510 * var(--u))}
.lgx-b-mods .m5{left:calc(1195 * var(--u));top:calc(622 * var(--u))}
.lgx-b-mods .m6{left:calc(1054 * var(--u));top:calc(710 * var(--u))}
/* the card: A frosted glass, B white with a footer bar */
.lgx-card{position:absolute;display:flex;flex-direction:column}
.lgx-a .lgx-card{left:calc(146 * var(--u));top:calc(116 * var(--u));width:calc(476 * var(--c));padding:calc(44 * var(--c)) calc(52 * var(--c)) calc(45 * var(--c));
  border:1px solid rgba(255,255,255,.75);border-radius:calc(22 * var(--c));background:linear-gradient(180deg,rgba(250,251,255,.80),rgba(241,244,251,.74));
  -webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);box-shadow:0 30px 60px rgba(40,60,110,.12),inset 0 1px 0 rgba(255,255,255,.8)}
.lgx-b .lgx-card{left:calc(144 * var(--u));top:calc(67 * var(--u));width:calc(458 * var(--c));padding:calc(37 * var(--c)) 0 0;
  border:1px solid #e8ecf2;border-radius:calc(12 * var(--c));background:#fff;box-shadow:0 20px 50px rgba(30,60,120,.08)}
.lgx-b .lgx-card>.lgx-logo,.lgx-b .lgx-body{padding:0 calc(46 * var(--c)) 0 calc(47 * var(--c))}
.lgx-card{font-size:calc(14 * var(--c))}
/* logo */
.lgx-logo{display:flex;align-items:flex-end;align-self:flex-start;color:var(--ink)}
.lgx-a .lgx-mark{width:auto;height:calc(46 * var(--c))}
.lgx-a .lgx-word{width:auto;height:calc(37 * var(--c));margin:0 0 0 calc(18 * var(--c))}
.lgx-tagline{margin:calc(16 * var(--c)) 0 0;font-size:calc(11 * var(--c));line-height:calc(14 * var(--c));font-weight:500;letter-spacing:.45em;text-transform:uppercase;color:#56607b}
.lgx-tagline i{font-style:normal;margin:0 .55em 0 .3em}
.lgx-b .lgx-logo{align-items:center}
.lgx-b .lgx-mark{width:auto;height:calc(56 * var(--c));margin-left:calc(15 * var(--c))}
.lgx-b .lgx-logo span{display:flex;flex-direction:column;margin-left:calc(14 * var(--c))}
.lgx-b .lgx-word{width:auto;height:calc(31 * var(--c))}
.lgx-b .lgx-logo small{margin-top:calc(2 * var(--c));font-size:calc(17 * var(--c));line-height:1;font-weight:500;color:var(--ink)}
/* form */
.lg-kicker{display:flex;align-items:center;gap:calc(8 * var(--c));margin:calc(27 * var(--c)) 0 calc(-14 * var(--c));font-size:calc(11 * var(--c));line-height:calc(14 * var(--c));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#56607b}
.lg-kicker span{display:grid;place-items:center;color:#1a5cff}.lg-kicker .icon{width:calc(14 * var(--c));height:calc(14 * var(--c))}
.lg-h{margin:calc(27 * var(--c)) 0 0;font-size:calc(34 * var(--c));line-height:calc(40 * var(--c));font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lgx-b .lg-h{margin-top:calc(38 * var(--c));font-size:calc(33 * var(--c));font-weight:700}
.lg-sub{margin:calc(8 * var(--c)) 0 0;font-size:calc(15.5 * var(--c));line-height:calc(20 * var(--c));color:var(--grey)}
.lgx-b .lg-sub{font-size:calc(16 * var(--c));line-height:calc(22 * var(--c))}
.lg-sub b{color:var(--ink)}
.lg-msg{margin:calc(16 * var(--c)) 0 0;padding:calc(9 * var(--c)) calc(12 * var(--c));border-radius:calc(6 * var(--c));font-size:calc(13.5 * var(--c));font-weight:600}
.lg-msg.bad{background:#fdecec;color:#c43b3b}.lg-msg.good{background:#e9f7f0;color:#13804f}
.lgx-tab-r{position:absolute;opacity:0;pointer-events:none}
.lgx-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:calc(27.5 * var(--c));padding:0;border-radius:calc(6 * var(--c));background:rgba(232,236,244,.75)}
.lgx-tabs label{display:grid;place-items:center;height:calc(42 * var(--c));border:1px solid transparent;border-radius:calc(6 * var(--c));font-size:calc(14.5 * var(--c));color:#6e7891;cursor:pointer}
#lgx-t1:checked~.lgx-tabs label[for=lgx-t1],#lgx-t2:checked~.lgx-tabs label[for=lgx-t2]{border-color:#1a5cff;background:#fff;color:#1a5cff;font-weight:500}
#lgx-t1:focus-visible~.lgx-tabs label[for=lgx-t1],#lgx-t2:focus-visible~.lgx-tabs label[for=lgx-t2]{outline:3px solid rgba(26,92,255,.35);outline-offset:2px}
#lgx-t1:checked~.lgx-f2,#lgx-t2:checked~.lgx-f1{display:none}
.lg-form{margin-top:calc(16.5 * var(--c))}
.lgx-b .lg-form{margin-top:calc(30.5 * var(--c))}
.lg-form label{display:block;margin:0 0 calc(7.5 * var(--c));font-size:calc(14 * var(--c));line-height:calc(17 * var(--c));font-weight:500;color:var(--ink)}
.lgx-b .lg-form>label{margin-bottom:calc(8.5 * var(--c))}
.lg-field{position:relative;margin-bottom:calc(17 * var(--c))}
.lgx-b .lg-field{margin-bottom:calc(19.5 * var(--c))}
.lg-field>.icon{position:absolute;left:calc(15 * var(--c));top:50%;width:calc(18 * var(--c));height:calc(18 * var(--c));transform:translateY(-50%);color:#5f6a80;pointer-events:none;z-index:1}
.lg-field input{width:100%;height:calc(46 * var(--c));padding:0 calc(44 * var(--c));border:1px solid var(--line);border-radius:calc(6 * var(--c));background:#fff;font:inherit;font-size:calc(14.5 * var(--c));color:var(--ink);box-sizing:border-box}
.lgx-b .lg-field input{height:calc(48.5 * var(--c));border-radius:calc(8 * var(--c))}
.lg-field input::placeholder{color:#7b85a0}
.lg-field input:focus{outline:none;border-color:#1a5cff;box-shadow:0 0 0 3px rgba(26,92,255,.14)}
.lg-field .pw-wrap{display:block;position:static}
.lg-field .pw-eye{position:absolute;right:calc(12 * var(--c));top:50%;transform:translateY(-50%);border:0;background:transparent;color:#5f6a80;cursor:pointer;padding:calc(5 * var(--c))}
.lg-field .pw-eye .icon{width:calc(19 * var(--c));height:calc(19 * var(--c))}
.lg-row{display:flex;align-items:center;justify-content:space-between;height:calc(20 * var(--c));margin:calc(-4 * var(--c)) 0 calc(20 * var(--c))}
.lgx-b .lg-row{margin:calc(-4.5 * var(--c)) 0 calc(19 * var(--c))}
.lg-row a{font-size:calc(12.5 * var(--c));font-weight:500;color:#1a5cff}
.lg-form .lg-check{display:flex;align-items:center;gap:calc(10 * var(--c));margin:0;font-size:calc(14 * var(--c));font-weight:400;color:var(--ink);cursor:pointer}
.lg-check input{width:calc(19 * var(--c));height:calc(19 * var(--c));margin:0;accent-color:#1a5cff}
.lg-primary{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--c));width:100%;height:calc(47 * var(--c));border:0;border-radius:calc(8 * var(--c));
  background:linear-gradient(90deg,#3d82ff,#1d5ff9 45%,#2f6bff);color:#fff;font:inherit;font-size:calc(15.5 * var(--c));font-weight:500;cursor:pointer;box-shadow:0 10px 22px rgba(26,92,255,.28)}
.lgx-b .lg-primary{height:calc(49 * var(--c));background:#1f6bff;box-shadow:0 6px 14px rgba(31,107,255,.2)}
.lg-primary:hover{filter:brightness(.95)}
.lg-or{display:flex;align-items:center;gap:calc(14 * var(--c));margin:calc(21 * var(--c)) 0;font-size:calc(11.5 * var(--c));line-height:calc(14 * var(--c));color:#8a93a8}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:#e3e7ef}
.lg-secondary{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--c));width:100%;height:calc(49 * var(--c));border:1px solid var(--line);border-radius:calc(8 * var(--c));background:#fff;color:var(--ink);font:inherit;font-size:calc(14.5 * var(--c));font-weight:500;cursor:pointer}
.lg-secondary .icon{width:calc(19 * var(--c));height:calc(19 * var(--c));color:#1a5cff}
.lg-secondary:hover{border-color:#b9c6e2}
.lg-form .lg-secondary{margin-top:calc(16 * var(--c))}
.lg-or+.lg-secondary{margin-top:0}
.lg-back{margin:calc(20 * var(--c)) 0 0;font-size:calc(14 * var(--c))}.lg-back a{color:#1a5cff;font-weight:500}
.lgx-terms{margin:calc(32.5 * var(--c)) 0 0;text-align:center;font-size:calc(12.2 * var(--c));line-height:calc(16 * var(--c));color:#5d6780;white-space:nowrap}
.lgx-terms a{color:#1a5cff;font-weight:500}
/* card footers */
.lgx-a .lgx-foot{margin:calc(40 * var(--c)) 0 0;text-align:center;font-size:calc(12.5 * var(--c));color:#5d6780}
.lgx-a .lgx-foot a{margin-left:calc(4 * var(--c));color:#0d56ee;font-weight:500}
.lgx-b .lgx-foot{display:flex;align-items:center;justify-content:space-between;height:calc(57 * var(--c));margin-top:calc(39 * var(--c));padding:0 calc(33 * var(--c)) 0 calc(35 * var(--c));border-top:1px solid #e8ecf2;font-size:calc(14 * var(--c))}
.lgx-b .lgx-foot p{margin:0;color:#5d6780}.lgx-b .lgx-foot p a{color:#1a5cff;font-weight:500}
.lgx-lang{position:relative}
.lgx-lang summary{display:flex;align-items:center;gap:calc(9 * var(--c));cursor:pointer;list-style:none;color:var(--ink)}
.lgx-lang summary::-webkit-details-marker{display:none}
.lgx-lang summary .icon{width:calc(17 * var(--c));height:calc(17 * var(--c));color:#5f6a80}
.lgx-lang summary .icon:last-child{width:calc(13 * var(--c));height:calc(13 * var(--c))}
.lgx-lang div{position:absolute;bottom:calc(30 * var(--c));left:0;z-index:5;display:grid;min-width:130px;padding:6px;background:#fff;border:1px solid #dfe3ed;border-radius:8px;box-shadow:0 10px 24px rgba(20,40,80,.08)}
.lgx-lang div a{padding:7px 10px;border-radius:6px;color:var(--ink)}
.lgx-lang div a:hover{background:#eef3ff}
.lgx a:focus-visible,.lgx button:focus-visible,.lgx summary:focus-visible{outline:3px solid rgba(26,92,255,.4);outline-offset:2px}
/* phones and tall windows: the picture behind, the card alone in the middle at full size */
@media (max-width:900px),(max-aspect-ratio:6/5){
  .lgx-stage{position:relative;left:auto;top:auto;transform:none;width:auto;aspect-ratio:auto;min-height:100vh;container-type:normal;
    display:flex;justify-content:center;align-items:flex-start;padding:32px 16px;background:none;-webkit-mask-image:none;mask-image:none}
  .lgx-stage>*{--u:1px;--c:1px}
  .lgx-art{display:none}
  .lgx .lgx-card{position:relative;left:auto;top:auto;width:100%;max-width:476px}
  .lgx-terms{white-space:normal}
}
[dir="rtl"] .lgx-card,[dir="rtl"] .lgx-art>*{direction:rtl}
[dir="rtl"] .lg-field>.icon{left:auto;right:calc(15 * var(--c))}
[dir="rtl"] .lg-field .pw-eye{right:auto;left:calc(12 * var(--c))}
[dir="rtl"] .lgx-a .lgx-word{margin:0 calc(13 * var(--c)) calc(1 * var(--c)) 0}
[dir="rtl"] .lgx-b .lgx-logo span{margin:0 calc(14 * var(--c)) 0 0}
[dir="rtl"] .lgx-b-lead{top:calc(496 * var(--u))}
[dir="rtl"] .lg-kicker,[dir="rtl"] .lgx-tagline,[dir="rtl"] .lgx-a-tags,[dir="rtl"] .lgx-b-eyebrow{letter-spacing:normal}