/* Flightrax — de OFFENTLIGE sidene (support, personvern, vilkår).
 *
 * Brage 21/8: «design design design … tenk tema og harmoni». 12/9: «alt skal
 * se topp moderne ut og matche stilen». Formspråket er appens Liquid Glass:
 * glassplater med lys ovenfra og en lysende rand, kapsler for alle
 * kontroller, iOS-typeskalaen, Apples systemfarger, glansende CTA.
 *
 * Tokenene er speilet fra styles.css med VILJE (sidene er statiske og skal
 * ikke dra inn 2900 linjer app-CSS). tests/test_privacy_pages.py holder de
 * to blokkene i takt — og den kaskaderer nå styles.css' to :root-blokker,
 * så det som sammenlignes er det appen FAKTISK tegner.
 */

:root {
  color-scheme: dark;
  --bg: #05070c;
  --plate: rgba(255, 255, 255, .07);
  --plate-2: rgba(255, 255, 255, .12);
  --plate-hi: rgba(255, 255, 255, .30);
  --plate-rim: rgba(255, 255, 255, .10);
  --plate-lo: rgba(0, 0, 0, .28);
  --fg: #ffffff;
  --muted: #8e8e93;
  --muted-rgb: 235, 235, 245;
  --accent: #5b9dff;
  --accent-rgb: 91, 157, 255;
  --accent2: #46d4ff;
  --good: #30d158;
  --bad: #ff453a;
  --line: rgba(255, 255, 255, .10);
  --rim: rgba(255, 255, 255, .18);
  --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);
  background-attachment: fixed;
  /* 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% 56% at 50% -10%,
                    rgba(var(--accent-rgb), .18), transparent 62%);
  background-repeat: no-repeat;
  color: var(--fg);
  font: 17px/1.6 -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: 34px; line-height: 1.1; letter-spacing: -.03em;
     font-weight: 800; margin: 20px 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.5; margin: 0 0 4px; color: var(--fg); text-wrap: pretty; }
.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 {
  border-radius: var(--r-md); padding: 18px 20px; margin: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%), var(--plate);
  box-shadow: inset 0 1px 0 var(--plate-hi), 0 0 0 .5px var(--plate-rim),
              inset 0 -1px 0 var(--plate-lo), 0 10px 30px rgba(0, 0, 0, .18);
}
.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); box-shadow: inset 0 0 0 .5px var(--plate-rim);
  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%; min-height: 46px; padding: 12px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)), var(--plate);
  color: var(--fg); border: 0; border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 var(--plate-hi), 0 0 0 .5px var(--plate-rim);
  font: inherit; font-size: 17px;
  transition: box-shadow .14s;
}
select, input[type=email] { border-radius: 999px; }
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;
  box-shadow: inset 0 1px 0 var(--plate-hi), 0 0 0 1.5px rgba(var(--accent-rgb), .6),
              0 0 0 6px rgba(var(--accent-rgb), .14);
}
button[type=submit] {
  margin-top: 20px; width: 100%; min-height: 50px;
  padding: 0 20px; border: 0; border-radius: 999px;
  color: #fff; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%),
              linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18),
              0 10px 26px rgba(var(--accent-rgb), .38);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  cursor: pointer; transition: transform .14s, filter .14s, opacity .12s;
}
button[type=submit]:active { transform: scale(.97); filter: brightness(1.08); }
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; }
}

/* HVEM som står bak (14/9). Apple trakk org-innmeldingen med «the domain name
   must be associated with your organization» — og nettstedet nevnte ikke
   selskapet med ett ord. Nå står det i bunnen på hver åpne side. */
.firma { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.firma strong { color: var(--fg); font-weight: 650; }