/* Guardian artwork login. Intentionally scoped: authenticated workspaces are unaffected. */
#loginPage{--auth-primary:#2563eb;--auth-secondary:#09a9e5;--auth-navy:#0c1735;--auth-panel:#e8f5ff;background:radial-gradient(ellipse at 15% 35%,#e4f4ff,transparent 65%),linear-gradient(120deg,#f1f8fe,#fbfdff);}
#loginPage .public-header{background:rgba(255,255,255,.88);border-bottom:1px solid #e2edf8;backdrop-filter:blur(14px)}
#loginPage .public-brand span{color:#0f172a}#loginPage .public-nav button{color:#475569}
#loginPage .public-hero{max-width:1480px;margin:30px auto 60px;padding:0 28px;min-height:0;display:block;background:none!important}
#loginPage .public-auth-shell{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(390px,1fr);align-items:stretch;min-height:0;border-radius:30px;overflow:hidden;background:#fff;border:1px solid rgba(191,212,235,.36);box-shadow:0 24px 65px -20px rgba(58,105,154,.23)}
#loginPage .public-hero-copy.auth-crew-canvas{padding:0;min-width:0;min-height:0;position:relative;overflow:hidden;background:#e5f3ff;color:var(--auth-navy)}
/* Original art remains a precise responsive composition, rather than an oversized heading above new cartoons. */
#loginPage.guardian-ready .auth-crew-brand,#loginPage.guardian-ready #authCrewCaption{display:none}
#loginPage .auth-crew-stage.ga-stage{position:relative;inset:auto;width:100%;height:auto;min-height:0;overflow:hidden;transform:none;container-type:inline-size}
#loginPage .ga-composition{position:relative;width:100%;aspect-ratio:848/890;isolation:isolate;background:radial-gradient(ellipse at 15% 20%,#eef8ff 0,transparent 52%),linear-gradient(145deg,#e7f4ff 20%,#dbedff 63%,#e6f4ff 100%);overflow:hidden}
#loginPage .ga-background,#loginPage .ga-cast{position:absolute;inset:0;pointer-events:none}
#loginPage .ga-background{z-index:-1}
#loginPage .ga-wave{position:absolute;border-radius:45%;background:linear-gradient(145deg,rgba(143,197,247,.20),rgba(170,217,255,.05));}
#loginPage .ga-wave--left{width:55%;height:38%;left:-36%;top:40%;transform:rotate(-24deg)}
#loginPage .ga-wave--right{width:58%;height:39%;right:-24%;top:7%;transform:rotate(-16deg)}
#loginPage .ga-browser{position:absolute;top:10%;right:0;width:36%;height:auto;opacity:.9;pointer-events:none;mask-image:linear-gradient(to bottom,#000 75%,transparent)}
#loginPage .ga-brand{display:flex;align-items:center;gap:9px;font-size:clamp(18px,3.4cqw,29px);line-height:1;font-weight:900;letter-spacing:-.055em;color:#071434;white-space:nowrap}
#loginPage .ga-composition>.ga-brand{position:absolute;top:5.05%;left:9.2%;z-index:3}
#loginPage .ga-brand img{width:1.1em;height:1.16em;object-fit:contain;display:block}
#loginPage .ga-brand>span>span{color:#2162f8}
#loginPage .ga-copy{position:absolute;z-index:2;top:13.75%;left:9.2%;width:47%}
#loginPage .ga-copy h2{margin:0;color:#091739;font-size:6.05cqw;line-height:1.065;font-weight:900;letter-spacing:-.05em;text-wrap:nowrap}
#loginPage .ga-copy h2>span{color:#2161f7}
#loginPage .ga-copy p{margin:2.8cqw 0 0;font-size:1.86cqw;line-height:1.48;color:#426398;font-weight:400;letter-spacing:-.015em}
#loginPage .ga-actor{position:absolute;z-index:3;perspective:650px;pointer-events:none}
#loginPage .ga-actor--officer{z-index:2}
#loginPage .ga-body{position:absolute;inset:0;transform:rotate(var(--ga-lean,0deg));transform-origin:50% 94%;will-change:transform}
#loginPage .ga-pose{position:absolute;inset:0;backface-visibility:hidden;transform-origin:50% 80%;transition:opacity .16s ease,transform .25s cubic-bezier(.24,.72,.2,1)}
#loginPage .ga-pose--idle{opacity:1;transform:none}
#loginPage .ga-pose--private{opacity:0;transform:translateY(1.8%) scale(.985)}
#loginPage .ga-skin{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#loginPage .ga-contact-shadow{position:absolute;z-index:-1;left:12%;right:10%;height:5.5%;bottom:1.3%;border-radius:50%;background:rgba(38,119,185,.21);filter:blur(4px)}
#loginPage .ga-eye{position:absolute;display:block;transform:translate(-50%,-50%);pointer-events:none}
#loginPage .ga-eye-blink{display:block;width:100%;height:100%;transform-origin:50% 52%;transition:transform .07s ease}
#loginPage .ga-eye-surface{position:relative;display:block;width:100%;height:100%;border-radius:50%}
#loginPage .ga-eye--white .ga-eye-surface{overflow:hidden;background:radial-gradient(ellipse at 72% 30%,#fff 22%,#f6f7f9 54%,#c8d2df 100%);box-shadow:-1px 1px 1px rgba(3,12,35,.2),0 0 1px rgba(215,235,255,.5)}
#loginPage .ga-pupil{position:absolute;display:block;will-change:transform;background:radial-gradient(ellipse at 30% 20%,#1e3447 0,#030c1b 55%,#020812 90%);border-radius:50%;box-shadow:inset 1px 0 1px rgba(231,247,255,.15)}
#loginPage .ga-eye--bead .ga-pupil{inset:0;box-shadow:-1px 0 0 rgba(177,218,234,.3),inset 1px 1px 1px rgba(139,211,239,.38)}
#loginPage .ga-eye--white .ga-pupil{width:43%;height:56%;left:29%;top:24%}
#loginPage .ga-pupil:after{content:'';position:absolute;left:22%;top:17%;width:20%;height:19%;border-radius:50%;background:rgba(223,244,255,.8);filter:blur(.2px)}
#loginPage .ga-eye--white .ga-pupil:after{width:12%;height:12%;opacity:.5}
#loginPage .ga-blinking .ga-eye-blink{transform:scaleY(.06)}
#loginPage .ga-stage[data-privacy=true] .ga-pose--idle{opacity:0;transform:scale(.99)}
#loginPage .ga-stage[data-privacy=true] .ga-pose--private{opacity:1;transform:none;transition-delay:.06s}
#loginPage .ga-stage[data-privacy=true] .ga-actor--officer .ga-pose--idle{transform:rotateY(65deg);transition:transform .17s ease,opacity .13s ease}
#loginPage .ga-actor--officer .ga-pose--private{transform:rotateY(-45deg);transition-delay:0s}
#loginPage .ga-stage[data-privacy=true] .ga-actor--officer .ga-pose--private{transform:rotateY(0deg);transition-delay:.09s}
#loginPage .ga-stage[data-state=error] .ga-actor--officer{animation:ga-question .38s ease 1}
#loginPage .ga-stage[data-state=success] .ga-actor--cyan,#loginPage .ga-stage[data-state=success] .ga-actor--sky{animation:ga-cheer .52s ease 1}
#loginPage .ga-stage[data-state=ready] .ga-actor--cyan .ga-contact-shadow{opacity:.65}
#loginPage .ga-spark{position:absolute;display:block;width:1.7%;height:.6%;background:#367bff;border-radius:3px;box-shadow:7px -14px 0 -1px #5c91ff;transform:rotate(5deg)}
#loginPage .ga-spark--left{left:15.7%;top:44.7%;transform:rotate(-5deg)}
#loginPage .ga-spark--right{left:92%;top:45.6%;transform:rotate(-28deg)}
#loginPage .ga-card{position:absolute;top:70.1%;width:44%;height:25.85%;z-index:5;display:block;margin:0;padding:2.5cqw 3.6cqw;text-align:left;color:#0d1b3b;overflow:hidden;border:1px solid rgba(255,255,255,.86);border-radius:3cqw;background:linear-gradient(125deg,rgba(255,255,255,.78),rgba(250,254,255,.56));box-shadow:0 4px 18px rgba(68,138,203,.025);cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease;font-family:inherit}
#loginPage .ga-card--cursor{left:5.05%}#loginPage .ga-card--privacy{left:52.05%}
#loginPage .ga-card-title{position:absolute;top:2.5cqw;left:3.6cqw;display:block;font-size:2.25cqw;line-height:1.3;font-weight:850;letter-spacing:-.025em}
#loginPage .ga-card-copy{position:absolute;top:5.5cqw;left:3.6cqw;display:block;z-index:2;color:#60789d;font-size:1.78cqw;line-height:1.32;font-weight:400;letter-spacing:-.025em;margin-top:0}
#loginPage .ga-card-art{position:absolute;display:block;bottom:.4%;left:3%;width:94%;height:58%;object-fit:contain;object-position:50% 100%;border-radius:0 0 2cqw 2cqw;mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 98%,transparent 100%);pointer-events:none}
#loginPage .ga-card-hint{position:absolute;z-index:3;bottom:1cqw;right:1.4cqw;background:#f2f9ff;color:#2a62b1;border-radius:20px;padding:4px 8px;font-size:1.35cqw;line-height:1.2;opacity:0;transition:opacity .15s ease;box-shadow:0 2px 8px rgba(20,55,90,.08)}
#loginPage .ga-card:hover{border-color:rgba(82,147,244,.43);box-shadow:0 8px 20px rgba(47,117,194,.08)}
#loginPage .ga-card:hover .ga-card-hint,#loginPage .ga-card:focus-visible .ga-card-hint{opacity:1}
#loginPage .ga-card:focus-visible{outline:3px solid #2563eb;outline-offset:-3px}
#loginPage .ga-card[aria-pressed=true]{border-color:#76aff4;background:linear-gradient(120deg,#f5fbff,#e7f3ff)}
#loginPage .ga-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Form: actual controls stay native and functional. Match the approved composition's spacing. */
#loginPage .public-access-card{border:0;border-radius:0;box-shadow:none;background:linear-gradient(125deg,#fff 75%,#fbfdff);padding:43px clamp(28px,3.8vw,60px) 40px;display:flex;flex-direction:column;justify-content:center;min-width:0}
#loginPage .public-access-panel{padding:0!important}
#loginPage .ga-form-brand{font-size:26px;margin:0 0 42px;letter-spacing:-.05em}
#loginPage .public-access-heading{font-size:clamp(28px,2.9vw,40px);color:#071434;letter-spacing:-.05em;line-height:1.15;font-weight:900;text-align:left}
#loginPage .public-access-desc{font-size:14px;line-height:1.45;color:#7585a0;text-align:left;margin:10px 0 30px;max-width:none}
#loginPage .form-label{display:block;font-size:12px;font-weight:700;color:#1b2846;margin:18px 0 8px;letter-spacing:0}
#loginPage .form-control,#loginPage .field input,#loginPage .field select,#loginPage .field textarea{border:1px solid #dce4f0!important;border-radius:12px!important;padding:13px 15px!important;background:#fff!important;box-shadow:0 6px 16px rgba(19,56,109,.025);min-height:47px}
#loginPage .form-control{font-size:14px;color:#16274c;width:100%;outline:none}
#loginPage .form-control::placeholder{color:#8792a6;opacity:1}
#loginPage input.ga-username-field,#loginPage input.ga-password-field{padding-left:44px!important;background-repeat:no-repeat!important;background-position:15px 50%!important;background-size:17px 17px!important}
#loginPage input.ga-username-field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a1b9' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='3.5'/%3E%3Cpath d='M5 21v-3c0-6 14-6 14 0v3H5Z'/%3E%3C/svg%3E")!important}
#loginPage input.ga-password-field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a1b9' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 15v2'/%3E%3C/svg%3E")!important}
#loginPage .form-control:focus,#loginPage .field input:focus,#loginPage .field select:focus,#loginPage .field textarea:focus{border-color:#5f98f5!important;box-shadow:0 0 0 3px rgba(45,118,243,.11)!important}
#loginPage #authPasswordToggle{width:35px;height:35px;border-radius:7px;right:7px!important}
#loginPage #authPasswordToggle:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
#loginPage .login-button,#loginPage .public-primary-cta,#loginPage .signup-inline-button.primary{background:linear-gradient(112deg,#2161f4,#05ade5)!important;color:#fff!important;box-shadow:0 12px 23px rgba(31,105,228,.17)!important}
#loginPage .login-button{font-size:16px;font-weight:750;line-height:1.2;border:0;border-radius:12px!important;padding:16px 18px;min-height:52px;margin-top:24px;cursor:pointer;width:100%}
#loginPage .login-button:not(:disabled):after{content:'\2192';margin-left:14px;font-weight:400;font-size:20px;line-height:0}
#loginPage .login-button:disabled{opacity:.8;cursor:progress}
#loginPage .signup-divider{margin:26px 0 24px;color:#8b99b0;font-size:11px;font-weight:800}
#loginPage .signup-google-button{border:1px solid #dce4ef!important;border-radius:12px!important;background:#fff;font-size:14px;font-weight:700;min-height:53px;display:flex;align-items:center;justify-content:center;gap:13px;width:100%;padding:14px}
#loginPage .signup-google-g{display:inline-grid;place-items:center;width:20px;height:20px;margin:0;line-height:1}
#loginPage .public-card-link{color:#2161f7!important;font-size:12px;font-weight:650}
#loginPage #forgotPasswordLink_{font-size:12px!important}
#loginPage #publicLoginPanel>div:has(#forgotPasswordLink_){margin-top:28px!important}
#loginPage #publicLoginPanel>.public-card-link{display:block;margin:25px auto 0;padding:0;background:transparent;border:0;width:100%;text-align:center}
#loginPage .login-error:empty{display:none}
#loginPage .login-error:not(:empty){margin-top:16px;padding:10px 12px;border-radius:9px;font-size:12px;line-height:1.4}
#loginPage .signup-plan.active{border-color:var(--auth-primary)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important}
#loginPage .signup-feature-mark{background:#eaf4ff!important;color:#1769d2!important}
@keyframes ga-question{0%,100%{translate:0 0}30%{translate:-3px 0}65%{translate:3px 0}}
@keyframes ga-cheer{0%,100%{translate:0 0}45%{translate:0 -7px}}
@media(min-width:1400px){#loginPage .public-access-card{padding-top:45px;padding-bottom:45px}#loginPage .public-access-desc{margin-bottom:39px}#loginPage .ga-form-brand{margin-bottom:47px}#loginPage .form-label{margin-top:23px}}
@media(max-width:1100px) and (min-width:851px){#loginPage .public-hero{padding:0 18px}#loginPage .public-auth-shell{grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr)}#loginPage .public-access-card{padding:30px 30px}#loginPage .ga-form-brand{margin-bottom:28px}#loginPage .public-access-heading{font-size:30px}#loginPage .public-access-desc{font-size:12px;margin-bottom:23px}#loginPage .form-label{margin-top:14px}#loginPage .form-control{min-height:44px}#loginPage .signup-divider{margin:21px 0}#loginPage .public-hero-copy.auth-crew-canvas{display:flex;align-items:center}}
@media(max-width:850px){#loginPage .public-hero{margin:20px auto 36px;padding:0 18px;max-width:660px}#loginPage .public-auth-shell{display:flex;flex-direction:column-reverse;border-radius:23px}#loginPage .public-access-card{padding:34px clamp(24px,6vw,46px) 36px}#loginPage .ga-form-brand{font-size:23px;margin-bottom:30px}#loginPage .public-access-heading{font-size:31px}#loginPage .public-access-desc{font-size:13px;margin-bottom:24px}#loginPage .ga-composition{aspect-ratio:848/890}#loginPage .public-hero-copy.auth-crew-canvas{display:block;border-top:1px solid #deedfb}#loginPage .ga-copy h2{font-size:6.05cqw}#loginPage .ga-card-title{font-size:2.25cqw}#loginPage .ga-card-copy{font-size:1.78cqw}}
@media(max-width:480px){#loginPage .public-hero{padding:0 12px;margin-top:12px}#loginPage .public-access-card{padding:27px 22px 30px}#loginPage .public-access-heading{font-size:29px}#loginPage .ga-form-brand{font-size:22px;margin-bottom:27px}#loginPage .ga-card-title{font-size:12px}#loginPage .ga-card-copy{font-size:9px}#loginPage .ga-copy p{font-size:9px}#loginPage .ga-card{padding:2cqw 2.5cqw}#loginPage .ga-card-hint{font-size:9px}#loginPage .ga-card-art{height:52%}}
@media(prefers-reduced-motion:reduce){#loginPage .ga-actor,#loginPage .ga-body,#loginPage .ga-pose,#loginPage .ga-eye-blink,#loginPage .ga-card,#loginPage .ga-card-hint{animation:none!important;transition:none!important}#loginPage .ga-body{transform:none!important}#loginPage .ga-pose{transform:none!important}}

#loginPage .ga-card--cursor .ga-card-art{height:71%;mask-image:none;object-fit:contain}
@media(max-width:480px){#loginPage .ga-card-title{top:2.6cqw;left:2.5cqw}#loginPage .ga-card-copy{top:7cqw;left:2.5cqw}#loginPage .ga-card--cursor .ga-card-art{height:64%}}


/* Natural tracking for the two bead-eyed Guardians.
   Cover the two eyes painted into each permanent WebP with a softly feathered
   patch matched to its skin, then draw the moving eye once on top. Without
   this patch, an underlying painted pupil appears when the overlay moves. */
#loginPage .ga-eye--bead .ga-eye-surface{
  isolation:isolate;
  overflow:visible;
}
#loginPage .ga-eye--bead .ga-eye-surface::before{
  content:"";
  position:absolute;
  inset:-86%;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse closest-side,
    var(--ga-eye-skin, #43d5f2) 0%,
    var(--ga-eye-skin, #43d5f2) 52%,
    var(--ga-eye-skin-soft, rgba(67,213,242,.78)) 70%,
    transparent 100%);
}
#loginPage .ga-actor--cyan{--ga-eye-skin:#39d2ef;--ga-eye-skin-soft:rgba(57,210,239,.8)}
#loginPage .ga-actor--sky{--ga-eye-skin:#83d3f4;--ga-eye-skin-soft:rgba(131,211,244,.78)}
#loginPage .ga-eye--bead .ga-pupil{
  z-index:2;
  box-shadow:inset 1px 1px 1px rgba(155,221,246,.4),0 1px 1px rgba(9,56,91,.12);
}
#loginPage .ga-spark{display:none!important}


/* Reference-matched outer eyes: preserve the 3D Guardian sprites, hide their
   baked black beads, and render individually blinking white eyes with paired
   movable glossy pupils. All animation remains owned by login-crew.js. */
#loginPage .ga-eye--outer{
  z-index:6;
  isolation:isolate;
  filter:drop-shadow(0 .5px .5px rgba(13,51,92,.12));
}
#loginPage .ga-eye--outer::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-43%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,
    var(--ga-eye-skin, #75d0f3) 0%,
    var(--ga-eye-skin, #75d0f3) 54%,
    var(--ga-eye-skin-soft, rgba(117,208,243,.8)) 72%,
    transparent 100%);
}
#loginPage .ga-eye--outer .ga-eye-surface{
  overflow:hidden;
  border-radius:50%;
  border:1px solid rgba(24,77,127,.14);
  box-sizing:border-box;
  background:radial-gradient(ellipse at 35% 20%,#fff 0 24%,#fdfefe 51%,#ecf6fc 82%,#d4e7f4 100%);
  box-shadow:inset -1px -1.5px 2px rgba(64,121,166,.18), 0 1px 1.5px rgba(22,67,111,.14);
}
#loginPage .ga-eye--outer .ga-pupil{
  width:43%;
  height:50%;
  left:28.5%;
  top:25%;
  border-radius:50%;
  background:radial-gradient(ellipse at 28% 22%,#253d4a 0%,#07192d 45%,#010814 100%);
  box-shadow:inset 1px 1px 1px rgba(137,183,209,.17);
}
#loginPage .ga-eye--outer .ga-pupil::after{
  width:20%;
  height:17%;
  left:19%;
  top:18%;
  background:#f9fdff;
  opacity:.9;
}
#loginPage .ga-actor--cyan{
  --ga-eye-skin:#3ad0ef;
  --ga-eye-skin-soft:rgba(58,208,239,.8);
}
#loginPage .ga-actor--sky{
  --ga-eye-skin:#87d2f4;
  --ga-eye-skin-soft:rgba(135,210,244,.76);
}

/* Shield sparkles belong to the third Guardian, not the page: keep their
   spacing consistent across window sizes. Bubble sparkles live inside the
   speech element and inherit its fade/scale state. */
#loginPage .ga-actor--sky > .ga-accent-marks--shield{
  position:absolute;
  z-index:9;
  display:block;
  left:92%;
  top:33%;
  width:26%;
  height:20%;
  overflow:visible;
  opacity:.98;
  filter:drop-shadow(0 1px 1px rgba(19,101,216,.13));
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  #loginPage .ga-eye--outer .ga-pupil{transition:none!important}
}