/* =========================================================
   FRONTNESS ANALYTICS: inloggningen
   Samma struktur som app.frontness.io: fristående skärm, inget
   sidhuvud, ingen sidfot. Två spalter på stora skärmar med
   formuläret till vänster och en mörk citatsida till höger.

   Bygger på style.css (tokens, reset, .pill). Ingenting här får
   uppfinna en egen färg, då glider apparna isär.
   ========================================================= */

.auth{ min-height:100dvh; display:grid; grid-template-columns:1fr }
@media (min-width:960px){ .auth{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }

/* ------------------------------- panelen ------------------------------ */
.auth__panel{
  display:flex; flex-direction:column; justify-content:center;
  width:100%; max-width:30rem; margin-inline:auto; padding:2.5rem 1.5rem;
}
@media (min-width:640px){ .auth__panel{ padding:3rem 2.5rem } }
/* På desktop står den mörka citatsidan bredvid, med 1rem luft ned från toppen.
   Panelen ska börja på samma höjd: annars flyter varumärket och rubriken ned mot
   mitten medan kortet börjar högt uppe, och de två spalterna hänger inte ihop.
   Därför top-justering här i stället för centrering, med toppen på kortets rad. */
@media (min-width:960px){
  .auth__panel{ max-width:34rem; margin-inline:0; padding:3rem 4rem; justify-content:flex-start }
  /* Varumärket står kvar högst upp. Formuläret (Logga in … Inget konto) mittas
     lodrätt i ytan under det: auto-marginal över rubriken och under vyn delar
     det överblivna utrymmet lika, så blocket hamnar i mitten. */
  .auth__panel h1{ margin-top:auto }
  .auth__views{ margin-bottom:auto }
}

/* Logotypen med produktnamnet till höger, åtskilt av en tunn separator. */
.auth__brand{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:3rem; align-self:flex-start;
}
.auth__brand .logo{ height:1.375rem; width:auto }
.auth__brand span{
  padding-left:.5rem; border-left:1px solid var(--line);
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  color:rgba(17,17,17,.55);
}

.auth h1{ font-size:2.25rem; font-weight:600; letter-spacing:-.025em; line-height:1.05 }
@media (min-width:640px){ .auth h1{ font-size:2.75rem } }
.auth__lead{ margin-top:1rem; max-width:38ch; font-size:1rem; line-height:1.65; color:rgba(17,17,17,.6) }

/* ------------------------------ formuläret ---------------------------- */
.auth__views{ margin-top:2.5rem }
.auth__view[hidden]{ display:none }

.auth__form{ display:flex; flex-direction:column; gap:1.125rem }
.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) }
@media (prefers-reduced-motion:reduce){ .auth__field input{ transition:none } }

/* .pill kommer ur style.css. Fjädern i main.js finns inte i appen. Här räcker
   en transition, så knappen inte står helt stum. */
.auth__submit{ align-self:flex-start; margin-top:.25rem; border:0; background:none; padding:0; cursor:pointer }
.auth__submit .pill__scale{ transition:transform .3s cubic-bezier(.16,1,.3,1) }
.auth__submit:hover:not(:disabled) .pill__scale{ transform:scale(1.03) }
.auth__submit:disabled{ cursor:wait }

/* Badgen är den runda brickan med pilen, och scenen för skicket: pilen flyger ut
   ur cirkeln (overflow klipper den) och en spinner tonar in i samma läge. */
.auth__submit .pill__badge{ position:relative; overflow:hidden }
.auth__submit .pill__badge svg{
  width:1em; height:1em;
  transition:transform .32s cubic-bezier(.5,0,.75,0), opacity .2s ease;
}
.auth__submit.is-sending .pill__badge svg{ transform:translateX(180%); opacity:0 }

.pill__spin{
  position:absolute; top:50%; left:50%; width:.95em; height:.95em; margin:-.475em 0 0 -.475em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  opacity:0; transition:opacity .2s ease .08s;
}
.auth__submit.is-sending .pill__spin{ opacity:1; animation:pill-spin .6s linear infinite }
@keyframes pill-spin{ 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 }
.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 } }

@media (prefers-reduced-motion:reduce){
  .auth__submit .pill__scale,
  .auth__submit .pill__badge svg,
  .pill__spin,
  .auth__view,
  .auth__view.is-leaving{ transition:none; animation:none }
  .auth__submit.is-sending .pill__spin{ animation:none; opacity:1 }
}

.auth__hint{ margin-top:1.25rem; max-width:40ch; font-size:.8125rem; line-height:1.6; color:var(--muted) }

/* Kvittot (länken är skickad) återanvänder .auth__lead: e-posten i fetstil, och
   en tom ledtext (inloggningsvyn har ingen) 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 }
.auth__view > .auth__link{ margin-top:1.25rem; display:inline-block }

.auth__link{
  font:inherit; font-size:.875rem; color:var(--accent);
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(177,95,44,.4);
}
.auth__link:hover{ color:var(--foreground) }

.auth__foot{ margin-top:2.5rem; max-width:40ch; font-size:.875rem; line-height:1.6; color:var(--muted) }

/* ------------------------------ prova gratis --------------------------
   Samma formulär som inloggningen, i en <dialog> som ger fokusfälla, Escape
   och bakgrund utan en rad extra kod. Rutan finns för att den som inte har
   ett konto ska känna sig inbjuden, inte för att vägen dit är en annan. Den
   är densamma. */
.auth__modal{
  margin:auto; width:min(26rem, calc(100vw - 2.5rem)); padding:2.25rem;
  border:1px solid var(--line); border-radius:var(--radius-card);
  background:var(--background); color:var(--foreground); position:relative;
  box-shadow:0 1px 2px rgba(17,17,17,.05), 0 30px 70px -30px rgba(17,17,17,.45);
}
.auth__modal::backdrop{ background:rgba(10,10,10,.55); backdrop-filter:blur(4px) }
.auth__modal h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em }
.auth__modal__lead{
  margin-top:.5rem; margin-bottom:1.75rem;
  font-size:.9375rem; line-height:1.6; color:rgba(17,17,17,.6);
}
.auth__modal__close{
  position:absolute; top:1rem; right:1.125rem;
  padding:.25rem; border:0; background:none; cursor:pointer;
  font-size:1.0625rem; line-height:1; color:var(--muted);
}
.auth__modal__close:hover{ color:var(--foreground) }
/* I rutan står knappen ensam och får ta hela bredden. */
.auth__modal .auth__submit{ align-self:stretch }
.auth__modal .auth__submit .pill__scale,
.auth__modal .auth__submit .pill__in{ display:flex; width:100%; justify-content:center }
.auth__modal .auth__hint{ margin-top:1rem }

/* -------------------------------- sidan ------------------------------- */
/* Dold på små skärmar: den bär ingen information, bara stämning. */
.auth__aside{ display:none }
@media (min-width:960px){
  .auth__aside{
    position:relative; display:grid; align-items:end; overflow:hidden;
    margin:1rem 1rem 1rem 0;
    background:var(--ink); border-radius:var(--radius-card) 0 0 var(--radius-card);
  }
}
/* Varpen: samma lodräta trådar som på frontness.se. */
.auth__weave{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px),
    radial-gradient(120% 80% at 20% 0%, rgba(177,95,44,.18), transparent 60%);
}
.auth__quote{ position:relative; padding:3.5rem }
.auth__quote p{
  max-width:26ch; font-size:1.375rem; font-weight:500; line-height:1.5; letter-spacing:-.01em; color:#fff;
}
.auth__quote cite{
  display:block; margin-top:1.25rem; font-style:normal;
  font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.45);
}