/* ============================================================
   logg-inn.css - sideoppsettet for innloggingen (felles/visning/layout.php)

   Innloggingen bruker designsystemets komponenter: kortet er component('kort'), feltene component('felt'), knappene
   .ds1_knapp/.lenkeknapp, meldingene .varsel og «Del posisjon» component('bryter'). Denne fila eier bare det som er sidas
   eget: kortet midt på sida, dekoren bak, temaknappens plass, kodefeltets nedtelling (som login.js tegner) og toasten login.js
   skriver til. Alle farger og mål er tokens fra temaet.
   ============================================================ */

html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body.logg-inn { background: var(--bg); color: var(--text); font-family: var(--ui-font-family); font-size: var(--ui-font-base); }
/* Knapper arver ikke skrift av seg selv; skallet får det fra sine egne regler, denne sida herfra. */
body.logg-inn button { font-family: inherit; }

/* ---------- dekor: skisserte kartlinjer og dyrespor (login-dekor.php) ---------- */
.lc-dekor {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    color: rgb(var(--fg-rgb) / 0.10);
}
.lc-dekor-svg { position: absolute; inset: -8%; width: 116%; height: 116%; }
.lc-dekor-kart { opacity: 0.85; }
.lc-dekor-spor { opacity: 0.6; }
[data-theme="dark"] .lc-dekor { color: rgb(var(--fg-rgb) / 0.07); }

/* ---------- kortet midt på sida ---------- */
.login-wrap {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: max(var(--space-6), env(safe-area-inset-top, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px))
             max(var(--space-6), env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
}
.login-wrap > .login-card {
    box-sizing: border-box;
    width: min(100%, 420px);
    margin: 0;
    padding: var(--space-6);
}
/* Midlertidig: /bli-med (deling) og bekreftelsen av ny kontakt (profil) har <div class="login-card"> uten .kort. Til de bruker
   component('kort') får de kortets flate her, med kortets tokens. */
.login-wrap > .login-card:not(.kort) {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

.logo-row { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.lc-merke-ikon { display: block; width: auto; height: 52px; max-width: 100%; object-fit: contain; }
[data-theme="dark"] .lc-merke-ikon { filter: invert(1); }

.lc-hode { text-align: center; }
.lc-hode .ds1_sidetittel { margin: 0; }
.lc-under { margin: var(--space-2) auto 0; max-width: 34ch; color: var(--text-muted); white-space: pre-line; text-wrap: balance; }

/* Knappene i kortet går over hele bredden (ikonknapper og feltknapper ikke). */
.login-card .ds1_knapp:not(.ds1_knapp--ikon) { width: 100%; box-sizing: border-box; }
.lc-knapper { display: grid; gap: var(--space-2); }
/* Metodeknappene står skjult til noe er skrevet: da tar raden ingen plass i skjemaet (ingen dobbel luft).
   Uten JavaScript er <noscript>-knappene ekte knapper, og raden vises. */
#dynamic-buttons-area:not(:has(button:not([hidden]))) { display: none; }
.lc-eller { margin: 0; text-align: center; color: var(--text-muted); font-size: var(--ui-font-xs); letter-spacing: 0.12em; }
.login-card .varsel { margin: 0; }

.pass-group { display: grid; gap: var(--space-2); }
.pass-group #btn-forgot { justify-self: end; }
.lc-geo { margin-top: var(--space-2); }

/* ---------- kodefeltet: vises når login.js setter .otp-active ---------- */
.otp-group { display: none; }
.otp-active .otp-group { display: grid; gap: var(--space-2); }
.otp-active .pass-group { display: none; }
#btn-back-pass { justify-self: center; }

.otp-code-input { text-align: center; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
/* Nedtelling og «send på nytt» i høyre kant av kodefeltet (login.js: ensureOtpWrap). */
.otp-input-wrap { position: relative; }
.otp-input-wrap .otp-code-input { padding-right: 52px; }
.otp-ttl {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--ui-font-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
button.otp-resend {
    pointer-events: auto;
    min-width: var(--tap, 44px);
    min-height: var(--tap, 44px);
    right: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
}
button.otp-resend:hover { color: var(--text); }
button.otp-resend:disabled { cursor: default; opacity: 0.6; }
.otp-sub { display: flex; justify-content: center; gap: var(--space-2); margin: 0; font-size: var(--ui-font-xs); color: var(--text-muted); }
.otp-sub:empty { display: none; }
.lc-kode-hjelp { text-align: center; }

/* Innloggingslenke sendt: statusboksen i stedet for feltet (login.js skjuler .lc-ident-felt). */
#login-view.is-magic-lenke #magic-link-status { margin: var(--space-4) 0; }

/* ---------- temaknappen oppe til høyre ---------- */
.lc-tema {
    position: fixed;
    top: max(var(--space-3), env(safe-area-inset-top, 0px));
    right: max(var(--space-3), env(safe-area-inset-right, 0px));
    z-index: 10;
}

/* ---------- toast (login.js: showNotification) ---------- */
.notification-container {
    position: fixed;
    top: max(var(--space-3), env(safe-area-inset-top, 0px));
    left: var(--space-3);
    right: var(--space-3);
    z-index: 9999;
    max-width: 400px;
    margin-inline: auto;
    pointer-events: none;
}
.notification { display: none; pointer-events: auto; margin: 0; background: var(--card-bg); box-shadow: var(--shadow); }
.notification.show { display: block; }