/* Flightrax — de OFFENTLIGE sidene (support, personvern).
 *
 * Brage 21/8: «design design design … tenk tema og harmoni». Disse to
 * sidene sto igjen på den gamle marineblå weben med grønne lenker, mens
 * hele appen ble svart med blå aksent. Det er nøyaktig innvendingen hans
 * fra 7/8 — «det ser ut som del av 2 ulike apper» — bare på de sidene
 * App Store faktisk lenker til.
 *
 * Formspråket er appens eget: svart lerret, grupperte plater med hårstrek
 * mellom radene, seksjonsetiketter som VERSALER over gruppa, én aksent.
 *
 * Tokenene er speilet fra styles.css med VILJE (sidene er statiske og skal
 * ikke dra inn 1900 linjer app-CSS). tests/test_public_pages.py holder de
 * to blokkene i takt — en kopi uten vakt driver fra hverandre.
 */

:root {
  color-scheme: dark;
  --bg: #000000;
  --plate: #1c1c1e;
  --plate-2: #2c2c2e;
  --fg: #ffffff;
  --muted: #8e8e93;
  --muted-rgb: 235, 235, 245;
  --accent: #5b9dff;
  --accent-rgb: 91, 157, 255;
  --accent2: #46d4ff;
  --good: #4ade80;
  --line: rgba(var(--muted-rgb), 0.16);
  --track-caps: .08em;
  --track-kicker: .14em;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  padding: calc(28px + var(--sat)) 20px calc(56px + var(--sab));
  background: var(--bg);
  /* Samme kalde glød som appens fullskjermflater — nok til at svart ikke
     er dødt, lite nok til at det aldri leses som en farge. */
  background-image: radial-gradient(120% 60% at 50% -12%,
                    rgba(var(--accent-rgb), .13), transparent 62%);
  background-repeat: no-repeat;
  color: var(--fg);
  font: 16px/1.62 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 40rem; margin: 0 auto; }

/* ---- merket ---- */
.mark {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 17px; letter-spacing: 1.5px;
  background: linear-gradient(120deg, var(--accent), var(--accent2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mark svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em;
     font-weight: 800; margin: 18px 0 4px; }
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 26px;
       letter-spacing: var(--track-caps); }

/* Ingressen står OVER gruppa, ikke inni den: iOS-gruppen er ren
   innhold, forklaringen er brødtekst. */
.lead { font-size: 17px; line-height: 1.55; margin: 0 0 4px; color: var(--fg); }
.lead .muted { font-size: 15px; }

/* ---- grupper: etikett OVER plata, som i appen ---- */
h2 {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--track-kicker); color: var(--muted);
  margin: 30px 0 8px; padding: 0 4px;
}
.group {
  background: var(--plate); border-radius: var(--r-md);
  padding: 16px 18px; margin: 0;
}
.group > :first-child { margin-top: 0; }
.group > :last-child { margin-bottom: 0; }
.group + .note { margin: 8px 4px 0; color: var(--muted); font-size: 13px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--fg); }

/* Punktlister er RADER i plata, ikke kuler i en marg: hårstrek mellom,
   ingen bullets — det er iOS-gruppen, og det er det appen gjør. */
.group ul { list-style: none; margin: 0; padding: 0; }
.group li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.group li:first-child { padding-top: 0; }
.group li:last-child { padding-bottom: 0; border-bottom: 0; }

a { color: var(--accent); text-decoration: none; font-weight: 650; }
a:hover { text-decoration: underline; }

code {
  background: var(--plate-2); color: var(--fg);
  padding: .12em .4em; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
}
.muted { color: var(--muted); font-size: 13.5px; }

/* ---- skjema ---- */
form { margin: 0; }
label {
  display: block; margin: 16px 0 7px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--track-kicker); color: var(--muted);
}
label:first-of-type { margin-top: 0; }
/* «valgfritt» er en tilstand, ikke en del av etiketten — den skal ikke
   tvinge kickeren over to linjer. */
.opt { font-weight: 700; letter-spacing: var(--track-caps); opacity: .65; }
.opt::before { content: "· "; }
.hint { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
select, textarea, input[type=email] {
  width: 100%; padding: 11px 13px;
  background: var(--plate-2); color: var(--fg);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: 15px;
  transition: border-color .12s, background .12s;
}
select { appearance: none;
  /* Egen chevron: systemets pil er lys grå på lys bakgrunn i Safari. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 132px; line-height: 1.5; }
select:focus, textarea:focus, input[type=email]:focus {
  outline: none; border-color: rgba(var(--accent-rgb), .55);
}
button[type=submit] {
  margin-top: 18px; width: 100%; min-height: 46px;
  padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--accent); color: #06111f;
  font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .01em;
  cursor: pointer; transition: transform .12s, opacity .12s;
}
button[type=submit]:active { transform: scale(.985); }
button[disabled] { opacity: .55; cursor: default; }
#fbMsg { margin: 12px 0 0; min-height: 1.2em; font-size: 13.5px; }
#fbMsg.ok { color: var(--good); font-weight: 650; }
#fbMsg.err { color: var(--bad, #f87171); font-weight: 650; }

/* ---- bunn ---- */
.foot {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  font-size: 13.5px; color: var(--muted);
}
.foot .sep { color: var(--muted); opacity: .5; }
.en { margin-top: 34px; }

@media (min-width: 640px) {
  body { padding-top: calc(52px + var(--sat)); }
  h1 { font-size: 36px; }
  .group { padding: 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}