/* Innloggingssiden på spillserveren, i samme uttrykk som forsiden (forside/forside.css). Merket står direkte i login.html;
   skriften er login-skrift.woff2, den eneste nye filen på spillserverens åpne liste (server/app.js PUBLIC).
   Farger og knapper er kopiert fra forside/forside.css; test/forside.test.mjs passer på at de er like.
   Feilfargen er spillets app-feil (8,0:1 på natt-flaten); designpakka har ingen ennå. */
:root {
  --pf-skrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --navy-950: #0c171e;
  --navy-900: #13232c;
  --navy-800: #1a2f3b;
  --slate-700: #31434c;
  --slate-500: #6e818c;
  --slate-300: #9aa8b0;
  --frost-100: #e5e8eb;
  --ice-400: #8fbcd4;
  --signal-400: #e0893a;

  --surface: var(--navy-900);
  --surface-sunken: var(--navy-950);
  --surface-raised: var(--navy-800);
  --ink: var(--frost-100);
  --ink-muted: var(--slate-300);
  --border: var(--slate-500);
  --divider: var(--slate-700);
  --accent: var(--ice-400);
  --on-accent: var(--navy-900);
  --signal: var(--signal-400);

  --radius-sm: 4px;
  --radius-md: 8px;
  --marg: 48px;
  --bredde: 1120px;
  /* Venstre- og høyrekant for alt innhold: margen på smale skjermer, ellers sentrert i --bredde */
  --inn: max(var(--marg), calc((100% - var(--bredde)) / 2));
  color-scheme: dark;
}
@media (max-width: 700px) { :root { --marg: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--pf-skrift);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, dl, dd, figure { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

.hopp {
  position: absolute; left: var(--marg); top: -100px; z-index: 10;
  padding: 10px 16px; background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-md);
}
.hopp:focus { top: 12px; }

/* Knapper: én handlingsfarge (isblå), stram 8 px avrunding, ingen piller */
.knapp {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 20px;
  text-decoration: none;
  border: 1px solid var(--accent);
}
.knapp:hover { background: var(--frost-100); border-color: var(--frost-100); }
.knapp-stille { background: transparent; color: var(--ink); border-color: var(--border); padding: 9px 16px; }
.knapp-stille:hover { background: var(--surface-raised); border-color: var(--ink-muted); }

.login {
  min-height: 100svh; display: grid; place-items: center; padding: 32px var(--marg);
  background: var(--surface);
}
.login-boks { width: min(360px, 100%); }
.login-merke { display: block; height: 56px; width: auto; }
.login-boks form { margin-top: 40px; display: grid; gap: 18px; }
.login-boks h1 { font-weight: 600; font-size: 26px; line-height: 1.2; }
.login-boks label { display: grid; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.login-boks input {
  font: inherit; font-weight: 400; font-size: 16px; padding: 11px 12px;
  background: var(--surface-sunken); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.login-boks input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-boks button { font-family: inherit; cursor: pointer; margin-top: 6px; }
.login-boks .hint { color: var(--ink-muted); font-size: 14px; }
#feil { min-height: 1.5em; color: #ff9b8f; font-size: 15px; }
#feil:empty { min-height: 0; }

/* Montserrat 400–600, latinsk delmengde (kopi av forside/skrift/montserrat.woff2, SIL OFL 1.1, lisensen ligger der) */
@font-face {
  font-family: "Montserrat";
  src: url("login-skrift.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}