/* vflyingclub — core stylesheet
   ---------------------------------------------------------------------------
   Two layers, and the split is load-bearing (DESIGN.md §10.5).

   1. A palette of RAW colours, mapped onto SEMANTIC custom properties
      (--ink, --surface, --amber, --pos …). The defaults are Voyager
      Aviation's, inherited from the parent project.
   2. A component vocabulary that refers only to the semantic layer.

   Because nothing below layer 1 names a raw colour, a club supplying its
   own five colours re-themes the entire interface with a small override
   block inlined into its pages — including the derived --amber-text, which
   is the accent shifted until small text in it is legible.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Voyager Brand Palette raw colors */
  --vy-nardo-orange: #F05A28;
  --vy-nardo-orange-text: #C6480F; /* contrast-safe on light backgrounds */
  --vy-tokyo-cyan: #3EA2AA; /* restricted: special pages only */
  --vy-grigio-hati: #C3C3C3;
  --vy-titanium-silver: #E6E6E6;
  --vy-pure-white: #FFFFFF;
  --vy-onyx-black: #000000;

  /* Theme-specific Semantic Mapping (Light mode by default) */
  --bg-gradient: radial-gradient(1200px 480px at 50% -200px, rgba(240, 90, 40, 0.04), transparent 75%), linear-gradient(180deg, #FFFFFF 0%, #F5F7F8 100%);
  /* Flat colour behind the gradient — see the `html` rule. */
  --bg-base: #F5F7F8;
  /* Landmasses on the route map, against the map's own background as sea. */
  --land: #E4E9ED;
  --land-edge: #C7D0D8;
  --bg: var(--vy-pure-white);
  --bg-2: #F9FAFB;
  --surface: #FFFFFF;
  --surface-2: var(--vy-titanium-silver);
  --surface-hover: #F3F4F6;
  
  --line: var(--vy-grigio-hati);
  --line-soft: #E5E7EB;
  
  --ink: var(--vy-onyx-black);
  --muted: #5E6973;
  --muted-2: #8A96A3;
  
  --amber: var(--vy-nardo-orange);
  --amber-text: var(--vy-nardo-orange-text); /* dark orange for accessible small text */
  --amber-soft: rgba(240, 90, 40, 0.08);
  
  /* Aircraft category indicator borders */
  --cat-piston: #2E7D46;
  --cat-turboprop: #2E7D84;
  --cat-light_bizjet: #634399;
  --cat-airliner: var(--vy-nardo-orange-text);
  
  --pos: #1B7A38;
  --neg: #C62828;
  
  /* Fonts */
  --font-ui: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display: 'Sequel Sans', 'Montserrat', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --display: var(--font-ui);
  --body: var(--font-ui);
  --mono: var(--font-mono);

  --maxw: 1040px;
  --radius: 8px;
}

/* Dark mode theme overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-gradient: radial-gradient(1200px 480px at 50% -200px, rgba(240, 90, 40, 0.08), transparent 75%), linear-gradient(180deg, #0A0A0A 0%, #000000 100%);
  --bg-base: #000000;
  --land: #171B1F;
  --land-edge: #2E363D;
    --bg: var(--vy-onyx-black);
    --bg-2: #0D0D0D;
    --surface: #141414;
    --surface-2: #1F1F1F;
    --surface-hover: #1C1C1C;
    
    --line: #2C2C2C;
    --line-soft: #1C1C1C;
    
    --ink: var(--vy-pure-white);
    --muted: var(--vy-grigio-hati);
    --muted-2: #6B6B6B;
    
    --amber: var(--vy-nardo-orange);
    --amber-text: var(--vy-nardo-orange); /* Orange is safe on Onyx Black */
    --amber-soft: rgba(240, 90, 40, 0.15);
    
    --cat-piston: #6fcf8e;
    --cat-turboprop: #4fc3d6;
    --cat-light_bizjet: #c39bec;
    --cat-airliner: var(--vy-nardo-orange);
    
    --pos: #6fcf8e;
    --neg: #e8836b;
  }
}

[data-theme='dark'] {
  --bg-gradient: radial-gradient(1200px 480px at 50% -200px, rgba(240, 90, 40, 0.08), transparent 75%), linear-gradient(180deg, #0A0A0A 0%, #000000 100%);
  --bg-base: #000000;
  --land: #171B1F;
  --land-edge: #2E363D;
  --bg: var(--vy-onyx-black);
  --bg-2: #0D0D0D;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --surface-hover: #1C1C1C;
  
  --line: #2C2C2C;
  --line-soft: #1C1C1C;
  
  --ink: var(--vy-pure-white);
  --muted: var(--vy-grigio-hati);
  --muted-2: #6B6B6B;
  
  --amber: var(--vy-nardo-orange);
  --amber-text: var(--vy-nardo-orange);
  --amber-soft: rgba(240, 90, 40, 0.15);
  
  --cat-piston: #6fcf8e;
  --cat-turboprop: #4fc3d6;
  --cat-light_bizjet: #c39bec;
  --cat-airliner: var(--vy-nardo-orange);
  
  --pos: #6fcf8e;
  --neg: #e8836b;
}

* { box-sizing: border-box; }
/* The body gradient is `background-attachment: fixed`, so it paints the viewport
   and nothing else. Anything outside it — a page scrolled sideways, over-scroll
   past the end — falls through to bare canvas and shows up white. A flat colour
   on the root element backs the whole scrollable area. */
html { -webkit-text-size-adjust: 100%; background: var(--bg-base); }

body {
  margin: 0;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* =================================================================
   Core vocabulary
   -----------------------------------------------------------------
   Everything below is driven by the semantic custom properties above,
   never by the raw brand colours. That is what lets a club supply five
   colours (§10.5) and have the whole interface follow — including the
   derived `--amber-text`, which is inlined per club at render time.
   ================================================================= */

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 96px;
}

h1 {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
h2 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 36px 0 14px;
}
h3 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px;
}
p { margin: 0 0 14px; }
section { margin: 0 0 32px; }

a { color: var(--amber-text); text-decoration-color: var(--amber-soft); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

code, .mono { font-family: var(--mono); font-size: 0.9em; }
code {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 6px;
}

.lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 64ch;
}
.meta { font-size: 0.85rem; color: var(--muted-2); max-width: 72ch; }
.help {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted-2);
  line-height: 1.45;
  margin-top: 4px;
  max-width: 60ch;
}
.lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}

/* ---- Top bar ------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.clubnav, .usernav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.usernav { margin-left: auto; }
.clubnav a, .usernav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.clubnav a:hover, .usernav a:hover { color: var(--ink); border-color: var(--amber); }
.clublogo { display: flex; padding: 0; border: 0; }
.clublogo img { height: 26px; width: auto; display: block; }

/* Section nav inside the club admin. */
.subnav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.subnav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 8px;
  margin-bottom: -11px;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); border-color: var(--amber); font-weight: 600; }

/* ---- Buttons ------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--surface);
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 10px 18px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--amber-text); outline-offset: 2px; }
.btn.small { font-size: 0.66rem; padding: 6px 12px; }
.btn.quiet {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}
.btn.quiet:hover { color: var(--ink); border-color: var(--ink); filter: none; }

/* ---- Cards -------------------------------------------------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card h2, .card h3 { margin-top: 0; }
.card a { text-decoration: none; }
.card p:last-child { margin-bottom: 0; }

.cards.stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stats .card { text-align: center; }
.stats .val {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stats .lbl { margin: 6px 0 0; letter-spacing: 0.12em; }

.modules .card { display: flex; flex-direction: column; gap: 6px; }
.modules .tag { align-self: flex-start; margin-top: auto; }

/* ---- Tables ------------------------------------------------------- */

.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  /* Wide boards scroll inside themselves rather than pushing the page
     sideways. */
  display: block;
  overflow-x: auto;
}
.board thead th {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: left;
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.board tbody td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.board tbody tr:hover { background: var(--surface-hover); }
.board td a { text-decoration: none; }

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 0 0 24px;
}
.facts dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  align-self: center;
}
.facts dd { margin: 0; }

/* ---- Tags and notices --------------------------------------------- */

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-text);
  background: var(--amber-soft);
  border-radius: 4px;
  padding: 3px 7px;
  margin-right: 4px;
  white-space: nowrap;
}
.tag.warn { color: var(--neg); background: transparent; border: 1px solid var(--neg); }
.tag.quiet { color: var(--muted-2); background: var(--surface-2); }

.notice {
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  margin: 0 0 16px;
  max-width: 78ch;
}
.notice.warn { border-color: var(--neg); background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); }
.notice.good { border-color: var(--pos); background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft); }
.notice p:last-child { margin-bottom: 0; }

.empty {
  color: var(--muted-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.trace {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.trace h2 { margin-top: 0; }
.trace p:last-child { margin-bottom: 0; }

/* A value worth copying — a club's remark tag, a CID. */
.copyable {
  cursor: copy;
  user-select: all;
  border: 1px dashed var(--line);
}

/* ---- Forms -------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 46rem; }
.stack > label { display: block; width: 100%; }
.stack button { align-self: flex-start; }

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  max-width: 34rem;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--amber);
  outline-offset: -1px;
  border-color: var(--amber);
}
input::placeholder { color: var(--muted-2); }
select { max-width: 34rem; }

fieldset {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0;
  width: 100%;
}
legend {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 8px;
}

/* A checkbox or radio and its explanation, side by side and top-aligned,
   so a two-line description does not indent under the control. */
.check, .colour {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 14px;
  cursor: pointer;
}
.check input, .colour input { margin-top: 3px; accent-color: var(--amber); }
.colour input[type="color"] {
  width: 44px;
  height: 30px;
  padding: 2px;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.check .help, .colour .help { margin-top: 2px; }

form.inline { display: inline; }
form.inline select { width: auto; min-width: 8rem; }

/* The parent's quick-add row, kept: a label-less line of controls. */
.admin-add {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.admin-add h2 { margin-top: 0; }
.add-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.add-form input, .add-form select { width: auto; min-width: 10rem; }

.logo-preview {
  max-width: 200px;
  height: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
}

/* ---- Club home ---------------------------------------------------- */

.clubhead { margin-bottom: 32px; }
.join { margin-top: 18px; }
.join .meta { margin-top: 8px; }

.hero { max-width: 64ch; margin-bottom: 40px; }
.hero h1 { font-size: 2.6rem; }

.remarks { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }

/* ---- Live map (§11.1) ---------------------------------------------- */

/* The SVG carries its own width/height attributes so it has an intrinsic size
   before this file arrives; these make it responsive once it has. */
.acmap {
  width: 100%;
  height: auto;
  max-width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 24px;
}
.acmap .land { fill: var(--land); stroke: var(--land-edge); stroke-width: 0.8; }
.acmap .grat { stroke: var(--line-soft); stroke-width: 0.5; }
.acmap .track {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.85;
}
.acmap .stop { fill: var(--surface); stroke: var(--amber); stroke-width: 2; }
.acmap .stop.here { fill: var(--amber); }
.acmap .stoplbl { font-family: var(--mono); font-size: 13px; fill: var(--ink); }

/* ---- Boards and exports -------------------------------------------- */

/* Leaderboard rank and value columns. */
.board .rank { color: var(--muted); width: 2.5em; text-align: right; }
.board .num { text-align: right; }

/* A row of download links, or any short row of buttons. */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Why a club's policy rejected flights, on the admin overview. */
.reasons { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.reasons strong { color: var(--ink); }

/* ---- Narrow screens ----------------------------------------------- */

@media (max-width: 640px) {
  main { padding: 24px 16px 64px; }
  .topbar { gap: 14px; padding: 12px 16px; }
  .clubnav, .usernav { gap: 12px; font-size: 0.66rem; }
  h1 { font-size: 1.6rem; }
  .hero h1 { font-size: 2rem; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 12px; }
}