/* Shared dark "space" look for the public pages (map + form). Load after app.css,
   with <html data-theme="dark"> so app.css's dark tokens apply. */
:root {
  --space: #04070d;
  --glass: rgb(12 17 27 / .62);
  --glass-strong: rgb(14 20 32 / .82);
  --glass-line: rgb(255 255 255 / .09);
  --glass-hi: rgb(255 255 255 / .05);
  --area: #4ea1ff;
  --area-high: #ff8a3d;
  --accent: #4ea1ff;
  --accent-soft: rgb(78 161 255 / .14);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --starfield:
    radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / .55), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgb(255 255 255 / .4), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 64%, rgb(255 255 255 / .45), transparent 60%),
    radial-gradient(1px 1px at 38% 82%, rgb(255 255 255 / .35), transparent 60%),
    radial-gradient(1px 1px at 58% 44%, rgb(255 255 255 / .25), transparent 60%),
    radial-gradient(1px 1px at 92% 30%, rgb(255 255 255 / .35), transparent 60%),
    radial-gradient(1px 1px at 24% 56%, rgb(255 255 255 / .3), transparent 60%),
    radial-gradient(ellipse at 65% 45%, #0b1730 0%, var(--space) 65%);
}
html, body { background: var(--space); }
body { font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.02em; font-weight: 600; }
.grad { background: linear-gradient(90deg, #8cc6ff, #4ea1ff 60%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }

.glass {
  background: linear-gradient(180deg, var(--glass-hi), transparent 120px), var(--glass);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-line); border-radius: 22px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .06);
}

.logo {
  display: block; width: 148px; height: 29px; background: #fff; flex: none;
  -webkit-mask: url(/windborne-logo.svg) no-repeat left center / contain; mask: url(/windborne-logo.svg) no-repeat left center / contain;
}
.eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.tag { padding: .35em .75em; border: 1px solid rgb(78 161 255 / .35); border-radius: 999px; }

.pill { background: rgb(78 161 255 / .14); color: #8cc6ff; }
.pill.high { background: rgb(255 138 61 / .15); color: #ffb07a; }

.btn-primary {
  background: linear-gradient(180deg, #5aaaff, #2f86f0); border: 0; color: #fff;
  box-shadow: 0 8px 24px rgb(47 134 240 / .35), inset 0 1px 0 rgb(255 255 255 / .25);
  padding: .8em 1.1em; border-radius: 12px;
}
.btn-primary:hover { background: linear-gradient(180deg, #5aaaff, #2f86f0); filter: brightness(1.08); }
.btn-ghost { background: rgb(255 255 255 / .05); border-color: var(--glass-line); color: var(--text); }
.btn-ghost:hover { background: rgb(255 255 255 / .09); }

input:not([type=radio]):not([type=checkbox]), textarea, select {
  background: rgb(0 0 0 / .28); border-color: var(--glass-line); border-radius: 12px; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
input:not([type=radio]):not([type=checkbox]):focus, textarea:focus, select:focus {
  outline: none; border-color: rgb(78 161 255 / .7); box-shadow: 0 0 0 3px rgb(78 161 255 / .18);
}
input::placeholder, textarea::placeholder { color: rgb(255 255 255 / .3); }
select option { background: #0e1420; }

/* MapLibre controls in glass */
.maplibregl-ctrl-group {
  background: var(--glass) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-line); border-radius: 12px !important; box-shadow: none !important; overflow: hidden;
}
.maplibregl-ctrl-group button { color: #e8ebef !important; background: transparent; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--glass-line) !important; }
.maplibregl-ctrl-group button:hover { background: rgb(255 255 255 / .06) !important; }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) brightness(1.4); }
.maplibregl-ctrl-top-right { top: 8px; right: 8px; }
.maplibregl-ctrl-attrib { background: rgb(4 7 13 / .55) !important; color: #8b94a3; }
.maplibregl-ctrl-attrib a { color: #aab3c2; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
.area-tip .maplibregl-popup-content { background: var(--glass-strong); color: #fff; border: 1px solid var(--glass-line); backdrop-filter: blur(10px); }

/* Entrance animations */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .7s var(--ease-out) both; animation-delay: calc(var(--base, .15s) + var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.maplibregl-cooperative-gesture-screen { background: rgb(4 7 13 / .55); color: #fff; font: 600 .95rem Inter, sans-serif; backdrop-filter: blur(2px); }