/* landing.fyi shared design system.
   Loaded site-wide by base.html (and, after PR2, the standalone dashboard/
   flight/share pages). SINGLE SOURCE for the brand tokens + page chrome +
   shared components (buttons, forms, cards, kickers).

   Division of labour:
   - The TOP BAR (wordmark + nav) is NOT here — it lives in _appbar.html (its
     own class-scoped .appbar CSS), the single source shared with the standalone
     dashboard docs. Don't add header/.appbar rules here.
   - marketing.css carries the .mkt-scoped hero/flow/split LAYOUT + the big hero
     type scale for the marketing + airport pages, layered on top of this file.

   Layering: app.css loads FIRST (linked in base.html's <head> before
   {% block head %}), so a page's own inline <style> and marketing.css override
   it. App pages use the moderate page-title scale below; marketing/airport
   pages add `.mkt` for the big hero scale. Same brand, context-appropriate. */

/* ---- tokens (single source — do NOT redefine :root elsewhere) ---- */
:root {
  --bg: #fafafa;
  --ink: #1d2530;          /* headings / strong text */
  --fg: #1d2530;           /* body text — kept as an alias so legacy var(--fg) callers still resolve */
  --muted: #5d6675;
  --line: #e3e7ee;
  --panel: #ffffff;
  --panel-tint: #f4f7fc;
  --accent: #2c6fb3;
  --accent-dark: #1f5288;
  --good: #27ae60;
  --bad: #c0392b;
  /* Corner-radius scale — one radius per component role.
     --r-sm: controls + small tags; --r-md: card/panel surfaces;
     --r-lg: large feature blocks; --r-pill: fully-rounded chips/bars. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  /* Subtle brand glow at the top-right of the app/utility pages (account,
     upload, onboarding, auth, admin, dashboard, flight) — the same signature as
     the marketing hero, dialled down so it sits behind dense content without
     fighting it, and anchored above the page top so it tucks under the header.
     Hero pages (marketing + airport) SUPPRESS this in marketing.css — they carry
     the full `.mkt .hero` glow instead. The share card overrides `background`
     wholesale (its own per-score band), so it's excluded automatically. */
  background-image: radial-gradient(900px 460px at 90% -40px, #eaf2fb 0%, rgba(234, 242, 251, 0) 64%);
  background-repeat: no-repeat;
  color: var(--fg);
  /* clip (not hidden) so the full-bleed hero can extend to the viewport edge
     without a scrollbar-width horizontal overflow, while body stays a normal
     (non-scroll-container) block so sticky descendants are unaffected. */
  overflow-x: clip;
}

/* ---- main column ---- */
main { max-width: 1100px; margin: 0 auto; padding: 24px; }
.flash {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}

/* ---- typography (brand voice, moderate page-title scale) ---- */
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0 0 14px; }
h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }

/* Accent section label — the marketing kicker, available to every page. */
.kicker {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 14px;
}
.page-intro { color: var(--muted); max-width: 64ch; margin: 0 0 22px; }
.muted { color: var(--muted); }

/* ---- buttons (one button family everywhere) ---- */
.btn, input[type=submit], button.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.btn:active, input[type=submit]:active, button.btn:active { transform: translateY(1px); }
.btn-primary, input[type=submit] { background: var(--accent); color: #fff; }
.btn-primary:hover, input[type=submit]:hover { background: var(--accent-dark); }
.btn-ghost, .btn-secondary { background: #fff; color: var(--accent); border-color: var(--line); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--panel-tint); }
.btn:disabled, .btn[disabled], input[type=submit]:disabled, button.btn:disabled { opacity: 0.6; cursor: progress; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- forms ---- */
/* Visual styling only — width stays page-controlled (some forms want full-width
   stacked fields, others have inline fields in a flex row). */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=url], select, textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--fg);
  background: #fff;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=number]:focus, input[type=url]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 111, 179, 0.15);
}
input[readonly] { background: var(--panel-tint); color: var(--muted); }
label.fld, label.field-label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 4px; }
.hint { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

/* ---- card surface ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 0 0 18px;
}
.card h2 { font-size: 1.15rem; margin: 0 0 4px; }

/* ---- avionics picker gallery (upload page + onboarding survey) ---- */
/* Radio-backed tiles: a photoreal render per option where one exists, else a
   "?" glyph. The native radio is visually hidden; the tile reflects :checked via
   :has() (radio still works without it). See webapp/templates/_avionics_gallery.html. */
.av-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.av-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 8px 12px;
  background: var(--panel); cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.av-tile:hover { border-color: var(--accent); }
.av-tile:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.av-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.av-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.av-thumb {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden;
  background: #ececec; display: flex; align-items: center; justify-content: center;
}
.av-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-glyph { font-size: 40px; font-weight: 700; color: var(--muted); }
.av-label { font-size: 13px; font-weight: 600; line-height: 1.25; margin-top: 8px; color: var(--ink); }
.av-badge {
  margin-top: 6px; font-size: 11px; padding: 1px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.av-badge.beta { color: #8a6d00; border-color: #e6d28a; }

/* ---- mobile ---- */
@media (max-width: 720px) {
  main { padding: 18px 14px; }
  h1 { font-size: 1.55rem; }
}
@media (max-width: 480px) {
  .av-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
