/* Veikassa — felles stil.
   Alle farger er variabler. Ingen farge defineres bare inne i en
   media-spørring, ellers faller den ut i lys modus. */

:root {
  --ground:#f2f3ef; --surface:#fff; --surface-2:#e9ebe5; --surface-3:#f7f8f5;
  --ink:#18201c; --muted:#5d6762; --faint:#8b948e; --line:#d4d9d3;
  --forest:#1f4d36; --forest-hi:#2a6647; --forest-soft:#e3ece6; --pa-forest:#fff;
  --moss:#7d9a6b; --amber:#8a6a1f; --amber-soft:#f6efdc;
  --danger:#9a3c31; --danger-soft:#f9e9e7;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#131614; --surface:#1b1f1d; --surface-2:#242a26; --surface-3:#1f2421;
    --ink:#e7ece8; --muted:#9ba59e; --faint:#727d77; --line:#2e3531;
    --forest:#7cba95; --forest-hi:#9ad2af; --forest-soft:#1e2c25; --pa-forest:#10201a;
    --moss:#8fae7c; --amber:#d3ab4e; --amber-soft:#2a2415;
    --danger:#e0867a; --danger-soft:#2b1b19;
  }
}
:root[data-theme="dark"] {
  --ground:#131614; --surface:#1b1f1d; --surface-2:#242a26; --surface-3:#1f2421;
  --ink:#e7ece8; --muted:#9ba59e; --faint:#727d77; --line:#2e3531;
  --forest:#7cba95; --forest-hi:#9ad2af; --forest-soft:#1e2c25; --pa-forest:#10201a;
  --moss:#8fae7c; --amber:#d3ab4e; --amber-soft:#2a2415;
  --danger:#e0867a; --danger-soft:#2b1b19;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--forest-hi); text-underline-offset: 3px; }

/* ── typografi ─────────────────────────────────────── */
h1 { margin:0 0 6px; font-size:clamp(1.45rem,2.6vw,1.9rem); letter-spacing:-.03em; text-wrap:balance; }
h2 { margin:0 0 4px; font-size:1.1rem; letter-spacing:-.02em; }
.ingress { margin:0 0 26px; color:var(--muted); max-width:58ch; }
.merkelapp { font-family:var(--mono); font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--moss); }
.tall { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ── skjema ────────────────────────────────────────── */
.felt { display:flex; flex-direction:column; gap:5px; margin-bottom:18px; }
.felt > label { font-size:.82rem; font-weight:600; }
.felt .hjelp { font-size:.78rem; color:var(--faint); }
.felt input, .felt select, .felt textarea {
  width:100%; min-height:44px; padding:10px 12px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--surface-3); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.felt input:focus, .felt select:focus, .felt textarea:focus {
  border-color:var(--forest); box-shadow:0 0 0 3px var(--forest-soft);
}
.felt input[aria-invalid="true"] { border-color:var(--danger); }
.felt .feilmelding { font-size:.8rem; color:var(--danger); font-weight:500; }
.etikettrad { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }

.passordboks { position:relative; }
.passordboks input { padding-right:76px; }
.vis-passord {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  border:0; background:transparent; color:var(--forest-hi);
  font-size:.79rem; font-weight:700; padding:8px; border-radius:6px; cursor:pointer;
}
.vis-passord:hover { background:var(--surface-2); }

/* ── knapper ───────────────────────────────────────── */
.knapp {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 20px; border-radius:8px;
  border:1px solid var(--forest); background:var(--forest); color:var(--pa-forest);
  font-weight:600; cursor:pointer; transition:background .15s, transform .08s;
}
.knapp:hover:not(:disabled) { background:var(--forest-hi); border-color:var(--forest-hi); }
.knapp:active:not(:disabled) { transform:translateY(1px); }
.knapp:disabled { opacity:.55; cursor:progress; }
.knapp.bred { width:100%; }
.knapp.enkel { background:transparent; color:var(--ink); border-color:var(--line); font-weight:500; }
.knapp.enkel:hover:not(:disabled) { background:var(--surface-2); }
.tekstknapp {
  border:0; padding:0; background:transparent; color:var(--forest-hi);
  font-size:.87rem; font-weight:600; text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--forest-hi) 40%, transparent);
  text-underline-offset:3px; cursor:pointer;
}
:where(button, a, input, select, textarea):focus-visible {
  outline:2px solid var(--forest); outline-offset:2px;
}

/* ── meldinger ─────────────────────────────────────── */
.melding {
  display:flex; gap:9px; padding:12px 14px; border-radius:8px;
  font-size:.88rem; margin-bottom:18px; border:1px solid transparent;
}
.melding[hidden] { display:none; }
.melding.feil   { background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 35%,transparent); color:var(--danger); }
.melding.info   { background:var(--forest-soft); border-color:color-mix(in srgb,var(--forest) 30%,transparent); }
.melding.varsel { background:var(--amber-soft); border-color:color-mix(in srgb,var(--amber) 35%,transparent); }

/* ── kort og lister ────────────────────────────────── */
.kort { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.kort-inn { padding:20px; }

.tabellboks { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:9px 14px; border-bottom:1px solid var(--line); font-size:.86rem; }
th { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--faint);
     font-weight:600; background:var(--surface-3); white-space:nowrap; }
td.n, th.n { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
tbody tr:hover { background:var(--surface-3); }
tbody tr:last-child td { border-bottom:0; }

/* ── innloggingsskjermer ───────────────────────────── */
.port { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(480px,1.15fr); min-height:100%; }
.port-side {
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(28px,5vw,64px); background:var(--forest); color:#fff;
}
:root[data-theme="dark"] .port-side, .port-side { color:#fff; }
.port-merke b { font-weight:700; letter-spacing:-.02em; font-size:1.05rem; }
.port-merke span { display:block; font-family:var(--mono); font-size:.76rem; color:rgba(255,255,255,.62); }
.port-fot { font-size:.86rem; color:rgba(255,255,255,.62); max-width:34ch; }
.port-hoved { display:grid; place-items:center; padding:40px clamp(16px,6vw,84px); }
.port-panel { width:min(100%,430px); }
.mobilmerke { display:none; margin-bottom:40px; color:var(--forest); }
.mobilmerke span { color:var(--muted); }

@media (max-width:820px) {
  .port { grid-template-columns:1fr; }
  .port-side { display:none; }
  .port-hoved { align-content:start; padding-top:32px; }
  .mobilmerke { display:block; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none!important; animation:none!important; } }