/* Atlas clinique: the password gate uses this local, public stylesheet. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/HankenGrotesk.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

body {
  display: block;
  min-height: 100dvh;
  padding: 0;
  background-color: #fff;
  font-family: "Hanken Grotesk", sans-serif;
  color: #1d3040;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/login-radial.svg") right top / cover no-repeat;
  pointer-events: none;
}

.shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "brand institution" "form ." "footer footer";
  align-items: center;
  gap: 24px 40px;
  width: min(100%, 1160px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 72px);
}

.brand {
  grid-area: brand;
  justify-content: flex-start;
  align-self: start;
  margin: 0;
}

.brand strong {
  font-size: 20px;
  letter-spacing: -.025em;
  color: #102f49;
  text-shadow: 0 2px 5px #102f4918;
}

.brand strong span { color: #21679a; }
.mark { box-shadow: none; filter: drop-shadow(0 3px 5px #102f4926); }

.service-mark {
  grid-area: institution;
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  align-self: center;
  width: min(240px, 100%);
}

.service-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  filter: drop-shadow(0 3px 5px #102f4926);
  transform: translateY(6px);
}

.card {
  grid-area: form;
  width: 100%;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid #e3e9ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px #102f4914;
}

h1 {
  margin: 0 0 16px;
  color: #163f61;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  text-shadow: 0 2px 5px #102f4918;
}

.intro {
  max-width: 40ch;
  margin: 0 0 36px;
  color: #526977;
  font: 15px/1.55 "Hanken Grotesk", sans-serif;
  text-shadow: 0 1px 3px #102f4914;
}

.field { gap: 10px; }
label { color: #163f61; font: 700 12px "Hanken Grotesk", sans-serif; text-shadow: 0 1px 3px #102f4914; }

input {
  height: 48px;
  border: 1px solid #b9c8d5;
  border-radius: 4px;
  background: #fff;
  color: #173553;
  font: 16px "Hanken Grotesk", sans-serif;
  box-shadow: 0 2px 5px #102f490a;
}

input:focus { border-color: #21679a; box-shadow: 0 0 0 3px #92b9d3; }

button {
  height: 48px;
  margin-top: 18px;
  border-radius: 5px;
  background: #21679a;
  box-shadow: 0 4px 12px #102f4926;
  font: 700 13px "Hanken Grotesk", sans-serif;
  text-shadow: 0 1px 2px #102f4933;
}

button:hover { background: #163f61; transform: none; }
button:focus-visible { outline: 3px solid #92b9d3; }

.foot {
  grid-area: footer;
  justify-self: start;
  margin: 0;
  color: #687b89;
  font: 12px "Hanken Grotesk", sans-serif;
  text-shadow: 0 1px 3px #102f4914;
}

@media (max-width: 700px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "brand institution" "form form" "footer footer";
    gap: 18px 12px;
    padding: 24px 20px;
  }

  .brand { align-self: start; gap: 8px; }
  .brand .mark { width: 32px; height: 32px; border-radius: 8px; }
  .brand strong { font-size: clamp(14px, 4vw, 18px); }
  .service-mark { width: min(145px, 100%); height: 32px; }
  .service-logo { transform: translateY(4px); }
  .card { align-self: center; }
  .intro { margin-bottom: 28px; }
}

.error { font-family: 'Hanken Grotesk', sans-serif; }