/* Login, registrering og passord-gjenoppretting (OT-016 fase 2 -> Kervence lys-verden).
   Disse sidene rendres uten skall/nav (en utlogget besøkende har ingenting å navigere til),
   men deler likevel kalklys-verdenen: sidene laster lys.css selv (style.css -> lys.css ->
   auth.css), samme rekkefølge som base.html. Ingen ny palett her -- bare verdenens tokens. */

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.auth { width: 100%; display: grid; place-items: center; }

/* Rommet materialiserer ved last: blur+scale ut av kalkveggen, kritisk dempet
   (--fjaer-ut, apple-design §3-6). Ett forfattet øyeblikk, ikke gjentatt senere. */
.auth__card {
  width: 100%;
  max-width: 27rem;
  background: var(--kalk-lys);
  border: 1px solid var(--mortel);
  border-radius: var(--radius-rom);
  box-shadow: 0 10px 28px -18px rgba(38, 34, 27, 0.35);
  padding: 2.25rem 2rem 1.75rem;
  transition: opacity var(--tid-rom) var(--fjaer-ut),
              filter var(--tid-rom) var(--fjaer-ut),
              transform var(--tid-rom) var(--fjaer-ut);
}
@starting-style {
  .auth__card { opacity: 0; filter: blur(6px); transform: scale(0.96); }
}

/* Overskriften bærer seg selv -- ingen eyebrow, ingen undertekst under den (owner-regel). */
.auth__title { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 640; font-size: 1.6rem; line-height: 1.1; color: var(--kull); }

.auth__form { display: grid; gap: 1.1rem; }
.auth__field { display: grid; gap: 0.4rem; }
.auth__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }

.auth__label { font-size: 0.8rem; color: var(--kull-myk); }

.auth__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  background: var(--kalk);
  border: 1.5px solid var(--mortel);
  border-radius: var(--radius-input);
  color: var(--kull);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color var(--tid-ui) var(--ease-ut), box-shadow var(--tid-ui) var(--ease-ut);
}
.auth__input:focus-visible {
  outline: none;
  border-color: var(--sol-blekk);
  box-shadow: 0 0 0 3px rgba(138, 98, 16, 0.16);
}
/* Feil navngir problemet på det konkrete feltet -- ikke bare i feilboksen (auth.js). */
.auth__input[aria-invalid="true"] { border-color: var(--ned); }

/* Reveal-knappen står ved siden av feltet, ikke inni det: Safari og iCloud-nøkkelring
   tegner sitt nøkkelikon i inputens høyre kant, og la det oppå «Vis» så knappen ikke
   kunne trykkes. min-width holder bredden fast når etiketten bytter mellom Vis og Skjul. */
/* Rammen sitter på beholderen og går rundt «Vis» (eier 2026-09-14). Selve feltet er uendret
   i bredde og slutter før knappen, så teksten aldri havner under den. */
.auth__password {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.3rem;
  background: var(--kalk);
  border: 1.5px solid var(--mortel);
  border-radius: var(--radius-input);
  transition: border-color var(--tid-ui) var(--ease-ut), box-shadow var(--tid-ui) var(--ease-ut);
}
.auth__password .auth__input { flex: 1; min-width: 0; background: transparent; border-color: transparent; }
.auth__password .auth__input:focus-visible { border-color: transparent; box-shadow: none; }
.auth__password:focus-within { border-color: var(--sol-blekk); box-shadow: 0 0 0 3px rgba(138, 98, 16, 0.16); }
.auth__password:has(.auth__input[aria-invalid="true"]) { border-color: var(--ned); }

.auth__reveal {
  flex: none;
  padding: 0.35rem 0.6rem;
  min-width: 3.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--kull-svak);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color var(--tid-ui) var(--ease-ut), background var(--tid-ui) var(--ease-ut),
              transform var(--tid-trykk) var(--ease-ut);
}
.auth__reveal:hover { color: var(--kull); background: var(--kalk-dyp); }
.auth__reveal:active { transform: scale(0.94); }
.auth__reveal:focus-visible {
  outline: none;
  color: var(--kull);
  border-color: var(--sol-blekk);
  box-shadow: 0 0 0 3px rgba(138, 98, 16, 0.16);
}
.auth__reveal[aria-pressed="true"] { color: var(--sol-blekk); }

.auth__hint { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--kull-svak); line-height: 1.4; }
/* Dynamisk statustekst (verify_email.html) -- ikke en pyntet undertekst, men sidens
   faktiske innhold, så den får ikke .auth__lede-tonen. */
.auth__status { margin: 0; color: var(--kull-myk); font-size: 0.92rem; line-height: 1.55; }

.auth__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.82rem;
  color: var(--kull-myk);
  line-height: 1.45;
}
.auth__check input { margin-top: 0.18rem; accent-color: var(--sol-blekk); }
/* Et punkt som mangler (auth.js, ved Google-knappen og ved «Opprett konto»). Samme feilfarge som
   feltene og .auth__error. Negativ margin og like mye padding: flaten legger seg ut i
   mellomrommet rundt teksten, så ingenting flytter seg når markeringen kommer og går. Selve
   boksen får ingen outline: outline er fokusringen, og med rød outline på alle tre så den
   fokuserte boksen ut som de andre (WCAG 2.4.7, motsjekk 2026-09-14). */
.auth__check { transition: background-color var(--tid-ui) var(--ease-ut), box-shadow var(--tid-ui) var(--ease-ut); }
.auth__check:has(input[aria-invalid="true"]) {
  margin: -0.3rem -0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-input);
  background: rgba(169, 68, 54, 0.07);
  box-shadow: inset 0 0 0 1px rgba(169, 68, 54, 0.32);
  color: var(--kull);
}

.auth__error {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: rgba(169, 68, 54, 0.08);
  border: 1px solid rgba(169, 68, 54, 0.32);
  border-radius: var(--radius-input);
  color: var(--ned);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* Umiddelbar pointer-down-respons (apple-design §1): :active fyrer på press, ikke på
   slipp -- transform er den eneste bevegelsen, og den skjer i --tid-trykk. */
.auth__submit {
  /* Uten denne males knappen oppaa avsnittet over naar klassen sitter paa en <a>:
     <a> er inline, og vertikal padding paa inline tar ikke plass i layouten.
     Knappen i .auth__form er uberoert -- grid-barn blokkifiseres uansett. */
  display: inline-block;
  margin-top: 0.35rem;
  padding: 13px 22px;
  background: var(--sol);
  border: none;
  border-radius: 999px;
  color: var(--kull);
  font: 600 0.95rem/1 var(--font-sans);
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(138, 98, 16, 0.45);
  transition: transform var(--tid-trykk) var(--ease-ut), box-shadow var(--tid-ui) var(--ease-ut),
              background-color var(--tid-ui) var(--ease-ut);
}
.auth__submit:hover:not(:disabled) { background: var(--sol-glod); }
.auth__submit:active:not(:disabled) { transform: scale(0.97); }
.auth__submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(138, 98, 16, 0.28); }
.auth__submit:disabled { opacity: 0.6; cursor: progress; }

/* Fortsett med Google. Mørk utgave av Googles egen knapp (#131314, G-logoen i farger): Googles
   merkevareregler tillater lys, mørk eller nøytral -- ikke solgul -- og mørk er det som bærer
   hovedveien på kalk-grunnen. */
.auth__leverandorer { margin-top: 1.1rem; }
.auth__leverandorer--foerst { margin: 0 0 0.2rem; }
/* Beta-merknaden på registreringen står over Google-knappen, utenfor skjemaets gap. */
.auth__hint--topp { margin: -0.4rem 0 1.1rem; }
.auth__skille {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  color: var(--kull-svak);
}
.auth__leverandorer--foerst .auth__skille { margin: 1.1rem 0 0.2rem; }
.auth__skille::before, .auth__skille::after { content: ""; flex: 1; border-top: 1px solid var(--mortel); }
.auth__leverandor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 13px 22px;
  background: #131314;
  border: 1px solid #8e918f;
  border-radius: 999px;
  color: #e3e3e3;
  font: 600 0.95rem/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--tid-ui) var(--ease-ut), transform var(--tid-trykk) var(--ease-ut);
}
.auth__leverandor::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth__leverandor + .auth__leverandor { margin-top: 0.5rem; }
.auth__leverandor:hover { background: #2a2a2c; }
.auth__leverandor:active { transform: scale(0.97); }
.auth__leverandor:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(138, 98, 16, 0.35); }
/* Meldingen rett under Google-knappen når avkrysningene mangler. Glir inn fra knappen, så
   blikket som står på knappen, ser at noe skjedde. */
.auth__error--leverandor {
  margin-top: 0.6rem;
  text-wrap: pretty;
  transition: opacity var(--tid-ui) var(--ease-ut), transform var(--tid-ui) var(--ease-ut);
}
@starting-style {
  .auth__error--leverandor { opacity: 0; transform: translateY(-4px); }
}

/* E-postinnloggingen når Google står først: samme form, uten solfylt flate. */
.auth__submit--sekundaer { background: transparent; box-shadow: none; border: 1.5px solid var(--mortel); }
.auth__submit--sekundaer:hover:not(:disabled) { background: var(--kalk-dyp); }

.auth__foot {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--mortel);
  font-size: 0.85rem;
  color: var(--kull-svak);
  text-align: center;
}
/* Understreket alltid: fargen alene gir 1,06:1 mot brødteksten (WCAG 1.4.1, Lighthouse 2026-09-13). */
.auth__link { color: var(--sol-blekk); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.auth__link:hover { text-decoration-thickness: 2px; }

/* Kodesteget (_kodesteg.html, e-postkode 2026-09-13). Koden er det eneste kunden skal gjøre
   her, så feltet er stort og sifrene sprikes ut: seks sifre skal kunne leses av og sjekkes
   mot e-posten med ett blikk. */
.auth__steg-tittel { margin: 0; font-family: var(--font-display); font-weight: 640; font-size: 1.25rem; line-height: 1.15; color: var(--kull); }
.auth__steg-tittel:focus { outline: none; }
.auth__input--kode { font-size: 1.6rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.auth__kode-hjelp { display: grid; gap: 0.35rem; justify-items: start; }
/* En knapp, fordi den gjør noe (sender ny kode), men kledd som lenken ved siden av. Samme
   understreking som .auth__link: WCAG 1.4.1, farge alene skiller den ikke fra teksten. */
.auth__lenkeknapp { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--sol-blekk); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; cursor: pointer; }
.auth__lenkeknapp:hover { text-decoration-thickness: 2px; }
.auth__lenkeknapp:disabled { color: var(--kull-svak); cursor: default; text-decoration: none; }
.auth__lenkeknapp:focus-visible { outline: 2px solid var(--sol-blekk); outline-offset: 2px; border-radius: 2px; }
.auth__kode-fot { border-top: 1px solid var(--mortel); padding-top: 0.8rem; }

@media (max-width: 30rem) {
  .auth__card { padding: 1.75rem 1.25rem 1.4rem; border-radius: var(--radius); }
  .auth__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__input, .auth__reveal, .auth__submit, .auth__check, .auth__error--leverandor { transition: none; }
  .auth__card { transition: opacity 150ms ease; }
}