/* Joey's Flights: minimal look. Loaded last, so it overrides index.html and travel.css.
   One typeface (Hanken Grotesk), white paper, one cobalt accent, hairlines instead of boxes.
   The one loud element is the trip prompt on the home page. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#15181C; --muted:#5F6670; --line:#E5E7EA;
  --accent:#2B59C3; --accent-ink:#FFFFFF; --board:#F4F5F7; --board-fg:#15181C; --flap:transparent;
  --ok:#1E7F4F; --warn:#A86B00; --bad:#C0362C;
  --f-display:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1013; --surface:#15181D; --ink:#ECEEF1; --muted:#9BA2AC; --line:#262A30;
  --accent:#8AA8FF; --accent-ink:#0E1013; --board:#181B20; --board-fg:#ECEEF1; --flap:transparent;
  --ok:#5BC08C; --warn:#E0B04A; --bad:#F07A6E; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1013; --surface:#15181D; --ink:#ECEEF1; --muted:#9BA2AC; --line:#262A30;
  --accent:#8AA8FF; --accent-ink:#0E1013; --board:#181B20; --board-fg:#ECEEF1; --flap:transparent;
  --ok:#5BC08C; --warn:#E0B04A; --bad:#F07A6E; color-scheme:dark}

body{font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body *{text-transform:none!important;letter-spacing:normal!important}
h1,h2,h3,summary{font-family:var(--f-display);font-weight:600;line-height:1.12}
h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em!important}
h3{font-size:19px}
.sechead h2{font-size:clamp(28px,4vw,40px)}
.eyebrow{font-size:13px;font-weight:500;color:var(--muted)}
.mono,.price,.cototal{font-variant-numeric:tabular-nums}

/* Gone: intro loader, page shade, ticker, sound, decorative hero bits */
.loader,.overlay,#shade,#win,.ticker,#sound,.sticker,.hero canvas,.hud,.hero .eyebrow,.bigline{display:none!important}

/* Header */
body::before{background:var(--bg)}
header{background:color-mix(in srgb,var(--bg) 92%,transparent);color:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
header .wrap{padding-block:12px;gap:12px}
.logo i{display:none}
.logo b{font-size:18px!important;font-weight:700;color:var(--ink)}
nav{gap:2px}
nav button{font-family:var(--f-body);font-size:15px;color:var(--muted);padding:8px 10px;border-radius:8px}
nav button:hover{color:var(--ink);background:var(--board)}
nav button[aria-current="page"]{color:var(--ink);background:none;box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
.themebtn{font-family:var(--f-body);font-size:14px;border:1px solid var(--line);color:var(--muted);background:none;border-radius:99px;padding:6px 12px}

/* Views */
.view{padding-block:40px 80px}
.flap,.flap.plain{display:inline;gap:0}
.flap span{background:none;color:inherit;padding:0;min-width:0}
.flap span::after{display:none}

/* Home: the trip prompt is the page. Everything else is quiet or hidden. */
.view[data-ns="home"] > .wrap > :not(.hero):not(#hub):not(#popstays):not(#deals){display:none!important}
.view[data-ns="home"] > .wrap{gap:56px}
.hero{background:none;color:var(--ink);border-radius:0;padding:clamp(24px,7vw,88px) 0 0;overflow:visible}
.hero .in{gap:20px;max-width:900px}
.hero h1{font-size:clamp(44px,8vw,104px)!important;font-weight:600;letter-spacing:-.045em!important;line-height:.98;padding-right:0!important}
.hero p.lead{color:var(--muted);font-size:clamp(17px,2vw,20px);max-width:46ch}
.hub{box-shadow:none;border-radius:14px}
.hubtabs button{font-family:var(--f-body);font-size:15px;font-weight:500}
.hubnote{color:var(--muted)}

/* Controls */
.cta{font-family:var(--f-body);font-weight:600;font-size:15px;border-radius:var(--r);padding:12px 18px;transition:background .15s,opacity .15s}
.cta:hover{transform:none;opacity:.9}
.cta.ghost{border:1px solid var(--line);color:var(--ink)}
.cta.ghost:hover{border-color:var(--ink);opacity:1}
.chip,.tabs button,.swap,.deal button{font-family:var(--f-body);font-size:14px}
.soon{font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--muted)}
.field label{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--muted)}
.field input,.field select,textarea,.tripin{font-family:var(--f-body)!important;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px}
.field input:focus,.field select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.field input.big{font-family:var(--f-body);font-size:22px;font-weight:600;padding:8px 12px}
summary{font-size:18px}
summary::after{font-family:var(--f-body)}

/* Panels that used to be dark */
.board,.cabinbox,.map,.cls,.flipc .front{background:var(--board);color:var(--board-fg)}
.board th{color:var(--muted);border-bottom-color:var(--line)}
.board td{border-bottom-color:var(--line)}
.cosum{background:var(--board);color:var(--ink);border:0}
.cosum .meta,.cosum .fsl .ft small,.cosum .fline,.cosum small{color:var(--muted)!important}
.cosum .fline i{background:var(--line)}
.cosum b[style*="board-fg"]{color:var(--ink)!important}
.flogo{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)}
.tile .code{display:none}
.fare .t{font-family:var(--f-body);font-size:22px;font-weight:600}
.fare .price{font-family:var(--f-body);font-weight:600}
.fare button{font-family:var(--f-body);font-size:14px;font-weight:600;border-radius:8px}
.pnr{font-family:var(--f-body);font-weight:600;font-size:clamp(40px,7vw,64px);letter-spacing:.04em!important}
.tripcard .tside{border-left:1px solid var(--line);background:var(--board)}
.testnote b{font-family:var(--f-body);font-size:12px}
.cobox,.tripcard,.hub,.hcard,.roomcard,.carcard,.fare{border-color:var(--line)}

/* Checkout steps */
.costeps{position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:5;display:flex;gap:4px;background:var(--bg);padding:8px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.costeps button{background:none;border:0;padding:8px 12px;border-radius:99px;font:500 14px var(--f-body);color:var(--muted);cursor:pointer;white-space:nowrap}
.costeps button[aria-current="step"]{background:var(--ink);color:var(--bg)}
.costeps button b{font-weight:600;margin-right:6px}

/* ---------- Trip prompt (assistant) ---------- */
.ai{display:grid;gap:14px;margin-top:8px}
.aibox{display:flex;align-items:flex-end;gap:10px;border:1.5px solid var(--ink);border-radius:18px;padding:10px 10px 10px 20px;background:var(--surface)}
.aibox:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent)}
.aibox textarea{flex:1;border:0!important;background:none!important;box-shadow:none!important;padding:10px 0!important;font:400 clamp(18px,2.2vw,22px)/1.4 var(--f-body)!important;color:var(--ink);resize:none;min-height:1.4em;max-height:220px;outline:none}
.aibox textarea::placeholder{color:var(--muted)}
.aisend{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer}
.aisend[disabled]{opacity:.4;cursor:default}
.aisend svg{width:22px;height:22px}
.aitry{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:15px}
.aitry button{background:none;border:0;padding:4px 0;color:var(--muted);cursor:pointer;font:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.aitry button:hover{color:var(--ink);text-decoration-color:var(--ink)}
.aithread{display:grid;gap:18px}
.aithread:empty{display:none}
.aimsg{max-width:62ch;white-space:pre-wrap}
.aimsg.me{justify-self:end;background:var(--board);padding:10px 14px;border-radius:14px 14px 4px 14px}
.aimsg.bot{font-size:17px}
.aimsg.err{color:var(--bad)}
.aithinking{color:var(--muted);display:flex;gap:10px;align-items:center}
.aithinking i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:aipulse 1s ease-in-out infinite}
@keyframes aipulse{50%{opacity:.25}}
.aicards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.aicard{display:grid;gap:10px;align-content:start;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);text-align:left}
.aicard .top{display:flex;justify-content:space-between;align-items:start;gap:10px}
.aicard .air{display:flex;align-items:center;gap:8px;font-weight:600}
.aicard .air img{width:22px;height:22px;object-fit:contain}
.aicard .pr{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.aicard .leg{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;font-variant-numeric:tabular-nums}
.aicard .leg b{font-size:18px;font-weight:600}
.aicard .leg span{color:var(--muted);font-size:13px;text-align:center;border-bottom:1px solid var(--line);line-height:1.6}
.aicard small,.aicard .sub{color:var(--muted);font-size:13px}
.aicard .ph{height:140px;border-radius:10px;background:var(--board) center/cover no-repeat;margin:-6px -6px 0}
.aicard .cta{justify-self:stretch;justify-content:center;margin-top:4px}
.aiact{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aisign{border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px;justify-items:start}
.aisign p{color:var(--muted)}
.aifoot{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}
.aifoot button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Account ---------- */
.acct{position:relative}
.acctbtn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 5px;cursor:pointer;color:var(--ink);font:500 14px var(--f-body)}
.acctbtn.out{padding:6px 14px}
.acctbtn img,.acctbtn .av{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:13px;font-weight:700}
.acctmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;display:grid;box-shadow:0 12px 32px rgba(0,0,0,.12);z-index:40}
.acctmenu .who{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;display:grid}
.acctmenu .who small{color:var(--muted)}
.acctmenu button{background:none;border:0;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font:400 15px var(--f-body);color:var(--ink)}
.acctmenu button:hover{background:var(--board)}
.acctmenu button.danger{color:var(--bad)}
dialog.signin{border:1px solid var(--line);border-radius:18px;padding:28px;max-width:400px;width:calc(100% - 32px);background:var(--surface);color:var(--ink)}
dialog.signin::backdrop{background:rgba(10,12,16,.45)}
dialog.signin h3{font-size:24px;margin-bottom:6px}
dialog.signin p{color:var(--muted);margin-bottom:18px}
dialog.signin .gbtn{min-height:44px}
dialog.signin .x{position:absolute;right:14px;top:12px;background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted)}
dialog.signin .serr{margin-top:12px}

@media (max-width:760px){
  header nav button{padding:7px 9px;font-size:14px}
  .acctbtn span.nm{display:none}
  .acctbtn{padding:4px}
  .acctbtn.out{padding:6px 12px}
  .aibox{padding:8px 8px 8px 16px;border-radius:16px}
  .aisend{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.aithinking i{animation:none}}

/* ---------- Account page, sharing, reviews, toast ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sbtn{justify-content:center;gap:10px;width:100%}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.linkbtn.danger{color:var(--bad)}
.acgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.milesbig{font-size:clamp(44px,7vw,64px);font-weight:600;letter-spacing:-.03em!important;line-height:1;font-variant-numeric:tabular-nums}
.mileslog{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.mileslog li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.mileslog li span{display:grid}
.mileslog small{color:var(--muted);font-size:12px}
.mileslog b{font-variant-numeric:tabular-nums;color:var(--ok)}
.mileslog b.neg{color:var(--ink)}
.famlist,.triplist{display:grid;border-top:1px solid var(--line)}
.famrow,.triprow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.famrow > div:first-child,.triprow > div:first-child{display:grid;gap:2px;min-width:0}
.famrow small,.triprow small{color:var(--muted);font-size:13px}
.triprow .reviewform{flex-basis:100%;display:grid;gap:10px;padding-top:6px}
.kindtag{display:inline-block;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px;margin-right:4px}
.stars5{display:flex;gap:2px}
.stars5 button{background:none;border:0;font-size:28px;line-height:1;color:var(--line);cursor:pointer;padding:2px}
.stars5 button.on{color:#E0A100}
.st5{color:#E0A100;letter-spacing:1px!important}
.reviews .rv1,.rv1{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.rv1 p{color:var(--ink)}
.rv1 small{color:var(--muted);font-size:13px}
.rvavg{font-size:14px;color:var(--muted)}
.rvavg b{color:var(--ink);font-size:16px}
.sharebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sharebar .chip{display:inline-flex;align-items:center;gap:6px}
.aicard.big{padding:22px;gap:12px}
.aicard.big .ph{height:200px}
.nlform{display:grid;gap:8px;flex:1 1 320px;max-width:480px}
.nlform label{display:grid;gap:2px}
.nlform label span{color:var(--muted);font-size:14px}
.nlform .row{display:flex;gap:8px}
.nlform input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface);font:inherit}
.nlform small{min-height:1.3em;color:var(--muted)}
footer .wrap{gap:28px}
#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;max-width:min(92vw,520px);font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
#toast small{opacity:.8;word-break:break-all}
#toast .linkbtn{color:inherit;text-decoration:underline}

/* Search forms: light fields */
.sform{background:var(--board)!important;color:var(--ink)!important}
.hubpanel .sform{background:none!important;padding:4px 0 0!important}
.fld label{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--muted)}
.fld input,.fld select,.guestbtn{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:var(--f-body);color-scheme:light}
:root[data-theme="dark"] .fld input,:root[data-theme="dark"] .fld select{color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fld input,:root:not([data-theme="light"]) .fld select{color-scheme:dark}}
.fld .code,.fld [id$="-c"]{color:var(--accent)}
.tsub{color:var(--ink)}
.nightchip,.pkgbar small{color:var(--muted)}
.swap,.fld .swapbtn{border-color:var(--line)}

/* ---------- Home deals ---------- */
.deals2{display:grid;gap:18px}
.dtabs{display:flex;gap:4px;background:var(--board);border-radius:99px;padding:4px}
.dtabs button{border:0;background:none;padding:8px 16px;border-radius:99px;font:500 15px var(--f-body);color:var(--muted);cursor:pointer}
.dtabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dtags{display:flex;gap:8px;flex-wrap:wrap}
.dtags:empty{display:none}
.dtags .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.dcard{display:grid;gap:6px;align-content:start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;color:var(--ink);font:inherit;min-height:220px;position:relative;overflow:hidden;transition:border-color .15s}
.dcard:hover{border-color:var(--ink)}
.dcard.sk{background:var(--board);border:0;cursor:default}
.dtop{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:22px}
.dtag{font-size:13px;color:var(--muted)}
.dbest{font-size:12px;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:3px 8px;border-radius:99px}
.dcity{font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-.025em!important;line-height:1.05;margin-top:8px}
.dname{font-size:18px;font-weight:600;line-height:1.25}
.dprice{display:grid;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:auto;padding-top:10px}
.dprice small{font-size:13px;font-weight:500;color:var(--muted)}
.dmeta{font-size:13px;color:var(--muted)}
.dgo{font-size:14px;font-weight:600;color:var(--accent);margin-top:6px}
.dcard.hotel{padding-top:0}
.dph{display:block;height:150px;margin:0 -18px 8px;background:var(--board) center/cover no-repeat}

/* ---------- Mobile menu ---------- */
.menubtn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;margin-left:auto}
.menubtn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
body.navopen .menubtn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.navopen .menubtn span:nth-child(2){opacity:0}
body.navopen .menubtn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
  .menubtn{display:flex}
  header .wrap{flex-wrap:nowrap}
  header nav#mainnav{display:none!important;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-left,0px)) 16px;overflow:visible;width:auto;margin:0;box-shadow:0 18px 30px rgba(0,0,0,.08)}
  body.navopen header nav#mainnav{display:flex!important}
  header nav#mainnav button{padding:14px 4px!important;font-size:17px!important;text-align:left;border-radius:0;border-bottom:1px solid var(--line)}
  header nav#mainnav button:last-child{border-bottom:0}
  header nav#mainnav button[aria-current="page"]{box-shadow:none;color:var(--accent)}
  header{position:sticky}
  .themebtn{display:none}
  .acct{margin-left:auto}
  .acct + .menubtn,.acct ~ .menubtn{margin-left:8px}
  .cta,.chip,.linkbtn{min-height:40px}
}