/* =======================================================================
   AirportRoutes — Design Tokens
   Sourced from templates/base.html, templates/home.html,
   templates/routes/*, templates/airport_detail/* in the production Django
   codebase (PhotoWorkout/airportroutes). Bootswatch Cosmo + custom layers.
   ======================================================================= */

:root {
  /* ---------- Brand / primary ---------- */
  /* Bootswatch Cosmo primary is #2780e3 but the site's own layers lean on
     three different blues. We canonicalize on the deeper `--brand-600`. */
  --brand-050: #eff6ff;   /* tint for ghost buttons, rows */
  --brand-100: #dbeafe;   /* passenger-routes stat chip bg */
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;   /* dark-mode secondary text in hero */
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;   /* hero gradient endpoint, primary buttons */
  --brand-700: #1d4ed8;
  --brand-800: #1e3a5f;   /* deep-navy CTA bg */
  --brand-900: #0f2744;   /* hero top */
  --brand-blue-bs:  #0d6efd; /* Bootstrap's .btn-primary (used in search
                                badges / autocomplete code pills) */
  --brand-blue-alt: #007bff; /* older Bootstrap blue still used on feature
                                 cards and CTA buttons */
  --brand-blue-hover: #0056b3;

  /* The canonical hero gradient — use in full width bands only */
  --brand-gradient: linear-gradient(135deg, #0f2744 0%, #1a4480 50%, #2563eb 100%); /* @kind other */
  --brand-gradient-soft: linear-gradient(135deg, #0f2744, #1e3a5f); /* @kind other */

  /* ---------- Logo palette ----------
     The app-icon mark has its OWN gradient — brighter / cyan, distinct
     from the navy site UI gradient. Sampled from the real PNG. */
  --logo-border: #5dc1e5;   /* light outer border */
  --logo-top:    #1e99cc;   /* gradient top */
  --logo-mid:    #156188;   /* gradient mid */
  --logo-bottom: #09539c;   /* gradient bottom */
  --logo-gradient: linear-gradient(160deg, #1e99cc 0%, #156188 55%, #09539c 100%); /* @kind other */
  --logo-wordmark-1: #0f2744; /* "Airport" */
  --logo-wordmark-2: #1775b2; /* "Routes" */

  /* ---------- Neutrals ---------- */
  /* Cosmo's neutrals are Bootstrap defaults; we mirror Tailwind's slate for
     the extra tones the custom layers introduce. */
  --neutral-000: #ffffff;
  --neutral-050: #f8fafc;   /* stats-section bg */
  --neutral-100: #f8f9fa;   /* autocomplete hover, page wash */
  --neutral-150: #f3f4f6;
  --neutral-200: #e9ecef;   /* card borders */
  --neutral-250: #e2e8f0;   /* stat card border, route card border */
  --neutral-300: #dee2e6;
  --neutral-400: #94a3b8;   /* placeholder text, hero meta */
  --neutral-500: #64748b;   /* stats-subtitle, footer disclaimer */
  --neutral-600: #6c757d;   /* Bootstrap `.text-muted` */
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-850: #212529;   /* body color */
  --neutral-900: #1e293b;   /* stat number */
  --neutral-950: #1a1a2e;   /* section heading in RF card */

  /* ---------- Semantic color pairs ----------
     Pulled verbatim from the `.stat-icon.*` pills in home.html so any
     surface that re-uses these categories stays visually consistent. */
  --sem-scheduled-bg: #dcfce7; --sem-scheduled-fg: #16a34a;  /* scheduled service / success */
  --sem-airlines-bg:  #fef3c7; --sem-airlines-fg:  #d97706;  /* airlines / amber */
  --sem-passenger-bg: #dbeafe; --sem-passenger-fg: #2563eb;  /* passenger routes */
  --sem-cargo-bg:     #fce7f3; --sem-cargo-fg:     #db2777;  /* cargo */
  --sem-charter-bg:   #f3e8ff; --sem-charter-fg:   #9333ea;  /* charter */
  --sem-info-bg:      #e0f2fe; --sem-info-fg:      #0284c7;  /* generic info */

  --sem-danger:   #dc3545;
  --sem-warning:  #ffc107;
  --sem-success:  #28a745;

  /* ---------- Surfaces ---------- */
  --bg-body:     var(--neutral-000);
  --bg-subtle:   var(--neutral-050);
  --bg-muted:    var(--neutral-100);
  --bg-dark:     #212529;        /* footer bg (Bootstrap bg-dark) */
  --bg-dark-2:   var(--brand-800);

  --fg-1: var(--neutral-850);    /* primary body */
  --fg-2: var(--neutral-600);    /* secondary / muted */
  --fg-3: var(--neutral-400);    /* tertiary / placeholder */
  --fg-on-dark-1: #ffffff;
  --fg-on-dark-2: #94a3b8;

  --border-1: var(--neutral-250);
  --border-2: var(--neutral-200);
  --border-strong: var(--brand-blue-bs);

  /* ---------- Spacing scale ----------
     Bootstrap 5 base (4/8/16/24/48) plus the custom 60/80 bands used by
     hero sections. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 60px;
  --space-11: 80px;

  /* ---------- Radius ---------- */
  /* Bootstrap defaults to 0.375rem; the custom layers go larger on hero
     cards. Keep both in the vocabulary. */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius:     8px;    /* default card / button */
  --radius-md:  10px;   /* RF input */
  --radius-lg:  12px;   /* stat card, route card */
  --radius-xl:  16px;   /* route-finder-card hero */
  --radius-pill: 9999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);      /* stat card */
  --shadow:    0 4px 12px rgba(37,99,235,0.10); /* route card hover */
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10);     /* feature card */
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);     /* dropdown */
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.30);    /* route-finder-card */
  --shadow-focus: 0 0 0 3px rgba(37,99,235,0.15);

  /* ---------- Motion ---------- */
  /* Tame: 150–300ms ease. No bouncy easings anywhere in the codebase. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   150ms; /* @kind other */
  --dur:        200ms; /* @kind other */
  --dur-slow:   300ms; /* @kind other */
  --dur-vslow:  500ms; /* @kind other */ /* RF submit button sweep */

  /* ---------- Type ---------- */
  /* Bootswatch Cosmo ships system stacks (no webfont). We document the
     exact stack Bootstrap 5 resolves to. */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                "Noto Color Emoji";
  --font-mono:  'Courier New', ui-monospace, SFMono-Regular, Menlo, Monaco,
                Consolas, monospace;

  /* Weights actually used across the codebase */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semi:    600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-black:   800; /* @kind other */

  /* Sizes in the wild (not a theoretical scale — pulled from grep) */
  --fs-xs:     0.75rem;   /* 12 — footer small, stat-label */
  --fs-sm:     0.8125rem; /* 13 — hero meta */
  --fs-base:   0.875rem;  /* 14 — card copy */
  --fs-md:     0.95rem;   /* 15 — form labels */
  --fs-lg:     1rem;      /* 16 — body */
  --fs-lg-2:   1.05rem;   /* 17 — rf-subtitle */
  --fs-xl:     1.125rem;  /* 18 — hero paragraph */
  --fs-2xl:    1.3rem;    /* 21 — rf airport code */
  --fs-3xl:    1.5rem;    /* 24 — stat-number, h2 on CTA */
  --fs-4xl:    1.6rem;    /* 26 — stat-card number */
  --fs-5xl:    1.75rem;   /* 28 — stats-title */
  --fs-6xl:    2rem;      /* 32 — rf-title */
  --fs-7xl:    2.5rem;    /* 40 — hero h1 */

  --lh-tight:  1.2; /* @kind other */
  --lh-snug:   1.35; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-loose:  1.65; /* @kind other */
}

/* =======================================================================
   Semantic type styles
   ======================================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display / hero copy — reserved for gradient hero bands */
.t-display {
  font-size: var(--fs-7xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

/* Section titles (stats-title, cta h2) */
.t-h1 {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--neutral-950);
}

.t-h2 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--neutral-950);
}

.t-h3 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* The "RF-LABEL" pattern — small, caps, muted, tight tracking.
   Used for every form label and metadata pill in the production CSS. */
.t-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.t-body {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.t-body-sm {
  font-size: var(--fs-base);
  color: var(--fg-2);
}

.t-meta {
  font-size: var(--fs-xs);
  color: var(--fg-2);
}

/* Airport codes — always monospace, always a pill. The canonical treatment:
   a solid blue chip. See `.airport-iata` / `.rf-airport-code`. */
.t-code-pill {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  color: #fff;
  background: var(--brand-blue-bs);
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
}

.t-code-pill--lg {
  font-size: var(--fs-2xl);
  padding: 4px 10px;
  min-width: 52px;
  text-align: center;
  display: inline-block;
}

/* Utility: the muted-on-card footnote used beneath stats and dates */
.t-caption {
  font-size: var(--fs-xs);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--fw-semi);
}

/* =======================================================================
   Button foundations — two flavors cover 95% of the codebase.
   ======================================================================= */

.btn-primary-ar {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--brand-600);
  color: #fff;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-weight: var(--fw-semi);
  font-size: var(--fs-lg);
  border: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  text-decoration: none;
}
.btn-primary-ar:hover {
  background: var(--brand-700);
  transform: translateY(-1px);
  color: #fff;
}
.btn-primary-ar:active { transform: translateY(0); }

.btn-outline-ar {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: #fff;
  color: var(--brand-blue-alt);
  border: 2px solid var(--brand-blue-alt);
  padding: 10px 26px;
  border-radius: var(--radius);
  font-weight: var(--fw-semi);
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.btn-outline-ar:hover {
  background: var(--brand-blue-alt);
  color: #fff;
  transform: translateY(-1px);
}

/* =======================================================================
   Card foundations
   ======================================================================= */

.card-ar {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--dur) var(--ease),
              box-shadow   var(--dur) var(--ease),
              transform    var(--dur) var(--ease);
}
.card-ar:hover {
  border-color: var(--brand-600);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.card-ar--feature {
  padding: var(--space-7);
  border: 1px solid var(--border-2);
  border-top: 4px solid var(--brand-blue-alt);
  box-shadow: var(--shadow-md);
  text-align: center;
  border-radius: var(--radius-lg);
}

.card-ar--hero {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
}

/* UI Kit — screen styles. Layered on colors_and_type.css tokens. */

* { box-sizing: border-box; }

.ar-kit { font-family: var(--font-sans); color: var(--fg-1); background: #fff; }

/* ---- top nav ---- */
.ar-nav {
  background: #fff;
  border-bottom: 1px solid var(--border-2);
  height: 60px;
  display: flex; align-items: center;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 40;
}
.ar-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg-1); }
.ar-nav__brand img { width: 32px; height: 32px; }
.ar-nav__brand span { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.ar-nav__links { display: flex; gap: 4px; margin-left: 36px; }
.ar-nav__link {
  padding: 8px 14px; border-radius: 6px;
  color: var(--fg-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
}
.ar-nav__link:hover { background: var(--neutral-100); color: var(--fg-1); }
.ar-nav__link.is-active { color: var(--brand-600); }
.ar-nav__right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.ar-nav__search {
  background: var(--neutral-100); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 7px 12px 7px 34px; font-size: 13px;
  width: 260px; position: relative;
}
.ar-nav__search-wrap { position: relative; }
.ar-nav__search-wrap i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-3); font-size: 13px; }

/* ---- hero ---- */
.ar-hero {
  background: var(--brand-gradient);
  color: #fff;
  padding: 56px 24px 72px;
  position: relative;
  overflow: hidden;
}
.ar-hero::before {
  content:''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.ar-hero__wrap { max-width: 1120px; margin: 0 auto; position: relative; }
.ar-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--brand-300);
  background: rgba(255,255,255,0.08); padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 16px;
}
.ar-hero h1 {
  font-size: 40px; font-weight: 800; line-height: 1.15;
  margin: 0 0 12px; letter-spacing: -0.015em; max-width: 780px;
}
.ar-hero h1 em { font-style: normal; color: var(--brand-300); }
.ar-hero p { font-size: 17px; color: #cbd5e1; margin: 0 0 24px; max-width: 620px; line-height: 1.55; }

/* ---- route finder (overlapping card) ---- */
.ar-rf {
  background: #fff; border-radius: 16px; padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
  max-width: 820px; margin: 28px auto -48px; position: relative; z-index: 2;
}
.ar-rf__title { font-size: 22px; font-weight: 700; color: var(--neutral-950); margin: 0 0 4px; }
.ar-rf__sub { font-size: 14px; color: var(--fg-2); margin: 0 0 20px; }
.ar-rf__grid {
  display: grid; grid-template-columns: 1fr 44px 1fr auto; gap: 12px; align-items: end;
}
.ar-rf__field label { display:block; font-size: 11px; font-weight:600; text-transform: uppercase; letter-spacing:.05em; color: var(--fg-2); margin-bottom: 6px; }
.ar-rf__field input {
  width: 100%; padding: 12px 14px; border: 2px solid var(--border-1);
  border-radius: 10px; background: var(--neutral-050); font-size: 15px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ar-rf__field input:focus { border-color: var(--brand-600); box-shadow: var(--shadow-focus); outline: none; background: #fff; }
.ar-rf__swap {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-1);
  background: #fff; color: var(--brand-600); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, border-color .2s;
}
.ar-rf__swap:hover { transform: rotate(180deg); border-color: var(--brand-600); }
.ar-rf__submit {
  background: var(--brand-600); color: #fff; border: none; height: 48px; padding: 0 26px;
  border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; display:flex; align-items:center; gap:8px;
  transition: background .2s, transform .2s;
}
.ar-rf__submit:hover { background: var(--brand-700); transform: translateY(-1px); }

/* ---- sections ---- */
.ar-section { padding: 64px 24px; }
.ar-section--alt { background: var(--neutral-050); }
.ar-section__wrap { max-width: 1120px; margin: 0 auto; }
.ar-section__head { margin-bottom: 32px; }
.ar-section__eye { font-size: 11px; font-weight:600; color: var(--brand-600); text-transform: uppercase; letter-spacing:.08em; margin-bottom: 8px; }
.ar-section__title { font-size: 28px; font-weight:700; color: var(--neutral-950); margin: 0 0 8px; letter-spacing:-0.01em; }
.ar-section__sub { font-size: 15px; color: var(--fg-2); margin: 0; max-width: 560px; }

/* ---- stat grid ---- */
.ar-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ar-stats__card {
  background: #fff; border: 1px solid var(--border-1); border-radius: 12px;
  padding: 18px 14px; text-align: center; box-shadow: var(--shadow-sm);
}
.ar-stats__icon { width: 44px; height: 44px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; margin-bottom: 10px; font-size: 16px; }
.ar-stats__num { font-size: 26px; font-weight: 800; color: var(--neutral-900); line-height: 1; letter-spacing:-0.01em; }
.ar-stats__label { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing:.03em; margin-top: 6px; font-weight:600; }

/* ---- route card ---- */
.ar-rc {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--border-1); border-radius: 12px;
  padding: 18px 20px; transition: all .2s;
}
.ar-rc:hover { border-color: var(--brand-600); box-shadow: var(--shadow); transform: translateY(-1px); }
.ar-rc__path { display: flex; align-items:center; gap: 14px; margin-bottom: 10px; }
.ar-rc__ep { flex: 1; min-width: 0; }
.ar-rc__code { font-size: 22px; font-weight: 700; color: var(--neutral-900); font-family: var(--font-mono); letter-spacing:-0.01em; }
.ar-rc__name { font-size: 13px; color: var(--fg-2); margin-top: 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-rc__arr { color: var(--brand-600); font-size: 20px; }
.ar-rc__meta { font-size: 12px; color: var(--fg-2); display: flex; gap: 10px; }
.ar-rc__meta strong { color: var(--neutral-900); font-weight: 600; }
.ar-rc__ops { display: flex; gap: 4px; margin-left: auto; }
.ar-rc__op { background: var(--neutral-100); color: var(--fg-1); font-family: var(--font-mono); font-weight: 600; font-size: 11px; padding: 3px 7px; border-radius: 4px; }

/* ---- feature cards ---- */
.ar-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ar-features__card {
  background: #fff; border: 1px solid var(--border-2); border-top: 4px solid var(--brand-blue-alt);
  border-radius: 12px; padding: 28px; text-align: center; box-shadow: var(--shadow-md);
  transition: transform .3s, box-shadow .3s;
}
.ar-features__card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.ar-features__icon { font-size: 28px; color: var(--brand-blue-alt); margin-bottom: 12px; }
.ar-features__t { font-size: 18px; font-weight: 700; color: var(--neutral-950); margin: 0 0 8px; }
.ar-features__p { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.55; }

/* ---- footer ---- */
.ar-footer { background: #212529; color: #fff; padding: 56px 24px 28px; margin-top: 64px; }
.ar-footer__wrap { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.ar-footer__brand { display: flex; align-items:center; gap: 10px; margin-bottom: 12px; }
.ar-footer__brand img { width: 32px; height: 32px; }
.ar-footer__brand span { font-weight: 700; font-size: 17px; }
.ar-footer p { color: rgba(255,255,255,0.75); font-size: 13px; line-height: 1.6; margin: 0 0 8px; }
.ar-footer h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #fff; font-weight: 600; margin: 0 0 14px; }
.ar-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ar-footer a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 13px; }
.ar-footer a:hover { color: #fff; }
.ar-footer__legal { max-width: 1120px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.55); display:flex; justify-content:space-between; flex-wrap:wrap; gap: 12px; }

/* ---- route detail page ---- */
.ar-rt-hero {
  background: var(--brand-gradient); color: #fff; padding: 40px 24px 32px;
  position: relative; overflow: hidden;
}
.ar-rt-hero::before {
  content:''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.ar-rt-hero__wrap { max-width: 1120px; margin: 0 auto; position: relative; }
.ar-rt-crumbs { display:flex; gap: 6px; align-items:center; font-size: 12px; color: var(--brand-300); margin-bottom: 14px; }
.ar-rt-crumbs a { color: var(--brand-300); text-decoration: none; }
.ar-rt-crumbs span { color: #fff; }
.ar-rt-path { display: flex; align-items:center; gap: 24px; flex-wrap: wrap; }
.ar-rt-ep { }
.ar-rt-ep__iata { background: #fff; color: var(--brand-900); font-family: var(--font-mono); font-weight: 800; font-size: 40px; padding: 8px 16px; border-radius: 10px; letter-spacing:-0.02em; }
.ar-rt-ep { max-width: 280px; }
.ar-rt-ep__name { font-size: 16px; font-weight: 600; margin-top: 8px; line-height: 1.3; }
.ar-rt-ep__city { font-size: 13px; color: #cbd5e1; margin-top: 4px; line-height: 1.3; }
.ar-rt-arr { font-size: 32px; color: var(--brand-300); }
.ar-rt-meta { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.ar-rt-meta__item { }
.ar-rt-meta__v { font-size: 20px; font-weight: 700; }
.ar-rt-meta__l { font-size: 11px; text-transform:uppercase; letter-spacing:.05em; color: var(--brand-300); margin-top:2px; }

.ar-rt-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; max-width: 1120px; margin: 32px auto; padding: 0 24px; }

/* map placeholder */
.ar-map {
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);
  border: 1px solid var(--border-1); border-radius: 12px;
  height: 360px; position: relative; overflow: hidden;
}
.ar-map svg { width: 100%; height: 100%; display:block; }

/* operator table */
.ar-ops {
  background: #fff; border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden;
}
.ar-ops__head { padding: 16px 20px; border-bottom: 1px solid var(--border-1); display:flex; justify-content:space-between; align-items:center; }
.ar-ops__head h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--neutral-950); }
.ar-ops__head span { font-size: 12px; color: var(--fg-2); }
.ar-ops__row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px; align-items:center; padding: 12px 20px; border-bottom: 1px solid var(--border-2); }
.ar-ops__row:last-child { border-bottom: none; }
.ar-ops__logo { width: 36px; height: 36px; border-radius: 8px; background: var(--neutral-100); display:flex; align-items:center; justify-content:center; font-weight:800; color: var(--brand-700); font-family: var(--font-mono); font-size: 13px; }
.ar-ops__name { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.ar-ops__flag { font-size: 11px; color: var(--fg-2); margin-top: 2px; }
.ar-ops__freq { font-size: 13px; color: var(--neutral-900); font-weight: 600; }
.ar-ops__freq-l { font-size: 10px; color: var(--fg-2); text-transform:uppercase; letter-spacing:.05em; }
.ar-ops__eq { background: var(--neutral-100); color: var(--fg-1); font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; }

/* ---- search page ---- */
.ar-search-head {
  background: var(--brand-gradient); padding: 40px 24px; color: #fff;
  position: relative; overflow: hidden;
}
.ar-search-head::before { content:''; position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.ar-search-head__wrap { max-width: 1120px; margin: 0 auto; position: relative; }
.ar-search-head h1 { font-size: 28px; font-weight:800; margin: 0 0 14px; }
.ar-search-box {
  background: #fff; border-radius: 12px; padding: 8px;
  display: flex; gap: 8px; max-width: 640px; box-shadow: var(--shadow-lg);
}
.ar-search-box input { flex:1; border: none; background: transparent; font-size: 15px; padding: 10px 14px; outline: none; color: var(--fg-1); }
.ar-search-box button { background: var(--brand-600); color:#fff; border:none; padding: 0 22px; border-radius: 8px; font-weight: 600; cursor: pointer; }

.ar-search-body { max-width: 1120px; margin: 32px auto; padding: 0 24px; display: grid; grid-template-columns: 240px 1fr; gap: 28px; }
.ar-filters { background: #fff; border: 1px solid var(--border-1); border-radius: 12px; padding: 20px; position: sticky; top: 80px; align-self: start; }
.ar-filters h4 { font-size: 11px; text-transform:uppercase; letter-spacing: .06em; color: var(--fg-2); margin: 0 0 10px; font-weight: 600; }
.ar-filters + .ar-filters-group { margin-top: 20px; }
.ar-filters__group { padding: 14px 0; border-top: 1px solid var(--border-2); }
.ar-filters__group:first-of-type { border-top: none; padding-top: 0; }
.ar-filters__opt { display:flex; align-items:center; gap: 8px; font-size: 13px; color: var(--fg-1); padding: 4px 0; cursor: pointer; }
.ar-filters__opt input { accent-color: var(--brand-600); }
.ar-filters__count { margin-left: auto; font-size: 11px; color: var(--fg-2); font-family: var(--font-mono); }

.ar-results__toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ar-results__count { font-size: 14px; color: var(--fg-2); }
.ar-results__count strong { color: var(--neutral-900); }
.ar-results__sort { display:flex; gap: 8px; align-items:center; font-size: 13px; color: var(--fg-2); }
.ar-results__sort select { border: 1px solid var(--border-1); border-radius: 8px; padding: 6px 10px; font-family:inherit; font-size: 13px; }
.ar-results__list { display: flex; flex-direction: column; gap: 10px; }

/* ---- airport detail ---- */
.ar-ap-hero { background: var(--brand-gradient); color:#fff; padding: 36px 24px; position: relative; overflow:hidden; }
.ar-ap-hero::before { content:''; position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.ar-ap-hero__wrap { max-width: 1120px; margin: 0 auto; position: relative; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ar-ap-hero__main { flex: 1; min-width: 280px; }
.ar-ap-hero__iata { font-family: var(--font-mono); font-size: 60px; font-weight: 800; line-height: 1; letter-spacing:-0.02em; }
.ar-ap-hero__name { font-size: 22px; font-weight: 700; margin-top: 6px; }
.ar-ap-hero__city { font-size: 14px; color: var(--brand-300); margin-top: 2px; }
.ar-ap-hero__icao { font-family: var(--font-mono); font-size: 13px; color: var(--brand-300); margin-top: 10px; }
.ar-ap-hero__actions { display: flex; gap: 10px; }
.ar-ap-hero__btn { background: rgba(255,255,255,0.12); color:#fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; display:inline-flex; align-items:center; gap: 6px; }
.ar-ap-hero__btn--primary { background: #fff; color: var(--brand-700); border-color: #fff; }

.ar-ap-tabs { background:#fff; border-bottom: 1px solid var(--border-1); position: sticky; top: 60px; z-index: 10; }
.ar-ap-tabs__wrap { max-width: 1120px; margin: 0 auto; display:flex; padding: 0 24px; gap: 4px; overflow-x: auto; }
.ar-ap-tab { padding: 16px 14px; font-size: 14px; font-weight: 600; color: var(--fg-2); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.ar-ap-tab.is-active { color: var(--brand-600); border-bottom-color: var(--brand-600); }

.ar-ap-body { max-width: 1120px; margin: 28px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.ar-card { background:#fff; border:1px solid var(--border-1); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.ar-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 14px; color: var(--neutral-950); display:flex; justify-content:space-between; align-items:center; }
.ar-card h3 a { font-size: 12px; color: var(--brand-600); font-weight: 600; text-decoration:none; }

/* facts panel */
.ar-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ar-facts__k { font-size: 11px; color: var(--fg-2); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.ar-facts__v { font-size: 14px; color: var(--neutral-900); font-weight: 600; margin-top: 2px; }

/* weather widget */
.ar-weather { display: flex; align-items: center; gap: 16px; }
.ar-weather__temp { font-size: 36px; font-weight: 800; color: var(--neutral-950); }
.ar-weather__meta { flex: 1; font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.ar-weather__icon { font-size: 32px; color: var(--brand-600); }

/* ---- dashboard ---- */
.ar-db { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.ar-db__side { background: #fff; border-right: 1px solid var(--border-1); padding: 20px 14px; }
.ar-db__brand { display:flex; align-items:center; gap: 10px; padding: 6px 10px 20px; border-bottom: 1px solid var(--border-2); margin-bottom: 16px; }
.ar-db__brand img { width: 28px; height: 28px; }
.ar-db__brand span { font-weight: 700; font-size: 15px; }
.ar-db__nav { display: flex; flex-direction: column; gap: 2px; }
.ar-db__nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--fg-2); text-decoration:none; font-weight: 500; }
.ar-db__nav a:hover { background: var(--neutral-100); color: var(--fg-1); }
.ar-db__nav a.is-active { background: var(--brand-050); color: var(--brand-700); }
.ar-db__main { padding: 28px 32px; background: var(--neutral-050); }
.ar-db__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.ar-db__head h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--neutral-950); }
.ar-db__head p { font-size: 13px; color: var(--fg-2); margin: 2px 0 0; }

.ar-db__kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }
.ar-db__kpi { background:#fff; border: 1px solid var(--border-1); border-radius: 12px; padding: 16px; }
.ar-db__kpi-l { font-size: 11px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ar-db__kpi-v { font-size: 24px; font-weight: 800; color: var(--neutral-950); margin-top: 6px; line-height: 1; }
.ar-db__kpi-d { font-size: 12px; color: var(--sem-scheduled-fg); margin-top: 6px; font-weight: 600; }
.ar-db__kpi-d.neg { color: var(--sem-danger); }

.ar-tracked { background:#fff; border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden; }
.ar-tracked__head { display:flex; justify-content:space-between; align-items:center; padding: 18px 22px; border-bottom: 1px solid var(--border-2); }
.ar-tracked__head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.ar-tracked__row { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: 16px; align-items:center; padding: 14px 22px; border-bottom: 1px solid var(--border-2); }
.ar-tracked__row:last-child { border-bottom: none; }
.ar-tracked__iata { background: var(--brand-blue-bs); color:#fff; font-family: var(--font-mono); font-weight: 700; font-size: 16px; padding: 6px 8px; border-radius: 6px; text-align:center; }
.ar-tracked__name { font-size: 14px; font-weight: 600; color: var(--neutral-900); }
.ar-tracked__city { font-size: 12px; color: var(--fg-2); margin-top: 2px; }
.ar-tracked__stat { text-align: right; }
.ar-tracked__stat-v { font-size: 15px; font-weight: 700; color: var(--neutral-950); }
.ar-tracked__stat-l { font-size: 10px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ar-tracked__pill { background: var(--sem-scheduled-bg); color: var(--sem-scheduled-fg); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.ar-tracked__pill.warn { background: var(--sem-airlines-bg); color: var(--sem-airlines-fg); }

.ar-alerts { background:#fff; border: 1px solid var(--border-1); border-radius: 12px; padding: 20px; margin-top: 20px; }
.ar-alerts h2 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.ar-alert { display:flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-2); align-items:flex-start; }
.ar-alert:last-child { border-bottom: none; }
.ar-alert__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-600); margin-top: 7px; flex-shrink: 0; }
.ar-alert__dot.add { background: var(--sem-scheduled-fg); }
.ar-alert__dot.rem { background: var(--sem-danger); }
.ar-alert__body { flex: 1; font-size: 14px; color: var(--fg-1); }
.ar-alert__body strong { font-weight: 700; }
.ar-alert__time { font-size: 12px; color: var(--fg-2); margin-top: 2px; }

/* tabs within the kit */
.kit-tabs {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #0f2744; color:#fff; border-radius: 999px; padding: 6px;
  display:flex; gap: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); z-index: 100;
  border: 1px solid rgba(255,255,255,0.1);
}
.kit-tabs button {
  background: transparent; color: rgba(255,255,255,0.7); border: none;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.kit-tabs button.is-active { background: var(--brand-600); color: #fff; }
.kit-tabs button:hover { color: #fff; }

/* ===========================================================================
   Airport page — redesign layer.
   Every value references AirportRoutes design tokens (colors_and_type.css)
   or the ui-kit.css vocabulary. Prefix: apx-
   --ax-accent lets a Tweak retint the page within the brand family.
   =========================================================================== */
:root { --ax-accent: var(--brand-600); --ax-accent-700: var(--brand-700); }

.apx { background: var(--neutral-050); }
.apx ::selection { background: rgba(37,99,235,0.16); }

/* scroll offset so anchored sections clear the sticky nav + tabs */
.apx-sec { scroll-margin-top: 118px; }

/* ---------------------------------------------------------------- HERO --- */
.apx-hero { background: var(--brand-gradient); color: #fff; position: relative; overflow: hidden; padding: 30px 24px 34px; }
.apx-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.apx-hero__wrap { max-width: 1120px; margin: 0 auto; position: relative; }
.apx-crumbs { display:flex; gap:7px; align-items:center; font-size:12.5px; color: var(--brand-300); margin-bottom: 18px; }
.apx-crumbs a { color: var(--brand-300); text-decoration:none; }
.apx-crumbs a:hover { color:#fff; }
.apx-crumbs i { font-size: 9px; opacity:.6; }
.apx-crumbs span { color:#fff; font-weight:600; }

.apx-hero__grid { display:grid; grid-template-columns: 1fr 380px; gap: 36px; align-items:start; }
.apx-hero__eye {
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color: var(--brand-300);
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.apx-hero__id { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.apx-hero__iata { font-family: var(--font-mono); font-size: 72px; font-weight: 800; line-height:.9; letter-spacing:-0.03em; }
.apx-hero__codes { padding-bottom: 6px; }
.apx-hero__icao { font-family: var(--font-mono); font-size:14px; color:var(--brand-300); letter-spacing:.04em; }
.apx-hero__name { font-size: 26px; font-weight:700; margin: 14px 0 4px; letter-spacing:-0.01em; }
.apx-hero__loc { font-size:15px; color:#cbd5e1; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.apx-hero__loc i { opacity:.7; margin-right:5px; }
.apx-hero__dot { width:3px; height:3px; border-radius:50%; background: rgba(255,255,255,.35); }

/* KPI chips */
.apx-kpis { display:flex; flex-wrap:wrap; gap:10px; margin-top: 22px; }
.apx-kpi {
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13);
  border-radius:12px; padding:11px 16px; min-width:92px; backdrop-filter: blur(4px);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.apx-kpi:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.apx-kpi__v { font-size:23px; font-weight:800; line-height:1; letter-spacing:-0.01em; font-variant-numeric: tabular-nums; }
.apx-kpi__l { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--brand-300); margin-top:6px; font-weight:600; }

/* hero actions row */
.apx-hero__actions { display:flex; align-items:center; gap:14px; margin-top:18px; }
.apx-herobtn {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:10px; padding:9px 15px; font-size:13px; font-weight:600;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.apx-herobtn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.apx-hero__upd { font-size:12px; color: var(--brand-300); }

/* ----------------------------------------------------- HERO TRACK CARD --- */
.apx-track {
  background:#fff; color: var(--fg-1); border-radius:16px; padding:22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.34); position: relative;
}
.apx-track__bell {
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: var(--sem-info-bg); color: var(--sem-info-fg); font-size:18px; margin-bottom:13px;
}
.apx-track__t { font-size:18px; font-weight:700; color: var(--neutral-950); line-height:1.25; margin:0 0 5px; }
.apx-track__t b { color: var(--ax-accent); }
.apx-track__p { font-size:13px; color: var(--fg-2); margin:0 0 16px; line-height:1.5; }
.apx-track__form { display:flex; flex-direction:column; gap:9px; }
.apx-track__input {
  width:100%; padding:12px 14px; border:2px solid var(--border-1); border-radius:10px;
  background: var(--neutral-050); font-size:14px; font-family:inherit; transition: border-color .2s, box-shadow .2s, background .2s;
}
.apx-track__input:focus { outline:none; border-color: var(--ax-accent); box-shadow: var(--shadow-focus); background:#fff; }
.apx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background: var(--ax-accent); color:#fff; border:none; border-radius:10px; padding:12px 18px;
  font-weight:600; font-size:14.5px; font-family:inherit; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration:none; width:100%;
}
.apx-btn:hover { background: var(--ax-accent-700); transform: translateY(-1px); }
.apx-btn:active { transform: translateY(0); }
.apx-btn--ghost { background: var(--neutral-100); color: var(--fg-1); }
.apx-btn--ghost:hover { background: var(--neutral-200); }
.apx-btn--sm { width:auto; padding:9px 16px; font-size:13.5px; }
.apx-track__fine { font-size:11.5px; color: var(--fg-3); text-align:center; margin-top:4px; }
.apx-track__fine i { color: var(--sem-scheduled-fg); }
/* social proof */
.apx-proof { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:13px; padding-top:13px; border-top:1px solid var(--border-2); }
.apx-proof__avs { display:flex; }
.apx-proof__avs span {
  width:24px; height:24px; border-radius:50%; border:2px solid #fff; margin-left:-7px;
  display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:700;
}
.apx-proof__avs span:first-child { margin-left:0; }
.apx-proof__txt { font-size:12px; color: var(--fg-2); }
.apx-proof__txt b { color: var(--fg-1); font-weight:700; }
/* tracked / done state */
.apx-track--done { text-align:center; }
.apx-track__check { width:54px; height:54px; border-radius:50%; background: var(--sem-scheduled-bg); color: var(--sem-scheduled-fg); display:flex; align-items:center; justify-content:center; font-size:26px; margin:2px auto 14px; }

/* ------------------------------------------------------------ SUB-TABS --- */
.apx-tabs { background:#fff; border-bottom:1px solid var(--border-1); position: sticky; top:0; z-index:30; }
.apx-tabs__wrap { max-width:1120px; margin:0 auto; display:flex; gap:2px; padding:0 24px; overflow-x:auto; }
.apx-tab {
  padding:15px 14px; font-size:14px; font-weight:600; color:var(--fg-2); cursor:pointer;
  border:none; background:none; font-family:inherit; border-bottom:2px solid transparent; white-space:nowrap;
  transition: color var(--dur) var(--ease);
}
.apx-tab:hover { color: var(--fg-1); }
.apx-tab.is-active { color: var(--ax-accent); border-bottom-color: var(--ax-accent); }
.apx-tab span { color: var(--fg-3); font-weight:500; margin-left:5px; }

/* -------------------------------------------------------------- BODY ----- */
.apx-body { max-width:1120px; margin: 26px auto 60px; padding: 0 24px; display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start; }
.apx-main { min-width:0; }
.apx-aside { position: static; display:flex; flex-direction:column; gap:16px; }
.apx-h { font-size:19px; font-weight:700; color: var(--neutral-950); letter-spacing:-0.01em; margin:0 0 4px; }
.apx-sub { font-size:13.5px; color: var(--fg-2); margin:0 0 16px; }
.apx-sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.apx-link { font-size:13px; color: var(--ax-accent); font-weight:600; text-decoration:none; white-space:nowrap; }
.apx-link:hover { text-decoration:underline; }

/* ------------------------------------------- TL;DR / QUOTABLE SUMMARY --- */
.apx-tldr { background:#fff; border:1px solid var(--border-1); border-left:3px solid var(--ax-accent); border-radius:14px; padding:18px 20px 14px; margin-bottom:24px; }
.apx-tldr__eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--ax-accent); margin-bottom:10px; }
.apx-tldr__text { margin:0; font-size:15px; line-height:1.62; color: var(--fg-1); text-wrap: pretty; }
.apx-tldr__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:13px; padding-top:12px; border-top:1px solid var(--border-2); }
.apx-tldr__src { font-size:11.5px; color: var(--fg-3); }
.apx-tldr__btns { display:flex; gap:8px; }
.apx-chipbtn {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit;
  background:#fff; color: var(--fg-2); border:1px solid var(--border-1); border-radius:999px;
  padding:6px 13px; font-size:12px; font-weight:600; transition: all var(--dur) var(--ease);
}
.apx-chipbtn:hover { border-color: var(--ax-accent); color: var(--ax-accent); }
.apx-chipbtn--blue { background: var(--ax-accent); border-color: var(--ax-accent); color:#fff; }
.apx-chipbtn--blue:hover { background: var(--ax-accent-700); color:#fff; }

/* ---------------------------------------------- CHANGES (the hook) ------- */
.apx-changes { background:#fff; border:1px solid var(--border-1); border-radius:14px; overflow:hidden; margin-bottom:24px; }
.apx-changes__head { padding:18px 20px 16px; border-bottom:1px solid var(--border-2); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.apx-live { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--sem-scheduled-fg); }
.apx-live__dot { width:8px; height:8px; border-radius:50%; background: var(--sem-scheduled-fg); position:relative; }
.apx-momentum { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color: var(--sem-scheduled-fg); background: var(--sem-scheduled-bg); border-radius:999px; padding:6px 13px; white-space:nowrap; }
.apx-live__dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; background: var(--sem-scheduled-fg); opacity:.35; animation: apx-pulse 1.8s var(--ease) infinite; }
@keyframes apx-pulse { 0%{ transform:scale(.6); opacity:.5;} 70%{ transform:scale(1.8); opacity:0;} 100%{opacity:0;} }
@media (prefers-reduced-motion: reduce){ .apx-live__dot::after{ animation:none; } }
.apx-changes__list { padding: 4px 20px 8px; }
.apx-change { display:grid; grid-template-columns: auto 1fr auto; gap:14px; align-items:center; padding:15px 0; border-bottom:1px solid var(--border-2); }
.apx-change:last-child { border-bottom:none; }
.apx-change__icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.apx-change__icon.add { background: var(--sem-scheduled-bg); color: var(--sem-scheduled-fg); }
.apx-change__icon.rem { background: #fee2e2; color: var(--sem-danger); }
.apx-change__icon.freq { background: var(--sem-passenger-bg); color: var(--sem-passenger-fg); }
.apx-change__body { font-size:14px; color: var(--fg-1); line-height:1.5; min-width:0; }
.apx-change__body b { font-weight:700; }
.apx-change__route { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-weight:700; font-size:12px; color: var(--ax-accent); margin-left:4px; }
.apx-change__when { font-size:12px; color: var(--fg-2); margin-top:3px; }
.apx-change__tag { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.apx-change__tag.add { background: var(--sem-scheduled-bg); color: var(--sem-scheduled-fg); }
.apx-change__tag.rem { background: #fee2e2; color: var(--sem-danger); }
.apx-change__tag.freq { background: var(--sem-passenger-bg); color: var(--sem-passenger-fg); }
.apx-bell-btn {
  width:36px; height:36px; border-radius:10px; border:1.5px solid var(--border-1); background:#fff;
  color: var(--fg-2); cursor:pointer; font-size:14px; flex-shrink:0; transition: all var(--dur) var(--ease);
}
.apx-bell-btn:hover { border-color: var(--ax-accent); color: var(--ax-accent); }
.apx-bell-btn.is-on { background: var(--ax-accent); border-color: var(--ax-accent); color:#fff; }
.apx-changes__foot { background: var(--brand-050); border-top:1px solid var(--border-2); padding:15px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.apx-changes__foot p { margin:0; font-size:13.5px; color: var(--fg-1); font-weight:600; }
.apx-changes__foot p span { color: var(--fg-2); font-weight:400; display:block; font-size:12.5px; margin-top:2px; }

/* ------------------------------------------------------------- ROUTES ---- */
.apx-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.apx-search { position:relative; flex:1; min-width:180px; }
.apx-search i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color: var(--fg-3); font-size:13px; }
.apx-search input { width:100%; padding:9px 12px 9px 34px; border:1px solid var(--border-1); border-radius:10px; background:#fff; font-size:13.5px; font-family:inherit; transition: border-color .2s, box-shadow .2s; }
.apx-search input:focus { outline:none; border-color: var(--ax-accent); box-shadow: var(--shadow-focus); }
.apx-seg { display:inline-flex; background: var(--neutral-150); border-radius:10px; padding:3px; gap:2px; }
.apx-seg__btn { border:none; background:none; padding:7px 13px; border-radius:7px; font-size:13px; font-weight:600; color: var(--fg-2); cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; transition: all var(--dur) var(--ease); }
.apx-seg__btn.is-active { background:#fff; color: var(--ax-accent); box-shadow: var(--shadow-xs); }
.apx-pills { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.apx-pill { border:1px solid var(--border-1); background:#fff; color: var(--fg-2); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition: all var(--dur) var(--ease); }
.apx-pill:hover { border-color: var(--ax-accent); color: var(--ax-accent); }
.apx-pill.is-active { background: var(--ax-accent); border-color: var(--ax-accent); color:#fff; }
.apx-pill span { opacity:.7; margin-left:4px; font-weight:500; }
.apx-pill.is-active span { opacity:.85; }

.apx-routes { display:flex; flex-direction:column; gap:9px; }
.apx-route { display:grid; grid-template-columns: 56px 1fr auto auto auto; gap:14px; align-items:center; background:#fff; border:1px solid var(--border-1); border-radius:12px; padding:13px 16px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.apx-route__dest { display:contents; color:inherit; text-decoration:none; }
.apx-route__dest:hover .apx-route__name { color: var(--ax-accent); text-decoration:underline; }
.apx-route__dest:hover .apx-route__code { color: var(--ax-accent); }
.apx-route__rt { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; color:var(--fg-2); border:1px solid var(--border-1); text-decoration:none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); flex-shrink:0; }
.apx-route__rt:hover { color: var(--ax-accent); border-color: var(--ax-accent); background: var(--brand-050); }
.apx-route__acts { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.apx-route__act { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; font-size:11px; font-weight:600; white-space:nowrap; color:var(--fg-2); border:1px solid var(--border-1); border-radius:7px; padding:4px 10px; text-decoration:none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.apx-route__act i { font-size:10px; color:var(--fg-3); transition: color var(--dur) var(--ease); }
.apx-route__act:hover { color: var(--ax-accent); border-color: var(--ax-accent); background: var(--brand-050); }
.apx-route__act:hover i { color: var(--ax-accent); }
.apx-routesummary a { color: var(--ax-accent); text-decoration:none; font-weight:600; }
.apx-routesummary a:hover { text-decoration:underline; }
.apx-route:hover { border-color: var(--ax-accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.apx-route__code { font-family: var(--font-mono); font-weight:700; font-size:18px; color: var(--neutral-900); }
.apx-route__name { font-size:14px; font-weight:600; color: var(--fg-1); display:flex; align-items:center; gap:7px; }
.apx-route__sub { font-size:12px; color: var(--fg-2); margin-top:2px; }
.apx-route__freq { text-align:right; }
.apx-route__freq-v { font-size:15px; font-weight:700; color: var(--neutral-950); }
.apx-route__freq-l { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color: var(--fg-2); font-weight:600; }
.apx-route__ops { display:flex; gap:4px; }
.apx-op { background: var(--neutral-100); color: var(--fg-1); font-family: var(--font-mono); font-weight:600; font-size:11px; padding:3px 7px; border-radius:5px; }
.apx-route.is-new { border-color: var(--sem-scheduled-fg); }
.apx-newtag { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--sem-scheduled-fg); background: var(--sem-scheduled-bg); padding:2px 6px; border-radius:999px; }
.apx-empty { text-align:center; padding:40px 20px; color: var(--fg-2); font-size:14px; }

/* route map */
.apx-map { background: linear-gradient(160deg, #0f2744 0%, #1a4480 60%, #2563eb 100%); border:1px solid var(--border-1); border-radius:14px; overflow:hidden; height:440px; position:relative; }
.apx-map svg { width:100%; height:100%; display:block; }
.apx-map__legend { position:absolute; left:16px; bottom:16px; background: rgba(15,39,68,.7); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:10px 14px; color:#fff; font-size:12px; backdrop-filter: blur(6px); display:flex; gap:16px; }
.apx-map__legend b { font-weight:700; }
.apx-map__legend span { color:#cbd5e1; }

/* ------------------------------------------------------------ AIRLINES --- */
.apx-airlines { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.apx-airline { display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--border-1); border-radius:12px; padding:13px 15px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); cursor:pointer; }
.apx-airline:hover { border-color: var(--ax-accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.apx-airline__logo { width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:800; font-size:14px; color:#fff; flex-shrink:0; }
.apx-airline__name { font-size:14px; font-weight:600; color: var(--fg-1); }
.apx-airline__meta { font-size:12px; color: var(--fg-2); margin-top:2px; }
.apx-airline__count { margin-left:auto; text-align:right; }
.apx-airline__count b { font-size:16px; font-weight:700; color: var(--neutral-950); }
.apx-airline__count span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color: var(--fg-2); font-weight:600; }

/* ------------------------------------------------------------- REVIEWS --- */
.apx-reviews { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.apx-review { background:#fff; border:1px solid var(--border-1); border-radius:12px; padding:18px; display:flex; flex-direction:column; }
.apx-review__stars { color: var(--sem-airlines-fg); font-size:13px; letter-spacing:1px; margin-bottom:9px; }
.apx-review__text { font-size:13.5px; color: var(--fg-1); line-height:1.55; margin:0 0 12px; }
.apx-review__tip { font-size:12.5px; color: var(--fg-2); background: var(--brand-050); border-radius:8px; padding:9px 11px; line-height:1.45; margin-bottom:14px; }
.apx-review__tip b { color: var(--ax-accent); font-weight:600; }
.apx-review__by { margin-top:auto; display:flex; align-items:center; gap:9px; }
.apx-review__av { width:30px; height:30px; border-radius:50%; background: var(--brand-100); color: var(--brand-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.apx-review__nm { font-size:12.5px; font-weight:600; color: var(--fg-1); }
.apx-review__dt { font-size:11px; color: var(--fg-2); }

/* ----------------------------------------------------------------- FAQ --- */
.apx-faq__list { display:flex; flex-direction:column; gap:9px; }
.apx-faq__item { background:#fff; border:1px solid var(--border-1); border-radius:12px; transition: border-color var(--dur) var(--ease); }
.apx-faq__item:hover { border-color: var(--ax-accent); }
.apx-faq__item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 17px; font-size:14px; font-weight:600; color: var(--fg-1); }
.apx-faq__item summary::-webkit-details-marker { display:none; }
.apx-faq__item summary i { font-size:11px; color: var(--fg-3); transition: transform var(--dur) var(--ease); flex-shrink:0; }
.apx-faq__item[open] summary i { transform: rotate(180deg); }
.apx-faq__item[open] summary { color: var(--ax-accent); }
.apx-faq__item p { margin:0; padding:0 17px 15px; font-size:13.5px; line-height:1.6; color: var(--fg-2); text-wrap: pretty; }

/* ----------------------------------------------------------- SIDEBAR ----- */
.apx-side { background:#fff; border:1px solid var(--border-1); border-radius:14px; padding:18px; }
.apx-side h4 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color: var(--fg-2); font-weight:700; margin:0 0 14px; display:flex; align-items:center; justify-content:space-between; }
.apx-side h4 a { font-size:11px; color: var(--ax-accent); text-decoration:none; text-transform:none; letter-spacing:0; }
.apx-facts { display:grid; grid-template-columns: 1fr 1fr; gap:14px 10px; }
.apx-facts__k { font-size:10.5px; color: var(--fg-2); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.apx-facts__v { font-size:14px; color: var(--neutral-900); font-weight:700; margin-top:2px; }
.apx-wx { display:flex; align-items:center; gap:16px; }
.apx-wx__icon { font-size:34px; color: var(--sem-airlines-fg); }
.apx-wx__temp { font-size:34px; font-weight:800; color: var(--neutral-950); }
.apx-wx__meta { font-size:12.5px; color: var(--fg-2); line-height:1.5; }
.apx-wx__metar { font-family: var(--font-mono); font-size:10.5px; color: var(--fg-3); margin-top:12px; word-break:break-all; line-height:1.4; border-top:1px solid var(--border-2); padding-top:10px; }
.apx-rwy { display:flex; align-items:center; gap:12px; }
.apx-rwy__strip { width:30px; height:64px; border-radius:6px; background: repeating-linear-gradient(180deg, var(--neutral-800) 0 8px, transparent 8px 16px), var(--neutral-700); position:relative; flex-shrink:0; }
.apx-rwy__strip::before, .apx-rwy__strip::after { content:''; position:absolute; left:7px; right:7px; height:3px; background: rgba(255,255,255,.8); }
.apx-rwy__strip::before { top:5px; } .apx-rwy__strip::after { bottom:5px; }
.apx-rwy__info b { font-size:15px; font-weight:700; color: var(--neutral-950); }
.apx-rwy__info div { font-size:12.5px; color: var(--fg-2); margin-top:3px; }
.apx-nearby { display:flex; flex-direction:column; gap:11px; }
.apx-nearby__row { display:flex; align-items:center; gap:11px; cursor:pointer; }
.apx-nearby__code { font-family: var(--font-mono); font-weight:700; font-size:12px; color:#fff; background: var(--brand-blue-bs); padding:4px 7px; border-radius:5px; }
.apx-nearby__nm { flex:1; font-size:13px; font-weight:600; color: var(--fg-1); }
.apx-nearby__nm:hover { color: var(--ax-accent); }
.apx-nearby__d { font-size:11px; color: var(--fg-2); }

/* aside track promo (when not yet tracking) */
.apx-promo { background: var(--brand-gradient-soft); color:#fff; border-radius:14px; padding:20px; }
.apx-promo h4 { color:#fff; text-transform:none; letter-spacing:-0.01em; font-size:16px; margin:0 0 8px; }
.apx-promo p { font-size:13px; color:#cbd5e1; margin:0 0 14px; line-height:1.5; }
.apx-promo .apx-btn { background:#fff; color: var(--brand-900); }
.apx-promo .apx-btn:hover { background:#e2e8f0; }

/* --------------------------------------------------------- STICKY BAR ---- */
.apx-stickybar {
  position: fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(15,39,68,.96); backdrop-filter: blur(10px); border-top:1px solid rgba(255,255,255,.1);
  color:#fff; transform: translateY(110%); transition: transform .35s var(--ease);
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
}
.apx-stickybar.is-show { transform: translateY(0); }
.apx-stickybar__wrap { max-width:1120px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:18px; }
.apx-stickybar__icon { width:42px; height:42px; border-radius:11px; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.apx-stickybar__txt { flex:1; min-width:0; }
.apx-stickybar__txt b { font-size:15px; font-weight:700; display:block; }
.apx-stickybar__txt span { font-size:12.5px; color: #cbd5e1; }
.apx-stickybar__form { display:flex; gap:8px; align-items:center; }
.apx-stickybar__form input { width:230px; padding:10px 13px; border-radius:9px; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color:#fff; font-size:13.5px; font-family:inherit; }
.apx-stickybar__form input::placeholder { color: rgba(255,255,255,.55); }
.apx-stickybar__form input:focus { outline:none; border-color:#fff; background: rgba(255,255,255,.16); }
.apx-stickybar__form .apx-btn { width:auto; background:#fff; color: var(--brand-900); white-space:nowrap; }
.apx-stickybar__form .apx-btn:hover { background:#e2e8f0; }
.apx-stickybar__x { background:none; border:none; color: rgba(255,255,255,.6); font-size:17px; cursor:pointer; padding:6px; flex-shrink:0; }
.apx-stickybar__x:hover { color:#fff; }
.apx-stickybar__done { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.apx-stickybar__done i { color: #4ade80; font-size:18px; }

/* -------------------------------------------------------------- MODAL ---- */
.apx-overlay { position:fixed; inset:0; z-index:200; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; animation: apx-fade .2s var(--ease); }
@keyframes apx-fade { from{opacity:0;} to{opacity:1;} }
.apx-modal { background:#fff; border-radius:18px; width:100%; max-width:520px; max-height:92vh; overflow:auto; box-shadow: var(--shadow-xl); animation: apx-rise .28s var(--ease); }
@keyframes apx-rise { from{ transform: translateY(14px); opacity:0;} to{ transform: translateY(0); opacity:1;} }
.apx-modal__hd { background: var(--brand-gradient); color:#fff; padding:24px 26px; position:relative; overflow:hidden; }
.apx-modal__hd::before { content:''; position:absolute; inset:0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.apx-modal__hd h3 { position:relative; font-size:20px; font-weight:700; margin:0 0 5px; }
.apx-modal__hd p { position:relative; font-size:13.5px; color:#cbd5e1; margin:0; }
.apx-modal__x { position:absolute; top:18px; right:18px; background: rgba(255,255,255,.15); border:none; color:#fff; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px; }
.apx-modal__x:hover { background: rgba(255,255,255,.28); }
.apx-modal__bd { padding:24px 26px; }
.apx-modal__bd label.apx-lbl { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color: var(--fg-2); margin:0 0 7px; }
.apx-opt { display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--border-1); border-radius:11px; padding:13px 14px; margin-bottom:9px; cursor:pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.apx-opt:hover { border-color: var(--ax-accent); }
.apx-opt.is-on { border-color: var(--ax-accent); background: var(--brand-050); }
.apx-opt__check { width:22px; height:22px; border-radius:6px; border:2px solid var(--border-1); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; margin-top:1px; transition: all var(--dur) var(--ease); }
.apx-opt.is-on .apx-opt__check { background: var(--ax-accent); border-color: var(--ax-accent); }
.apx-opt__t { font-size:14px; font-weight:600; color: var(--fg-1); }
.apx-opt__d { font-size:12.5px; color: var(--fg-2); margin-top:2px; line-height:1.4; }
.apx-modal__input { width:100%; padding:12px 14px; border:2px solid var(--border-1); border-radius:10px; background: var(--neutral-050); font-size:14px; font-family:inherit; margin-bottom:16px; }
.apx-modal__input:focus { outline:none; border-color: var(--ax-accent); box-shadow: var(--shadow-focus); background:#fff; }

/* sample alert preview */
.apx-sample { border:1px dashed var(--border-1); border-radius:12px; padding:14px; margin:6px 0 18px; background: var(--neutral-050); }
.apx-sample__lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--fg-3); font-weight:600; margin-bottom:10px; }
.apx-sample__mail { background:#fff; border:1px solid var(--border-2); border-radius:9px; padding:13px; }
.apx-sample__from { display:flex; align-items:center; gap:9px; padding-bottom:10px; border-bottom:1px solid var(--border-2); margin-bottom:10px; }
.apx-sample__from img { width:26px; height:26px; }
.apx-sample__from b { font-size:12.5px; color: var(--fg-1); }
.apx-sample__from span { font-size:11px; color: var(--fg-2); display:block; }
.apx-sample__subj { font-size:13.5px; font-weight:700; color: var(--neutral-950); margin-bottom:6px; }
.apx-sample__line { font-size:12.5px; color: var(--fg-1); line-height:1.5; }
.apx-sample__line .apx-change__route { font-size:11px; }
.apx-modal__done { text-align:center; padding:34px 26px; }
.apx-modal__done .apx-track__check { width:64px; height:64px; font-size:32px; }

/* --------------------------------------------------------- SHARE MODAL --- */
.apx-modal--share { max-width: 560px; }
.apx-sharecard { width:100%; aspect-ratio: 1200 / 630; border-radius:12px; display:block; box-shadow: var(--shadow); }
.apx-share__row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.apx-share__row .apx-btn { width:auto; }
.apx-share__quotes { margin-top:18px; }
.apx-share__quotes .apx-lbl { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color: var(--fg-2); }
.apx-quote {
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
  background: var(--neutral-050); border:1px solid var(--border-2); border-radius:10px; padding:11px 14px;
  margin-bottom:7px; cursor:pointer; font-family:inherit; font-size:13px; line-height:1.5; color: var(--fg-1);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.apx-quote:hover { border-color: var(--ax-accent); background:#fff; }
.apx-quote i { color: var(--fg-3); font-size:12px; flex-shrink:0; }
.apx-quote:hover i { color: var(--ax-accent); }
.apx-toast {
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  background: var(--neutral-950); color:#fff; font-size:12.5px; font-weight:600;
  border-radius:999px; padding:8px 16px; display:flex; align-items:center; gap:8px;
  box-shadow: var(--shadow-lg); animation: apx-rise .25s var(--ease); white-space:nowrap;
}
.apx-toast i { color:#4ade80; }
.apx-modal--share { position:relative; }
.apx-modal__done-btns { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.apx-modal__done-btns .apx-btn { width:auto; }

/* ------------------------------------------------- render performance ---- */
.apx-faq, .apx-reviews, .apx-airlines { content-visibility:auto; contain-intrinsic-size: auto 420px; }

/* --------------------------------------------------- responsive ---------- */
@media (max-width: 980px) {
  .apx-hero__grid { grid-template-columns: 1fr; }
  .apx-track { max-width: 460px; }
  .apx-body { grid-template-columns: 1fr; }
  .apx-aside { position: static; }
  .apx-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .apx-hero__iata { font-size: 56px; }
  .apx-airlines { grid-template-columns: 1fr; }
  .apx-stickybar__form input { width: 150px; }
  .apx-route { grid-template-columns: 48px 1fr auto auto; }
  .apx-route__ops { display:none; }
  .apx-route__act { padding:4px 8px; font-size:10.5px; }
}


/* FA glyphs provided by base.html Font Awesome 6 CDN */

/* ============ v2 round-6 additions: sentiment + rating + scroll CTA ============ */
.apx-senti { margin-top: 14px; }
.apx-senti__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px 14px; background: var(--neutral-050); border: 1px solid var(--border-2); border-radius: 10px; }
.apx-senti__score { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--sem-scheduled-fg); line-height: 1; }
.apx-senti__score > span { font-size: 13px; font-weight: 700; color: var(--fg-3); margin-left: 2px; }
.apx-senti__meta { display: flex; flex-direction: column; gap: 2px; }
.apx-senti__meta > b { font-size: 13.5px; font-weight: 700; color: var(--fg-1); line-height: 1.2; }
.apx-senti__meta > span { font-size: 11.5px; color: var(--fg-3); }
.apx-senti__bar { flex: 1 1 0%; min-width: 90px; height: 6px; border-radius: 999px; background: var(--border-1); overflow: hidden; }
.apx-senti__bar span { display: block; height: 100%; border-radius: 999px; background: var(--sem-scheduled-fg); }
.apx-senti__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 760px) {
  .apx-senti__grid { grid-template-columns: 1fr; }
}
.apx-senti__col { border-radius: 10px; padding: 13px 15px 14px; border: 1px solid transparent; }
.apx-senti__col.love { background: var(--sem-scheduled-bg); }
.apx-senti__col.gripe { background: rgb(254, 226, 226); }
.apx-senti__colhead { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.apx-senti__col.love .apx-senti__colhead { color: var(--sem-scheduled-fg); }
.apx-senti__col.gripe .apx-senti__colhead { color: var(--sem-danger); }
.apx-senti__list { list-style: none; margin: 9px 0px 0px; padding: 0px; display: flex; flex-direction: column; gap: 9px; }
.apx-senti__list li { font-size: 13px; line-height: 1.55; color: var(--fg-1); }
.apx-senti__list b { font-weight: 700; }
.apx-srcchip { display: inline-block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--fg-2); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(15, 39, 68, 0.08); border-radius: 999px; padding: 1px 8px 2px; white-space: nowrap; vertical-align: 1px; }
.apx-senti__verdict { margin: 12px 2px 0px; font-size: 13px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.apx-senti__verdict b { color: var(--fg-1); font-weight: 700; }

.apx-rate { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; background: rgb(255, 255, 255); border: 1px solid var(--border-1); border-radius: 12px; padding: 13px 18px; margin-bottom: 14px; }
.apx-rate__lbl { font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.apx-rate__stars { display: inline-flex; gap: 2px; }
.apx-rate__star { border: none; background: none; padding: 3px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--border-1); transition: color 0.15s, transform 0.15s; }
.apx-rate__star.is-on { color: var(--sem-airlines-fg); }
.apx-rate__star:hover { transform: translateY(-1px); }
.apx-rate__meta { font-size: 12.5px; color: var(--fg-3); }
.apx-rate__thanks { font-size: 12.5px; font-weight: 600; color: var(--sem-scheduled-fg); display: inline-flex; align-items: center; gap: 6px; }
.apx-rate__more { margin-left: auto; }
@media (max-width: 760px) {
  .apx-rate__more { margin-left: 0px; }
}

/* "Never miss a new route" scroll-triggered sticky CTA */
.apx-stickycta {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140%);
  width: min(680px, calc(100% - 32px)); z-index: 1200;
  background: var(--brand-gradient, linear-gradient(135deg,#0f2744,#1a4480 55%,#2563eb));
  color:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(15,39,68,.35);
  display:flex; align-items:center; gap:16px; padding:14px 16px 14px 20px;
  opacity:0; transition: transform .45s var(--ease,cubic-bezier(.4,0,.2,1)), opacity .45s ease;
}
.apx-stickycta.is-visible { transform: translateX(-50%) translateY(0); opacity:1; }
.apx-stickycta__bell { width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:15px; }
.apx-stickycta__body { flex:1; min-width:0; }
.apx-stickycta__t { font-size:14.5px; font-weight:800; line-height:1.2; }
.apx-stickycta__p { font-size:12.5px; opacity:.85; margin-top:2px; line-height:1.3; }
.apx-stickycta__btn { flex-shrink:0; background:#fff; color:var(--brand-900,#0f2744); border:none;
  border-radius:10px; padding:10px 16px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.apx-stickycta__btn:hover { background:#eaf1ff; }
.apx-stickycta__x { flex-shrink:0; background:none;border:none;color:rgba(255,255,255,.7);
  cursor:pointer; font-size:16px; padding:4px 6px; line-height:1; }
.apx-stickycta__x:hover { color:#fff; }
@media (max-width:600px){
  .apx-stickycta__p { display:none; }
  .apx-stickycta { padding:12px 12px 12px 16px; gap:12px; }
}

/* Arrivals / Departures live-board buttons */
.apx-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 760px; margin-top: 18px; }
.apx-board { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 12px; color: #fff; text-decoration: none; transition: .2s; }
.apx-board > i { font-size: 19px; }
.apx-board__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.apx-board__txt > b { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.apx-board__txt > small { font-size: 12px; opacity: .8; }
.apx-board__chev { margin-left: auto; font-size: 13px; opacity: .55; transition: transform .2s; }
.apx-board--arr { background: rgb(22, 163, 74); }
.apx-board--arr:hover { background: rgb(21, 128, 61); }
.apx-board--dep { background: rgb(37, 99, 235); }
.apx-board--dep:hover { background: rgb(29, 78, 216); }
.apx-board:hover { transform: translateY(-1px); }
.apx-board:hover .apx-board__chev { transform: translateX(2px); }
@media (max-width: 600px) { .apx-boards { grid-template-columns: 1fr; } }

/* ===== round-9: detailed weather + Travelpayouts affiliate blocks ===== */
.apx-wxgrid { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 0; }
.apx-wxgrid > div { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--border-1); }
.apx-wxgrid > div:first-child { border-top: none; }
.apx-wxgrid span { color: var(--fg-2); }
.apx-wxgrid b { color: var(--fg-1); font-weight: 700; }

/* Top destinations (live fares) — apx restyle of the legacy partial */
#ar-top-dests h2 { font-size: 19px; font-weight: 800; color: var(--fg-1); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
#ar-top-dests > p { color: var(--fg-2); font-size: 13px; margin-bottom: 12px !important; }
#ar-top-dests .border { border: 1px solid var(--border-1) !important; border-radius: 12px !important; padding: 13px 16px !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
#ar-top-dests a.border:hover { border-color: var(--ax-accent) !important; box-shadow: var(--shadow); transform: translateY(-1px); }
#ar-top-dests a.border strong { color: var(--fg-1); font-weight: 700; }

/* Travelpayouts flight-search widget wrapper */
.tp-flight-search { background: var(--neutral-050) !important; border: 1px solid var(--border-1); border-radius: 16px !important; padding: 26px 22px !important; margin: 18px 0 0 !important; }
.tp-flight-search h2 { font-size: 19px !important; font-weight: 800 !important; color: var(--fg-1) !important; }
.apx-routesummary { background: #fff; border: 1px solid var(--border-1); border-radius: 14px; padding: 18px 20px; }

/* Top-destinations rows: stack cleanly on mobile (long airline names were
   crowding the route/city on narrow screens). */
@media (max-width: 640px) {
  #ar-top-dests a.border {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
  }
  #ar-top-dests a.border > span:last-child {
    white-space: normal !important;
    margin-left: 0 !important;
  }
  .tp-flight-search { padding: 20px 14px !important; }
  #flights { overflow-x: hidden; }
}

/* Routes-by-airline amCharts map — apx restyle of the legacy bootstrap card */
.apx-routemap #routes-map-container.card { border: 1px solid var(--border-1); border-radius: 16px; box-shadow: none; overflow: hidden; margin-bottom: 0 !important; }
.apx-routemap .card-header { background: #fff; border-bottom: 1px solid var(--border-1); padding: 16px 18px; }
.apx-routemap .card-title { font-size: 18px !important; font-weight: 800; color: var(--fg-1); }
.apx-routemap .form-select { border-radius: 9px; border: 1px solid var(--border-1); font-size: 13px; }
.apx-routemap .badge.bg-primary { background: var(--brand-600) !important; }
.apx-routemap .btn-outline-primary { border-radius: 9px; border-color: var(--border-1); color: var(--brand-600); }
.apx-routemap .btn-outline-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }

/* Airline cards are now links — keep them looking like cards, not blue links */
a.apx-airline { color: inherit; text-decoration: none; }
a.apx-airline:hover .apx-airline__name { color: var(--ax-accent); }
.apx-change--hidden { display:none; }

/* ============ Tip / review submission (v2, 2026-06-10) ============ */
.apx-tipmsg { display:flex; align-items:center; gap:8px; background:var(--sem-scheduled-bg); color:var(--sem-scheduled-fg); border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600; margin:0 0 14px; }
.apx-tipmsg--err { background:rgb(254,226,226); color:var(--sem-danger); }
.apx-tipform { background:var(--neutral-050); border:1px solid var(--border-1); border-radius:12px; padding:16px 18px 18px; margin-top:16px; }
.apx-tipform__t { font-size:15px; font-weight:700; color:var(--fg-1); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.apx-tipform__t i { color:var(--brand-600); font-size:13px; }
.apx-tipform__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ .apx-tipform__row { grid-template-columns:1fr; } }
.apx-tipform__lbl { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-2); margin:10px 0 4px; }
.apx-tipform .form-control, .apx-tipform .form-select { width:100%; font-size:14px; border:1px solid var(--border-1); border-radius:9px; padding:8px 11px; background:#fff; color:var(--fg-1); }
.apx-tipform .form-control:focus, .apx-tipform .form-select:focus { outline:none; border-color:var(--ax-accent); box-shadow:0 0 0 3px var(--brand-050); }
.apx-netpill { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:var(--sem-scheduled-bg); color:var(--sem-scheduled-fg); font-size:12.5px; font-weight:700; border-radius:999px; padding:6px 13px; white-space:nowrap; }
.apx-netpill--down { background:rgb(254,226,226); color:var(--sem-danger); }