/* The access page uses the existing palette, with an equal split on desktop. */
.centros-login-page {
  --centros-focus:var(--centros-blue);
  --login-illustration-blue:#3a5ada;
}

body.centros-login-page {
  background:var(--centros-surface);
}

.centros-login-page .centros-header {
  position:absolute;
  inset:0 0 auto;
  z-index:1;
  padding:1.8rem 2.5rem;
}

.centros-login-page .centros-brand {
  color:#fff;
}

.centros-login-page .centros-brand__mark {
  background:rgb(255 255 255/.16);
  color:#fff;
}

.centros-login-page .centros-brand__area {
  color:inherit;
}

.centros-login-page .centros-brand:focus-visible {
  outline-color:#fff;
}

.centros-login-page .centros-main {
  max-width:none;
  padding:0;
  margin:0;
}

/* The skip target is a container, not a control: no frame around the page. */
.centros-login-page .centros-main:focus {
  outline:none;
}

.centros-login-page .centros-login {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  align-items:stretch;
  min-height:100vh;
  min-height:100svh;
}

.centros-login-page .centros-login__welcome {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  margin:0;
  padding:7.5rem clamp(1.5rem,4vw,5rem) 3rem;
  background:var(--login-illustration-blue);
  color:#fff;
  border:0;
}

.centros-login__illustration {
  display:block;
  width:100%;
  max-width:32rem;
  height:auto;
}

.centros-login-page .centros-login__access {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  max-width:none;
  padding:7.5rem clamp(1.5rem,4vw,5rem) 3rem;
}

.centros-login__form-panel {
  width:100%;
  max-width:27rem;
}

.centros-login-page .centros-login__heading {
  margin-bottom:2rem;
}

.centros-login-page .centros-login__access h1 {
  font-size:clamp(1.9rem,2.8vw,2.4rem);
}

/* A fixed font also applies to Chromium's autofill first-line rendering. */
.centros-login-page .centros-login__form .centros-field input:not([type="hidden"]) {
  font-family:"Centros Inter",system-ui,sans-serif;
  font-size:1rem;
  font-style:normal;
  font-weight:400;
  line-height:1.5;
  letter-spacing:normal;
  min-height:3rem;
}

.centros-login__form input:-webkit-autofill::first-line {
  font-family:"Centros Inter",system-ui,sans-serif;
  font-size:1rem;
  font-style:normal;
  font-weight:400;
  line-height:1.5;
  letter-spacing:normal;
}

.centros-login-page .centros-login__form .centros-field input:focus {
  border-color:var(--centros-blue);
  box-shadow:0 0 0 1px var(--centros-blue);
  outline:none;
}

.centros-login-page .centros-login__submit {
  min-height:3rem;
}

.centros-login-page .centros-offline-note:not([hidden]),
.centros-login-page .centros-feedback-stack {
  margin:0;
  padding:7rem 1.5rem 1rem;
}

@media(max-width:767px) {
  .centros-login-page .centros-header {
    position:relative;
    padding:1.25rem;
  }
  .centros-login-page .centros-brand {
    color:var(--centros-text);
  }
  .centros-login-page .centros-brand__mark {
    background:var(--centros-blue);
    color:var(--centros-on-blue);
  }
  .centros-login-page .centros-brand:focus-visible {
    outline-color:var(--centros-blue);
  }
  .centros-login-page .centros-login {
    display:block;
    min-height:0;
  }
  .centros-login-page .centros-login__welcome {
    display:none;
  }
  .centros-login-page .centros-login__access {
    padding:2.5rem 1.5rem;
  }
  .centros-login-page .centros-offline-note:not([hidden]),
  .centros-login-page .centros-feedback-stack {
    padding:1rem;
  }
}

@media(forced-colors:active) {
  .centros-login-page .centros-login__form .centros-field input:focus {
    outline:2px solid Highlight;
    outline-offset:2px;
  }
}