/* eiendomssjekk — flate for søk og rapport.
   Samme fargespråk som soilandintel.no, men egen fil: appen skal kunne deployes uten at
   markedsføringsrepoet er i nærheten. Ingen eksterne forespørsler (fonter, CDN, analytics) —
   personvernerklæringen er skrevet ut fra at sidene ikke lekker 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;
  --ink-dimmer: #616d80;
  --accent: #f5a524;
  --accent-2: #6ea8fe;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
}

* { 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: 860px; margin: 0 auto; padding: 48px 24px 20px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; margin: 0 0 6px; }
h1 small { color: var(--ink-dim); font-size: 0.55em; font-weight: 400; letter-spacing: 0; }
h2 { font-size: 20px; margin: 40px 0 14px; }
h3 {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.09em;
  color: var(--accent-2); text-transform: uppercase;
  margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- søkeskjema ---------- */
.sok .lede { color: var(--ink-dim); max-width: 620px; margin: 0 0 32px; }
form {
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 26px 24px;
}
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
input[type=text], select {
  width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 9px;
}
input[type=text]:focus, select:focus { border-color: var(--accent-2); outline: none; }
.hint { color: var(--ink-dimmer); font-size: 13px; margin: 7px 0 20px; }
button {
  font: inherit; font-weight: 600; cursor: pointer; border: none;
  background: var(--accent); color: #0a0c11;
  border-radius: 999px; padding: 13px 28px;
}
button:hover { filter: brightness(1.08); }

/* ---------- rapportrader ---------- */
.rad {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.rad:last-of-type { border-bottom: none; }
.glyf { font-family: var(--mono); text-align: center; line-height: 1.5; }
.txt { font-size: 15px; }
.txt ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-dim); font-size: 13.5px; }
.txt li { margin-bottom: 3px; }

/* Fargene speiler glyfen. Avgjørelsen er tatt i eiendom.py — dette er bare maling.
   g-ukjent er fallback for en glyf vi ikke kjenner: grå, aldri grønn. */
.g-ok      { color: var(--ok); }
.g-treff   { color: var(--bad); }
.g-lav     { color: var(--warn); }
.g-delvis  { color: var(--warn); }
.g-adv     { color: var(--warn); }
.g-ukjent  { color: var(--ink-dimmer); }
/* ⚠️ `–` er ett av bare tre glyfer som faktisk tar farge (resten har emoji-presentasjon og
   ignorerer `color`), så kontrasten her er den eneste som betyr noe. --ink-dimmer ga 3,8:1
   mot bakgrunnen — under WCAG AA. --ink-dim gir 6,3:1. Panel-funn (kritiker A). */
.g-noytral { color: var(--ink-dim); }
.g-plan    { color: var(--accent-2); }

.note   { color: var(--ink-dim); font-size: 13px; margin: 7px 0 0; font-style: italic; }
.lenke  { font-size: 12.5px; margin: 6px 0 0; word-break: break-all; }
.lenke a { color: var(--accent-2); }

details.forklar {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; margin: 24px 0 8px;
}
details.forklar summary {
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink);
}
details.forklar dl { margin: 14px 0 2px; }

/* ---------- betalingsmur ---------- */
.mur h1 { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 18px; }
.mur p { color: var(--ink-dim); max-width: 620px; }
.mur .note {
  font-size: 13.5px; border-left: 2px solid var(--line-strong);
  padding-left: 14px; margin: 22px 0;
}
.knapp {
  display: inline-block; margin-top: 10px; font-weight: 600;
  background: var(--accent); color: #0a0c11;
  border-radius: 999px; padding: 12px 26px; text-decoration: none;
}
.knapp:hover { filter: brightness(1.08); text-decoration: none; }

.koord { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); margin: 0 0 4px; }
.advarsel { color: var(--warn); font-size: 14px; margin: 10px 0 0; }
.ufullstendig {
  background: rgba(251, 191, 36, 0.09); border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 10px; padding: 14px 16px; margin-top: 30px; font-size: 14.5px;
}
.forbehold, .note { color: var(--ink-dimmer); font-size: 13.5px; margin-top: 18px; }
.feil h1 { color: var(--warn); }

/* ---------- glyfforklaring ---------- */
.forklar dl { display: grid; grid-template-columns: 34px 1fr; gap: 10px 12px; margin: 0; }
.forklar dt { text-align: center; font-family: var(--mono); }
.forklar dd { margin: 0; color: var(--ink-dim); font-size: 14px; }
.forklar dd b { color: var(--ink); }

footer {
  max-width: 860px; margin: 0 auto; padding: 26px 24px 48px;
  border-top: 1px solid var(--line); color: var(--ink-dimmer);
  font-size: 13px; font-family: var(--mono);
}

@media (max-width: 600px) {
  main { padding: 32px 18px 16px; }
  footer { padding: 22px 18px 36px; }
}