/* =========================================================
   COPPLA: inloggningen.

   Fristående skärm: inget sidhuvud, ingen sidfot, EN ruta mitt på.
   Här stod två spalter med en mörk panel och ett citat bredvid
   formuläret. Panelen bar ingenting man behövde — den var stämning
   på halva skärmen, och stämning är inte vad man är där för.
   Bygger på style.css (tokens, reset, .pill).
   ========================================================= */

.auth{ min-height:100dvh; display:grid; place-items:center; padding:1.5rem }

/* Samma botten som resten av appen i mörkt läge, så att rutan lyfter ur
   den i stället för att ligga i den. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .a-main--auth{ background:#010101 }
}
:root[data-theme="dark"] .a-main--auth{ background:#010101 }

/* ------------------------------ innehållet ---------------------------- */
/* INGEN RUTA. Kortet ramade in tre element mitt på en tom skärm — och det
   som redan är ensamt mitt på skärmen behöver ingen ram för att hittas.
   Kvar är märket, fältet och knappen, centrerade i en smal spalt. */
.auth__panel{
  /* 18.875rem = 302 px. Femtio pixlar smalare än de 22rem den låg på:
     en e-postadress får plats ändå, och rutan blir en rad man skriver i
     i stället för ett fält som sträcker sig över halva ytan. */
  width:100%; max-width:18.875rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  /* EN gap och inte fyra marginaler. Rubriken och ledtexten finns bara i
     vissa steg, och ett element som är display:none är inte ett flexbarn —
     luckan försvinner med det, av sig själv. Med marginaler hade varje steg
     behövt sin egen undantagsregel. */
  gap:1.5rem;
}

/* Varumärket. Separatorn sitter på .auth__brand__note och inte på "span":
   logotypen ÄR ett span, och den generella regeln ritade en lodrät streck
   framför ordmärket. */
.auth__brand{ display:inline-flex; align-items:center; margin-bottom:1rem }
.auth__brand__note{
  padding-left:.5rem; border-left:1px solid var(--line);
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  color:var(--muted);
}

/* Rubriken finns bara i stegen som har något att heta: Kolla mejlen,
   Organisationsnummer. Första steget har ingen — märket säger vart man
   loggar in och fältet vad som ska skrivas. */
.auth h1{ font-size:1.75rem; font-weight:600; letter-spacing:-.025em; line-height:1.15 }
.auth__lead{ max-width:34ch; font-size:.9375rem; line-height:1.6; color:var(--muted) }
/* Kvittot återanvänder .auth__lead. En tom ledtext ska inte lämna ett hål. */
.auth__lead:empty{ display:none }
.auth__lead b{ font-weight:600; color:var(--foreground); word-break:break-word }

/* --------------------------- fält i hela appen ------------------------ */
/* .auth__field föddes här men bor i hela appen: projektrutan, typsnitten,
   kanalerna, brevlådorna. Reglerna står därför kvar oförändrade även nu när
   inloggningen själv inte längre använder dem — den har en egen form, längre
   ned. Flyttas de någon gång är det till style.css, inte bort. */
.auth__field{ display:flex; flex-direction:column; gap:.5rem }
.auth__field > span{
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.auth__field input{
  font:inherit; font-size:1rem; color:inherit; background:var(--background);
  border:1px solid var(--line); border-radius:var(--radius-control);
  padding:.9rem 1.125rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.auth__field input::placeholder{ color:var(--subtle) }
.auth__field input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(177,95,44,.15) }

/* ---------------------------- inloggningen ---------------------------- */
.auth__views{ width:100% }
.auth__form{ display:flex; flex-direction:column; align-items:center; gap:1.125rem }

/* EN RAM, MED PILEN I. Fältet och knappen var två former under varandra —
   ett fält att fylla i och ett beslut att fatta, i den ordningen. Det här är
   samma sak sagt som en enda gest: skriv, och tryck på pilen i kanten. Formen
   är lånad från en chattruta, och den är lånad för att alla redan kan den.

   Ramen ligger på behållaren och inte på fältet. Fältet inuti är helt naket:
   hade det burit sin egen kant hade det blivit en ruta i en ruta. */
/* MÅTTEN HÄNGER IHOP, och det är hela skälet att de står samlade här:
   ramens padding (.3125rem) är också knappens avstånd till kanten, åt alla
   fyra håll. Satt avståndet på knappens marginal i stället blev det till
   höger ett annat än det uppåt — knappen såg klämd mot kanten ut utan att
   något var fel på måtten var för sig.

   Radens höjd = knappen (2.25rem). Fältets padding är satt så att det blir
   exakt lika högt, annars avgör texten höjden och cirkeln flyter. */
.auth__komp{
  width:100%; display:flex; align-items:center; overflow:hidden;
  padding:.3125rem;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius-pill);
  transition:border-color .28s, box-shadow .2s;
}
/* Fokusringen sitter på RAMEN och inte på fältet — det är hela formen som är
   aktiv, inte den del av den som råkar ta emot tecknen. */
.auth__komp:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(177,95,44,.15) }

.auth__komp input{
  flex:1; min-width:0; height:2.25rem;
  font:inherit; font-size:1rem; color:inherit; text-align:left;
  background:none; border:0; outline:none;
  padding:0 0 0 1rem;
}
.auth__komp input::placeholder{ color:var(--subtle) }

/* Koden är sex tecken och ingenting annat: centrerad, glesad, och med samma
   luft till vänster som knappen tar till höger så att siffrorna står mitt i
   rutan och inte mitt i elementet. */
.auth__komp--kod input{
  text-align:center; letter-spacing:.4em; font-size:1.125rem;
  /* Glesningen lägger ett mellanrum efter SISTA tecknet också, och det drar
     raden en halv luft åt vänster. Indraget tar igen det. */
  text-indent:.4em;
  /* Knappens bredd plus dess marginal, så att siffrorna står mitt i RUTAN
     och inte mitt i fältet. */
  padding-left:2.75rem;
}

/* Pilen. Släckt tills det står något som går att skicka — en knapp som ser
   tryckbar ut innan den gör något lär en att trycket inte betyder något. */
.auth__ga{
  position:relative; flex:none; width:2.25rem; height:2.25rem; margin-left:.5rem;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:var(--ink); color:var(--on-ink); cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.auth__ga:disabled{ opacity:.3; cursor:default }
.auth__ga:not(:disabled):hover{ transform:translateY(-1px) }
.auth__ga svg{ width:1rem; height:1rem }

/* Pilen blir ringen. Den byts inte ut mot ett annat element — den tonar bort
   och en ring ritas i samma cirkel, så att formen aldrig hoppar. */
.auth__ga.is-sending{ opacity:1; cursor:wait }
.auth__ga.is-sending svg{ opacity:0 }
.auth__ga.is-sending::after{
  content:''; position:absolute; inset:.3125rem;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:auth-snurr .7s linear infinite;
}
@keyframes auth-snurr{ to{ transform:rotate(360deg) } }

/* Vy-övergången: varje ny .auth__view tonar in och glider upp på plats. Den
   utgående får .is-leaving strax före bytet och tonar ned åt andra hållet. */
.auth__view{ animation:auth-view-in .38s cubic-bezier(.16,1,.3,1) both }
/* Byte av innehåll i samma ruta, inte en ny vy. Adressen blir koden i samma
   bildruta som trycket — allt annat läser som ett steg till. */
.auth__view.is-direkt{ animation:none }
.auth__view.is-leaving{
  opacity:0; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
}
@keyframes auth-view-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.auth__view > .auth__link{ margin-top:1.25rem; display:inline-block }
/* Vit text, inte accentfärg. Raden är en väg TILLBAKA — den ska gå att
   hitta men inte konkurrera med pilen om blicken, och en orange understruken
   länk under en vit knapp läser som det viktigaste på skärmen.

   Understrykningen finns kvar, i samma färg som texten och nedtonad: utan
   den är ordet bara ett ord, och man vet inte att det går att trycka på. */
.auth__link{
  font:inherit; font-size:.875rem; color:var(--foreground);
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.25);
}
.auth__link:hover{ text-decoration-color:currentColor }

@media (prefers-reduced-motion:reduce){
  .auth__ga,
  .auth__komp,
  .auth__view,
  .auth__view.is-leaving{ transition:none; animation:none }
  /* Ringen får snurra. Den är inte utsmyckning utan själva beskedet om att
     något pågår, och utan rörelse säger den ingenting. */
}