/* ===========================================================================
   Ōmata inlogscherm, gedeelde component. Opmaak.

   Los bestand, zoals de chat, want een inlogscherm komt op elke pagina. Het
   palet komt uit de tokens van de pagina, dus dit bestand definieert zelf
   geen kleuren.

   Licht en niet donker, in tegenstelling tot de chat. De chat is een apart
   soort oppervlak dat mag opvallen; een inlogscherm is een gewoon
   paginascherm en hoort bij de pagina te horen.

   Er wordt niets verzonden. De velden werken, de rest niet, en dat staat ook
   in het scherm zelf.
   =========================================================================== */

/* De laag erachter. Dit is wel een modaal venster: bij inloggen hoort de
   pagina eromheen niet bruikbaar te zijn, anders klik je er per ongeluk
   langs terwijl je een wachtwoord typt. */
.omata-login-veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(27, 25, 24, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
}
.omata-login-veil[hidden] { display: none; }

.omata-login {
  width: min(420px, 100%);
  background: #ffffff;
  color: var(--text-body);
  border-radius: 18px;
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(27, 25, 24, 0.28);
  font-family: var(--font-sans);
  padding: 22px 22px 20px;
  /* Bij een lang scherm op een korte telefoon moet het kunnen scrollen in
     plaats van buiten beeld te vallen. De veil scrollt, dit blok niet. */
  margin: auto;
}

.omata-login__top { display: flex; align-items: flex-start; gap: 12px; }
.omata-login__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.omata-login__close {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  margin-left: auto;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.omata-login__close:hover { background: rgba(27, 25, 24, 0.06); }
.omata-login__close:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

/* De melding dat er nog niets verzonden wordt. Boven het formulier en niet
   eronder: iemand hoort dat te weten voor hij zijn wachtwoord typt, niet
   erna. */
.omata-login__notice {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 2px dashed var(--shu-deep);
  border-radius: 10px;
  background: rgba(168, 50, 26, 0.05);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--text-body);
}

.omata-login__form { margin: 16px 0 0; }

.omata-login__field { margin: 0 0 14px; }
.omata-login__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
/* Echte label-elementen aan de invoervelden gekoppeld, niet alleen een
   aria-label: dan werkt ook het klikken op het label om het veld te vullen,
   en een schermlezer leest het in de juiste context voor. */
.omata-login__input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(27, 25, 24, 0.30);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text-body);
  font-family: inherit;
  font-size: 16px;   /* 16px, want daaronder zoomt iOS het scherm in bij focus */
  line-height: 1.4;
}
.omata-login__input:focus-visible {
  outline: 3px solid var(--shu-deep);
  outline-offset: 1px;
  border-color: transparent;
}
.omata-login__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-body);
}

/* --- Keuze tussen wachtwoord en sms-code ------------------------------- */
.omata-login__methods {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface-tint);
}
.omata-login__method {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.omata-login__method[aria-selected="true"] {
  background: var(--btn-bg);
  color: var(--text-invert);
}
.omata-login__method:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

.omata-login__panel[hidden] { display: none; }

/* --- Onderaan ---------------------------------------------------------- */
.omata-login__submit {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--text-invert);
  padding: 12px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  font-family: inherit;
}
.omata-login__submit:hover { background: var(--btn-bg-hover); }
.omata-login__submit:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

.omata-login__foot {
  margin: 12px 0 0;
  text-align: center;
}
/* Wachtwoord vergeten is een knop en geen link, want er is nog geen adres om
   naartoe te gaan. Een link naar niets is een gebroken link; een knop die
   meldt dat het nog niet kan, is eerlijk. */
.omata-login__forgot {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-accent);
  cursor: pointer;
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-appearance: none; appearance: none;
}
.omata-login__forgot:hover { text-decoration: underline solid; }
.omata-login__forgot:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

/* Het antwoord op een poging tot verzenden. Leeg tot er iets te melden valt,
   dan zichtbaar én voorgelezen. */
.omata-login__status {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-accent);
  font-weight: 600;
  min-height: 1.2em;
}

/* --- Inloggen of aanmelden --------------------------------------------
   Zelfde pil als de methodekeuze eronder, met opzet: het is dezelfde soort
   keuze en het scherm hoort niet twee talen te spreken. Het verschil zit in
   de semantiek, niet in het beeld: hier aria-pressed, daar aria-selected.
---------------------------------------------------------------------- */
.omata-login__modes {
  display: flex;
  gap: 4px;
  margin: 14px 0 0;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface-tint);
}
.omata-login__mode {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.omata-login__mode[aria-pressed="true"] {
  background: var(--btn-bg);
  color: var(--text-invert);
}
.omata-login__mode:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

/* --- Google en Apple --------------------------------------------------
   Omlijnd en wit, niet gevuld: dit zijn twee gelijkwaardige wegen naar
   binnen en geen hoofdactie. De hoofdactie is de gevulde knop onderaan.

   De randdekking staat op 0,55 en niet op 0,30 zoals de invoervelden
   hierboven. Nagerekend op wit blendt 0,30 naar #bab9b9 en haalt 1,93:1,
   0,55 blendt naar #818080 en haalt 3,86:1, tegen de norm van 3:1 voor de
   begrenzing van een bedieningselement.

   De var heeft een terugval met komma's erin, dus de declaratie blijft
   geldig zolang --sumi-deep-rgb nog niet bestaat.
---------------------------------------------------------------------- */
.omata-login__oauth {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}
.omata-login__oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid rgba(var(--sumi-deep-rgb, 27, 25, 24), 0.55);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.omata-login__oauth-btn:hover { background: var(--surface-tint); }
.omata-login__oauth-btn:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }
/* Het merkteken mag niet meekrimpen als het label lang wordt, en het is
   decoratief: de knoptekst zegt al met wie je inlogt. */
.omata-login__oauth-btn svg { flex: 0 0 auto; }

/* De scheidingsregel. Twee haarlijnen met de tekst ertussen; de lijnen zijn
   decoratief en vallen dus onder geen contrastnorm. */
.omata-login__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-body);
}
.omata-login__or::before,
.omata-login__or::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--rule);
}

/* De drie onderdelen die in de aanmeldmodus wegvallen. */
.omata-login__methods[hidden],
.omata-login__hint[hidden],
.omata-login__foot[hidden] { display: none; }

@media (max-width: 480px) {
  .omata-login { padding: 18px 16px 16px; border-radius: 14px; }
  .omata-login__title { font-size: 18px; }
  /* Op een smal scherm passen twee lange labels niet meer naast het teken.
     Iets kleiner is beter dan afbreken. */
  .omata-login__oauth-btn { font-size: 14px; padding: 11px 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .omata-login { animation: omata-login-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
  @keyframes omata-login-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
  }
}