/*
 * Scherm 1 - Inloggen (ONTWERP.md §6.1, referentie Login.html).
 *
 * Alle maten letterlijk uit de referentie. Twee dingen zijn bewust anders en
 * staan hieronder bij de regel toegelicht: de vaste afstanden vanaf de onderkant
 * worden een flexibele verdeling (anders overlapt de knop de tekst op een SE),
 * en de knop is een echte knop in plaats van een div.
 */

.inloggen {
  position: relative;
  /*
   * GEEN eigen min-height: .screen regelt de hoogte al en heeft daarnaast de
   * veilige zone als padding. Allebei 100dvh claimen maakt het scherm hoger dan
   * het toestel, en dan valt de voetregel eronder weg - precies wat er gebeurde
   * zodra de notch-ruimte werd meegerekend.
   */
  flex: 1;
  /*
   * Boven 1024 punten hoogte houdt de compositie haar telefoonvorm en komt de
   * extra ruimte als lucht boven en onder. Zonder dit staat de knop op een
   * computerscherm honderden punten onder de tekst, want hij hangt aan de
   * onderrand. Desktop is niet ontworpen (§8.1); dit voegt geen indeling toe,
   * het voorkomt alleen dat de bestaande indeling uit elkaar wordt getrokken.
   */
  max-height: 960px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* De gouden gloed boven het wapen. */
.inloggen-gloed {
  position: absolute;
  left: 50%;
  top: -140px;
  width: 520px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(180, 142, 71, 0.2),
    rgba(180, 142, 71, 0) 70%
  );
  pointer-events: none;
}

/*
 * De referentie zet dit blok op `padding: 96px 34px 0` en plakt de knop met
 * `bottom: 132px` aan de onderkant. Bij 844 punten hoogte klopt dat precies,
 * maar op een SE (667 punten) zouden de twee elkaar raken. Daarom groeit de
 * bovenkant mee en houdt de knop zijn eigen ruimte: op 390 bij 844 komt het op
 * dezelfde plek uit, daaronder schuift het netjes in plaats van te overlappen.
 */
.inloggen-top {
  position: relative;
  padding: 96px 34px 0;
  text-align: center;
  flex: 1 1 auto;
}

.inloggen-logo {
  width: 210px;
  max-width: 60vw;
  border-radius: 12px;
}

.inloggen-wapen {
  width: 104px;
  mix-blend-mode: screen;
  margin: 0 auto;
  opacity: 0.95;
  display: block;
}

.inloggen-woordmerk {
  width: 238px;
  max-width: 100%;
  mix-blend-mode: screen;
  margin: 14px auto 0;
  display: block;
}

/*
 * De losse regel "C R M" is vervallen (AANVULLING-1 §1): de app heet Hot Apple
 * Gin, en het woordmerk staat er alleen. De uitleg neemt de bovenmarge over die
 * die regel had (26 in plaats van 14) - precies de waarde die het bijgewerkte
 * Login.html op dit blok zet.
 *
 * LET OP: in het bijgewerkte Login.html staat de regel "C R M" er nog wél; alleen
 * die bovenmarge is daar van 14 naar 26 gegaan. De aanvulling gaat volgens haar
 * eigen inleiding voor op de rest, dus die is gevolgd. Voorgelegd aan de eigenaar.
 */
.inloggen-tagline {
  margin-top: 28px;
  font-size: calc(0.9375rem * var(--tekstschaal));
  line-height: 1.6;
  color: var(--tagline);
  letter-spacing: 0.01em;
}

.inloggen-uitleg {
  font-size: calc(0.84375rem * var(--tekstschaal));
  line-height: 1.5;
  margin-top: 26px;
  color: var(--muted);
}

.inloggen-actie {
  padding: 0 24px;
  flex: 0 0 auto;
  /*
   * Exact als de referentie: de onderkant van dit blok staat 132 punten boven
   * de onderrand. Dat mag hier absoluut, omdat §2 vastlegt dat 390 bij 844 de
   * ONDERGRENS is - er is nooit minder ruimte, alleen meer, en dan zakt de knop
   * netjes mee naar beneden.
   *
   * De veilige zone onderaan komt erbij in plaats van eraf: op een toestel met
   * een thuisstreep hoort de knop daarboven te blijven (§2).
   */
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(132px + var(--safe-onder));
}

/*
 * De Microsoft-knop. Licht vlak, donkere tekst: dit is de enige plek in de app
 * waar dat gebeurt, en dat is met opzet - het is Microsofts knop, niet die van
 * Hot Apple Gin.
 */
.msbtn {
  height: 54px;
  width: 100%;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: var(--on-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: calc(0.96875rem * var(--tekstschaal));
  font-weight: 600;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.msq {
  display: grid;
  grid-template-columns: 9px 9px;
  gap: 2px;
  flex: 0 0 auto;
}
.msq i {
  display: block;
  width: 9px;
  height: 9px;
}

.inloggen-account {
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--muted-2);
  margin-top: 14px;
  line-height: 1.5;
}

.inloggen-voet {
  /* Ook absoluut, als in de referentie: de voetregel hoort tegen de onderrand
     en mag niet meeschuiven met de inhoud erboven. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Referentie: padding:0 28px 38px. De veilige zone komt er onderaan bij, zodat
     de regel op een toestel met thuisstreep niet onder de streep valt. */
  padding: 0 28px 38px;
  padding-bottom: calc(38px + var(--safe-onder));
  text-align: center;
}

.inloggen-voet-lijn {
  margin-bottom: 16px;
}

.inloggen-voet-regel {
  font-size: var(--fs-tiny);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/*
 * Wanneer de tenant nog niet is ingericht weigert /auth/login met uitleg. Die
 * uitleg hoort hier te staan en niet in een foutpagina: wie hem ziet moet weten
 * dat het aan de inrichting ligt en niet aan hemzelf.
 */
.inloggen-melding {
  margin-top: 14px;
  text-align: left;
}

/*
 * Korter dan de ontworpen 844 punten.
 *
 * §2 legt 390 bij 844 vast als ONDERGRENS, dus dit hoort niet voor te komen op
 * de toestellen van de partners. Maar een iPhone SE is 667 punten hoog, en dan
 * loopt de knop dwars door de uitlegtekst heen - gemeten: 22 punten overlap.
 * Liever een scherm dat inschikt dan een scherm dat over zichzelf heen valt.
 *
 * Hierboven blijft alles exact op de referentiematen staan; alleen hieronder
 * komen de twee onderste blokken terug in de gewone stroom en verdelen ze de
 * ruimte die er is.
 */
@media (max-height: 843px) {
  .inloggen-actie {
    position: static;
    margin-bottom: clamp(16px, 6vh, 48px);
  }

  .inloggen-voet {
    position: static;
    padding-bottom: calc(16px + var(--safe-onder));
  }
}

/*
 * Het Microsoft-vierkant. De kleuren zijn die van Microsoft zelf en horen
 * onveranderd te blijven; ze staan hier en niet in de opmaak omdat het CSP geen
 * inline stijl toestaat (gemeten op de echte server, lokaal viel het niet op).
 */
.msq-1 { background: #f25022; }
.msq-2 { background: #7fba00; }
.msq-3 { background: #00a4ef; }
.msq-4 { background: #ffb900; }

/* ---- Als het inloggen niet lukt ---------------------------------------- */

/*
 * De pagina die verschijnt als het inloggen strandt. Geen eigen kleuren of
 * maten: alles komt uit de tokens, want dit is hetzelfde merk en hetzelfde
 * scherm - alleen een ander moment.
 */
.inlogfout {
  justify-content: center;
}

.inlogfout-nu {
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
}

.inlogfout-knop {
  margin-top: 20px;
  text-decoration: none;
}