/* login.css — login-siden og revisor-siden ("kommer snart"). Mørkt glas-kort midt på den dybe navy flade (som Jarvis). */

.login-side { display: grid; min-height: calc(100 * var(--vh)); }
.login {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--trin-4);
    padding: calc(var(--trin-5) + env(safe-area-inset-top)) 16px calc(var(--trin-5) + env(safe-area-inset-bottom));
}
.login__kort {
    width: 100%; max-width: 26rem;
    display: flex; flex-direction: column; gap: var(--trin-5);
    padding: var(--trin-6) var(--trin-5);
    border: 1px solid var(--glas-kant); border-radius: var(--radius-glas);
    background: var(--glas); box-shadow: var(--skygge-staerk);
    -webkit-backdrop-filter: var(--glas-sloer);
    backdrop-filter: var(--glas-sloer);
}
.login__maerke { display: flex; align-items: center; gap: var(--trin-4); }
.login__maerke img { flex: none; filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--farve-blaa) 35%, transparent)); }
.login__titel { font-size: var(--tekst-2xl); font-weight: 600; letter-spacing: -.015em; }
.login__under { font-size: var(--tekst-sm); color: var(--farve-tekst-daempet); }
.login__form { display: flex; flex-direction: column; gap: var(--trin-4); }
.login__password { position: relative; }
.login__password .felt__input { width: 100%; padding-right: calc(var(--touch-min) + 4px); }
.login__vis { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.login__vis[aria-pressed="true"] { color: var(--farve-blaa-lys); }
.login__eller { display: flex; align-items: center; gap: var(--trin-3); color: var(--farve-tekst-svag); font-size: var(--tekst-xs); }
.login__eller::before, .login__eller::after { content: ''; flex: 1; height: 1px; background: var(--farve-linje); }
.login__revisor {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center;
    min-height: var(--touch-min); padding: 0 var(--trin-3);
    color: var(--farve-link); font-size: var(--tekst-sm); font-weight: 600; text-decoration: none; border-radius: var(--radius-knap);
}
.login__revisor:hover { text-decoration: underline; }
.login__fod { max-width: 26rem; text-align: center; font-size: var(--tekst-xs); color: var(--farve-tekst-svag); }

.snart { display: flex; flex-direction: column; gap: var(--trin-3); align-items: flex-start; }
.snart p { color: var(--farve-tekst-daempet); }

/* ---- Trekant-/pyramide-login (index.html) — samme form som ASA-logoet og KLS-login (Jonas 12. okt 2026) ----------
   Ingen kort, ingen boks: logo øverst, derefter navn og tekst, og felterne bliver bredere nedad (72 % → 82 % → 92 %). */
.login-side:has(.login--pyramide) {
    background:
        radial-gradient(ellipse at 60% 10%, color-mix(in srgb, var(--farve-blaa) 22%, transparent), transparent 50%),
        radial-gradient(ellipse at 30% 90%, color-mix(in srgb, var(--farve-navy) 55%, transparent), transparent 50%),
        var(--farve-baggrund);
}
.login--pyramide {
    position: relative; isolation: isolate;
    width: 100%; max-width: calc(30rem + 32px); margin-inline: auto; gap: 0;   /* 480 px indhold = samme bredder som KLS/Dialer: 346 → 394 → 442 px */
}
.login--pyramide::before {   /* blød glød bag pyramiden */
    content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(600px, 100vw); aspect-ratio: 1;
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--farve-blaa) 8%, transparent), transparent 70%);
}
.pyr__logo { width: auto; height: 112px; margin-bottom: 12px; filter: drop-shadow(0 4px 32px color-mix(in srgb, var(--farve-blaa) 35%, transparent)); }
.pyr__navn { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; color: var(--farve-tekst-staerk); line-height: 1.2; margin-bottom: 10px; text-align: center; }
.pyr__under { font-size: 9px; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: var(--farve-tekst-svag); opacity: .8; margin-bottom: 24px; text-align: center; padding-left: .35em; }
.pyr__hint { font-size: 11px; color: var(--farve-tekst-svag); margin-bottom: 16px; text-align: center; }
.pyr__form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pyr__felt { position: relative; }
.pyr__felt--email { width: 72%; }
.pyr__felt--password { width: 82%; }
.pyr__input {
    width: 100%; min-height: var(--touch-min); padding: 12px 44px 12px 16px;
    border: 1px solid color-mix(in srgb, var(--farve-tekst) 8%, transparent); border-radius: var(--radius);
    background: color-mix(in srgb, var(--farve-tekst) 6%, transparent); color: var(--farve-tekst-staerk);
    font: inherit; font-size: var(--tekst-sm);
    transition: border-color var(--bev-hover) var(--bev-ud), background var(--bev-hover) var(--bev-ud), box-shadow var(--bev-hover) var(--bev-ud);
}
.pyr__input::placeholder { color: var(--farve-tekst-svag); opacity: .7; }
.pyr__input:focus { outline: none; border-color: var(--farve-blaa); background: color-mix(in srgb, var(--farve-tekst) 10%, transparent); box-shadow: var(--gloed-blaa); }
.pyr__ikon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--farve-tekst-svag); opacity: .6; pointer-events: none; }
.pyr__vis {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: var(--touch-min); height: var(--touch-min);
    border: 0; background: transparent; color: var(--farve-tekst-svag); cursor: pointer; border-radius: var(--radius);
}
.pyr__vis:hover, .pyr__vis[aria-pressed="true"] { color: var(--farve-blaa-lys); }
.pyr__vis:focus-visible { outline: 2px solid var(--farve-blaa); outline-offset: -2px; }
.pyr__besked { width: 92%; }
.pyr__knap {
    width: 92%; min-height: 48px; margin-top: 4px; padding: 14px 16px;
    border: 0; border-radius: var(--radius); cursor: pointer;
    background: var(--farve-blaa); color: var(--farve-hvid); font: inherit; font-size: var(--tekst-sm); font-weight: 700;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--farve-blaa) 35%, transparent);
    transition: transform var(--bev-hover) var(--bev-ud), box-shadow var(--bev-hover) var(--bev-ud), background var(--bev-hover) var(--bev-ud);
}
.pyr__knap:hover:not(:disabled) { background: var(--farve-blaa-hover); transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--farve-blaa) 45%, transparent); }
.pyr__knap:active:not(:disabled) { transform: none; }
.pyr__knap:focus-visible { outline: 2px solid var(--farve-blaa-lys); outline-offset: 3px; }
.pyr__knap:disabled { opacity: .6; cursor: not-allowed; }
.pyr__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin-top: 6px; }
.pyr__link {
    display: inline-flex; align-items: center; gap: 4px; min-height: var(--touch-min); padding: 0 8px;
    border: 0; background: transparent; cursor: pointer; text-decoration: none;
    font: inherit; font-size: var(--tekst-xs); color: var(--farve-tekst-daempet); border-radius: var(--radius-knap);
    transition: color var(--bev-hover) var(--bev-ud);
}
.pyr__link:hover { color: var(--farve-tekst-staerk); }
.pyr__link:focus-visible { outline: 2px solid var(--farve-blaa); outline-offset: 2px; }
.pyr__link:disabled { opacity: .6; }
.login-side:has(.login--pyramide) { grid-template-rows: 1fr auto; }
/* Sekundære links ligger UDEN for pyramiden, diskret i bunden (som Priser/FAQ på Elinstallatør) */
.pyr__fod { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); }
.pyr__fod .pyr__links { margin-top: 0; }
.pyr__fod .login__fod { max-width: 30rem; font-size: var(--tekst-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
    .pyr__felt--email { width: 80%; }
    .pyr__felt--password { width: 88%; }
    .pyr__besked, .pyr__knap { width: 96%; }
    .pyr__input { font-size: var(--tekst-md); }   /* 16 px: ingen iOS-zoom */
}
@media (prefers-reduced-motion: reduce) { .pyr__knap:hover:not(:disabled) { transform: none; } }