/* flightsgem — three whole-app themes (Light "first class", Streets
   "vintage paper", Dark "night ops") keyed off <html data-theme>. The
   Light/Streets/Dark switch re-skins EVERYTHING: cabin, departure board,
   map, popups, pickers. Tokens first; components only ever use var(). */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/static/fonts/archivo-var.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/static/fonts/jetbrainsmono-var.woff2") format("woff2")}

/* ---------- theme tokens ---------- */
:root, :root[data-theme="light"]{
  --ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --canvas:#f4f7fb; --top:#ecf2fa; --surface:#ffffff; --surface2:#eef3f9; --input:#ffffff;
  --ink:#0f1d33; --dim:#46587a; --faint:#75849e;
  --edge:#dce4ef; --edge2:#c3cfdf;
  --brand:#143a6b; --brand2:#0e2c54; --onbrand:#ffffff;
  --gold:#a9741a; --gold2:#8a5e12; --gold-soft:#f7ead0; --gold-line:#e0c689; --gold-deep:#6d4a0e;
  --sky:#0b7fc4; --red:#c23636; --green:#1d8f5f;

  --glass:rgba(255,255,255,.93); --glass-h:rgba(255,255,255,.86); --mapbg:#e7edf4;
  --ring:rgba(214,162,39,.16); --sel:rgba(214,162,39,.28);
  --pin:#143a6b; --plane:#b4690e; --idle:#b9821b;
  --bad-bg:#fdeeee; --bad-line:#eec3c3;
  --ok:#1d8f5f; --ok-line:#b4dfcd; --ok-bg:#ecf8f1;

  /* departure board (light = printed flight strips) */
  --flap-a:#d6a227; --flap-t:#12233c; --flap-dim:#5b6c88; --flap-wire:#c8d3e2;
  --board-line1:#ffffff; --board-line2:#f3f7fc; --board-border:var(--edge);
  --board-head-bg:#eef3f9; --board-div:#e4eaf3;
  --board-sel-bg:#fbf3de; --board-sel-ring:rgba(214,162,39,.45);
  --board-glow:inset 0 1px 0 rgba(255,255,255,.6);
  --tag-gem-t:#2a1d05; --sk1:#ffffff; --sk2:#eef3f9; --sk-sh:rgba(15,29,51,.06);

  --r-lg:16px; --r-md:12px; --r-sm:9px; --r-pill:999px;
  --shadow:0 10px 30px rgba(15,29,51,.09);
}
:root[data-theme="streets"]{
  --canvas:#f5f3ec; --top:#f8f6ee; --surface:#fffdf8; --surface2:#efece1; --input:#fffdf8;
  --ink:#232a3c; --dim:#5a6478; --faint:#8a8b80;
  --edge:#e0dbcc; --edge2:#c8c2ad;
  --brand:#1f4a3e; --brand2:#16382f; --onbrand:#ffffff;
  --gold:#9c6d1c; --gold2:#7d5714; --gold-soft:#f5e9cf; --gold-line:#dcc38b; --gold-deep:#5f4310;
  --sky:#146a8f; --red:#b23a3a; --green:#2c7a4b;

  --glass:rgba(255,253,248,.93); --glass-h:rgba(255,253,248,.86); --mapbg:#eeeade;
  --ring:rgba(201,152,44,.18); --sel:rgba(201,152,44,.28);
  --pin:#1f4a3e; --plane:#9c5a12; --idle:#a97b1f;
  --bad-bg:#fbeeee; --bad-line:#e9c4c4;
  --ok:#2c7a4b; --ok-line:#bcdcc6; --ok-bg:#edf6ef;

  --flap-a:#cf9a2c; --flap-t:#242b3e; --flap-dim:#666d7c; --flap-wire:#d5cfbd;
  --board-line1:#fffdf7; --board-line2:#f4f0e4; --board-border:var(--edge);
  --board-head-bg:#efe9d9; --board-div:#e5decb;
  --board-sel-bg:#f8eed4; --board-sel-ring:rgba(207,154,44,.5);
  --board-glow:inset 0 1px 0 rgba(255,255,255,.65);
  --tag-gem-t:#2a1d05; --sk1:#fffdf7; --sk2:#efece1; --sk-sh:rgba(35,42,60,.06);
  --shadow:0 10px 30px rgba(45,40,20,.12);
}
:root[data-theme="dark"]{
  --canvas:#0b101b; --top:#0d1422; --surface:#121a2b; --surface2:#182238; --input:#0d1524;
  --ink:#eaf1fb; --dim:#a2b3d0; --faint:#7186aa;
  --edge:#243350; --edge2:#35496e;
  --brand:#f0b429; --brand2:#ffc857; --onbrand:#201607;
  --gold:#f0b429; --gold2:#ffd77a; --gold-soft:rgba(240,180,41,.16); --gold-line:#6d5423; --gold-deep:#ffd77a;
  --sky:#4cc2ff; --red:#ff6b6b; --green:#41d99c;

  --glass:rgba(16,24,40,.9); --glass-h:rgba(11,16,27,.8); --mapbg:#0d1524;
  --ring:rgba(240,180,41,.16); --sel:rgba(240,180,41,.28);
  --pin:#d6a227; --plane:#f0b429; --idle:#e8b23a;
  --bad-bg:rgba(255,107,107,.08); --bad-line:rgba(255,107,107,.35);
  --ok:#41d99c; --ok-line:#2f5b48; --ok-bg:rgba(65,217,156,.1);

  /* dark = the true Solari split-flap board */
  --flap-a:#f4c452; --flap-t:#e9eff7; --flap-dim:#8b98a8; --flap-wire:#39424e;
  --board-line1:#1e242e; --board-line2:#181d25; --board-border:#0c0f14;
  --board-head-bg:#0e1218; --board-div:#0c1015;
  --board-sel-bg:#2b2516; --board-sel-ring:rgba(244,196,82,.35);
  --board-glow:inset 0 1px 0 rgba(255,255,255,.05);
  --tag-gem-t:#2a1d05; --sk1:#181d25; --sk2:#242c38; --sk-sh:rgba(255,255,255,.07);
  --shadow:0 14px 38px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
[hidden]{display:none!important} /* author display rules must never resurrect hidden elements */
html,body{margin:0;height:100%}
body{
  background:linear-gradient(180deg, var(--top), var(--canvas) 380px) fixed var(--canvas);
  color:var(--ink);
  font:14px/1.55 var(--ui);
  display:flex; flex-direction:column; min-height:100%;
  -webkit-font-smoothing:antialiased;
  transition:background .25s, color .25s;
}
::selection{background:var(--sel)}
*{scrollbar-width:thin; scrollbar-color:var(--edge2) transparent}

/* ---------- header ---------- */
header{
  display:flex; align-items:center; gap:16px; padding:0 22px; height:58px;
  border-bottom:1px solid var(--edge); background:var(--glass-h); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:40;
}
.brand{font-size:20px; font-weight:800; letter-spacing:-.025em; color:var(--ink)}
.brand .gem{color:var(--flap-a); margin-right:3px; font-size:17px; position:relative; top:-1px}
.brand > span:last-child{color:var(--gold)}
.tagline{color:var(--faint); font-size:13px; font-weight:500}
.tagline em{color:var(--dim); font-style:normal; font-weight:600}
/* ---------- search card ---------- */
.search-card{
  margin:18px 22px 0; background:var(--surface);
  border:1px solid var(--edge); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px 18px 10px;
}
/* every field is one grid column with three fixed baselines:
   micro-label (14px) · 46px control · caption (16px, always reserved).
   Columns align in every wrap row. */
.searchbar{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:stretch}
.fg{display:grid; grid-template-rows:14px 46px 16px; gap:6px; min-width:0}
.fg > label, .fg > .lb{
  font-size:11px; line-height:14px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--faint); font-weight:700; white-space:nowrap; overflow:hidden;
}
.fg > label b{color:var(--gold); font-weight:700}
.fg > label i{font-style:normal; opacity:.8; font-weight:500; text-transform:none; letter-spacing:0}
.fg input{
  width:100%; height:100%; background:var(--input); border:1px solid var(--edge2); border-radius:var(--r-md);
  color:var(--ink); padding:0 13px; font:400 15px/1 var(--ui); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
:root:not([data-theme="dark"]) .fg input{color-scheme:light}
:root[data-theme="dark"] .fg input{color-scheme:dark}
.fg input::placeholder{text-transform:none; letter-spacing:0; font-weight:400; color:var(--faint); opacity:.75}
.fg input:focus{border-color:var(--flap-a); box-shadow:0 0 0 3px var(--ring)}
.fg.wide{flex:1 1 178px}
.fg.date{flex:0 1 178px} /* "Sat, Nov 28, 2026" in 14px mono needs ~169px + padding */
.fg.date input, .searchbar input.form-control{min-width:150px}
.fg.date input{font:500 14px/1 var(--mono); text-overflow:ellipsis}
input.code{font:600 16px/1 var(--mono); text-transform:uppercase; letter-spacing:.05em}
.fg.arr{flex:none; width:16px}
.fg.arr .ar{align-self:center; justify-self:center; color:var(--gold); font-size:18px; font-style:normal; line-height:1}
.seg{height:100%; display:flex; background:var(--surface2); border:1px solid var(--edge2); border-radius:var(--r-md); overflow:hidden}
.seg button{
  background:transparent; border:0; color:var(--dim); padding:0 15px; font:600 13px/1 var(--ui); cursor:pointer;
}
.seg button.on{background:var(--brand); color:var(--onbrand); font-weight:700}
/* Hard-wired width: flex:none sized this column to the CITYNAME caption's
   max-content (~293px measured), inflating the box and crushing its
   neighbours the moment a layover matched. Fixed basis + min-width:0 keeps
   the row pixel-stable and lets the caption ellipsize like every other. */
.fg.via{flex:0 0 196px; min-width:0}
.fg.via input{border-style:dashed; border-color:var(--gold-line); color:var(--gold2); width:100%; font-size:15px}
:root:not([data-theme="dark"]) .fg.via input{background:#fdfaf2}
.fg.via input::placeholder{color:var(--gold); opacity:.65; text-transform:none; font-weight:400; letter-spacing:0}
.fg.via input:focus{border-color:var(--flap-a); box-shadow:0 0 0 3px var(--ring)}
.gofg{flex:none; margin-left:auto}
button.go{
  width:100%; height:100%; background:var(--brand); color:var(--onbrand);
  border:0; border-radius:var(--r-md); font:800 15px/1 var(--ui); letter-spacing:.01em;
  padding:0 30px; cursor:pointer; transition:background .15s;
}
button.go:hover{background:var(--brand2)}
.htmx-indicator{display:none; font-weight:700} .htmx-request .htmx-indicator{display:inline}
.presets{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; border-top:1px solid var(--edge); padding-top:12px}
.plabel{color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:700}
.presets button{
  background:var(--surface); color:var(--dim); border:1px solid var(--edge2); border-radius:var(--r-pill);
  padding:6px 14px; font:500 12.5px/1 var(--ui); cursor:pointer; transition:color .15s, border-color .15s;
}
.presets button:hover{color:var(--gold2); border-color:var(--gold-line)}
.presets b{color:var(--gold2); font-weight:700}

/* ---------- layout: results strip column + permanent map stage ---------- */
main{flex:1; min-height:0; display:flex; flex-direction:column; padding:14px 22px 0}
.app{display:grid; grid-template-columns:minmax(430px, 5fr) 7fr; gap:16px; flex:1; min-height:560px}
.list-col{overflow-y:auto; padding-bottom:10px; min-height:0; display:flex; flex-direction:column; gap:10px}
/* flex items would SHRINK to fit the fixed-height scroller instead of
   overflowing it — the board got crushed + clipped (no scroll existed at all) */
.list-col>*{flex-shrink:0}
.map-col{position:relative; border-radius:var(--r-lg); min-height:560px}
/* landing is taller than the viewport-fixed app box — let the page scroll
   for it instead of clipping the board inside the column; :has() re-evaluates
   the moment a real search swaps the intro away */
main:has(.intro), .app:has(.intro){flex:none}
#map{position:absolute; inset:0; border-radius:var(--r-lg); border:1px solid var(--edge2); background:var(--mapbg)}

/* landing panel — replaced by the first htmx search; nothing toggles show/hide */
.intro{padding:18px 8px 0 4px; display:flex; flex-direction:column; gap:14px}
.intro h2{margin:0 0 4px; font-size:29px; font-weight:800; letter-spacing:-.022em; line-height:1.2; color:var(--ink); max-width:50ch}
.intro p{margin:0; color:var(--dim); font-size:14.5px; line-height:1.65; max-width:56ch}
.intro b{color:var(--gold2); font-weight:700}
.intro .go-note{color:var(--faint); font-size:13px; line-height:1.55; border-left:2px solid var(--gold-line); padding-left:13px}
.chips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px}
.chips .plabel{margin-right:2px}
.chips button{
  background:var(--surface); color:var(--dim); border:1px solid var(--edge2); border-radius:var(--r-pill);
  padding:6px 14px; font:500 12.5px/1 var(--ui); cursor:pointer; transition:color .15s, border-color .15s;
}
.chips button:hover{color:var(--gold2); border-color:var(--gold-line)}

/* ---------- filters ---------- */
.filters{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; position:sticky; top:0; z-index:6;
  background:linear-gradient(var(--canvas) 78%, transparent); padding:10px 2px 12px;
}
.filters select,.filters input{
  appearance:none; background:var(--surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="6"><path d="M1 1l3.5 3.5L8 1" stroke="%2346587a" fill="none" stroke-width="1.4"/></svg>') no-repeat right 10px center;
  border:1px solid var(--edge2); border-radius:var(--r-pill); color:var(--dim); font:500 12.5px/1.4 var(--ui);
  padding:7px 28px 7px 14px; outline:none;
}
:root[data-theme="dark"] .filters select,:root[data-theme="dark"] .filters input{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="6"><path d="M1 1l3.5 3.5L8 1" stroke="%23a2b3d0" fill="none" stroke-width="1.4"/></svg>');
}
.filters input.maxprice{background-image:none; padding-right:12px; width:86px; font-family:var(--mono); height:32px}
.filters input.maxprice::-webkit-outer-spin-button,.filters input.maxprice::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.filters input.maxprice{-moz-appearance:textfield}
.filters select:hover,.filters input:hover{border-color:var(--brand); color:var(--ink)}
.filters .count{margin-left:auto; color:var(--faint); font:500 12px/1 var(--ui)}
.gemc{color:var(--gold2)}
.rtc{color:var(--sky)}

/* ---------- banners ---------- */
.err{color:var(--red); background:var(--bad-bg); border:1px solid var(--bad-line); padding:11px 14px; border-radius:var(--r-md); font-size:13.5px}
.mockbanner{
  color:var(--gold-deep); background:var(--gold-soft); border:1px dashed var(--gold-line);
  padding:10px 14px; border-radius:var(--r-md); font-size:13px;
}
.mockbanner code{background:var(--surface2); padding:1px 6px; border-radius:5px; color:var(--gold2); font-size:12px}
.explorebanner{
  color:var(--sky); background:color-mix(in srgb, var(--sky) 8%, var(--surface)); border:1px solid color-mix(in srgb, var(--sky) 35%, var(--surface));
  padding:10px 14px; border-radius:var(--r-md); font:500 12.5px/1.5 var(--ui); margin-bottom:8px;
}
.explorebanner b{color:var(--gold2); font-weight:700}
.hint{color:var(--dim); padding:16px; font-size:13.5px; line-height:1.6}
.hint b{color:var(--ink)}

/* ---------- results = split-flap departure board ----------
   The one place the boldness is spent; the board re-skins with the theme:
   printed strips in Light, warm paper strips in Streets, true dark Solari
   in Night Ops. */
.board{
  background:linear-gradient(var(--surface), var(--surface2));
  border:1px solid var(--board-border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow), var(--board-glow);
  perspective:1100px;
}
:root[data-theme="dark"] .board{background:linear-gradient(#1c222b, #14181f)}
.board-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 16px; background:var(--board-head-bg); color:var(--flap-dim);
  font:700 10px/1 var(--ui); letter-spacing:.15em; text-transform:uppercase;
}
.board-head .h-fare{text-align:right}
/* asymmetric flight strip: the route owns the left, the fare anchors the right
   at one scale above everything else, stops·duration shrink to a meta line.
   BASELINE-aligned, never vertically centered: the fare's cap line sits on the
   route's cap line (a strip that ends in a number), the small chrome — airline
   left, meta right — hangs below. Centered blocks read as a mirrored 2-column
   card grid, which is exactly what Andy keeps rejecting. */
.flap{
  display:flex; gap:20px; align-items:baseline;
  min-height:58px; padding:9px 16px; cursor:pointer; position:relative;
  border-top:1px solid var(--board-div); background:linear-gradient(var(--board-line1), var(--board-line2));
  font-family:var(--mono); color:var(--flap-t); transition:background .15s;
}
.flap:hover{background:var(--surface2)}
.flap.sel{background:var(--board-sel-bg); box-shadow:inset 0 0 0 1px var(--board-sel-ring)}
.flap.gem::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--flap-a)}
.rmain{flex:1 1 auto; min-width:0}
.fareblk{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.c-meta{font:500 11.5px/1 var(--mono); color:var(--flap-dim); letter-spacing:.02em; font-variant-numeric:tabular-nums}
/* route chain */
.route{display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:6px; min-width:0}
.route .leader{flex:1 1 60px; min-width:30px; align-self:flex-end; margin-bottom:4px;
  height:0; border-bottom:1px dotted var(--flap-wire); opacity:.8}
.rc{font:600 15px/1 var(--mono); letter-spacing:.05em; color:var(--flap-t)}
.rf{display:flex; align-items:center; gap:4px; color:var(--flap-dim)}
.rf .ln{width:12px; height:1px; background:var(--flap-wire); display:inline-block}
.rf .pl{font-size:9px}
.rf .fl{font:500 10px/1 var(--mono); letter-spacing:-.02em}
.rl{font:600 10px/1 var(--mono); color:var(--tag-gem-t); background:var(--flap-a); border-radius:5px; padding:4px 7px}
.airline{margin-top:4px; display:flex; align-items:center; gap:7px; font:500 11.5px/1 var(--ui); color:var(--flap-dim)}
/* fare = the row's anchor number — one clear scale above the 15px codes;
   the landing demo keeps the calmer 19px, real results spend the contrast */
.price{font:700 19px/1 var(--mono); color:var(--gold2); letter-spacing:.01em; font-variant-numeric:tabular-nums}
.board:not(.demo) .price{font-size:23px}
:root[data-theme="dark"] .price{color:var(--flap-a)}
.tag{font:700 9px/1 var(--mono); letter-spacing:.09em; border-radius:5px; padding:4px 6px; white-space:nowrap}
.tag.fast{color:var(--ok); border:1px solid var(--ok-line); background:var(--ok-bg)}
.tag.gem{color:var(--tag-gem-t); background:var(--flap-a)}
.tag.combo{color:var(--gold2); border:1px dashed var(--gold2); background:transparent}
.combonote{
  margin-top:10px; padding:8px 10px; border:1px dashed var(--gold2); border-radius:var(--r-md);
  color:var(--dim); font-size:11.5px; line-height:1.45;
}
.combonote b{color:var(--gold2)}
/* the flaps drop in order — one orchestrated reveal answering a search */
/* landing demo only: Solari-style flips driven by WAAPI in app.js */
.board.demo .flap{cursor:default}
.board.demo .flap > .rmain, .board.demo .route{transform-style:preserve-3d}
.board.demo .rc, .board.demo .rl{display:inline-block}
@keyframes flap{
  0%{transform:rotateX(-88deg); opacity:0}
  55%{transform:rotateX(10deg); opacity:1}
  100%{transform:rotateX(0); opacity:1}
}
.board .flap{transform-origin:top center; transform-style:preserve-3d; animation:flap .46s cubic-bezier(.2,.75,.3,1) both}
.board .flap:nth-child(3){animation-delay:.06s}
.board .flap:nth-child(4){animation-delay:.12s}
.board .flap:nth-child(5){animation-delay:.18s}
.board .flap:nth-child(n+6){animation-delay:.24s}

/* ---------- map overlays ---------- */
.mapcard{
  position:absolute; top:12px; left:12px; z-index:10; width:300px; max-height:calc(100% - 24px); overflow-y:auto;
  background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--edge2);
  border-top:2px solid var(--flap-a);
  border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow); font:400 12.5px/1.45 var(--ui); color:var(--ink);
}
.mapcard .head{display:flex; align-items:baseline; gap:9px; margin-bottom:10px; cursor:pointer}
.mapcard .chev{margin-left:auto; color:var(--faint); font-size:11px; transition:transform .2s}
.mapcard.collapsed .tl, .mapcard.collapsed .combonote{display:none}
.mapcard.collapsed .head{margin-bottom:0}
.mapcard.collapsed .chev{transform:rotate(180deg)}
.mapcard .hprice{color:var(--ink); font:700 20px/1 var(--mono); letter-spacing:-.02em}
.mapcard .hmeta{color:var(--dim); font-size:12px}
.mapcard .tl{display:flex; flex-direction:column}
.mapcard .leg{display:grid; grid-template-columns:96px 1fr; gap:8px; padding:7px 0; border-bottom:1px solid var(--edge)}
.mapcard .leg:last-child{border-bottom:none}
.mapcard .time{color:var(--gold2); font:500 12px/1.5 var(--mono); letter-spacing:-.01em}
.mapcard .mid{font-weight:700; font-family:var(--mono); font-size:12px; letter-spacing:.01em}
.mapcard .small{color:var(--faint); font-size:11.5px; margin-top:1px}
.mapcard .leg.layrow .mid{color:var(--gold2); display:flex; align-items:center; gap:6px}
.mapcard .leg.layrow .mid::before{content:"◇"}
.maperr{
  position:absolute; inset:auto 12px 12px 12px; z-index:15; background:var(--bad-bg); color:var(--red);
  border:1px solid var(--bad-line); padding:10px 14px; border-radius:var(--r-md); font-size:12px;
  backdrop-filter:blur(8px);
}

.stylepick{
  position:absolute; bottom:12px; left:12px; z-index:10; display:flex; gap:2px;
  background:var(--glass); backdrop-filter:blur(8px); border:1px solid var(--edge2); border-radius:var(--r-pill); padding:3px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.stylepick button{
  background:transparent; border:0; color:var(--faint); font:700 11.5px/1 var(--ui);
  padding:6px 13px; border-radius:var(--r-pill); cursor:pointer;
}
.stylepick button.on{background:var(--brand); color:var(--onbrand)}

/* ---------- map markers ---------- */
.mk{pointer-events:auto}
.pin{display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.35)}
.pin.pending{opacity:0; transform:scale(.2)}
.plane{
  color:var(--plane); font-size:21px; line-height:1; pointer-events:none;
  text-shadow:0 1px 2px var(--glass-h);
}
.pin.end{
  background:var(--surface); color:var(--ink); border:2px solid var(--pin);
  font:600 10.5px/1 var(--mono); letter-spacing:.03em; padding:3px 8px; border-radius:var(--r-pill);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.pin.end.goal{background:var(--flap-a); border-color:var(--flap-a); color:var(--tag-gem-t)}
.pin.lay{
  width:22px; height:22px; border-radius:50%; background:var(--surface); color:var(--gold2);
  border:2px solid var(--flap-a); font:600 11px/1 var(--mono);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.maplibregl-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--surface)}
.maplibregl-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--surface)}
.maplibregl-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-left-color:var(--surface)}
.maplibregl-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-right-color:var(--surface)}
.maplibregl-popup-content{
  background:var(--surface); color:var(--ink); border:1px solid var(--edge2); border-radius:var(--r-md);
  font-size:12px; padding:9px 12px; box-shadow:var(--shadow);
}
.maplibregl-popup-content b{color:var(--gold2); font-family:var(--mono); font-weight:600}
.maplibregl-popup-close-button{color:var(--faint); right:4px; top:2px}
.maplibregl-ctrl-group{background:var(--surface)!important; border:1px solid var(--edge2)!important; border-radius:var(--r-md)!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--edge)!important}
:root[data-theme="dark"] .maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(.8)}
.maplibregl-ctrl-attrib{background:var(--glass-h)!important; font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--faint)!important}

footer{color:var(--faint); font-size:11.5px; padding:12px 22px 14px; border-top:1px solid var(--edge); margin-top:14px;
  display:flex; gap:4px 18px; flex-wrap:wrap; align-items:baseline}
footer span:first-child{flex:1 1 420px; min-width:0}
.mocktag{color:var(--gold2)}

@media (max-width:1080px){
  /* phones: the whole page scrolls — viewport-height flex columns here
     crush the results grid toward 0 once the tall header + search card
     eat the screen, burying content under the map */
  main{flex:none}
  .app{grid-template-columns:1fr; min-height:0; flex:none}
  .list-col{overflow:visible}
  .map-col{min-height:420px; height:420px; order:-1}
  /* landing: read the guidance first, the map follows */
  .app:has(.intro) .map-col{order:0}
  header{gap:10px; flex-wrap:wrap; height:auto; padding:10px 16px}
  .search-card, main{margin-left:14px; margin-right:14px}
}
@media (max-width:720px){
  .fg.arr{display:none}
  .fg.wide{flex-basis:calc(50% - 18px)}
  .gofg{margin-left:0; flex:1 1 100%}
  /* board folds: route wraps under itself, fare block stays top-right */
  .board-head{display:none}
  .flap{gap:14px}
  .route .leader{display:none}
  .fareblk{gap:3px}
  .price,.board:not(.demo) .price{font-size:17px}
}

/* ============================================================
   component kit — Tom Select / date picker / typeahead / loading
   ============================================================ */

/* airport typeahead (.ac is a .fg column; menu hangs under the caption row) */
.ac{position:relative}
.accap{font-size:11px; line-height:16px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aclist{
  position:absolute; top:calc(100% + 6px); left:0; min-width:290px; z-index:60;
  background:var(--surface); border:1px solid var(--edge2); border-radius:var(--r-md); box-shadow:var(--shadow);
  padding:6px; max-height:302px; overflow-y:auto;
}
.aci{display:flex; align-items:baseline; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer}
.aci b{color:var(--gold2); font:600 13px/1.3 var(--mono); letter-spacing:.04em}
.aci span{color:var(--dim); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aci.cur, .aci:hover{background:var(--gold-soft)}
.aci.cur b{color:var(--gold-deep)}

/* CTA spinner */
button.go{position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-width:122px}
button.go .spin{display:none; width:16px; height:16px; border-radius:50%; border:2.5px solid color-mix(in srgb, var(--onbrand) 35%, transparent); border-top-color:var(--onbrand); animation:sp .65s linear infinite}
body.busy button.go .spin{display:block}
body.busy button.go{pointer-events:none; filter:saturate(.8)}
body.busy button.go .lbl{display:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* skeleton list */
.skelwrap{display:flex; flex-direction:column; gap:10px; padding-top:2px}
.skel-note{color:var(--dim); font-size:13px; padding:2px 2px 4px; font-variant-numeric:tabular-nums}
.skel-note b{color:var(--gold2)}
/* pulsing dot = the server is alive and working right now */
.skel-note.live::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--flap-a); margin-right:9px; vertical-align:1px; animation:pls 1.1s ease-in-out infinite}
@keyframes pls{50%{opacity:.25}}
.skel{display:flex; gap:14px; align-items:center; background:linear-gradient(var(--sk1), var(--sk2)); border:1px solid var(--board-border); border-radius:var(--r-md); padding:15px 16px; min-height:56px}
.sl{position:relative; overflow:hidden; background:var(--surface2); border-radius:7px}
.sl::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--sk-sh), transparent); animation:shim 1.15s infinite}
@keyframes shim{to{transform:translateX(100%)}}
.skel .sp{width:64px; height:26px; flex:none}
.skel .sb{flex:1; display:flex; flex-direction:column; gap:9px}
.skel .l1{width:52%; height:12px}
.skel .l2{width:78%; height:12px}

/* Tom Select — pill-shaped to match the filter bar */
.filters .ts-wrapper{width:auto; max-width:230px; flex:none}
.filters .ts-wrapper.single .ts-control{
  /* the vendored CSS forces padding-right: max(12px, --ts-pr-caret) !important —
     the caret reservation must go through the variable or text renders under the chevron */
  --ts-pr-caret:28px;
  background:var(--surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="6"><path d="M1 1l3.5 3.5L8 1" stroke="%2346587a" fill="none" stroke-width="1.4"/></svg>') no-repeat right 11px center;
  border:1px solid var(--edge2); border-radius:var(--r-pill); color:var(--dim); font:500 12.5px/1.4 var(--ui);
  padding:7px 30px 7px 13px; line-height:1.4; box-shadow:none; cursor:pointer;
  min-height:32px; display:flex; align-items:center;
  transition:border-color .15s, color .15s;
}
:root[data-theme="dark"] .filters .ts-wrapper.single .ts-control{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="6"><path d="M1 1l3.5 3.5L8 1" stroke="%23a2b3d0" fill="none" stroke-width="1.4"/></svg>');
}
.filters .ts-wrapper.single .ts-control:hover{border-color:var(--brand); color:var(--ink)}
.filters .ts-wrapper.focus .ts-control{border-color:var(--flap-a); box-shadow:0 0 0 3px var(--ring); color:var(--ink)}
.ts-wrapper .ts-control input{color:var(--ink); font-size:12.5px}
.ts-dropdown{
  background:var(--surface); border:1px solid var(--edge2); border-radius:var(--r-md); box-shadow:var(--shadow);
  color:var(--dim); font-size:12.5px; padding:6px; margin-top:6px;
}
.ts-dropdown .active{background:var(--gold-soft); color:var(--ink); border-radius:var(--r-sm)}
.ts-dropdown .selected{color:var(--gold2)}
.ts-dropdown .no-results{color:var(--faint); padding:8px 10px}
.ts-dropdown .ts-dropdown-content{padding:0}
.ts-dropdown > input{
  background:var(--input); border:1px solid var(--edge2); border-radius:var(--r-sm); color:var(--ink);
  padding:6px 9px; margin:2px 2px 6px; width:calc(100% - 8px); outline:none; font-size:12.5px;
}

/* date picker — custom, theme-native; hidden input holds the ISO value */
.pkpop{
  position:fixed; z-index:80; width:282px; background:var(--surface);
  border:1px solid var(--edge2); border-radius:var(--r-md); box-shadow:var(--shadow);
  padding:10px 12px; font-family:var(--ui);
}
.pk-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.pk-my{font:700 13.5px/1 var(--ui); color:var(--ink); letter-spacing:-.01em}
.pk-nav{background:transparent; border:0; color:var(--dim); font-size:18px; line-height:1;
  cursor:pointer; padding:4px 10px; border-radius:8px}
.pk-nav:hover{background:var(--surface2); color:var(--gold2)}
.pk-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.pk-dow{text-align:center; font:600 10px/1 var(--mono); color:var(--faint); text-transform:uppercase; padding:5px 0}
.pk-d{position:relative; text-align:center; font:500 12.5px/1 var(--mono); padding:8px 0;
  border-radius:8px; cursor:pointer; color:var(--ink); border:1px solid transparent;
  font-variant-numeric:tabular-nums; transition:background .1s}
.pk-d:hover{background:var(--gold-soft)}
.pk-d.past{opacity:.28; pointer-events:none}
.pk-d.today{border-color:var(--flap-a)}
.pk-d.sel{background:var(--brand); color:var(--onbrand); font-weight:700}
.pk-foot{display:flex; gap:6px; margin-top:8px; border-top:1px solid var(--edge); padding-top:8px}
.pk-foot button{flex:1; background:var(--surface2); border:1px solid var(--edge2); color:var(--dim);
  border-radius:8px; padding:6px 0; font:600 11px/1 var(--ui); cursor:pointer}
.pk-foot button:hover{color:var(--gold2); border-color:var(--gold-line)}
.pk-nav:focus-visible, .pk-foot button:focus-visible{outline:2px solid var(--flap-a); outline-offset:1px}

/* micro-interactions + a11y */
button:focus-visible, input:focus-visible, .aci:focus-visible{outline:2px solid var(--flap-a); outline-offset:2px}
.seg button:active, .presets button:active, .stylepick button:active{transform:scale(.96)}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}