/* Login presentation only; backend and authorization unchanged. */
.reading-entry{--ink:#092056;--cyan:#00d5ed;--muted:#53659b;--line:#cdd7ed;margin:0;background:#f6fbff;color:var(--ink);font-family:Inter,system-ui,sans-serif}.reading-entry *{box-sizing:border-box}.reading-entry a{color:#0055e9;text-underline-offset:4px}.reading-entry :focus-visible{outline:3px solid #007593;outline-offset:4px}.entry-skip{position:absolute;top:-100px;left:12px;z-index:10;padding:12px;background:white;border-radius:8px}.entry-skip:focus{top:12px}
.entry-stage{display:grid;grid-template-columns:62% 38%;min-height:100vh;min-height:100dvh}.entry-intro{position:relative;isolation:isolate;min-width:0;overflow:hidden;display:flex;align-items:flex-end;background:#07315a;color:white;min-height:720px}.entry-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 34%;z-index:-3}.entry-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,transparent 28%,#01204014 42%,#001d3ed9 71%,#002752 100%)}.entry-waves{position:absolute;bottom:0;width:100%;height:32%;z-index:-1;pointer-events:none}.entry-copy{padding:0 clamp(32px,4vw,76px) 7vh;width:100%;text-shadow:0 1px 3px #001d3d33}.entry-copy h1{font-size:clamp(2.2rem,3.25vw,4rem);line-height:1.08;font-weight:800;letter-spacing:-.045em;margin:0 0 18px}.entry-copy h1 span{color:var(--cyan)}.entry-copy>p{font-size:clamp(1rem,1.45vw,1.55rem);line-height:1.5;max-width:740px;margin:0}.entry-benefits{list-style:none;display:flex;gap:clamp(20px,3vw,60px);margin:48px 0 0;padding:0}.entry-benefits li{display:flex;align-items:center;gap:16px;font-size:clamp(.8rem,1.05vw,1.1rem);line-height:1.45}.entry-benefits i{font-size:2.5rem;color:var(--cyan);line-height:1}
.entry-login{position:relative;isolation:isolate;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:45px clamp(28px,4vw,80px);background:linear-gradient(135deg,#fff,#f5fbff)}.entry-login:before,.entry-login:after{content:"";position:absolute;pointer-events:none;z-index:-1;background:linear-gradient(120deg,#e6f8ff,#d4f2ff);width:130%;height:180px;border-radius:50%}.entry-login:before{top:-115px;right:-35%;transform:rotate(14deg)}.entry-login:after{bottom:-125px;left:-45%;transform:rotate(24deg)}.auth-card{width:100%;max-width:500px}.entry-card-brand{display:block;margin:0 0 clamp(24px,4.5vh,52px);text-align:center}.entry-card-brand img{width:100%;max-width:430px;height:auto;object-fit:contain}.auth-welcome h1{font-size:clamp(1.5rem,2.2vw,2.65rem);font-weight:800;line-height:1.2;letter-spacing:-.045em;margin:0 0 8px}.auth-welcome p{color:var(--muted);font-size:clamp(.95rem,1.25vw,1.3rem);margin:0 0 30px;line-height:1.5}.auth-welcome img{max-width:75px;height:75px;object-fit:contain}.auth-welcome .municipality-name{font-size:.85rem;margin-bottom:14px}
.auth-field{margin:0 0 20px}.auth-field label{display:block;font-size:.9rem;font-weight:600;margin:0 0 7px}.auth-input{display:flex;align-items:center;gap:12px;min-height:52px;border:1px solid var(--line);border-radius:11px;background:#ffffffdb;padding:0 16px;color:var(--muted)}.auth-input:focus-within{border-color:#0084e7;box-shadow:0 0 0 3px #0084e71a}.auth-input>i{font-size:1.35rem}.auth-input input{width:100%;min-width:0;min-height:50px;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}.auth-input input::placeholder{color:#7785a9;opacity:1}.auth-password-toggle{border:0;background:transparent;color:#455b97;min-width:44px;min-height:44px;margin-right:-10px;display:grid;place-items:center;font-size:1.3rem;border-radius:7px}.auth-form__options{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.85rem;margin:0 0 20px;flex-wrap:wrap}.auth-form__options a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.auth-form__options a:hover{text-decoration:underline}.auth-remember{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer}.auth-remember input{width:20px;height:20px;accent-color:#0069ff;margin:0}
.reading-entry .auth-input input:focus{outline:none;box-shadow:none}
/* The wrapper supplies the single visible blue focus ring for both fields. */
@media(forced-colors:active){.reading-entry .auth-input:focus-within{outline:2px solid Highlight;outline-offset:3px}}
.auth-submit{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-height:60px;border:1px solid #66ceff;border-radius:17px;background:linear-gradient(110deg,#00377f,#0069da);color:white;font:inherit;font-size:1.1rem;font-weight:500;box-shadow:0 7px 20px #008dff26;cursor:pointer;transition:transform .18s,box-shadow .18s}.auth-submit>span,.auth-submit>i{position:relative;z-index:1}.auth-submit:before{content:"";position:absolute;inset:-70% auto -70% -50%;width:20%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,#ffffff65,transparent);animation:entry-shine 3s ease-in-out infinite;pointer-events:none}.auth-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px #0076e84d}.auth-submit:active:not(:disabled){transform:translateY(1px);box-shadow:0 3px 10px #0076e833}.auth-submit:disabled{cursor:wait;opacity:.8}.auth-submit[aria-busy="true"]:before{animation:none}.auth-spinner{display:none;width:19px;height:19px;border:2px solid #ffffff70;border-top-color:white;border-radius:50%;animation:entry-spin .8s linear infinite}.auth-submit[aria-busy="true"] .auth-spinner{display:block}.auth-submit[aria-busy="true"] .bi-arrow-right{display:none}.auth-submit-status{font-size:.8rem;color:var(--muted);margin:10px 0 0}.auth-submit-status:empty{display:none}.auth-security-note{display:flex;align-items:center;justify-content:center;gap:13px;color:var(--muted);font-size:.9rem;text-align:center;line-height:1.45;margin:25px 0 0}.auth-security-note i{font-size:1.55rem;flex-shrink:0}.entry-footer{border-top:1px solid #dce7f3;margin-top:30px;padding-top:22px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.8rem}.entry-footer i{font-size:1.35rem}
@keyframes entry-shine{0%,18%{left:-50%}65%,100%{left:150%}}@keyframes entry-spin{to{transform:rotate(360deg)}}
@media(min-width:768px) and (max-width:1024px){.entry-stage{grid-template-columns:52% 48%}.entry-login{padding:32px 26px}.entry-copy{padding:0 28px 42px}.entry-copy h1{font-size:2rem}.entry-copy>p{font-size:1rem}.entry-benefits{gap:18px;flex-wrap:wrap;margin-top:28px}.entry-benefits li{font-size:.75rem;gap:8px}.entry-benefits i{font-size:1.8rem}.entry-photo{object-position:64% center}.auth-welcome h1{font-size:1.7rem}}
@media(min-width:1025px) and (max-height:800px){.entry-intro{min-height:640px}.entry-login{padding-top:26px;padding-bottom:26px}.entry-card-brand{margin-bottom:22px}.entry-card-brand img{max-width:320px}.auth-welcome p{margin-bottom:22px}.auth-field{margin-bottom:15px}.auth-security-note{margin-top:18px}.entry-footer{margin-top:20px;padding-top:17px}.entry-copy{padding-bottom:45px}.entry-benefits{margin-top:30px}}
@media(max-width:767px){.entry-stage{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.entry-login{order:0;padding:max(26px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 26px max(22px,env(safe-area-inset-left));overflow:clip}.auth-card{max-width:440px}.entry-card-brand{margin-bottom:24px}.entry-card-brand img{max-width:290px}.auth-welcome h1{font-size:1.7rem}.auth-welcome p{font-size:1rem;margin-bottom:25px}.auth-input{min-height:54px}.auth-input input{min-height:52px}.auth-form__options{font-size:.78rem;gap:4px}.auth-submit{min-height:58px;font-size:1rem}.auth-security-note{font-size:.8rem}.entry-footer{font-size:.75rem;margin-top:24px}.entry-intro{order:1;min-height:265px;min-height:clamp(265px,70vw,340px);padding:90px 0 0}.entry-copy{padding:24px max(22px,env(safe-area-inset-left)) max(28px,env(safe-area-inset-bottom))}.entry-copy h1{font-size:1.7rem;max-width:430px}.entry-copy>p{font-size:.86rem;max-width:470px}.entry-photo{object-position:center 38%}.entry-shade{background:linear-gradient(180deg,#00275215,#002752e8 63%)}.entry-benefits{display:none}.entry-waves{height:25%}}
/* Blend the original white-backed logo into the pale panel without editing the brand asset. */
.entry-card-brand img{mix-blend-mode:multiply}
/* Keep both subjects visible despite the narrower portrait tablet panel. */
.entry-photo{object-position:55% center}
@media(min-width:768px) and (max-width:1024px){.entry-photo{height:55%;object-position:55% center}.entry-shade{background:linear-gradient(180deg,transparent 20%,#00275255 42%,#002752 57%)}}
@media(prefers-reduced-motion:reduce){.reading-entry *,.reading-entry *:before,.reading-entry *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.auth-submit:before{display:none}}
/* Preserve a usable form width on small laptops; stack on portrait tablets. */
@media(min-width:992px){.entry-stage{grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr)}.entry-intro{min-height:0}.entry-login{padding-inline:clamp(24px,3vw,64px)}}
.entry-benefits{flex-wrap:wrap}.entry-copy,.auth-card{overflow-wrap:anywhere}
@media(min-width:768px) and (max-width:991px){
 .entry-stage{display:flex;flex-direction:column}
 .entry-login{order:0;padding:28px;overflow:hidden}
 .auth-card{max-width:480px}
 .entry-intro{order:1;min-height:340px;padding-top:100px}
 .entry-photo{height:100%;object-position:55% 38%}
 .entry-shade{background:linear-gradient(180deg,#00275215,#002752e8 70%)}
 .entry-copy{padding:24px 28px 32px}.entry-benefits{display:none}
}
/* Keep the form geometry stable when the submit label/status changes. */
.reading-entry .auth-submit{transition:box-shadow .18s}
.reading-entry .auth-submit:hover:not(:disabled),.reading-entry .auth-submit:active:not(:disabled){transform:none}
.reading-entry .auth-feedback{display:grid;min-height:4.25em;margin:10px 0 0;font-size:.8rem;line-height:1.4}
.reading-entry .auth-feedback>*{grid-area:1/1;min-width:0}
.reading-entry .auth-submit-status{display:block;min-height:2.8em;line-height:1.4;margin:0}
.reading-entry .auth-submit-status:empty{display:block}
.reading-entry .auth-server-alerts .alert{padding:.5rem;margin:0;font-size:inherit;line-height:inherit}
.reading-entry .auth-form[aria-busy="true"]+.auth-feedback .auth-server-alerts{visibility:hidden}
.reading-entry .auth-feedback+.auth-security-note{margin-top:8px}