/* De stijl van het inlogscherm van RestoFone.
 *
 * Alles staat achter de wortelklasse .rs-login, die de pagina zelf zet
 * (app/login/restofone-login.tsx). Zonder die klasse doet dit bestand niets, en
 * dat is de hele reden dat het een eigen stylesheet is: /login is één route voor
 * drie merken, en een regel die per ongeluk buiten de wortel valt verschuift het
 * inlogscherm van Bellen of van RecruFone zonder dat iemand het merkt.
 * app/login/restofone-login.test.ts bewaakt dat, net zoals
 * app/(app)/_stijl/recrufone-scope.test.ts dat voor de drie RecruFone-bestanden
 * doet.
 *
 * WAAROM DE BINNENKLASSEN rf-login- HETEN. Het formulier zelf is gedeeld: het is
 * hetzelfde React-eiland als bij RecruFone (app/login/recrufone-form.tsx), want
 * wat er gebeurt als je op de knop drukt is in beide merken identiek en twee
 * formulieren die dezelfde POST doen lopen vanaf de eerste wijziging uit elkaar.
 * Dat eiland schrijft klassen met het voorvoegsel rf-login-, en die namen staan
 * dus hier ook. Ze zeggen "de kaart van het inlogscherm" en niet "van RecruFone".
 *
 * WAAROM IN public/ EN NIET ALS css-import. Dezelfde reden als bij
 * public/recrufone/login.css: Next bundelt een css-import van een component in de
 * css van de route waar hij onder hangt, en /login is de route van alle merken.
 * Bellen zou deze regels dan meeladen. Als bestand in public/ hangt hij aan één
 * <link> in de RestoFone-tak, met de inhoud als versie erachter (merkCssHref in
 * app/login/merk-stijl.ts).
 *
 * De keerzijde is dezelfde: er gaat geen build-stap overheen, dus hier staan
 * alleen eigenschappen die elke browser van de laatste jaren zonder voorvoegsel
 * kent.
 *
 * LICHT WAAR RECRUFONE DONKER IS. Dat is geen smaak maar het concept: crème,
 * papier en bordeaux (hoofdstuk 4.1 van docs/restofone-mvp.md). Een restaurant
 * is warm verlicht en geen kantoor bij nacht.
 *
 * GEEN WEBLETTER. Georgia voor de koppen (die staat op elk systeem) en de
 * systeemletter voor de rest. Dit is het eerste scherm dat iemand ziet, en een
 * lettertype dat eerst gedownload moet worden is daar een halve seconde stilte.
 * De site brengt zijn eigen letters mee; dat is een ander bestand en een andere
 * afweging.
 */

/* --- Het crèmevlak -------------------------------------------------------- */

.rs-login {
  --rs-bordeaux: #780d2d;
  --rs-diep: #480d1b;
  --rs-creme: #faf7ef;
  --rs-papier: #fffdf7;
  --rs-inkt: #321c20;
  --rs-lijn: #dacfc7;
  --rs-zacht: #7a6a66;
  --rs-serif: Georgia, "Times New Roman", serif;
  --rs-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  /* Eén zachte gloed van bovenaf, in de bordeauxtint verdund tot een blos. Geen
     hero: dit is een inlogscherm. */
  background:
    radial-gradient(ellipse 120% 60% at 50% -20%, #f0e3dd 0%, transparent 62%),
    var(--rs-creme);
  color: var(--rs-inkt);
  font-family: var(--rs-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* De root-layout zet de body op wit. Zonder deze regel schijnt dat wit door bij
   het doorveren aan de boven- of onderkant, en op een telefoon is dat precies
   het eerste wat je ziet. Dezelfde aanpak als bij RecruFone, en om dezelfde
   reden buiten de wortel: de body kán geen afstammeling van de wortel zijn.
   `:has(.rs-login)` houdt hem wél bij dit ene scherm. */
body:has(.rs-login) {
  background: #faf7ef;
  color-scheme: light;
}

.rs-login *,
.rs-login *::before,
.rs-login *::after {
  box-sizing: border-box;
}

.rs-login :is(button, input) {
  font: inherit;
  color: inherit;
}
.rs-login button {
  cursor: pointer;
  background: none;
  border: 0;
}
.rs-login button:disabled {
  cursor: default;
}
.rs-login a {
  color: inherit;
  text-decoration: none;
}
.rs-login :is(a, button, input):focus-visible {
  outline: 3px solid var(--rs-bordeaux);
  outline-offset: 3px;
}

/* --- De kop: woordmerk en ondertitel -------------------------------------- */

.rs-login .rf-login-kolom {
  width: 100%;
  max-width: 400px;
}

.rs-login .rf-login-kop {
  margin-bottom: 26px;
}

/* Het woordmerk op de hoogte van een regel en niet op zijn eigen maat: het
   bestand is breed omdat het ook in een mail moet kunnen. `height` en
   `width: auto` houden de verhouding, en de maten op de img in de HTML houden
   de plek vrij zodat de tekst eronder niet verspringt. */
.rs-login .rf-login-merk {
  display: inline-block;
  position: relative;
}
/* Het woordmerk is 31 pixels hoog (op een telefoon 27) en dat is de link ook.
   Hoger tekenen zou de ondertitel eronder wegduwen, dus groeit alleen het
   raakvlak: een onzichtbare rand eromheen brengt het op 45. */
.rs-login .rf-login-merk::after {
  content: "";
  position: absolute;
  inset: -9px -6px;
}
.rs-login .rf-login-merk img {
  display: block;
  height: 31px;
  width: auto;
}

.rs-login .rf-login-onder {
  margin: 13px 0 0;
  max-width: 330px;
  color: var(--rs-zacht);
  font-size: 14px;
  line-height: 1.5;
}

/* --- De kaart ------------------------------------------------------------- */

.rs-login .rf-login-kaart {
  background: var(--rs-papier);
  color: var(--rs-inkt);
  border: 1px solid var(--rs-lijn);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow:
    0 1px 2px #321c2014,
    0 20px 44px -20px #321c2033;
}

.rs-login .rf-login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* De regel voor wie via de nummerkiezer binnenkwam: hij meldt zich niet aan,
   hij maakt een account bij een nummer dat al klaarstaat. */
.rs-login .rf-login-intro {
  margin: 0;
  color: var(--rs-zacht);
  font-size: 13px;
  line-height: 1.55;
}

/* --- Het veld ------------------------------------------------------------- */

.rs-login .rf-login-veld {
  display: block;
}
.rs-login .rf-login-veld > span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rs-inkt);
}
.rs-login .rf-login-veld input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--rs-lijn);
  border-radius: 10px;
  padding: 11px 13px;
  /* 16px en niet kleiner, ook op een groot scherm: een iPhone zoomt in op een
     veld met een kleinere letter zodra je erin tikt, en dan staat het halve
     scherm scheef. Dit is het enige veld op de pagina, dus die ene maat mag. */
  font-size: 16px;
  color: var(--rs-inkt);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.rs-login .rf-login-veld input::placeholder {
  color: #a8998f;
}
.rs-login .rf-login-veld input:hover {
  border-color: #c9b9af;
}
/* De ring als schaduw en niet als outline. Een tekstveld matcht in elke browser
   ook met de muis op :focus-visible, dus de harde ring van hierboven zou hier
   altíjd staan, ook bij het aanklikken. Deze zachte ring is even goed te zien
   en hoort bij de vorm van het veld; hij vervangt de outline dus, en dat mag
   alleen omdat er iets voor in de plaats komt. */
.rs-login .rf-login-veld input:focus {
  outline: none;
  border-color: var(--rs-bordeaux);
  box-shadow: 0 0 0 4px #780d2d26;
}

/* --- De knop -------------------------------------------------------------- */

.rs-login .rf-login-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  /* Een pil, zoals de knoppen in de huisstijl. */
  border-radius: 999px;
  background: var(--rs-bordeaux);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.15s,
    transform 0.15s;
}
.rs-login .rf-login-knop:hover:not(:disabled) {
  background: var(--rs-diep);
}
.rs-login .rf-login-knop:active:not(:disabled) {
  transform: translateY(1px);
}
.rs-login .rf-login-knop:disabled {
  opacity: 0.45;
}

/* --- De regels onder de knop ---------------------------------------------- */

.rs-login .rf-login-onderregel,
.rs-login .rf-login-juridisch {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: var(--rs-zacht);
}
.rs-login .rf-login-juridisch a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rs-login .rf-login-juridisch a:hover {
  color: var(--rs-bordeaux);
}

/* --- De meldingen --------------------------------------------------------- */

/* Twee tinten: warm voor een link die verlopen is (er is niets stuk, vraag een
   nieuwe aan) en rood voor een verzending die echt misging. Ze kunnen tegelijk
   in beeld staan, en twee banden die op elkaar lijken lees je als één melding
   die twee keer staat. */
.rs-login .rf-login-melding {
  margin: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.rs-login .rf-login-let-op {
  background: #fdf3e3;
  border: 1px solid #ecd9b6;
  color: #7a5313;
}
.rs-login .rf-login-mis {
  background: #fbeaea;
  border: 1px solid #eac7c7;
  color: #98332f;
}

/* --- De staat "verzonden" ------------------------------------------------- */

.rs-login .rf-login-klaar {
  text-align: center;
}
.rs-login .rf-login-vink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #f3e3e7;
  color: var(--rs-bordeaux);
}
/* De enige kop op dit scherm, en de enige plek waar de serif van het concept
   zichtbaar wordt. */
.rs-login .rf-login-titel {
  margin: 0;
  font-family: var(--rs-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--rs-diep);
}
.rs-login .rf-login-uitleg {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rs-zacht);
}
.rs-login .rf-login-uitleg strong {
  font-weight: 600;
  color: var(--rs-inkt);
}
.rs-login .rf-login-tekstknop {
  /* De ruimte boven de knop zit grotendeels in de binnenmarge: dezelfde
     witruimte, maar nu telt hij mee voor de duim. */
  margin-top: 10px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rs-bordeaux);
}
.rs-login .rf-login-tekstknop:hover {
  color: var(--rs-diep);
}

/* --- Terug naar de website ------------------------------------------------ */

.rs-login .rf-login-terug {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--rs-zacht);
}
/* Eén regel van 17 pixels is te weinig om op te mikken. Onder de kaart is ruimte
   zat, dus mag de link zelf 44 hoog zijn. */
.rs-login .rf-login-terug a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
}
.rs-login .rf-login-terug a:hover {
  color: var(--rs-bordeaux);
}

/* --- Op een telefoon ------------------------------------------------------ */

/* Bovenaan in plaats van in het midden: op een klein scherm met het toetsenbord
   open is "gecentreerd" een kaart die halverwege het beeld hangt. */
@media (max-width: 520px) {
  .rs-login {
    align-items: flex-start;
    padding: 40px 18px 32px;
  }
  .rs-login .rf-login-merk img {
    height: 27px;
  }
  .rs-login .rf-login-onder {
    font-size: 13px;
  }
  .rs-login .rf-login-kaart {
    padding: 22px 18px;
    border-radius: 14px;
  }
}

/* Wie zijn systeem op minder beweging heeft staan, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  .rs-login :is(.rf-login-knop, .rf-login-veld input) {
    transition: none;
  }
  .rs-login .rf-login-knop:active:not(:disabled) {
    transform: none;
  }
}