/* feedbackautomator — skjema og statusside.
   Samme fargespråk som eiendomssjekk og soilandintel.no, men egen fil: tjenesten skal kunne
   deployes uten at de andre repoene er i nærheten. Ingen eksterne forespørsler (fonter, CDN,
   analytics) — sidene skal ikke lekke besøkende-IP noe sted.
   ponytail: ingen build, ingen preprosessor. */

:root {
  --bg: #0a0c11;
  --bg-raised: #111620;
  --line: rgba(226, 236, 255, 0.08);
  --line-strong: rgba(226, 236, 255, 0.17);
  --ink: #eaf0f8;
  --ink-dim: #97a3b6;
  --accent: #f5a524;
  --accent-2: #6ea8fe;
  --ok: #34d399;
  --bad: #f87171;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 640px; margin: 0 auto; padding: 48px 24px 64px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.02em; margin: 0 0 6px; }
h1 small { color: var(--ink-dim); font-size: 0.55em; font-weight: 400; letter-spacing: 0; }

.ingress { color: var(--ink-dim); margin: 0 0 28px; }
.hjelp { color: var(--ink-dim); font-size: 14px; margin: 2px 0 8px; }
.valgfri { color: var(--ink-dim); font-weight: 400; }
.fot { color: var(--ink-dim); font-size: 14px; margin-top: 36px; }

/* Tom feilboks skal ikke etterlate et hull. `:empty` sparer en variant av malen. */
.feil { margin: 0 0 24px; padding: 12px 14px; border-radius: 8px;
        border: 1px solid var(--bad); color: var(--bad); background: rgba(248, 113, 113, 0.08); }
.feil:empty { display: none; }

.tilstand { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px;
            border: 1px solid var(--line-strong); background: var(--bg-raised);
            color: var(--accent-2); font-weight: 600; font-size: 14px; }

label { display: block; margin: 22px 0 4px; font-weight: 600; }
label.valg { display: block; margin: 6px 0; font-weight: 400; }

select, textarea, input[type="email"], input[type="text"] {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--ink);
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 8px;
}
textarea { resize: vertical; min-height: 140px; }
select:focus-visible, textarea:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

fieldset { margin: 22px 0 0; padding: 0; border: 0; }
legend { padding: 0; font-weight: 600; }

button {
  margin-top: 28px; padding: 13px 26px; font: inherit; font-weight: 600;
  color: #0a0c11; background: var(--accent); border: 0; border-radius: 8px; cursor: pointer;
}
button:hover { filter: brightness(1.08); }

/* Honeypot. `display:none` holder den ute av tabbing og av skjermlesere, og et menneske
   kan ikke fylle den ut ved uhell.
   ⚠️ Dette er BELTE OG BUKSESELER, ikke det eneste vernet: `skjema.html` setter ogsaa
   `hidden` paa div-en. Fram til runde 13 var denne regelen alene om aa skjule feltet, og
   et 404 paa stil.css gjorde da at et menneske kunne fylle den ut og faa «Mottatt» i retur
   mens rapporten ble kastet. Fjern ingen av de to. */
.hp { display: none; }

@media (prefers-reduced-motion: no-preference) {
  button { transition: filter 120ms ease; }
}