/* ══════════════════════════════════════════════════════
   LOGIN MED GOOGLE: loginskærm og kontolinje (login.js)
   Samme udtryk som den tidligere loginskærm. Farverne er designsystemets
   (docs/design-system.md, :root i styles.css) og står her som faste værdier,
   fordi loginskærmen skal se ens ud på alle sider, også dem med egne farver
   (crystal-mobile.html og market-risk.html). #162535 er loginboksens flade
   som før. #c0392b er rød på mørk flade (besluttet 25.09.2026).
══════════════════════════════════════════════════════ */

/* Indtil login er afklaret, er siden skjult og kan ikke scrolles.
   visibility bevarer layoutet, så grafer kan måle deres bredde. */
html.lg-laast body { visibility: hidden; overflow: hidden; }
html.lg-laast #login-screen { visibility: visible; }

#login-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: #1E2D3D;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
  font-family: 'Jost', system-ui, sans-serif; color: #F8F6F2;
  -webkit-font-smoothing: antialiased;
}
#login-screen[hidden] { display: none; }
#login-screen *, #login-screen *::before, #login-screen *::after { box-sizing: border-box; margin: 0; padding: 0; }

#login-screen .login-box {
  width: 360px; max-width: 100%; padding: 52px 44px;
  background: #162535;
  border: 0.5px solid #2c3f52;
  border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  animation: lg-ind .35s ease;
}
@media (max-width: 400px) { #login-screen .login-box { padding: 40px 22px; } }
@keyframes lg-ind { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #login-screen .login-box { animation: none; } }

#login-screen .login-logo  { font-size: 28px; line-height: 1; color: #C9A84C; margin-bottom: 4px; }
#login-screen .login-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; font-weight: 400; line-height: 1.2; color: #F8F6F2; letter-spacing: .02em; }
#login-screen .login-sub   { font-size: 10px; font-weight: 300; color: #7a9ab5; letter-spacing: .14em; text-transform: uppercase; margin-top: -4px; }

#login-screen .login-google {
  width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 16px;
  background: #C9A84C; color: #1E2D3D; border: 0; border-radius: 3px;
  font: 500 14px/1.2 'Jost', system-ui, sans-serif; letter-spacing: .02em;
  cursor: pointer; transition: opacity .2s;
}
#login-screen .login-google:hover { opacity: .88; }
#login-screen .login-google:focus-visible { outline: 2px solid #F8F6F2; outline-offset: 2px; }
#login-screen .login-google:disabled { opacity: .6; cursor: default; }
#login-screen .login-google[hidden] { display: none; }

/* Besked under knappen. Tegnet (i eller !) og teksten bærer betydningen; farven støtter. */
#login-screen .login-besked {
  width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left;
  font-size: 13px; line-height: 1.45; color: #EAE5DC;
  padding: 10px 12px; border: 0.5px solid #2c3f52; border-left: 2px solid #7a9ab5; border-radius: 3px;
}
#login-screen .login-besked[hidden] { display: none; }
#login-screen .login-besked.fejl { border-left-color: #c0392b; }
#login-screen .login-besked .lg-ikon {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; color: #7a9ab5; font-size: 11px; font-weight: 600; line-height: 1;
}
#login-screen .login-besked.fejl .lg-ikon { color: #c0392b; }
#login-screen .login-besked b { font-weight: 500; color: #F8F6F2; }
#login-screen .login-besked small { display: block; margin-top: 2px; font-size: 12px; color: #7a9ab5; overflow-wrap: anywhere; }
#login-screen .login-hjaelp { font-size: 12px; line-height: 1.45; color: #7a9ab5; }
#login-screen .login-hjaelp[hidden] { display: none; }

/* Kontolinje: "Logget ind som … · Log ud". Arver farve og skrift fra stedet på siden. */
.lg-konto { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 12px; line-height: 1.4; }
.lg-konto .lg-mail { overflow-wrap: anywhere; }
.lg-konto .lg-logud {
  min-height: 44px; min-width: 44px; padding: 0 4px;
  background: none; border: 0; color: inherit; font: inherit; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lg-konto .lg-logud:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* Sider uden fast plads til kontolinjen får den nederst. */
.lg-fod { justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }