/* ============================================================================
   dCover — the APP layer (design v3, 2026-09-25).
   Loaded AFTER ../assets/dcover.css and v2.css. Turns the v2 pages into an
   app: slim top bar, bottom tab bar, fixed action bars, sheets, full-screen
   steps. No new palette — Horizon tokens only. New tokens are geometry plus
   one scrim colour, and the scrim is defined in all three theme blocks.
   ========================================================================== */

:root{
  --appbar-h:56px;
  --tabbar-h:64px;
  --actionbar-h:76px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --scrim:rgba(18,19,22,.5);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --scrim:rgba(0,0,0,.62); } }
:root[data-theme="dark"]{ --scrim:rgba(0,0,0,.62); }

/* ---------------------------------------------------------------- base */
html{-webkit-tap-highlight-color:transparent}
body.app{min-height:100dvh;padding-bottom:0}

body.app.has-action{padding-bottom:calc(var(--actionbar-h) + var(--safe-b) + 8px)}
@media (min-width:900px){
  body.app.has-action{padding-bottom:calc(var(--actionbar-h) + 16px)}
}
html.sheet-open,html.sheet-open body{overflow:hidden}
/* no footer on a phone screen — the legal lines live on Help */
body.app .foot{display:none}
@media (min-width:900px){body.app .foot{display:block;margin-top:40px}}
body.app.show-foot .foot{display:block}
.screen{padding-top:14px;padding-bottom:20px}
.screen.tight{padding-top:8px}
.appwrap{max-width:720px;margin:0 auto;padding:0 16px}
@media (min-width:900px){.appwrap{padding:0 24px}.appwrap.wide{max-width:1100px}}

/* prototype strip: one quiet line, not a banner */
body.app .protobar .in{padding:6px 16px;font-size:12.5px;align-items:center}
:root[data-lang="bn"] body.app .protobar .in{font-size:13.5px}
body.app .protobar .dot{margin-top:0}

/* ---------------------------------------------------------------- app bar
   White, one hairline under it, near-black text. The brand is the theme's
   logo (theme.js), nothing else in the bar carries colour. */
.appbar{position:sticky;top:0;z-index:40;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--hair);
  padding-top:var(--safe-t)}
.appbar .in{max-width:1100px;margin:0 auto;min-height:var(--appbar-h);display:flex;align-items:center;gap:8px;padding:0 8px 0 12px}
@media (min-width:900px){.appbar .in{padding:0 24px;min-height:64px;gap:12px}}
.appbar .brand{margin-inline-end:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.brand-logo{height:28px;width:auto;display:block}
.brand-logo.d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-logo.l{display:none}:root:not([data-theme="light"]) .brand-logo.d{display:block}}
:root[data-theme="dark"] .brand-logo.l{display:none}
:root[data-theme="dark"] .brand-logo.d{display:block}
.ab-back,.ab-icon{flex:none;width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);background:transparent;border:0;cursor:pointer;text-decoration:none}
.ab-back:hover,.ab-icon:hover{background:var(--chip);text-decoration:none}
.ab-back svg,.ab-icon svg{width:22px;height:22px;display:block}

/* the route pill (results / searching / reserve): tap to change the search */

.appbar .langsw{border:1px solid var(--hair-2);border-radius:10px;overflow:hidden}
.appbar .langsw button{min-height:44px;min-width:44px;padding:0 11px;color:var(--mute);background:transparent}
.appbar .langsw button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.appbar .langsw button:focus-visible{outline-color:var(--focus-ring)}

/* --------------------------------------------------------------- tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(16,26,43,.08);padding-bottom:var(--safe-b)}
.tabbar .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);height:var(--tabbar-h)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;
  color:var(--muted);font-size:12.5px;font-weight:700;text-decoration:none;position:relative}
:root[data-lang="bn"] .tabbar a{font-size:13px}
.tabbar a:hover{text-decoration:none;color:var(--ink)}

.tabbar svg{width:23px;height:23px;display:block}
.tabbar a[aria-current="page"]{color:var(--sea-700)}

:root[data-theme="dark"] .tabbar a[aria-current="page"]{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabbar a[aria-current="page"]{color:var(--ink)}}
.tabbar a:focus-visible{outline-offset:-4px}
.tabbar .badge{position:absolute;top:6px;left:calc(50% + 9px);min-width:18px;height:18px;border-radius:9px;padding:0 5px;
  background:var(--sun);color:var(--on-sun);font-size:11px;line-height:18px;text-align:center;font-weight:700}
@media (min-width:900px){.tabbar{display:none}}

/* ----------------------------------------------------------- action bar
   The one thing to do on this screen, always under the thumb. */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(16,26,43,.10);padding:10px 16px calc(10px + var(--safe-b))}
.actionbar .in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px}
.actionbar .ab-sum{flex:1;min-width:0;line-height:1.25}
.actionbar .ab-sum b{display:block;font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.actionbar .ab-sum span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-lang="bn"] .actionbar .ab-sum span{font-size:13px}
.actionbar .btn{min-height:52px}
.actionbar .btn.go{flex:none;min-width:48%;font-size:16.5px}
.actionbar .btn.grow{flex:1}
.actionbar .two{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
@media (min-width:900px){.actionbar{padding:12px 24px}.actionbar .btn.go{min-width:240px}}

/* ------------------------------------------------------------------ sheets
   Bottom sheet on a phone, a centred dialog on a laptop; .full = a whole
   screen on a phone (airport picker, calendar, fare detail). */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none!important}
.sheet-scrim{position:absolute;inset:0;background:var(--scrim);animation:fadein .2s ease}
.sheet-panel{position:relative;width:100%;max-height:92dvh;display:flex;flex-direction:column;background:var(--card);color:var(--ink);
  border-radius:20px 20px 0 0;box-shadow:var(--shadow-2);animation:sheetup .24s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.sheet.full .sheet-panel{height:100dvh;max-height:100dvh;border-radius:0}
.sheet-grab{width:40px;height:5px;border-radius:3px;background:var(--line-strong);margin:8px auto 0;flex:none}
.sheet.full .sheet-grab{display:none}
.sheet-head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line);
  padding-top:max(8px, var(--safe-t))}
.sheet:not(.full) .sheet-head{padding-top:6px}
.sheet-head h2{flex:1;min-width:0;font-size:18px;margin:0}
.sheet-x{flex:none;width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.sheet-x:hover{background:var(--card-2)}
.sheet-x svg{width:22px;height:22px}
.sheet-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 16px 18px}
.sheet-foot{flex:none;border-top:1px solid var(--line);padding:10px 16px calc(10px + var(--safe-b));background:var(--card)}
.sheet-foot .btn{width:100%;min-height:52px}
@media (min-width:900px){
  .sheet{align-items:center;padding:32px}
  .sheet-panel,.sheet.full .sheet-panel{width:min(600px,100%);height:auto;max-height:min(86vh,880px);border-radius:20px}
  .sheet.wide .sheet-panel{width:min(760px,100%)}
  .sheet-grab{display:none}
  .sheet-head{padding-top:8px}
}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet-panel,.sheet-scrim{animation:none}}

/* -------------------------------------------------------- list rows (menu) */
.rows{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rows>li+li{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;color:var(--ink);text-decoration:none;width:100%;
  background:transparent;border:0;text-align:start;cursor:pointer;font:inherit}
a.row:hover,button.row:hover{background:var(--card-2);text-decoration:none}
.row .ri{flex:none;width:36px;height:36px;border-radius:10px;background:var(--sea-soft);color:var(--sea-700);display:inline-flex;align-items:center;justify-content:center}
:root[data-theme="dark"] .row .ri{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row .ri{color:var(--ink)}}
.row .ri svg{width:20px;height:20px}
.row .rt{flex:1;min-width:0}
.row .rt b{display:block;font-size:15.5px;line-height:1.35}
.row .rt span{display:block;font-size:13.5px;color:var(--muted);line-height:1.4}
:root[data-lang="bn"] .row .rt span{font-size:14px}
.row .chev{flex:none;color:var(--muted);font-size:20px;line-height:1}
.row.danger .rt b{color:var(--bad)}
.row.danger .ri{background:var(--bad-soft);color:var(--bad)}
.sechead{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:22px 4px 8px}
:root[data-lang="bn"] .sechead{font-size:14px;letter-spacing:0;text-transform:none}
.sechead:first-child{margin-top:4px}

/* segmented control (language, theme, trip type) */
.segc{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--card-2);border:1px solid var(--line);border-radius:14px}
.segc button,.segc label{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink-soft);font-weight:700;font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;padding:0 8px;text-align:center}
.segc input{position:absolute;opacity:0;width:1px;height:1px}
.segc [aria-pressed="true"],.segc label:has(input:checked){background:var(--card);color:var(--ink);box-shadow:var(--shadow-1)}
.segc label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}

/* ===================================================================== SEARCH
   Calm and compact: a headline on white, a quiet Return / One way toggle, the
   trip in ONE bordered group (From ⇅ To · dates · travellers), one accent
   button. On a laptop the same group becomes a single horizontal bar. */
body.home{background:var(--surface)}
.s-hero{background:transparent;color:var(--ink);padding:18px 0 2px}
.s-hero h1{font-size:26px;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
:root[data-lang="bn"] .s-hero h1{line-height:1.4;letter-spacing:0}
.s-hero .sub{margin-top:4px;color:var(--mute);font-size:15px}
@media (min-width:900px){.s-hero{padding:44px 0 6px}.s-hero h1{font-size:38px}}
.s-card{margin-top:10px;display:grid;gap:12px;position:relative}

.qtabs{display:flex;gap:20px}
.qtabs button{min-height:44px;background:none;border:0;border-bottom:2px solid transparent;padding:0 2px;font:inherit;font-size:15px;font-weight:600;
  color:var(--mute);cursor:pointer}
.qtabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}

.sgroup{border:1px solid var(--hair-2);border-radius:12px;background:var(--surface);overflow:hidden}
.sgroup>*+*{border-top:1px solid var(--hair-2)}
.places2{position:relative}
.places2 .ptile+.ptile{border-top:1px solid var(--hair-2)}
.ptile,.dtile,.wtile{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:58px;padding:7px 16px;background:transparent;border:0;
  text-align:start;cursor:pointer;color:var(--ink);font:inherit;line-height:1.3}
.ptile{padding-inline-end:66px}
.ptile:focus-visible,.dtile:focus-visible,.wtile:focus-visible{outline-offset:-3px}
.ptile:hover,.dtile:hover,.wtile:hover{background:var(--surface-2)}
.sgroup .pk{display:block;font-size:12.5px;font-weight:600;color:var(--mute)}
:root[data-lang="bn"] .sgroup .pk{font-size:13px}
.sgroup .pv{display:block;font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.sgroup .pv .code{font-size:13px;color:var(--mute);font-weight:600;margin-inline-start:6px}
.sgroup .ps{display:none}
.ptile.empty .pv{color:var(--mute);font-weight:500}
.ptile.bad{box-shadow:inset 3px 0 0 var(--bad)}
.places2 .swap{position:absolute;right:10px;top:50%;margin-top:-22px;width:44px;height:44px;z-index:2;border-radius:50%;
  border:1px solid var(--hair-2);background:var(--surface);color:var(--ink);box-shadow:none}
.places2 .swap:hover{background:var(--chip)}
.places2 .swap svg{width:20px;height:20px}

.dtile.add .pv{color:var(--ink-2);font-weight:500}
.s-err{font-size:13.5px;color:var(--bad);font-weight:700;margin:-4px 2px 0}
.s-go{min-height:52px!important;font-size:17px!important;border-radius:10px!important;box-shadow:none!important}
.quietchk{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14.5px;color:var(--ink-2);cursor:pointer;margin-top:-4px}
.quietchk input{width:20px;height:20px;margin:0;accent-color:var(--ink);flex:none}
.s-note{display:flex;gap:8px;font-size:13.5px;color:var(--mute);margin-top:-6px}
:root[data-lang="bn"] .s-note{font-size:14px}
.s-note .ic{color:var(--ok);font-weight:700}
@media (min-width:900px){
  .s-card{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:12px;margin-top:18px}
  .s-card>.qtabs,.s-card>.quietchk,.s-card>.s-note,.s-card>.s-err{grid-column:1/-1}
  .sgroup{display:flex}
  .sgroup>*+*{border-top:0;border-inline-start:1px solid var(--hair-2)}
  .places2{flex:2.1;display:flex;min-width:0}
  .places2 .ptile{flex:1;min-width:0;padding-inline-end:16px}
  .places2 .ptile+.ptile{border-top:0;border-inline-start:1px solid var(--hair-2);padding-inline-start:34px}
  .places2 .ptile:first-child{padding-inline-end:34px}
  .places2 .swap{left:50%;right:auto;margin-left:-22px}
  
  .sgroup .wtile{flex:1.1;min-width:0}
  .s-go{min-width:150px;min-height:0!important;height:auto}
}

.switchrow{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--surface);cursor:pointer}
.switchrow .st{flex:1;min-width:0;line-height:1.35}
.switchrow .st b{display:block;font-size:15px;font-weight:600}
.switchrow .st span{display:block;font-size:13px;color:var(--ink-2)}
.switch{position:relative;flex:none;width:52px;height:32px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:16px;background:var(--hair-2);transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.switch input:checked+i{background:var(--ink)}
:root[data-theme="dark"] .switch input:checked+i::after{background:var(--surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .switch input:checked+i::after{background:var(--surface)}}
.switch input:checked+i::after{transform:translateX(20px)}
.switch input:focus-visible+i{outline:3px solid var(--focus);outline-offset:2px}

/* recent searches + popular routes */
.recent{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.recent a{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;color:var(--ink);text-decoration:none}
.recent a:hover{border-color:var(--sea-700);text-decoration:none}
.recent .rc{flex:none;width:36px;height:36px;border-radius:50%;background:var(--sea-soft);color:var(--sea-700);display:inline-flex;align-items:center;justify-content:center}
:root[data-theme="dark"] .recent .rc{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .recent .rc{color:var(--ink)}}
.recent .rc svg{width:18px;height:18px}
.recent .rt{flex:1;min-width:0;line-height:1.35}
.recent .rt b{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent .rt span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent .chev{color:var(--muted);font-size:20px}
.sechead .clear{float:inline-end;font-size:13.5px;text-transform:none;letter-spacing:0;background:none;border:0;color:var(--sea-700);font-weight:700;cursor:pointer;min-height:44px;min-width:44px;padding:0 6px}
:root[data-theme="dark"] .sechead .clear{color:var(--sea-700)}

/* airport picker (full-screen sheet) */
.ap-search{position:relative}
.ap-search .control{min-height:56px;font-size:18px;padding-inline-start:46px;border-radius:14px}
.ap-search .mag{position:absolute;left:14px;top:50%;margin-top:-11px;width:22px;height:22px;color:var(--muted);pointer-events:none}
.sheet .ac{position:static;display:none;box-shadow:none;border:0;max-height:none;padding:6px 0 0;background:transparent}
.sheet .ac.open{display:block}
.sheet .ac-item{min-height:60px}
.sheet .chip-ok{display:none!important}
.ap-sugg{margin-top:10px}
.ap-sugg[hidden]{display:none}
.ap-sugg .row .ri{font-family:var(--mono);font-weight:700;font-size:13px;width:48px}

/* calendar (full-screen sheet) */
.cal-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex:none}
.cal-pick.one{grid-template-columns:1fr}
.cal-pick button{min-height:56px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--card-2);text-align:start;padding:6px 12px;cursor:pointer;color:var(--ink);font:inherit}
.cal-pick button .pk{display:block;font-size:12.5px;font-weight:700;color:var(--muted)}
.cal-pick button .pv{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.cal-pick button[aria-pressed="true"]{border-color:var(--sun);box-shadow:inset 0 0 0 1px var(--sun)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:6px 12px;border-bottom:1px solid var(--line);flex:none;
  font-size:12.5px;font-weight:700;color:var(--muted);text-align:center}
.cal-body{padding:4px 12px 12px}
.cal-m h3{font-size:16px;margin:16px 4px 8px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0}
.cal-g button{height:48px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:600;
  font-variant-numeric:tabular-nums;cursor:pointer;border-radius:0;position:relative;padding:0}
.cal-g button span{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%}
.cal-g button:hover:not(:disabled):not(.s):not(.e) span{background:var(--sea-soft)}
.cal-g button:disabled{color:var(--line-strong);cursor:default}
.cal-g button.today span{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.cal-g button.inr{background:var(--sea-soft)}
.cal-g button.s,.cal-g button.e{background:linear-gradient(90deg,transparent 50%,var(--sea-soft) 50%)}
.cal-g button.e{background:linear-gradient(90deg,var(--sea-soft) 50%,transparent 50%)}
.cal-g button.s.e,.cal-g button.s.only{background:transparent}
.cal-g button.s span,.cal-g button.e span{background:var(--sun);color:var(--on-sun)}
.cal-g button:focus-visible{outline-offset:-3px}
.cal-hint{font-size:13.5px;color:var(--ink-soft);flex:1;min-width:0}
.sheet-foot .calfoot{display:flex;align-items:center;gap:12px}
.sheet-foot .calfoot .btn{width:auto;flex:none;min-width:130px}

/* travellers sheet */
.paxrows{display:grid}
.paxrows .paxrow{padding:12px 2px}
.paxrows .stepper button{width:48px;height:48px;border-radius:12px;font-size:22px}
.paxrows .who2 b{font-size:16px}
.paxrows .who2 span{font-size:13.5px}
.cabins{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cabins label{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;border:1.5px solid var(--line-strong);
  border-radius:12px;background:var(--card-2);cursor:pointer;font-weight:700;font-size:15px}
.cabins input{width:20px;height:20px;accent-color:var(--sea-700);margin:0;flex:none}
.cabins label:has(input:checked){border-color:var(--sea-700);background:var(--sea-soft)}

/* ================================================================== RESULTS
   A grey page, white cards with one hairline, no shadow. Filter chips under
   the header, each opening its own bottom sheet. A thin accent line while
   anything is still loading. */
.topline{position:sticky;top:calc(var(--appbar-h) + var(--safe-t));z-index:39;height:3px;background:var(--accent-soft);overflow:hidden;margin-bottom:-3px}
.topline[hidden]{display:none}
.topline i{display:block;height:100%;width:35%;background:var(--accent);animation:topline 1.3s ease-in-out infinite}
@keyframes topline{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.topline i{animation:none;width:100%;opacity:.6}}
@media (min-width:900px){.topline{top:65px}}
.chipbar{position:sticky;top:calc(var(--appbar-h) + var(--safe-t));z-index:30;background:var(--bg);display:flex;gap:8px;overflow-x:auto;
  padding:10px 16px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chipbar::-webkit-scrollbar{display:none}
@media (min-width:900px){.chipbar{top:65px;margin:0 -24px;padding:12px 24px}}
.fchip2{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--hair-2);border-radius:999px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.fchip2:hover{border-color:var(--ink)}
.fchip2[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fchip2 svg{width:16px;height:16px;flex:none}

.r-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:4px 0 2px}
.r-top h1{font-size:15px;font-weight:600;color:var(--ink)}
:root[data-lang="bn"] .r-top h1{font-size:15.5px}
.r-sub{font-size:13px;color:var(--mute);margin:0 0 12px}
:root[data-lang="bn"] .r-sub{font-size:13.5px}

/* the card: white, one hairline, the leg, the price big on the right */
.fare.c{background:var(--surface);border:1px solid var(--hair);border-radius:12px;box-shadow:none;padding:0;position:relative;cursor:pointer;overflow:hidden}
.fare.c.pick{border-color:var(--hair);box-shadow:none}
.fare.c:hover{border-color:var(--hair-2)}
.fc-in{padding:14px 16px 10px}
.ftag{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:1px 8px;border-radius:6px;background:var(--chip);color:var(--ink-2);margin-bottom:8px}
:root[data-lang="bn"] .ftag{font-size:12.5px}
.fc-leg{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;column-gap:12px}
.al-logo.xs{width:28px;height:28px;border-radius:7px}
.al-logo.xs img{width:22px;height:22px}
.al-logo.xs.badge{font-size:11px}
.fc-leg .tt{line-height:1.25;font-variant-numeric:tabular-nums}
.fc-leg .tt .hm{display:block;font-size:17px;font-weight:600;white-space:nowrap}
.fc-leg .tt .hm sup{font-size:11px;font-weight:600;color:var(--mute);margin-inline-start:1px}
.fc-leg .tt .ap{display:block;font-size:12.5px;color:var(--mute)}
.fc-leg .tt.end{text-align:end}
.fc-leg .md{text-align:center;font-size:12.5px;color:var(--mute);line-height:1.3;min-width:0}
:root[data-lang="bn"] .fc-leg .md{font-size:13px}
.fc-leg .md .ln{position:relative;height:1px;background:var(--hair-2);margin:4px 0}
.fc-leg .md .ln i{position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--surface);border:1px solid var(--mute)}
.fc-leg .md .sp{color:var(--ink-2)}
.fc-leg .md .sp.direct{color:var(--ok);font-weight:600}
.fc-ret,.fc-facts{font-size:13px;color:var(--mute);margin-top:8px;line-height:1.45}
:root[data-lang="bn"] .fc-ret,:root[data-lang="bn"] .fc-facts{font-size:13.5px}
.fc-facts{color:var(--ink-2)}
.fc-facts .w{color:var(--warn);font-weight:600}
.fare.c .barefare{background:none;padding:0;margin:6px 0 0;font-size:13px;color:var(--mute);border-radius:0}
:root[data-lang="bn"] .fare.c .barefare{font-size:13.5px}
.fc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding:10px 16px 12px}
.fc-foot .air{min-width:0;line-height:1.3}
.fc-foot .air .nm{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-foot .air .br{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-foot .pr{flex:none;text-align:end;line-height:1.15}
.fc-foot .pr .amt{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.fc-foot .pr .per{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.fare.c .fc-open{position:absolute;inset:0;z-index:1;border:0;background:transparent;cursor:pointer;border-radius:12px}
.fare.c .fc-open:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.results.app{gap:10px}
.inline-ask{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:12px 14px}
.inline-ask .t{flex:1;min-width:0;font-size:14px;color:var(--ink-2)}
.inline-ask .t b{display:block;color:var(--ink);font-size:15px}
.inline-ask .btn{flex:none}

/* skeleton cards while fares are on the way */
.skel{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:16px;display:grid;gap:10px}
.skel i{display:block;height:12px;border-radius:6px;background:var(--chip)}
.skel i:nth-child(1){width:40%}.skel i:nth-child(2){width:90%;height:18px}.skel i:nth-child(3){width:65%}
@media (prefers-reduced-motion:no-preference){.skel i{animation:skel 1.4s ease-in-out infinite}}
@keyframes skel{50%{opacity:.5}}

/* fare detail (full-screen sheet) */
.fd-air{display:flex;align-items:center;gap:12px}
.fd-air b{display:block;font-size:17px;line-height:1.3}
.fd-air span{display:block;font-size:14px;color:var(--muted)}
.fd-sec{margin-top:18px}
.fd-sec>h3{font-size:15px;margin:0 0 8px;color:var(--ink)}
.fd-trip{background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.fd-trip .fl-t .hm{font-size:22px}
.fd-trip .when{margin-top:8px;font-size:14px;color:var(--ink-soft)}
.ftypes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftypes li{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.ftypes li.on{border-color:var(--sea-700);background:var(--sea-soft)}
.ftypes b{font-size:15.5px}
.ftypes .fp{font-weight:700;font-variant-numeric:tabular-nums;font-size:16px}
.ftypes .fs{grid-column:1/-1;font-size:13.5px;color:var(--ink-soft)}
:root[data-lang="bn"] .ftypes .fs{font-size:14px}
.ftypes .pill{margin-inline-start:6px}
.sheet .fdet .tbl{margin-top:0}
.fd-note{margin-top:8px;font-size:13.5px;color:var(--muted)}
:root[data-lang="bn"] .fd-note{font-size:14px}
.fd-foot{display:grid;gap:8px}
.fd-foot .fd-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fd-foot .fd-price b{font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fd-foot .fd-price span{font-size:13px;color:var(--ink-soft);text-align:end}
.fd-foot .two{display:grid;grid-template-columns:1fr 1.25fr;gap:8px}
.fd-foot .btn{min-height:52px;width:100%}
.fd-foot .holdbtn{font-size:14.5px;padding:0 10px}
.fd-foot .cap{font-size:12.5px;color:var(--muted);text-align:center}
:root[data-lang="bn"] .fd-foot .cap{font-size:13px}

/* sort & filter sheet */
.opts2{display:grid;gap:8px}
.opts2 label{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--card-2);cursor:pointer;font-weight:700;font-size:15.5px}
.opts2 input[type="radio"]{width:20px;height:20px;accent-color:var(--sea-700);margin:0}
.opts2 label:has(input:checked){border-color:var(--sea-700);background:var(--sea-soft)}
.opts2 .switchrow{border-width:1.5px;border-color:var(--line-strong)}

/* ================================================================== RESERVE */
.rstep-top{display:flex;align-items:center;gap:10px;margin:2px 0 10px}
.rstep-top .lbl2{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--muted)}
:root[data-lang="bn"] .rstep-top .lbl2{font-size:14px}
.pbar{display:flex;gap:4px;margin-bottom:12px}
.pbar i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.pbar i.done{background:var(--ok)}
.pbar i.now{background:var(--sun)}
.rstep[hidden]{display:none!important}
.rstep>h1{font-size:22px;text-wrap:balance}
@media (min-width:900px){.rstep>h1{font-size:26px}}
.rstep>.lede{margin-top:4px;color:var(--ink-soft);font-size:15px}
.rstep .tcard .hd .n{border-radius:50%}
.review{display:grid;gap:10px}
.rv{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-1)}
.rv .rvh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.rv .rvh b{flex:1;min-width:0;font-size:15.5px}
.rv .rvh button{min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--card);color:var(--sea-700);font-weight:700;cursor:pointer;font-size:14px}
:root[data-theme="dark"] .rv .rvh button{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rv .rvh button{color:var(--ink)}}
.rv .nm{font-family:var(--mono);font-weight:700;letter-spacing:.02em;font-size:15px}
.rv p{font-size:14px;color:var(--ink-soft)}
:root[data-lang="bn"] .rv p{font-size:14.5px}

/* ============================================================ DONE / TRIPS */
body.app .done-top{padding:18px 0 54px}
body.app .done-top h1{font-size:22px}
.saved-note{display:flex;gap:10px;align-items:center;background:var(--ok-soft);color:var(--ink);border-radius:var(--radius-sm);padding:10px 12px;font-size:14.5px;margin-top:14px}
.saved-note .ic{flex:none;color:var(--ok);font-weight:700}
.saved-note a{font-weight:700;margin-inline-start:auto;white-space:nowrap}
.notif-card{display:flex;gap:12px;align-items:center;margin-top:14px}
.notif-card .ri{flex:none;width:40px;height:40px;border-radius:12px;background:var(--sun-soft);color:var(--sun-ink);display:inline-flex;align-items:center;justify-content:center}
.notif-card .ri svg{width:22px;height:22px}
.notif-card .t{flex:1;min-width:0}
.notif-card .t b{display:block;font-size:15.5px}
.notif-card .t span{display:block;font-size:13.5px;color:var(--ink-soft)}

.trips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.trip{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);color:var(--ink);text-decoration:none;overflow:hidden}
.trip:hover{border-color:var(--sea-700);text-decoration:none}
.trip .tt{display:flex;align-items:center;gap:10px;padding:12px 14px 6px}
.trip .tt .rt{flex:1;min-width:0}
.trip .tt .rt b{display:flex;align-items:center;gap:6px;font-size:17px}
.trip .tt .rt b .arw{color:var(--sun)}
.trip .tt .rt span{display:block;font-size:13.5px;color:var(--muted)}
.trip .tm{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 14px 10px;font-size:13.5px;color:var(--ink-soft)}
:root[data-lang="bn"] .trip .tm{font-size:14px}
.trip .tm .num{font-weight:700;color:var(--ink)}
.trip .ts{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:9px 14px;background:var(--card-2);font-size:14px;font-weight:600}
.trip .ts .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none}
.trip .ts.pending .dot{background:var(--warn)}
.trip .ts.ok .dot{background:var(--ok)}
.trip .ts.held .dot{background:var(--sea-700)}
.trip .ts.ended .dot{background:var(--muted)}
.trip .ts .chev{margin-inline-start:auto;color:var(--muted);font-size:18px}
.empty-state{text-align:center;padding:26px 16px;background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--radius)}
.empty-state .big{display:inline-flex;width:64px;height:64px;border-radius:50%;background:var(--sea-soft);color:var(--sea-700);align-items:center;justify-content:center;margin-bottom:10px}
:root[data-theme="dark"] .empty-state .big{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .empty-state .big{color:var(--ink)}}
.empty-state .big svg{width:30px;height:30px}
.empty-state h2{font-size:18px}
.empty-state p{font-size:14.5px;color:var(--ink-soft);margin:6px auto 14px;max-width:26em}
.offline-line{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink-soft);margin:0 2px 10px}
.offline-line[hidden]{display:none}

/* ==================================================== HELP / PRIVACY / NOTIFS */
.helpcta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.helpcta .btn{min-height:64px;flex-direction:column;gap:2px;font-size:16px}
.helpcta .btn small{font-weight:600;font-size:12.5px;opacity:.9}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px;font-weight:700;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{margin-inline-start:auto;color:var(--muted);transition:transform .2s}
.faq details[open] summary .chev{transform:rotate(90deg)}
.faq details p{padding:0 14px 14px;font-size:14.5px;color:var(--ink-soft)}
.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.setrow{display:grid;gap:8px;padding:12px 14px}
.setrow+.setrow{border-top:1px solid var(--line)}
.setrow>b{font-size:15px}
.setbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.doc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.doc h2{font-size:17px;margin:18px 0 6px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{font-size:15px;color:var(--ink-soft)}
.doc ul{padding-inline-start:20px;margin:6px 0}
.doc li+li{margin-top:4px}
.doc .upd{font-size:13px;color:var(--muted)}
.ntypes{list-style:none;margin:0;padding:0}
.ntypes li{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:60px}
.ntypes li+li{border-top:1px solid var(--line)}
.ntypes .ri{flex:none;width:36px;height:36px;border-radius:10px;background:var(--ok-soft);color:var(--ok);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.ntypes .t{flex:1;min-width:0}
.ntypes .t b{display:block;font-size:15.5px}
.ntypes .t span{display:block;font-size:13.5px;color:var(--muted)}
.never{display:flex;gap:10px;align-items:flex-start;background:var(--sea-soft);border-radius:var(--radius-sm);padding:11px 13px;font-size:14.5px;color:var(--ink);margin-top:12px}
.never .ic{flex:none;font-weight:700;color:var(--sun-ink)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--paper);
  padding:11px 16px;border-radius:12px;font-weight:700;font-size:14.5px;box-shadow:var(--shadow-2);max-width:calc(100vw - 32px)}
.toast[hidden]{display:none}
@media (min-width:900px){.toast{bottom:24px}}
.phone-demo{display:flex;gap:10px;align-items:flex-start;background:var(--warn-soft);border-radius:var(--radius-sm);padding:11px 13px;font-size:14px;color:var(--ink)}
.phone-demo .ic{flex:none;color:var(--warn);font-weight:700}

/* results — details the markup above needs */
.actionbar .btn svg,.btn>svg{width:20px;height:20px;flex:none}
@media (min-width:900px){.fare.c .fc-more>.chev{display:none}}

.wait-screen .wait{margin-top:6px}
/* keep scrolled-to things clear of the sticky top bar */
.errsum,.field,.rstep h1,fieldset.field{scroll-margin-top:calc(var(--appbar-h) + var(--safe-t) + 16px);scroll-margin-bottom:calc(var(--actionbar-h) + 16px)}
a.card.notif-card{color:var(--ink);text-decoration:none}
a.card.notif-card:hover{border-color:var(--sea-700);text-decoration:none}
.notif-card .chev{color:var(--muted);font-size:20px}

/* thumb-sized everywhere in the app: every button at least 48 px tall */
body.app .btn{min-height:48px}
body.app .btn.sm{min-height:44px}
.sheet-panel:focus{outline:none}
/* a grid column's default minimum is its content: one long no-wrap line would push the page sideways */

.recent, .trips, .review, .opts2, .ftypes{grid-template-columns:minmax(0,1fr)}

/* ============================================================================
   V4 · CALM — the inherited Horizon components (../assets/dcover.css, v2.css)
   restated in the neutral language. theme.css already moved their colour
   tokens; these rules undo the few places they painted a fill, a heavy band
   or a shadow. Same or higher specificity than the rule each one replaces,
   dark-mode selectors included, so nothing quietly cancels.
   ========================================================================== */
html.brand-pending body{visibility:hidden}
body.app{background:var(--bg)}
body.app.home{background:var(--surface)}
main p a:not(.btn),main li a:not(.btn),.small a:not(.btn),.protobar a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* buttons: one accent (the action), everything else neutral */
.btn{border:1px solid var(--hair-2);border-radius:10px;box-shadow:none;font-weight:600;background:var(--surface);color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:none;font-weight:700}
.btn.go:hover{background:var(--accent);border-color:var(--accent);filter:brightness(.93)}
.btn.sea,.btn.sea:hover{background:var(--chip);border-color:transparent;color:var(--ink);filter:none}
.btn.sea:hover{background:var(--hair)}
:root[data-theme="dark"] .btn.sea,:root[data-theme="dark"] .btn.sea:hover{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.sea{color:var(--ink)}}
.btn.ghost{background:transparent}

/* tags: small soft tint, never a filled block */
.pick-tag{background:var(--chip);color:var(--ink-2);font-weight:600;border-radius:6px;padding:2px 8px}
:root[data-theme="dark"] .pick-tag{color:var(--ink-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pick-tag{color:var(--ink-2)}}
.fare.pick{border-color:var(--hair);box-shadow:none}

/* surfaces: one hairline, no lift */
.card,.tcard,.fsum,.wait-card,.fare{border:1px solid var(--hair);box-shadow:none}
.card.tint{background:var(--surface)}
.fsum-mob>summary{box-shadow:none;border-color:var(--hair)}
.protobar{background:var(--surface-2);border-bottom:1px solid var(--hair)}
.protobar .dot{background:var(--mute)}
.tabbar,.actionbar,.decide{box-shadow:none;border-top:1px solid var(--hair)}
.tabbar .badge{background:var(--ink);color:var(--surface)}
.foot{background:var(--surface);color:var(--ink);border-top:1px solid var(--hair)}
.foot .legal{border-top-color:var(--hair);color:var(--mute)}

/* the status bands (reserved / held / pay): white, not navy */
.done-top{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--hair)}
.notyet{background:var(--chip);border:0;color:var(--ink)}
.done-mark.clock{background:var(--chip);color:var(--ink)}
.holdplate,.amtplate{box-shadow:none;border:1px solid var(--hair)}
.holdplate .clockic{background:var(--chip);color:var(--ink)}
.timeline li.now::before{background:var(--ink);color:var(--surface)}
.steprail li.now{border-top-color:var(--ink)}
.steprail li.now::before{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.paycard{border:1px solid var(--hair-2)}
.pm.on{border-color:var(--ink);box-shadow:none}
.pm.on .opt-tick{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* selection = ink, not orange */
.cal-g button.s span,.cal-g button.e span{background:var(--ink);color:var(--surface)}
.cal-pick button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pbar i.now,.pbar i.done{background:var(--ink)}
.opts2 input[type="checkbox"]{width:20px;height:20px;margin:0;accent-color:var(--ink);flex:none}
.opts2 label{border-width:1px;font-weight:600}
.fl-line::after{background:var(--mute)}
.trip .tt .rt b .arw{color:var(--mute)}
.tipcard{background:var(--surface);border:1px solid var(--hair)}

/* the waiting screen: a thin accent line under the header, the plane riding it */
.waitline{position:sticky;top:calc(var(--appbar-h) + var(--safe-t));z-index:39;background:var(--surface)}
@media (min-width:900px){.waitline{top:65px}}
.waitline .flightpath{display:block;margin:0;height:3px}
.waitline .fp-end{display:none}
.waitline .fp-track{height:3px;background:var(--accent-soft);position:relative}
.waitline .fp-track::before{display:none}
.waitline .fp-done{top:0;height:3px;background:var(--accent);border-radius:0}
.waitline .fp-plane{top:1.5px;width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--surface);color:var(--accent);box-shadow:0 0 0 1px var(--hair)}
.waitline .fp-plane svg{width:13px;height:13px}
.waitline .fp-plane::after{display:none}
.wait-screen .wait{margin-top:18px;gap:12px;max-width:720px}
.wait-screen .wait-card{background:transparent;border:0;padding:0}
.wait-screen .wait-h{font-size:18px}
.wait-screen .wait-sub{font-size:14px;color:var(--mute)}
.wait-screen .stages{margin-top:10px;gap:4px}
.wait-screen .stages li{font-size:14px}
.wait-screen .reassure{margin-top:12px;font-size:14px}
.wait-screen .tipcard{padding:12px 14px 8px}
.wait-screen .tip-t{font-size:15.5px}
.wait-screen .tip-p{font-size:14px}
.wait-screen .tip-body{min-height:6.2em}
.wait-screen .tip-nav .btn{background:var(--surface)}
.wait-screen .tip-k{color:var(--mute)}
.fc-leg .md>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-leg .md>.ln{overflow:visible}
.fd-air b{color:var(--ink)}

/* ============================================================================
   V5 · KAYAK STRUCTURE (2026-09-25). MSD: "I definitely exactly need the Kayak
   interface — the hamburger, their AI button, Flights / Stays / Packages".
   Scoped to the new structures (.appbar.k, .k-hero, .kform, .fare.k, .chipbar.k)
   so nothing here fights the rules above. Colour still only from tokens.
   ========================================================================== */
/* top bar: ☰ · logo ········ (person) (✦) */
.appbar.k{border-bottom:1px solid var(--hair)}
.appbar.k .in{gap:10px;padding:0 12px 0 6px}
@media (min-width:900px){.appbar.k .in{padding:0 24px 0 16px}}
.appbar.k .grow{flex:1}
.appbar.k .brand{margin-inline-end:0}

/* the ☰ menu slides in from the left */
.sheet.drawer{justify-content:flex-start;align-items:stretch}
.sheet.drawer .sheet-panel{width:min(86vw,360px);height:100dvh;max-height:100dvh;border-radius:0 16px 16px 0;animation:drawerin .22s cubic-bezier(.2,.8,.2,1)}
@media (min-width:900px){.sheet.drawer{padding:0;align-items:stretch;justify-content:flex-start}.sheet.drawer .sheet-panel{height:100vh;max-height:100vh;border-radius:0 16px 16px 0;width:360px}}
@keyframes drawerin{from{transform:translateX(-40px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet.drawer .sheet-panel{animation:none}}
.sheet .segc{margin-bottom:4px}

/* HOME: tiles, then the grey stacked form, then ONE accent Search */

.k-hero{padding:18px 0 6px}
.k-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:360px}
.vtile{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.vtile:hover{text-decoration:none}
.vtile .vi{width:60px;height:60px;border-radius:12px;background:var(--surface);box-shadow:var(--card-lift);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.vtile .vi svg{width:28px;height:28px}
.vtile.on .vi{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.vtile:hover .vi{box-shadow:0 0 0 1px var(--hair-2)}
.s-card.k{margin-top:22px;gap:12px}
.kform{background:var(--fieldbg);border-radius:12px;overflow:hidden}
.kform .qtabs{gap:0;padding:0 8px;border-bottom:2px solid var(--surface)}
.kform .qtabs button{min-height:54px;padding:0 14px;font-size:16px;font-weight:600;color:var(--ink-2);border-bottom:3px solid transparent;border-radius:0}
.kform .qtabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.kform .sgroup{border:0;border-radius:0;background:transparent;overflow:visible}
.kform .sgroup>*+*,.kform .places2 .ptile+.ptile{border-top:2px solid var(--surface);border-inline-start:0}
.kform .ptile,.kform .dtile,.kform .wtile{min-height:58px;padding:0 16px}
.kform .ptile{padding-inline-end:70px}
.kform .pk,.kform .ps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kform .pv{font-size:17px;font-weight:400;color:var(--ink)}
.kform .pv .code{font-size:17px;font-weight:400;color:var(--ink);margin-inline-start:4px}
.kform .ptile.empty .pv{color:var(--mute)}
.kform .ptile:hover,.kform .dtile:hover,.kform .wtile:hover{background:var(--chip)}
.kform .places2 .swap{right:12px;width:44px;height:44px;margin-top:-22px;border-radius:10px;border:1px solid var(--hair-2);background:var(--fieldbg)}
.s-card.k .s-go{margin-top:0}
@media (min-width:900px){
  body.app.home{background:var(--surface)}
  .k-hero{padding:20px 0 8px}
  
  .k-h1{position:static;width:auto;height:auto;clip:auto;white-space:normal;font-size:40px;letter-spacing:-.02em;line-height:1.15;margin-bottom:26px}
  :root[data-lang="bn"] .k-h1{line-height:1.35;letter-spacing:0}
  .vtiles{display:flex;gap:26px;max-width:none}
  .vtile .vi{width:52px;height:52px}
  .s-card.k{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:10px;margin-top:26px}
  .kform{background:transparent;overflow:visible;border-radius:0}
  .kform .qtabs{border-bottom:0;padding:0;margin-bottom:10px;gap:22px}
  .kform .qtabs button{min-height:44px;padding:0;font-size:15px}
  .kform .sgroup{display:flex;background:var(--surface);border-radius:12px;box-shadow:var(--card-lift);min-height:60px}
  .kform .sgroup>*+*,.kform .places2 .ptile+.ptile{border-top:0;border-inline-start:1px solid var(--hair-2)}
  .kform .places2{flex:2.2}
  .kform .places2 .ptile{padding-inline-end:16px}
  .kform .places2 .ptile:first-child{padding-inline-end:34px}
  .kform .places2 .ptile+.ptile{padding-inline-start:34px}
  .kform .places2 .swap{left:50%;right:auto;margin-left:-22px;background:var(--surface);border-radius:50%}
  .kform .dtile{flex:1.4}
  .kform .wtile{flex:1.1}
  .kform .ptile:hover,.kform .dtile:hover,.kform .wtile:hover{background:var(--surface-2)}
  .s-card.k .s-go{min-height:60px!important;min-width:150px}
}
.k-below{padding-top:10px;padding-bottom:28px}
.k-below .s-note{margin:4px 0 0}

/* grey fields everywhere in the app (KAYAK) — background-color only, so select arrows stay */
body.app .control{background-color:var(--fieldbg);border:1px solid transparent}
body.app .control:hover{border-color:var(--hair-2)}
body.app .control:focus{border-color:var(--ink)}

/* RESULTS: square filter button + outlined chips, status line with Best ▾ */
.chipbar.k{gap:8px}
.fsq{flex:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--hair-2);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fsq:hover{border-color:var(--ink)}
.fsq svg{width:20px;height:20px}
.chipbar.k .fchip2{border-radius:8px}
.statusline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 4px}
.st-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;color:var(--ink);min-width:0}
.st-l #res-count{font-weight:500}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--hair-2);border-top-color:var(--ink);animation:ringspin .9s linear infinite;flex:none}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.st-sort{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.st-sort svg{width:18px;height:18px}
.st-sort[aria-pressed="true"]{text-decoration:underline;text-underline-offset:3px}

/* the KAYAK card */
.results.app{gap:12px}
.fare.k{display:block;background:var(--surface);border:0;border-radius:12px;box-shadow:var(--card-lift);padding:0;position:relative;overflow:hidden;cursor:pointer}
.fare.k:hover{box-shadow:0 0 0 1px var(--hair-2)}
.kc-top{display:flex;align-items:center;gap:8px;padding:12px 14px 0}
.kbtn{position:relative;z-index:2;flex:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--hair-2);background:var(--surface);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.kbtn:hover{border-color:var(--ink)}
.kbtn svg{width:20px;height:20px}
.kbtn[aria-pressed="true"] svg path{fill:currentColor}
.kc-top .ftag{margin:0 0 0 auto}
.ftag.t-best{background:var(--tag-best);color:var(--tag-best-ink)}
.ftag.t-cheap{background:var(--tag-cheap);color:var(--tag-cheap-ink)}
.ftag.t-fast{background:var(--tag-fast);color:var(--tag-fast-ink)}
.kc-leg{display:grid;grid-template-columns:26px auto minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:14px 14px 0}
.kc-leg .tt{line-height:1.2;font-variant-numeric:tabular-nums}
.kc-leg .tt .hm{display:block;font-size:19px;font-weight:700;white-space:nowrap}
.kc-leg .tt .hm sup{font-size:11px;font-weight:600;color:var(--ink-2);margin-inline-start:1px}
.kc-leg .tt .ap{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.kc-leg .tt.end{text-align:end}
.kc-leg .md{min-width:0;text-align:center;line-height:1.3}
.kc-leg .md .du{display:flex;align-items:center;gap:6px}
.kc-leg .md .du i{flex:1;height:1px;background:var(--hair-2)}
.kc-leg .md .du b{flex:none;font-weight:500;font-size:12.5px;color:var(--ink-2);background:var(--fieldbg);border-radius:999px;padding:2px 9px;white-space:nowrap}
.kc-leg .md .sp{display:block;font-size:13px;color:var(--ink-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-leg .md .sp.direct{color:var(--ok);font-weight:600}
:root[data-lang="bn"] .kc-leg .md .sp,:root[data-lang="bn"] .kc-leg .md .du b{font-size:12.5px}
.kc-leg.ret{grid-template-columns:26px minmax(0,1fr);padding-top:10px}
.kc-leg.ret .rt{font-size:13.5px;color:var(--ink-2)}
.kc-mid{padding:10px 14px 0}
.kc-mid .fc-facts{margin-top:0}
.fare.k .barefare{background:none;padding:0;margin:6px 0 0;font-size:13px;color:var(--mute);border-radius:0}
:root[data-lang="bn"] .fare.k .barefare{font-size:13.5px}
.kc-bot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);margin-top:12px;padding:12px 14px 2px}
.kc-bot .nm{min-width:0;font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-bot .nm .br{font-size:13px;color:var(--mute);font-weight:400}
.kc-bot .amt{flex:none;font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kc-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 14px 12px;font-size:12.5px;color:var(--mute)}
:root[data-lang="bn"] .kc-foot{font-size:13px}
.kc-foot .ap{min-width:0}
.kc-foot .per{flex:none;text-align:end}
.kc-foot .ap:empty{display:none}
.fare.k .fc-open{position:absolute;inset:0;z-index:1;border:0;background:transparent;cursor:pointer;border-radius:12px}
.fare.k .fc-open:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.fd-ap{font-size:13px;color:var(--ink-2);margin-top:-2px}
.inline-ask{border:0;box-shadow:var(--card-lift)}

/* STAYS / PACKAGES — coming soon */
.soon-k{display:inline-block;font-size:12.5px;font-weight:700;background:var(--chip);color:var(--ink-2);border-radius:6px;padding:2px 8px}
.soon-h{font-size:24px;margin-top:10px;text-wrap:balance}
.soonform{display:grid;gap:12px;margin-top:18px}
.soonform .lbl{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink-2)}

/* ============================================================================
   V6 · THE LOCKED BRAND (MSD, 2026-09-26 — brand/preview-board-combo.png).
   Red #D71921 = the brand + the ONE action colour. Black = words, icons,
   selection. White = surfaces. Faint blue = the page only. Page in three
   zones (Emirates-like): 1 white header band + thin red line · 2 white
   summary bar · 3 faint-blue body with white cards.
   ========================================================================== */
/* 1 · header band */
.appbar.k.v6{background:var(--surface);border-bottom:2px solid var(--accent)}
.appbar.k.v6 .in{gap:8px}
.appbar.k.v6 .brand-logo{height:26px}
@media (min-width:900px){.appbar.k.v6 .brand-logo{height:30px}}
.tripslink{position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;padding:0 10px;border-radius:10px;
  color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;justify-content:center}
.tripslink:hover{background:var(--chip);text-decoration:none}
.tripslink svg{width:20px;height:20px;flex:none}
.tripslink .badge{position:absolute;top:2px;left:26px;min-width:18px;height:18px;border-radius:9px;padding:0 5px;background:var(--ink);color:var(--surface);
  font-size:11px;line-height:18px;text-align:center;font-weight:700}
@media (max-width:479px){.tripslink .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.askpill{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--hair-2);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.askpill:hover{border-color:var(--ink)}
.askpill svg{width:15px;height:15px;flex:none}

/* 2 · the summary bar */
.sumbar{background:var(--surface);border-bottom:1px solid var(--hair)}
.sumbar .in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:8px 16px;min-height:64px}
@media (min-width:900px){.sumbar .in{padding:10px 24px}}
.sumbar .sb-back{margin-inline-start:-8px}
.sb-t{flex:1;min-width:0;line-height:1.3}
.sb-t b{display:block;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.sb-m{display:block;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-m a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.sb-tot{flex:none;text-align:end;line-height:1.2}
.sb-tot .k{display:block;font-size:12px;color:var(--ink-2)}
.sb-tot b{display:block;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.sumbar .sb-view{flex:none;min-height:44px;padding:0 14px;font-size:14.5px}
@media (max-width:599px){.sumbar .sb-view:not([hidden])~.sb-tot,.sumbar .sb-tot:has(~.sb-view:not([hidden])){display:none}}
body.app .fsum-mob{display:none}
.waitline,.topline{top:calc(var(--appbar-h) + var(--safe-t) + 2px)}

/* the outlined red secondary — on white surfaces only (red on the blue page is 4.79:1, kept off it by design) */
.btn.outline-red{background:var(--surface);border:1.5px solid var(--accent-text);color:var(--accent-text);font-weight:700}
.btn.outline-red:hover{background:var(--surface-2);border-color:var(--accent-text)}

/* errors: black words + ⚠, a plain box with a black left bar — never red, so red always means dCover */
.errsum{background:var(--surface);border:1px solid var(--hair);border-left:4px solid var(--ink);border-radius:8px;color:var(--ink)}
.errsum b{color:var(--ink)}
.errsum b::before,.err::before,.s-err::before{content:"⚠ ";font-weight:700}
.err,.s-err{color:var(--ink)}
.field.bad .control,.field.bad .dob .control{border-color:var(--ink);border-width:1.5px}
.field.bad .seg label{border-color:var(--ink)}
.ptile.bad{box-shadow:inset 4px 0 0 var(--ink)}

/* selection is black, never a colour */
.vtile.on .vi{background:var(--ink);color:var(--surface)}
.kbtn[aria-pressed="true"]{border-color:var(--ink)}

/* home: the faint-blue page, the form on it; desktop — a white card, not a grey band */
body.app.home{background:var(--bg)}
@media (min-width:900px){body.app.home{background:var(--bg)}.kform .sgroup{box-shadow:0 0 0 1px var(--hair-2)}}
.kform .qtabs{border-bottom-color:var(--bg)}
.kform .sgroup>*+*,.kform .places2 .ptile+.ptile{border-top-color:var(--bg)}
@media (min-width:900px){.kform .sgroup>*+*,.kform .places2 .ptile+.ptile{border-top:0;border-inline-start-color:var(--hair-2)}}

/* the ✓ badge on status pages: black disc, white tick (dark: white disc, near-black tick) — no green */
.done-mark,:root[data-theme="dark"] .done-mark{background:var(--ink);color:var(--surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .done-mark{background:var(--ink);color:var(--surface)}}
/* whole-card links (trips, recent searches, menu rows, review hub) are not sentences: no underline */
a.trip,a.trip *,a.row,a.row *,.recent a,.recent a *,.hub a,.hub a *{text-decoration:none!important}

/* ============================================================================
   V7 · MSD's usability review (2026-09-26): desktop first, then mobile.
   KAYAK desktop measured (docs/reference/kayak/desktop/css-measured.json):
   container 1263, H1 44/56 700, section H2 32/40 700, card H3 24/32 600,
   button 14/600, radius 8 (photo cards 12–16), hairlines, tile shadow
   0 3px 6px. Their typeface is commercial, so ours is Figtree (SIL OFL,
   self-hosted, Latin only) with Noto Sans Bengali for Bengali.
   ========================================================================== */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/Figtree-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--sans:"Figtree","Noto Sans Bengali",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--radius:12px;--radius-sm:8px}
body.app{font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--text)}
:root[data-lang="bn"] body.app{font-size:16.5px;line-height:1.6}
body.app h1,body.app h2,body.app h3{color:var(--ink);letter-spacing:-.01em}
body.app .btn{border-radius:8px}
body.app .control{border-radius:8px}
.appbar .in,.sumbar .in{max-width:1260px}
@media (min-width:900px){.appbar.k .in{padding:0 24px}.sumbar .in{padding:10px 24px}}

/* ---------- the container: ~1260, content starts on the left ---------- */
.wrap7{max-width:1260px;margin:0 auto;padding:0 16px}
@media (min-width:900px){.wrap7{padding:0 24px}}

/* ---------- HERO: a soft panel, the search on the left, photos on the right ---------- */
.hero7{padding:12px 0 0}
.hpanel{position:relative}
.h7{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.collage{display:none}
.hp-l .vtiles{display:grid;grid-template-columns:repeat(3,56px);gap:0 28px;max-width:none;justify-content:start}
.vtile{font-size:14px;gap:6px}
.vtile .vi{width:52px;height:52px;border-radius:8px;border:1px solid var(--hair);background:var(--surface);box-shadow:0 3px 6px rgba(18,19,22,.16),0 -1px 4px rgba(18,19,22,.04)}
.vtile .vi svg{width:24px;height:24px}
.vtile.on .vi{border-color:var(--ink)}
.s-card.k{margin-top:16px;gap:10px}
@media (min-width:900px){
  .hero7{padding:24px 0 0}
  .hpanel{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;background:var(--surface);border-radius:16px;box-shadow:var(--card-lift);overflow:hidden;min-height:440px}
  .hp-l{padding:48px 0 48px 56px;min-width:0}
  .h7{position:static;width:auto;height:auto;clip:auto;white-space:normal;font-size:44px;line-height:56px;font-weight:700;margin:0 0 28px;max-width:16em}
  :root[data-lang="bn"] .h7{font-size:40px;line-height:56px}
  .collage{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px 0 0;align-content:start}
  .collage .cc{display:flex;flex-direction:column;gap:16px}
  .collage .cc:first-child{margin-top:-36px}
  .collage .cc:last-child{margin-top:40px}
  .collage img{display:block;width:100%;height:auto;border-radius:16px;object-fit:cover}
  .hp-l .vtiles{grid-template-columns:repeat(3,auto);gap:0 32px}
  .s-card.k{margin-top:28px}
  .kform .qtabs{margin-bottom:12px}
}

/* ---------- the swap: ⇅ on a phone (right edge, between stacked fields), ⇄ on a laptop (inside the one row) ---------- */
.swap .sw-h{display:none}
.swap svg{width:20px;height:20px}
.kform .places2 .ptile~.ptile{border-top:2px solid var(--bg)}
@media (min-width:900px){
  .swap .sw-v{display:none}
  .swap .sw-h{display:block}
  .kform .places2{display:flex;align-items:center}
  .kform .places2 .swap{position:static;margin:0 -6px;flex:none;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--hair-2);z-index:1}
  .kform .places2 .ptile,.kform .places2 .ptile:first-child{padding:0 14px}
  .kform .places2 .ptile~.ptile{border-top:0;border-inline-start:0;padding-inline-start:20px}
  .kform .ptile,.kform .dtile,.kform .wtile{min-height:60px}
  .kform .pv{font-size:16px}
  .s-card.k .s-go{min-height:60px!important;font-size:15px!important;font-weight:700;min-width:120px;padding:0 24px}
}

/* ---------- Stays / Packages fields ---------- */
.sgroup.ask .afield{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:6px 16px;cursor:text}
.sgroup.ask .afield .pk{position:static;width:auto;height:auto;clip:auto;white-space:normal;font-size:12.5px;color:var(--ink-2)}
.ainput{border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:2px 0;min-height:28px;width:100%}
.ainput:focus{outline:none}
.sgroup.ask .afield:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
select.ainput{cursor:pointer}
@media (min-width:900px){
  .sgroup.ask{display:flex}
  .sgroup.ask .afield{flex:1;min-width:0;min-height:60px}
  .sgroup.ask .afield.grow2{flex:2}
  .sgroup.ask>*+*{border-top:0;border-inline-start:1px solid var(--hair-2)}
}
.soonbox{grid-column:1/-1;background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:14px 16px;display:grid;gap:8px}
.soonbox .sb-h{font-size:16px}
.soonbox .btnrow{gap:8px}
.backlink{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;min-height:44px}

/* ---------- sections below the fold ---------- */
.home7 .s-note{margin:14px 0 0}
.sec7{padding:32px 0 0}
@media (min-width:900px){.sec7{padding:56px 0 0}}
.sec7-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-bottom:16px}
.h2-7{font-size:24px;line-height:32px;font-weight:700}
@media (min-width:900px){.h2-7{font-size:32px;line-height:40px}.sec7-h{margin-bottom:24px}}
.sub7{flex-basis:100%;font-size:15px;color:var(--ink-2)}
.sec7-h .clear{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;text-decoration:underline;min-height:44px;cursor:pointer}

/* popular destinations: photo cards (KAYAK 314 × 406) */
.dgrid,.sgrid{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dgrid::-webkit-scrollbar,.sgrid::-webkit-scrollbar{display:none}
.dgrid>li{flex:none;width:220px;scroll-snap-align:start}
.sgrid>li{flex:none;width:280px;scroll-snap-align:start}
@media (min-width:900px){
  .dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;overflow:visible}
  .dgrid>li{width:auto}
  .sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible}
  .sgrid>li{width:auto}
}
.dcard,.scard{display:block;width:100%;padding:0;border:0;background:none;text-align:start;cursor:pointer;color:var(--ink);font:inherit}
.dcard img{display:block;width:100%;height:auto;aspect-ratio:314/406;object-fit:cover;border-radius:12px;background:var(--chip)}
.scard img{display:block;width:100%;height:auto;aspect-ratio:10/7;object-fit:cover;border-radius:12px;background:var(--chip)}
.dcard:hover img,.scard:hover img{filter:brightness(.94)}
.dcard:focus-visible,.scard:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:12px}
.dc-t,.sc-t{display:block;padding:12px 2px 0}
.dc-t b,.sc-t b{display:block;font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
.dc-t>span,.sc-t>span:last-child{display:block;font-size:14px;color:var(--ink-2)}
.dc-t .code{font-weight:600;color:var(--ink);letter-spacing:.02em}
.sc-t .soon-k{margin-bottom:6px}

/* FAQ: a compact two-column accordion */
.faq7{display:grid;gap:0 48px}
@media (min-width:900px){.faq7{grid-template-columns:1fr 1fr}}
.faq7 details{border-bottom:1px solid var(--hair)}
.faq7 summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 0;font-weight:600;font-size:16px;color:var(--ink);cursor:pointer}
.faq7 summary::-webkit-details-marker{display:none}
.faq7 summary svg{width:20px;height:20px;flex:none;transition:transform .2s}
.faq7 details[open] summary svg{transform:rotate(180deg)}
.faq7 details p{padding:0 0 16px;font-size:15px;color:var(--ink-2);max-width:40em}
@media (prefers-reduced-motion:reduce){.faq7 summary svg{transition:none}}

/* the footer */
.foot7{background:var(--surface);color:var(--text);border-top:1px solid var(--hair);margin-top:56px;padding:40px 0 24px}
.f7-cols{display:grid;gap:24px}
@media (min-width:900px){.f7-cols{grid-template-columns:2fr 1fr 1fr 1.2fr;gap:32px}}
.f7-brand .brand-logo{height:26px;margin-bottom:10px}
.f7-brand p{font-size:14px;color:var(--ink-2);max-width:26em}
.f7-cols h2{font-size:14px;line-height:20px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.f7-nav a{display:flex;align-items:center;min-height:36px;font-size:15px;color:var(--text);text-decoration:none}
.f7-nav a:hover{text-decoration:underline}
@media (max-width:899px){.f7-nav a{min-height:44px}}
.foot7 .legal{margin-top:28px;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink-2);line-height:1.6}
.foot7 .legal b{color:var(--ink)}
body.app.show-foot .foot7{display:block}

/* photo credits */
.credits{border-collapse:collapse;width:100%;font-size:14px;background:var(--surface)}
.credits th,.credits td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--hair);vertical-align:middle}
.credits th{font-size:13px;color:var(--ink-2);font-weight:600}
.credits img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.credits a{color:var(--ink);text-decoration:underline}

/* ---------- MOBILE: compact, like KAYAK's phone (≥44 px targets kept) ---------- */
@media (max-width:899px){
  .s-card.k .s-go{min-height:48px!important;font-size:16px!important;border-radius:8px!important}
  .kform .qtabs button{min-height:48px;font-size:15px;padding:0 12px}
  .kform .ptile,.kform .dtile,.kform .wtile{min-height:52px}
  .kform .pv,.kform .pv .code{font-size:16px}
  .sgroup.ask .afield{min-height:52px}
  .actionbar .btn{min-height:48px}
  .actionbar .btn.go{font-size:15.5px}
  .quietchk{margin-top:-2px;font-size:14px}
  .hp-l .vtiles{gap:0 24px}
}
/* the hero panel runs wide like KAYAK's (16 px from the edges, up to 1408), so the one-row bar has room; sections stay at 1260 */
@media (min-width:900px){
  .hero7>.wrap7{max-width:1440px;padding:0 16px}
  .hpanel{grid-template-columns:minmax(0,1fr) 400px;gap:40px}
  .hp-l{padding:48px 0 48px 72px}
  .hero7 .s-note{max-width:1260px;margin:14px auto 0;padding:0 8px}
}
@media (min-width:900px) and (max-width:1199px){.hpanel{grid-template-columns:minmax(0,1fr)}.collage{display:none}.hp-l{padding:40px}}
@media (min-width:1200px){
  .hpanel{grid-template-columns:minmax(0,1fr) 340px;gap:32px}
  .hp-l{padding:48px 0 48px 56px}
  .kform .places2{flex:1.7}
  .kform .dtile{flex:1.35}
  .sgroup .wtile{flex:1.25}
}
/* v7 tap-size fixes: every control ≥ 44 px (measured) */
.sec7-h .clear{min-width:44px;padding:0 4px}
.afield select.ainput{min-height:44px;margin:-8px 0 -8px}
.credits a{display:inline-block;padding:12px 0;min-height:44px}
.credits{min-width:760px}
.credits a{min-width:44px}
/* tile labels never wrap ("Packages" was breaking at 390): columns size to their label */
.hp-l .vtiles{grid-template-columns:repeat(3,auto)}
.vtile .vl{white-space:nowrap}

/* ---------- round 7b (MSD): the airport boxes were squeezed (138 px at 1440, 94 px at 1280) ----------
   flex with no basis let the long date / traveller text take the row first; basis 0 makes the shares real and the
   airport pair gets the biggest share. The photo column narrows to one stack so the row has room, and on a laptop the
   dates box drops the weekday ("17 Oct – 24 Oct", like KAYAK's compact form); the phone keeps it. */
@media (min-width:900px){
  .kform .places2{flex:2.8 1 0}
  .kform .dtile{flex:1.3 1 0;min-width:0}
  .kform .wtile{flex:1.2 1 0;min-width:0}
  .kform .pv,.kform .pv .code{font-size:16px}
  .kform .dtile .wd{display:none}
  .s-card.k .s-go{min-width:128px}
}
@media (min-width:1200px){
  /* KAYAK's hero (measured at 1440): a soft panel, the search on the left, two staggered columns of rounded
     square photos on the right, clipped by the panel's top, bottom and right edge. Ours sits on the faint blue. */
  .hpanel{grid-template-columns:minmax(0,1fr) 383px;gap:32px;background:var(--bg);box-shadow:none;min-height:440px;max-height:440px}
  .hp-l{padding:48px 0 48px 72px}
  .collage{display:flex;gap:24px;padding:0;align-items:flex-start;overflow:visible}
  .collage .cc{flex:none;width:220px;display:flex;flex-direction:column;gap:16px}
  .collage .cc:first-child{margin-top:-76px}
  .collage .cc:last-child{display:flex;margin-top:-148px}
  .collage img{width:220px;height:220px;border-radius:40px;object-fit:cover;background:var(--surface-2)}
  .collage img[hidden]{display:none}
  .kform .sgroup{background:var(--surface);box-shadow:0 2px 8px rgba(18,19,22,.10)}
  body.app.home{background:var(--surface)}
  .kform .places2{flex:3.1 1 0}
  .kform .dtile{flex:1.3 1 0}
  .kform .wtile{flex:1.15 1 0}
  .s-card.k .s-go{min-width:96px}
}
.px-s{display:none}
@media (min-width:900px){.kform .px-l{display:none}.kform .px-s{display:inline}}
@media (min-width:900px) and (max-width:1399px){
  .s-card.k .s-go{min-width:104px}
  .kform .dtile,.kform .wtile{padding:0 12px}
  .hp-l{padding-left:40px}
}
/* a smaller laptop: the panel clips more of the right photo column (KAYAK does the same) so the search row keeps its room */
@media (min-width:1200px) and (max-width:1399px){.hpanel{grid-template-columns:minmax(0,1fr) 262px}}

/* ============================================================================
   ROUND 8 (MSD, 2026-09-26) — docs/DESIGN-V8.md. KAYAK's structure, our brand.
   1 the laptop search row never cuts its text (1200–1440 with a 15 px scrollbar,
     and 900–1199) · 2 header lined up with the hero panel, no rule on home ·
   3 popular-search chips · 5 the search in the results header · 6 bigger
   airline logos · 7 Clear / reset on every filter and the sort · 8 the phone
   search card. Colour from tokens only (theme.css; --card-float is new).
   ========================================================================== */

/* ---------- 2 · header: the same edges as the hero panel (KAYAK 1440: ☰ at the panel's edge, logo at x=72) ---------- */
@media (min-width:900px){
  .appbar.k.v6 .in{max-width:1440px;padding:0 16px;gap:12px}
}
/* home: no line under the header at the top of the page (KAYAK); a hairline once content scrolls under it (v2-home.js) */
body.home .appbar.k.v6{border-bottom:1px solid transparent;transition:border-color .15s}
body.home .appbar.k.v6.scrolled{border-bottom-color:var(--hair)}
@media (prefers-reduced-motion:reduce){body.home .appbar.k.v6{transition:none}}

/* ---------- 1 · the laptop search row ----------
   Dates and travellers are as wide as their words (never cut); the airport pair takes what is left, never under
   400 px (two boxes ≥ 180). The row's own minimum is its content, and the photo column is what gives way:
   hp-l = minmax(min-content, 1fr), photos = minmax(0, 383px). Under 1100 px the row breaks into two lines. */
@media (min-width:900px){
  .hp-l{padding:44px 0 40px 56px}
  .s-card.k{grid-template-columns:minmax(min-content,1fr) auto}
  .kform .sgroup{flex-wrap:nowrap}
  .kform .places2{flex:1 1 0;min-width:400px}
  .kform .dtile,.kform .wtile,.sgroup .wtile{flex:0 0 auto;width:auto;min-width:0;padding:0 16px}
  .kform .dtile .pv,.kform .wtile .pv{overflow:visible;text-overflow:clip}
  .kform .ptile .pv{max-width:100%}
}
@media (min-width:900px) and (max-width:1199px){
  .hp-l{padding:40px 56px}
}
@media (min-width:900px) and (max-width:1099px){
  .kform .sgroup{flex-wrap:wrap}
  .kform .places2{flex:1 1 100%}
  .kform .dtile,.kform .wtile,.sgroup .wtile{flex:1 1 auto;border-top:1px solid var(--hair-2)}
  .kform .sgroup>.dtile{border-inline-start:0}
}
@media (min-width:1200px){
  .hpanel{grid-template-columns:minmax(min-content,1fr) minmax(0,383px);max-height:none;min-height:440px}
  .collage{min-width:0;contain:size}                  /* the photos fill the panel's height; they never set it */
  .kform .sgroup{box-shadow:var(--card-float)}
}
/* the prototype strip and the note under the panel start on the same line as the logo and the headline (x = 72) */
@media (min-width:900px){
  body.app .protobar .in{max-width:1440px;padding-left:72px;padding-right:16px}
  .hero7 .s-note{max-width:1440px;padding:0 16px 0 56px}
}

/* ---------- 3 · popular searches: plain chips, one tap = a search (no "AI" claim) ---------- */
.prompts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:14px}
.prompts[hidden]{display:none}
.pr-k{font-size:14px;font-weight:600;color:var(--ink-2);margin:0}
.pr-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--hair-2);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap}
.pchip:hover{border-color:var(--ink)}
.pchip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pchip svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
:root[data-lang="bn"] .pchip{font-size:14.5px}
.ap-hint{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--chip);color:var(--ink);font-size:14.5px;line-height:1.45}
.ap-hint[hidden]{display:none}

/* ---------- 8 · the phone search: a white card with a soft lift on the faint-blue band (KAYAK phone) ---------- */
@media (max-width:899px){
  body.app.home{background:var(--surface)}
  .hero7{background:var(--bg);padding:14px 0 20px}
  .hp-l .vtiles{display:flex;justify-content:space-around;gap:0;max-width:none}
  .hp-l .vtile{flex:1 1 0;min-width:0}
  .s-card.k{background:var(--surface);border-radius:12px;box-shadow:var(--card-float);gap:0;padding:0 0 12px;margin-top:14px}
  .kform{background:transparent;border-radius:12px 12px 0 0;overflow:visible}
  .kform .qtabs{border-bottom:1px solid var(--hair);padding:0 4px}
  .kform .sgroup{border-bottom:1px solid var(--hair)}
  .kform .sgroup>*+*,.kform .places2 .ptile~.ptile,.kform .places2 .ptile+.ptile{border-top:1px solid var(--hair)}
  .kform .ptile:hover,.kform .dtile:hover,.kform .wtile:hover{background:var(--surface-2)}
  .kform .places2 .swap{background:var(--surface);border-color:var(--hair-2)}
  .s-card.k .s-go{margin:12px 12px 0;min-height:48px!important}
  .s-card.k .s-err{margin:10px 12px 0}
  .s-card.k .quietchk{margin:6px 12px 0}
  .s-card.k .soonbox{margin:10px 12px 0}
  .sgroup.ask .afield{border-top:0}
  .sgroup.ask>*+*{border-top:1px solid var(--hair)}
  .prompts{display:block;margin-top:16px}
  .pr-k{margin-bottom:8px}
  .pr-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:2px 16px 4px}
  .pr-list::-webkit-scrollbar{display:none}
  .pr-list>li{flex:none}
  .pchip{min-height:44px}
  .home7 .hero7 .s-note{margin-top:14px}
}

/* ---------- 5 · results: the search lives in the header, always visible; a tap opens the edit-search sheet ---------- */
.hsum{display:none}
body.rs .hsum{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:0 6px 0 14px;border:1px solid var(--hair-2);border-radius:8px;
  background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;white-space:nowrap}
body.rs .hsum:hover{border-color:var(--ink)}
body.rs .hsum:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
body.rs .hsum[aria-busy="true"]{cursor:progress}
.hs-r{flex:none;font-size:16px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.hs-m{display:flex;align-items:center;min-width:0;overflow:hidden;font-size:14.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hs-m>span{flex:none}
.hs-m>span+span::before{content:"·";margin:0 8px;color:var(--ink-2)}
.hs-m .d-s{display:none}
.hs-p{display:inline-flex;align-items:center;gap:3px}
.hs-p .pp{width:14px;height:14px}
.hs-m>.hs-p::before{margin-inline-end:8px}
.hs-e{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:6px;background:var(--chip);color:var(--ink);font-size:14px;font-weight:600}
.hs-e svg{width:16px;height:16px;flex:none}
@media (min-width:900px){
  body.rs .hsum{flex:0 1 auto;margin-inline-start:12px}
}
@media (min-width:900px) and (max-width:1199px){
  .hs-m .hs-c{display:none}
  .hs-e>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hs-e{width:32px;padding:0;justify-content:center}
}
/* phone: a compact second row inside the sticky header — "JFK → DAC · 10–25 Nov · 👤 1  ✎" */
@media (max-width:899px){
  body.rs{--hsum-h:48px}
  body.rs .appbar .in{flex-wrap:wrap;row-gap:0}
  body.rs .hsum{order:10;flex:1 1 100%;margin:0 4px 8px;background:var(--surface-2);border-color:var(--hair)}
  .hs-m .d-l,.hs-m .hs-c{display:none}
  .hs-m .d-s{display:inline}
  .hs-m>.d-s::before{content:none}
  .hs-r::after{content:"·";margin:0 8px;font-weight:400;color:var(--ink-2)}
  .hs-r{font-size:15.5px}
  .hs-m{flex:1;font-size:14.5px;color:var(--ink)}
  .hs-e{margin-inline-start:auto;background:transparent;width:36px;padding:0;justify-content:center}
  .hs-e>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.rs .chipbar,body.rs .topline{top:calc(var(--appbar-h) + var(--safe-t) + 2px + var(--hsum-h))}
}
/* the lowest total now sits on the status line (the summary row under the header is gone) */
.st-lo{font-size:14px;color:var(--ink-2)}
.st-lo[hidden]{display:none}
.st-lo::before{content:"·";margin-inline-end:8px}
.st-lo b{color:var(--ink);font-weight:700}
@media (max-width:599px){.st-lo{flex-basis:100%;white-space:nowrap}.st-lo::before{content:none}.statusline .st-l{flex:1 1 auto}}

/* the edit-search sheet: the home form itself. Laptop: drops from the top as one row (KAYAK's results bar);
   phone: a full screen with the stacked card. */
.editsheet .s-card.k{margin-top:0}
@media (max-width:899px){.editsheet .sheet-body{background:var(--bg);padding-top:16px}}
@media (min-width:900px){
  .sheet.full.editsheet{align-items:flex-start;padding:0}
  .sheet.full.editsheet .sheet-panel{width:100%;max-width:none;height:auto;max-height:none;border-radius:0 0 16px 16px;animation:editdown .2s cubic-bezier(.2,.8,.2,1)}
  .editsheet .sheet-head,.editsheet .sheet-body{width:100%;max-width:1440px;margin:0 auto;padding-left:16px;padding-right:16px}
  .editsheet .sheet-head{border-bottom:0;padding-top:max(12px,calc(var(--safe-t) + 6px))}
  .editsheet .sheet-body{overflow:visible;padding-bottom:28px}
}
@keyframes editdown{from{transform:translateY(-24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet.full.editsheet .sheet-panel{animation:none}}

/* ---------- 6 · airline logos at KAYAK scale: 32 px on a phone, 40 px on a laptop; the 2-letter badge matches ---------- */
.kc-leg{grid-template-columns:32px auto minmax(0,1fr) auto}
.kc-leg.ret{grid-template-columns:32px minmax(0,1fr)}
.fare.k .al-logo.xs{width:32px;height:32px;border-radius:8px}
.fare.k .al-logo.xs img{width:26px;height:26px}
.fare.k .al-logo.xs.badge{font-size:12px}
@media (min-width:900px){
  .kc-leg{grid-template-columns:40px auto minmax(0,1fr) auto;column-gap:16px}
  .kc-leg.ret{grid-template-columns:40px minmax(0,1fr)}
  .fare.k .al-logo.xs{width:40px;height:40px;border-radius:10px}
  .fare.k .al-logo.xs img{width:34px;height:34px}
  .fare.k .al-logo.xs.badge{font-size:14px}
}

/* ---------- 7 · a way back: Clear all, a reset in every sheet, the sort's × back to Best ---------- */
.fclear{flex:none;min-height:44px;padding:0 10px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.fclear[hidden]{display:none}
.fclear:hover{text-decoration-thickness:2px}
.st-sortw{flex:none;display:inline-flex;align-items:center;gap:2px}
.st-sort .sk{font-weight:500;color:var(--ink-2)}
.st-sort[aria-pressed="true"]{text-decoration:none}
.st-sort[aria-pressed="true"] .cl{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.st-sortx{flex:none;width:44px;height:44px;border-radius:8px;border:0;background:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.st-sortx:hover{background:var(--chip)}
.st-sortx[hidden]{display:none}
.st-sortx svg{width:16px;height:16px}
.sheet-foot.foot2{display:flex;gap:8px}
.sheet-foot.foot2 .btn{width:auto}
.sheet-foot.foot2 .sreset{flex:0 0 auto;padding:0 16px;background:var(--surface);border:1px solid var(--hair-2);color:var(--ink);font-weight:600}
.sheet-foot.foot2 .sreset:hover:not(:disabled){border-color:var(--ink)}
.sheet-foot.foot2 .sreset:disabled{color:var(--ink-2);border-color:var(--hair);cursor:default}
.sheet-foot.foot2 .show-n{flex:1 1 auto}
/* phone: the chip row scrolls sideways, so "Clear all" moves up front (after the filter button) where it can be seen */
@media (max-width:899px){.chipbar.k .fsq{order:-2}.chipbar.k .fclear{order:-1}}
/* admin panel: "dCover recommends" — red outline tag (brand red text on white; the red-on-dark variant is the theme's) */
.ftag.t-rec{background:transparent;color:var(--accent-text);box-shadow:inset 0 0 0 1px currentColor}
.kc-top .ftag+.ftag{margin-left:6px}

/* ============================================================================
   ROUND 9 · Ask Hadi — the AI assistant (docs/DESIGN-V9.md, v2-hadi.js)
   Existing tokens only. Black / white carry it; red is kept for the one action (Send, the pill's arrow) and the
   loading line, exactly as elsewhere. The customer's bubble is the ink colour on the surface (inverts in dark mode);
   Hadi's bubble is the neutral chip tint. One new token, geometry: the drawer width.
   Laptop ≥1280: the drawer docks — the page gets padding on the right, so nothing is covered.
   700–1279: the drawer floats over the right edge. Under 700: a full-height sheet; collapsed, a slim bar.
   ========================================================================== */
:root{--hadi-w:400px}

/* -- the floater (round 9b): fixed at the bottom-left, above any fixed bottom bar; only while Hadi is closed -- */
.hfloat{position:fixed;z-index:50;left:calc(16px + env(safe-area-inset-left,0px));
  bottom:calc(var(--hd-fb,0px) + 16px + var(--safe-b));max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
.hfloat[hidden]{display:none}
.hf-card{width:380px;max-width:100%;padding:8px 8px 10px 12px;background:var(--surface);color:var(--ink);border:0;border-radius:20px;box-shadow:var(--float)}   /* round 10: no ring — the shadow lifts it */
.hf-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.hf-av{flex:none;width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--neon);display:inline-flex;align-items:center;justify-content:center}
.hf-av svg{width:18px;height:18px}
.hf-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.hf-id b{font-size:16px;color:var(--ink)}
.hf-id span{font-size:12.5px;color:var(--ink-2)}
.hf-box{display:flex;align-items:center;gap:2px;min-height:48px;padding:0 3px 0 14px;border:1px solid var(--hair-2);border-radius:999px;background:var(--surface)}
.hf-box:hover{border-color:var(--ink)}
.hf-box:focus-within{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.hpill-in{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:0 4px;outline:none}
.hpill-in::placeholder{color:var(--ink-2);opacity:1}
.hpill-mic,.hpill-go{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hpill-mic{background:transparent;color:var(--ink)}
.hpill-mic:hover{background:var(--chip)}
.hpill-mic[hidden]{display:none}
.hpill-go{background:var(--accent);color:var(--accent-ink)}
.hpill-mic svg,.hpill-go svg{width:20px;height:20px}
.hpill-mic:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hpill-go:focus-visible{outline:3px solid var(--neon);outline-offset:2px}
.hpill-go,.hd-send{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--neon-tint)}   

/* the page can always scroll its last lines (and a toast) clear of the corner */
html.hadi-float body.app{padding-bottom:calc(var(--hd-fb,0px) + var(--hd-fh,72px) + 28px + var(--safe-b))}
html.hadi-float .toast{bottom:calc(var(--hd-fb,0px) + var(--hd-fh,72px) + 28px + var(--safe-b))}
@media (max-width:699px){
  .hf-card{width:100%}
  .hfloat:not(.min){right:calc(16px + env(safe-area-inset-right,0px))}
}

/* -- the panel -- */
.hadi{position:fixed;z-index:55;top:0;right:0;bottom:0;width:var(--hadi-w);max-width:100vw;display:flex;flex-direction:column;
  background:var(--surface);color:var(--text);border:0;box-shadow:var(--float)}
.hadi[hidden]{display:none}

/* docked, the page is 400 px narrower than the window: the results header's own 900–1199 rule (round 8) applies at
   1280–1599 — the cabin drops out and "Change" becomes the ✎ alone — so the search summary is never cut */

.hd-head{flex:none;display:flex;align-items:center;gap:4px;padding:8px 6px 8px 14px;padding-top:max(8px,var(--safe-t));border-bottom:1px solid var(--hair)}
.hd-av{flex:none;width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--neon);display:inline-flex;align-items:center;justify-content:center;margin-right:6px}
.hd-av svg{width:18px;height:18px}
.hd-id{flex:1;min-width:0}
.hd-id h2{margin:0;font-size:17px;line-height:1.25;color:var(--ink)}
.hd-id p{margin:0;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.hd-ic{flex:none;width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:var(--ink);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;text-decoration:none}
.hd-ic:hover{background:var(--chip);text-decoration:none}
.hd-ic[hidden]{display:none}
.hd-ic svg{width:21px;height:21px}
.hd-ic:focus-visible,.hd-chip:focus-visible,.hd-mic:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.hd-send:focus-visible{outline:3px solid var(--neon);outline-offset:2px}

             /* "minimise" only where the bar is the resting state */
.hd-note{flex:none;margin:0;padding:8px 14px 2px;font-size:12.5px;line-height:1.45;color:var(--ink-2);background:var(--surface-2)}
.hd-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px;display:flex;flex-direction:column;gap:10px}
.hd-log:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.hd-msg{max-width:88%}
.hd-msg p{margin:0;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
:root[data-lang="bn"] .hd-msg p{font-size:15.5px}
.hd-msg.hd{align-self:flex-start}
.hd-msg.hd p{background:var(--chip);color:var(--text);border-bottom-left-radius:6px}
.hd-msg.me{align-self:flex-end}
.hd-msg.me p{background:var(--neon-tint);color:var(--neon-ink);border-bottom-right-radius:6px}   /* round 10: the Harbour tint, not black */
.hd-priv{flex:none;display:flex;gap:7px;align-items:flex-start;margin:0;padding:7px 14px 8px;font-size:12.5px;line-height:1.45;color:var(--ink);background:var(--surface-2);border-bottom:1px solid var(--hair)}
.hd-priv svg{flex:none;width:14px;height:14px;margin-top:2px}
.hd-prog p,.hd-sum p{display:flex;flex-direction:column;gap:3px}
.hd-sum p{display:block}
.hd-route{font-weight:700;color:var(--ink)}
.hd-live{color:var(--text)}
.hd-sub{display:block;margin-top:3px;font-size:13px;color:var(--ink-2)}
.hd-sum .num{color:var(--ink);font-weight:800}
.hd-track{display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--hair-2);overflow:hidden}
.hd-track i{display:block;height:100%;width:2%;background:var(--accent);border-radius:2px;transition:width .6s ease}
.hd-act{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px}
.hd-act .btn{min-height:44px}
.hd-typing p{display:inline-flex;gap:5px;align-items:center;min-height:42px}
.hd-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:hdot 1.1s infinite ease-in-out}
.hd-typing i:nth-child(2){animation-delay:.15s}.hd-typing i:nth-child(3){animation-delay:.3s}
@keyframes hdot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.hd-pick{align-self:stretch}
.hd-pick-l{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.hd-pick .control{min-height:48px}
.hd-pick .ac{position:static;margin-top:6px}
.hd-chips{flex:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 14px 10px}
.hd-chips::-webkit-scrollbar{display:none}
.hd-chips:empty{display:none}
@media (min-width:700px){.hd-chips{flex-wrap:wrap;overflow:visible}}
.hd-chip{flex:none;min-height:44px;padding:0 15px;border:1px solid var(--hair-2);border-radius:999px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.hd-chip:hover{border-color:var(--ink)}
.hd-micnote{flex:none;margin:0 14px 8px;font-size:12.5px;color:var(--ink-2)}
.hd-micnote[hidden]{display:none}
.hd-form{position:relative;flex:none;display:flex;align-items:center;gap:4px;padding:10px 8px calc(10px + var(--safe-b)) 12px;border-top:1px solid var(--hair);background:var(--surface)}
.hd-in{flex:1;min-width:0;height:48px;border:1px solid var(--hair-2);border-radius:24px;padding:0 16px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.hd-in::placeholder{color:var(--ink-2);opacity:1}
.hd-in:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
.hd-mic,.hd-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hd-mic{background:transparent;color:var(--ink)}
.hd-mic:hover{background:var(--chip)}
.hd-mic[hidden]{display:none}
.hd-mic.on,.hpill-mic.on{background:var(--ink);color:var(--surface)}
.hd-send{background:var(--accent);color:var(--accent-ink)}
.hd-send:disabled{opacity:.55;cursor:default}
.hd-mic svg,.hd-send svg{width:20px;height:20px}
.hd-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* -- phone: a full-height sheet (the height follows the visible area, so the box sits above the keyboard) -- */
@media (max-width:699px){
  .hadi{left:0;right:0;width:auto;bottom:auto;height:100dvh;border-left:0;box-shadow:none}
  html.hadi-full,html.hadi-full body{overflow:hidden}
  .hd-msg{max-width:90%}
}
/* -- phone, collapsed: a slim bar at the bottom -- */
@media (prefers-reduced-motion:reduce){
  .hd-typing i{animation:none;opacity:.7}
  .hd-track i{transition:none}
}

/* ============================================================================
   ROUND 10 · legal pages and the footer line (docs/DESIGN-V10.md)
   ========================================================================== */
.docmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:2px 0 14px;font-size:13px;color:var(--ink-2)}
.docmeta .draft{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--chip);color:var(--ink);font-weight:600}
.docmeta .draft::before{content:"⚠";margin-inline-end:6px}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.foot7 .legal a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.foot7 .f7-human{color:var(--ink)}
/* a phone thumb gets a 44 px target on the inline "Digents" links without moving the line */
@media (max-width:899px){.foot7 .legal a,.doc a{display:inline-block;padding:15px 2px;margin:-15px -2px;line-height:14px}}

/* ============================================================================
   ROUND 11 · Hadi, re-made from KAYAK's "Ask AI" in our brand (docs/DESIGN-V11.md)
   The Harbour neon (Sky --neon → Lagoon --lagoon, and --neon-tint) is used for Hadi only.
   ========================================================================== */
:root{--hadi-glow:0 0 0 1px rgba(31,116,240,.06),0 6px 22px rgba(31,116,240,.20),0 2px 10px rgba(20,177,148,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hadi-glow:0 6px 24px rgba(31,116,240,.34),0 2px 12px rgba(20,177,148,.26)}}
:root[data-theme="dark"]{--hadi-glow:0 6px 24px rgba(31,116,240,.34),0 2px 12px rgba(20,177,148,.26)}

/* -- the floater: ONE clean line — ✦ + the typewriter, a thin Sky→Lagoon ring and a faint glow of the same hue -- */
.hf-card{display:flex;align-items:center;gap:4px;width:420px;max-width:100%;min-height:56px;padding:0 4px 0 18px;border-radius:999px;
  border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,
  linear-gradient(100deg,var(--neon),var(--lagoon),var(--neon)) border-box;background-size:100% 100%,220% 100%;
  box-shadow:var(--hadi-glow);animation:hglow 7s ease-in-out infinite}
@keyframes hglow{0%,100%{background-position:0 0,0% 0}50%{background-position:0 0,100% 0}}
.hf-s{flex:none;display:inline-flex;width:22px;height:22px}
.hf-s svg{width:22px;height:22px}
.hf-card .hpill-in{height:52px;font-size:15.5px;font-weight:600;color:var(--ink)}
.hf-card .hpill-in::placeholder{color:var(--ink-2);font-weight:600}
.hf-card .hpill-go{width:44px;height:44px}
.hf-card .hpill-go[hidden]{display:none}
.hf-card:focus-within{outline:0}

/* -- the panel: on the LEFT (like the floater) -- */
@media (min-width:700px){.hadi{left:0;right:auto;box-shadow:var(--float)}}

.hd-head{padding:10px 6px 10px 18px;border-bottom:1px solid var(--hair);
  /* round 16b (MSD's iPhone Air, 2026-09-27): full screen in the app, the head starts BELOW the status bar — the round-11
     padding had dropped the safe area, so the × sat under the battery icon and the title under "◀ TestFlight" */
  padding-top:max(10px,calc(var(--safe-t) + 6px));padding-right:max(6px,env(safe-area-inset-right,0px))}
.hd-id h2{font-size:18px;font-weight:800}
.hd-log{padding:16px}

/* -- welcome: the ✦ hero, "you're flying from", getting-started cards -- */
.hd-welcome{display:flex;flex-direction:column;min-height:100%}
.hd-hero{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 6px}
.hd-hero-s,.hd-hero-s svg{width:40px;height:40px;display:block}
.hd-hero-t{margin:0;font-size:30px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.hd-origin{align-self:center;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:transparent;
  color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.hd-origin-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.hd-origin b{color:var(--ink);font-weight:700}
.hd-origin svg{width:18px;height:18px;flex:none}
.hd-origin:hover{background:var(--chip)}
.hd-origin:focus-visible,.hd-card:focus-visible,.hd-more:focus-visible{outline:3px solid var(--neon);outline-offset:2px}
.hd-gs-h{display:flex;align-items:center;justify-content:space-between;margin:auto 0 8px;padding-top:28px}
.hd-gs-h h3{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.hd-more{min-height:44px;padding:0 6px;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer}
.hd-more:hover{color:var(--ink);text-decoration:underline}
.hd-cards{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hd-card{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:0;border-radius:14px;background:var(--surface-2);
  color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:background .15s}
.hd-card:hover{background:var(--neon-tint)}
.hd-card-i{flex:none;width:34px;height:34px;border-radius:10px;background:var(--neon-tint);color:var(--neon);display:inline-flex;align-items:center;justify-content:center}
.hd-card-i svg{width:19px;height:19px}
.hd-card-t{flex:1;min-width:0}

/* -- the input: one big calm box, then the privacy line and the disclaimer -- */
.hd-foot{flex:none;padding:10px 14px calc(10px + var(--safe-b));background:var(--surface)}
.hd-form{display:block;padding:10px 10px 8px 14px;border:1.5px solid var(--hair-2);border-radius:16px;background:var(--surface);border-top-width:1.5px}
.hd-form:focus-within{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(100deg,var(--neon),var(--lagoon)) border-box;box-shadow:var(--hadi-glow)}
.hd-in{display:block;width:100%;height:44px;padding:0;border:0;border-radius:0;background:transparent;font-size:16px}
.hd-in:focus{outline:0}
.hd-tools{display:flex;align-items:center;gap:4px}
.hd-grow{flex:1}
.hd-send{background:var(--chip);color:var(--ink-2);box-shadow:none}
.hd-send.ready{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--neon-tint)}
.hd-send:disabled{opacity:1}
.hd-priv{padding:8px 2px 0;background:transparent;border:0;color:var(--ink-2);font-size:12px}
.hd-disc{margin:4px 2px 0;font-size:12px;line-height:1.5;color:var(--ink-2);text-align:center}
.hd-disc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
@media (max-width:699px){.hd-disc a{display:inline-block;padding:15px 13px;margin:-15px -13px;line-height:14px;position:relative;min-width:44px;text-align:center}}   /* 44 px thumb targets, the line doesn't move */
@media (prefers-reduced-motion:reduce){.hf-card{animation:none}.hd-card{transition:none}}

/* ============================================================================
   ROUND 12 · Hadi as a real column (docs/DESIGN-V12.md) — KAYAK's structure, dCover's finish
   Header stays whole; at ≥1280 the panel is a column under it and the page's column narrows and reflows beside it.
   ========================================================================== */
:root{--hadi-w:380px;--hd-ease:cubic-bezier(.2,.8,.2,1);--hd-dur:.22s}
/* the header entry: "✦ হাদী", right of the logo, with the Harbour glow ring; pressed while the panel is open */
.askpill.hpk{gap:7px;padding:0 16px 0 12px;border:1.5px solid transparent;font-weight:700;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(100deg,var(--neon),var(--lagoon)) border-box;box-shadow:var(--hadi-glow)}
.askpill.hpk svg{width:18px;height:18px}
.askpill.hpk:hover{border-color:transparent;box-shadow:var(--hadi-glow),0 0 0 3px var(--neon-tint)}
.askpill.hpk[aria-pressed="true"]{background:linear-gradient(var(--neon-tint),var(--neon-tint)) padding-box,linear-gradient(100deg,var(--neon),var(--lagoon)) border-box;color:var(--neon-ink)}
.askpill.hpk:focus-visible{outline:3px solid var(--neon);outline-offset:2px}
@media (min-width:900px){.appbar.k .hpk{margin-inline-start:8px}}
@media (max-width:379px){.askpill.hpk span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.askpill.hpk{padding:0 12px}}

/* the panel: under the header, its own scroll, a hairline divider — no shadow slab when docked */
@media (min-width:700px){
  .hadi{top:var(--hd-top,64px);bottom:0;height:auto;width:var(--hadi-w);border-right:1px solid var(--hair);box-shadow:var(--float);
    transform:translateX(-100%);transition:transform var(--hd-dur) var(--hd-ease)}
  .hadi.on{transform:none}
}
@media (min-width:1280px){
  html.hadi-dock .hadi{box-shadow:none}
  body.app{transition:padding-left var(--hd-dur) var(--hd-ease)}
  .appbar{transition:margin-left var(--hd-dur) var(--hd-ease)}
  html.hadi-dock body.app{padding-left:var(--hadi-w);padding-right:0}
  html.hadi-dock .appbar{margin-left:calc(-1 * var(--hadi-w))}       
}
/* content fades in, one card after another (~40 ms apart) */
.hd-origin{--i:1}.hd-gs-h{--i:2}
.hadi.hd-anim .hd-hero,.hadi.hd-anim .hd-origin,.hadi.hd-anim .hd-gs-h,.hadi.hd-anim .hd-card,.hadi.hd-anim .hd-msg,.hadi.hd-anim .hd-foot{
  animation:hdfade .28s var(--hd-ease) both;animation-delay:calc(var(--i,0) * 40ms + 60ms)}
.hadi.hd-anim .hd-foot{--i:4}
@keyframes hdfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* dCover's finish on KAYAK's cards: the Harbour tint surface, a thin Sky hairline on hover */
.hd-card{background:var(--neon-tint);box-shadow:inset 0 0 0 1px transparent}
.hd-card:hover{background:var(--neon-tint);box-shadow:inset 0 0 0 1px var(--neon)}
.hd-card-i{background:var(--surface)}
@media (prefers-reduced-motion:reduce){
  .hadi,body.app,.appbar{transition:none!important}
  .hadi.hd-anim *{animation:none!important}
}
/* docked at 1280–1439 the page column is 900–1059 px: the round-8 narrow-laptop search row (two lines: From ⇄ To,
   then Dates · Travellers) instead of the one-row layout the window width would pick; the photos keep a slim column */
@media (min-width:1280px) and (max-width:1599px){
  html.hadi-dock .kform .sgroup{flex-wrap:wrap}
  html.hadi-dock .kform .places2{flex:1 1 100%}
  html.hadi-dock .kform .dtile,html.hadi-dock .kform .wtile,html.hadi-dock .sgroup .wtile{flex:1 1 auto;border-top:1px solid var(--hair-2)}
  html.hadi-dock .kform .sgroup>.dtile{border-inline-start:0}
  html.hadi-dock .hpanel{grid-template-columns:minmax(min-content,1fr) minmax(0,262px)}
}

/* ROUND 12b · the pill is the only resting state (no hide-to-button); during a Hadi search it shows the live status */
.hf-status{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 10px 0 4px;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:15px;font-weight:700;text-align:left;cursor:pointer}
.hf-status[hidden]{display:none}
.hf-status-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-status svg{width:18px;height:18px;flex:none;color:var(--ink-2)}
.hf-status:focus-visible{outline:3px solid var(--neon);outline-offset:2px;border-radius:999px}
.hfloat.status .hpill-in,.hfloat.status .hpill-go{display:none}

/* ============================================================================
   ROUND 13 · the hero photos drift, the phone destinations swipe, the ☰ drawer in dCover's brand (docs/DESIGN-V13.md)
   ========================================================================== */

/* phone destinations: a swipe row with a peek of the next card and a thin progress line */
.dprog{display:none}
@media (max-width:899px){
  .dgrid{margin:0 -16px;padding:0 16px 6px;gap:12px;scroll-padding:0 16px;overscroll-behavior-x:contain}
  .dgrid>li{width:min(70vw,260px)}
  .dprog{display:block;position:relative;height:3px;margin:12px auto 0;width:96px;border-radius:2px;background:var(--hair);overflow:hidden}
  .dprog i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:2px;background:var(--ink);transition:transform .15s linear}
}
@media (prefers-reduced-motion:reduce){.dprog i{transition:none}}

/* the ☰ drawer, in the brand: logo on top, sections, 48 px rows, the page you're on in the Harbour tint, Sky focus */
.sheet.brandnav .sheet-panel{width:min(86vw,340px);border-radius:0 18px 18px 0;animation:bnavin .24s cubic-bezier(.2,.8,.2,1)}
@keyframes bnavin{from{transform:translateX(-100%)}to{transform:none}}
.sheet.brandnav .sheet-scrim{animation:fadein .24s ease}
.sheet.brandnav .sheet-head{padding:12px 8px 12px 20px;border-bottom:1px solid var(--hair)}
.sheet.brandnav .sheet-head h2{display:flex;align-items:center}
.sheet.brandnav .sheet-body{padding:6px 12px 20px}
.dsec{margin:18px 10px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
:root[data-lang="bn"] .dsec{font-size:13px;letter-spacing:0;text-transform:none}
.drows{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.drow{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:600}
.drow:hover{background:var(--surface-2);text-decoration:none}
.drow.on{background:var(--neon-tint);color:var(--neon-ink);font-weight:700}
.drow .di{flex:none;width:22px;height:22px;display:inline-flex;color:var(--ink-2)}
.drow.on .di{color:var(--neon)}
.drow .di svg{width:22px;height:22px}
.drow .dt{flex:1;min-width:0}
.dsoon{flex:none;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink-2)}
.drow:focus-visible,.brandnav .segc button:focus-visible,.brandnav .sheet-x:focus-visible,.dfoot a:focus-visible{outline:3px solid var(--neon);outline-offset:2px}
.brandnav .segc{margin:0 4px}
.dfoot{margin:22px 10px 0;padding-top:14px;border-top:1px solid var(--hair);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.dfoot p{margin:0 0 4px}
.dfoot a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:13px 2px;margin:-13px -2px}
@media (prefers-reduced-motion:reduce){.sheet.brandnav .sheet-panel,.sheet.brandnav .sheet-scrim{animation:none}}

/* ============================================================================
   ROUND 14 · the departures board (MSD's pick from the hero lab) — one photo panel, a split-flap board that searches
   ========================================================================== */
@media (min-width:1200px){
  .collage.dboard{display:block;position:relative;padding:0;gap:0;overflow:visible;contain:size;min-width:0}
  .dboard .db-ph{position:absolute;top:24px;bottom:24px;left:0;right:24px;border-radius:28px;overflow:hidden;background:var(--surface-2)}
  .dboard .db-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
  .dboard .db-ph img.on{opacity:1}
  .dboard .db-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,19,22,0) 35%,rgba(18,19,22,.5))}
  .dboard .db-card{position:absolute;left:12px;right:36px;bottom:36px;display:block;padding:14px 14px 12px;border:0;border-radius:18px;background:#121316;color:#fff;
    text-align:left;font:inherit;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:box-shadow .2s}
  .dboard .db-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 0 2px var(--neon)}
  .dboard .db-card:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
  .dboard .db-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#a3a8b0}
  :root[data-lang="bn"] .dboard .db-top{letter-spacing:0;text-transform:none;font-size:12.5px}
  .dboard .db-top b{color:#fff;text-transform:none;letter-spacing:0;font-size:13px}
  .dboard .db-flaps{display:flex;flex-wrap:wrap;gap:6px;min-height:46px;perspective:400px}
  .dboard .flap{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:46px;padding:0 10px;border-radius:8px;
    background:linear-gradient(#26292f 49.5%,#1b1d22 50.5%);font-size:22px;font-weight:700;color:#fff;transform-origin:50% 50%;backface-visibility:hidden;white-space:nowrap}
  .dboard .flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6)}
  .dboard .flap.arrow{background:none;padding:0 2px;min-width:0;color:var(--lagoon)}
  .dboard .flap.arrow::after{display:none}
  .dboard .flap.out{transition:transform .16s ease-in;transform:rotateX(90deg)}
  .dboard .flap.in{transform:rotateX(-90deg)}
  .dboard .flap.in.go{transition:transform .2s ease-out;transform:none}
  .dboard .db-meta{display:flex;gap:8px;margin-top:10px}
  .dboard .m{flex:1;min-width:0;padding:6px 8px;border-radius:8px;background:#1f2126}
  .dboard .m small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#a3a8b0}
  :root[data-lang="bn"] .dboard .m small{font-size:11.5px;letter-spacing:0;text-transform:none}
  .dboard .m b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  .dboard .m-go b{color:var(--lagoon)}
  /* a narrow column (Hadi docked, 1280): a compact board — smaller flaps, no fare box */
  .dboard.narrow .db-card{left:10px;right:34px;bottom:34px;padding:12px 10px 10px}
  .dboard.narrow .flap{font-size:17px;height:38px;padding:0 7px;min-width:28px}
  .dboard.narrow .db-flaps{min-height:38px;gap:5px}
  .dboard.narrow .m-fare{display:none}
  .collage.dboard.off{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.dboard .flap,.dboard .db-ph img{transition:none!important}}

/* ============================================================================
   ROUND 15 · "সাথে আছি" — the vision, live (docs/DESIGN-VISION-V15.md; the mock was lab/vision.html)
   Tiro Bangla for Bengali display type only (unicode-range = the Bengali block; Latin falls through to Figtree).
   New: the headline + sub-line, the header presence (from ../api/site), three facts, the journey, "booking for
   someone", the with-you section (partners / team, from ../api/site), the dCover pass (reserved / held), the
   book-for-someone switch (reserve / hold). Tokens only; the Harbour neon stays Hadi's.
   ========================================================================== */
@font-face{font-family:"Tiro Bangla";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/TiroBangla-bengali.woff2") format("woff2");
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
.v15-display{font-family:"Tiro Bangla","Figtree","Noto Sans Bengali",sans-serif;font-weight:400;letter-spacing:0}
:root[data-lang="en"] .v15-display{font-weight:700;letter-spacing:-.01em}

/* the hero headline (the real h1; its copy comes from data-h-flights, so the tab logic still owns it) */
.h7.v15-display{font-size:46px;line-height:1.3;max-width:15em;margin-bottom:10px}
:root[data-lang="en"] .h7.v15-display{font-size:42px;line-height:1.2;max-width:14em}
.v15-sub{margin:0 0 26px;max-width:38em;font-size:17px;line-height:1.55;color:var(--text)}
:root[data-hometab="stays"] .v15-sub,:root[data-hometab="packages"] .v15-sub{display:none}
@media (max-width:899px){
  .h7.v15-display,:root[data-lang="en"] .h7.v15-display{position:static;width:auto;height:auto;clip:auto;white-space:normal;font-size:27px;line-height:1.3;margin:4px 16px 6px;max-width:none}
  .v15-sub{margin:0 16px 14px;font-size:14.5px}
}
@media (min-width:900px) and (max-width:1199px){.h7.v15-display{font-size:38px}}

/* header: who is on duty (../api/site) — hidden until the answer comes; never a made-up state */
.v15-presence{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:999px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.v15-presence[hidden]{display:none}
.v15-presence:hover{background:var(--chip);text-decoration:none}
.v15-presence:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.v15-presence .pd{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.v15-presence .pd::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ink);opacity:.35;animation:v15pulse 2.4s ease-out infinite}
.v15-presence.off .pd{background:transparent;border:1.5px solid var(--ink-2)}
.v15-presence.off .pd::after{display:none}
.v15-presence.off{color:var(--ink-2)}
.v15-presence .ps{color:var(--ink-2);font-weight:500}
.v15-presence .pn+.pc::before,.v15-presence .pc+.ps::before,.v15-presence .pn+.ps::before{content:"·";margin:0 6px}
.v15-presence .pn:empty,.v15-presence .pc:empty{display:none}
.v15-presence.off .ps::before{content:none}   /* off duty: just the hollow dot and the hours, no stray separator */
@keyframes v15pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@media (max-width:599px){.v15-presence .pn,.v15-presence .pc{display:none}.v15-presence .ps::before{content:none!important}.v15-presence{padding:0 8px}.v15-presence.off .ps{display:none}}
/* results on a phone: the header already carries the search summary on its own row and has no room for a fifth control
   without wrapping (360–390 px) — the presence stays on every other page */
@media (max-width:599px){body.rs .v15-presence{display:none}}

/* the search button's plane: takes off on press */
#s-go{display:inline-flex;align-items:center;justify-content:center;gap:7px;overflow:hidden}
#s-go .go-plane{flex:none;width:15px;height:15px;transition:transform .2s cubic-bezier(.4,0,1,1),opacity .2s}
#s-go.lift .go-plane{transform:translate(16px,-16px);opacity:0}

/* shared pieces of the new sections */
.v15-wrap{max-width:1260px;margin:0 auto;padding:0 16px}
@media (min-width:900px){.v15-wrap{padding:0 24px}}
.v15-h2{font-size:30px;line-height:1.3;margin:0;color:var(--ink)}
@media (min-width:900px){.v15-h2{font-size:38px}}
.v15-kicker{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 6px;font-size:14px;color:var(--ink-2)}
.v15-lead{margin:8px 0 0;max-width:42em;font-size:16px;line-height:1.55;color:var(--text)}
.v15-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;background:var(--chip);color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap}
.v15-sec{padding:56px 0 0}
@media (min-width:900px){.v15-sec{padding:88px 0 0}}
.v15-who{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.v15-who.is-you{border:1px solid var(--hair-2);color:var(--ink);background:var(--surface)}
.v15-who.is-hadi{background:var(--neon-tint);color:var(--neon-ink)}
.v15-who.is-hadi svg{width:12px;height:12px;color:var(--neon)}
.v15-who.is-human{background:var(--ink);color:var(--surface)}
.v15-mono{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:var(--chip);color:var(--ink);font-weight:700;overflow:hidden}
.v15-mono.tiro{font-family:"Tiro Bangla","Figtree","Noto Sans Bengali",sans-serif;font-weight:400}

/* three true facts */
.v15-facts{padding:40px 0 0}
@media (min-width:900px){.v15-facts{padding:56px 0 0}}
.v15-facts ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.v15-facts li{padding:18px 0 20px;border-bottom:1px solid var(--hair)}
.v15-facts b{display:block;font-size:22px;line-height:1.35;color:var(--ink)}
.v15-facts span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (min-width:900px){
  .v15-facts ul{grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:0}
  .v15-facts li{padding:22px 0 24px;border-top:1px solid var(--hair)}
  .v15-facts b{font-size:24px}
}

/* যাত্রার পথ — the journey: a dotted route the red plane follows as the page scrolls */
.v15-journey{position:relative}
.v15-jhead{margin-bottom:28px}
@media (min-width:900px){.v15-jhead{margin-bottom:36px;text-align:center}.v15-jhead .v15-lead{margin-left:auto;margin-right:auto}}
.v15-jbody{position:relative}
.v15-rail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.v15-rail .base{fill:none;stroke:var(--hair-2);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 8}
.v15-rail .done{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 8}
.v15-rail .reveal{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round}
.v15-rail .plane{fill:var(--accent)}
.v15-stops{list-style:none;margin:0;padding:8px 0 24px;display:grid;gap:22px}
.v15-stop{position:relative;padding-left:52px}
/* not yet reached: the card sits flat (no shadow, a hairline); text stays at full contrast — the dot and the rail carry the "not yet" */
.v15-stop:not(.on) .v15-card{box-shadow:none;border-color:var(--hair)}
.v15-stop .dot{position:absolute;left:14px;top:22px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--hair-2);box-sizing:border-box;transition:background .3s,border-color .3s,transform .3s}
.v15-stop.on .dot{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.v15-card{background:var(--surface);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--card-float);border:1px solid transparent;transition:box-shadow .45s ease,border-color .45s ease}
.v15-card .n{display:block;font-size:12px;letter-spacing:.06em;color:var(--ink-2);margin-bottom:6px;font-variant-numeric:tabular-nums}
.v15-card h3{margin:0 0 6px;font-size:22px;line-height:1.3;color:var(--ink)}
.v15-card p{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
.v15-card .whos{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
@media (min-width:900px){
  /* the desktop rhythm: alternating cards overlap by 72 px, so eight stops read as one story, not eight islands */
  .v15-stops{gap:0;padding:12px 0 32px}
  .v15-stop{width:calc(50% - 64px);padding-left:0}
  .v15-stop:nth-child(n+2){margin-top:-72px}
  .v15-stop:nth-child(odd){margin-right:auto}
  .v15-stop:nth-child(even){margin-left:auto}
  .v15-stop .dot{left:auto;top:26px;width:18px;height:18px}
  .v15-stop:nth-child(odd) .dot{right:-73px}
  .v15-stop:nth-child(even) .dot{left:-73px}
  .v15-card{padding:20px 22px 18px}
  .v15-card h3{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.v15-card{transition:none}.v15-stop .dot{transition:none}.v15-presence .pd::after{animation:none}#s-go .go-plane{transition:none}}

/* কারো জন্য বুক করছেন? */
.v15-for{display:grid;gap:24px;padding:28px;border-radius:24px;background:var(--surface);box-shadow:var(--card-float)}
@media (min-width:900px){.v15-for{grid-template-columns:1.1fr 1fr;gap:48px;padding:40px 44px;align-items:center}}
.v15-for .v15-h2{font-size:28px}
@media (min-width:900px){.v15-for .v15-h2{font-size:34px}}
.v15-for p{font-size:16px;line-height:1.6;color:var(--text)}
.v15-for .btnrow{margin-top:18px}
.v15-phone{position:relative;max-width:360px;margin:0 auto;padding:18px 16px 16px;border-radius:28px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.v15-phone .ph-top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-2);margin-bottom:12px}
.v15-phone .ph-top b{color:var(--ink);font-size:14px}
.v15-big{padding:16px 18px;border-radius:18px 18px 18px 6px;background:var(--surface);box-shadow:var(--card-float);font-size:20px;line-height:1.5;color:var(--ink)}
.v15-big b{display:block;font-size:26px;line-height:1.3;margin-bottom:8px}
.v15-big .v15-route{display:flex;align-items:center;gap:10px;font-family:"Figtree",sans-serif;font-weight:800;font-size:24px;letter-spacing:.02em;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.v15-big .v15-route svg{width:22px;height:22px;flex:none;fill:var(--accent)}
.v15-big .line{display:block;font-size:18px;line-height:1.45}
.v15-big .call{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--hair-2);font-size:16px}
.v15-big .call i{font-style:normal;display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--surface);align-items:center;justify-content:center;font-size:14px;flex:none}
.v15-phone .ph-note{margin:10px 2px 0;font-size:12px;color:var(--ink-2);text-align:center}

/* কারা আছেন আপনার পাশে — partners / team, from ../api/site (hidden when the desk hides it or the list is empty) */
.v15-with[hidden]{display:none}
.v15-team{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:640px){.v15-team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.v15-team{grid-template-columns:repeat(4,1fr);gap:20px}}
.v15-tm{padding:18px;border-radius:20px;background:var(--surface);box-shadow:var(--card-float);display:flex;flex-direction:column}
.v15-tm .v15-mono{width:100%;aspect-ratio:1/1;font-size:64px;border-radius:14px;position:relative}
.v15-tm .v15-mono img{width:100%;height:100%;object-fit:cover;display:block}
.v15-tm .v15-mono.logo{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair)}
.v15-tm .v15-mono.logo img{object-fit:contain;padding:18%}
.v15-tm .v15-mono .soon{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-family:var(--sans)}
.v15-tm b{display:block;margin-top:12px;font-size:18px;color:var(--ink)}
.v15-tm .kind{display:inline-block;margin:6px 0 0;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink-2);align-self:flex-start}
.v15-tm .city{display:block;font-size:14px;color:var(--ink-2)}
.v15-tm .langs{display:block;margin-top:8px;font-size:14px;color:var(--text)}
.v15-tm .hrs{display:block;margin-top:2px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.v15-tm .note{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--text)}
.v15-tm .btn{margin-top:auto;padding-top:0;align-self:flex-start;margin-top:14px}
.v15-office{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.v15-office b{color:var(--ink);font-weight:700}

/* dCover পাস — on reserved.html / held.html, real data; tilts with the pointer (≤6°) */
.v15-passsec{display:grid;gap:18px;align-items:start;margin-top:18px}
@media (min-width:900px){.v15-passsec{grid-template-columns:1fr 1fr;gap:40px;align-items:center}}
.v15-passwrap{perspective:1100px;padding:8px 0;touch-action:pan-y}
.v15-pass{position:relative;max-width:420px;margin:0 auto;background:var(--surface);border-radius:22px;box-shadow:var(--float);transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.v15-pass.live{transition:none}
.v15-pass .p-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px dashed var(--hair-2)}
.v15-pass .p-top img{width:26px;height:26px;display:block}
.v15-pass .p-top b{font-size:15px;color:var(--ink)}
.v15-pass .p-top .v15-tag{margin-left:auto}
.v15-pass .p-body{padding:16px 18px 6px}
.v15-pass .p-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.v15-pass .p-route b{font-family:"Figtree",sans-serif;font-size:34px;font-weight:800;letter-spacing:.02em;color:var(--ink);line-height:1}
.v15-pass .p-route small{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-2);font-family:var(--sans)}
.v15-pass .p-route .trail{position:relative;height:24px;border-top:2px dotted var(--hair-2);top:8px}
.v15-pass .p-route .trail svg{position:absolute;right:-4px;top:-14px;width:24px;height:24px;fill:var(--accent);transform:translateZ(18px)}
.v15-pass .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:18px}
.v15-pass .p-grid small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
:root[data-lang="bn"] .v15-pass .p-grid small{letter-spacing:0;text-transform:none;font-size:12px}
.v15-pass .p-grid b{display:block;font-size:15.5px;color:var(--ink);margin-top:2px;overflow-wrap:anywhere}
.v15-pass .p-status{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 12px;border-radius:999px;background:var(--chip);color:var(--ink);font-size:13px;font-weight:700}
.v15-pass .p-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.v15-pass .p-tear{position:relative;height:0;border-top:2px dashed var(--hair-2);margin:16px 0 0}
.v15-pass .p-tear::before,.v15-pass .p-tear::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.v15-pass .p-tear::before{left:-10px}.v15-pass .p-tear::after{right:-10px}
.v15-pass .p-stub{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 16px}
.v15-pass .p-stub .code{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ink-2)}
.v15-pass .p-stub .v15-who.is-hadi{background:linear-gradient(var(--neon-tint),var(--neon-tint)) padding-box,linear-gradient(100deg,var(--neon),var(--lagoon)) border-box;border:1.5px solid transparent}
.v15-pass .p-ai{padding:0 18px 14px;font-size:12px;color:var(--ink-2)}
.v15-passact{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.v15-passact .btn{min-height:44px}
.v15-passtxt h2{margin:0 0 6px;font-size:22px;color:var(--ink)}
.v15-passtxt p{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
@media (max-width:899px){.v15-passtxt{order:2}}

/* reserve / hold: booking for someone else */
.v15-forbox{margin-top:14px;padding:14px 14px 4px;border-radius:14px;background:var(--surface-2)}
.v15-forbox .chk{align-items:flex-start}
.v15-forbox .chk input{margin-top:3px}
.v15-forbox .field{margin-top:10px}
.v15-forbox .field[hidden]{display:none}
.v15-forbox .small{margin:6px 0 10px;color:var(--ink-2)}

/* the pass on the reservation / held pages sits above the plate; the credits page's type line */
.v15-passpage{margin:6px 0 30px}
.v15-passpage .v15-h2{font-size:26px}
.v15-passact [hidden]{display:none}
.credits-h2{font-size:20px;margin:26px 0 6px}
.credits-type{margin:0;max-width:60em}

/* ============================================================================
   ROUND 16 · the APP SHELL (MSD 2026-09-27: "the app feeling is not coming … Hadi is always on, it blocks the view …
   everything feels like the website"). Only under html.app-shell — the iPhone/iPad app and the Home Screen web app
   (shell.js decides). The website is untouched. One new token, geometry: the tab bar's height.
   ========================================================================== */
:root{--dtab-h:58px}

/* -- the tab bar: five places, Hadi in the middle. Translucent over the page, one hairline, the home indicator clear -- */
.dtabs{display:none}
html.app-shell .dtabs{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
  border-top:1px solid var(--hair);padding:0 env(safe-area-inset-right,0px) var(--safe-b) env(safe-area-inset-left,0px);view-transition-name:dc-tabs}
html.app-shell.hadi-dock .dtabs{left:var(--hadi-w)}
.dtab-in{max-width:600px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);height:var(--dtab-h)}
.dtab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:6px 2px 4px;
  border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:11px;font-weight:600;line-height:1.1;text-decoration:none;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root[data-lang="bn"] .dtab{font-size:12px;font-weight:500}
.dtab:hover{text-decoration:none;color:var(--ink)}
.dtab .dtab-i{position:relative;display:block;width:26px;height:26px}
.dtab .dtab-i svg{width:26px;height:26px;display:block}
.dtab.on{color:var(--ink)}
.dtab.on .dtab-i svg{stroke-width:2.4}
.dtab.on::before{content:"";position:absolute;top:0;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:0 0 3px 3px;background:var(--accent)}
.dtab:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:12px}
.dtab .badge{position:absolute;top:-4px;left:17px;min-width:18px;height:18px;border-radius:9px;padding:0 5px;background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:700;line-height:18px;text-align:center}
.dtab .badge[hidden]{display:none}
/* Hadi: the one lit thing in the bar — the ink orb with the Harbour spark, the same face as Hadi's own header */
.dtab-hadi{color:var(--ink)}
.dtab-orb{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:999px;background:var(--ink);color:var(--neon);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--neon-tint),var(--hadi-glow)}
.dtab-orb svg{width:18px;height:18px;display:block}
.dtab-orb svg path{fill:url(#dtab-g)}
html.hadi-open .dtab-hadi .dtab-orb{background:var(--neon);color:#fff}
/* a Hadi search running while Hadi is closed: the orb breathes (the status itself is in Hadi) */
html.hadi-busy .dtab-orb::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--neon);opacity:0;animation:dtab-pulse 1.6s ease-out infinite}
@keyframes dtab-pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.25);opacity:0}}

/* room under the page for the bar; a task in progress (searching, reserve, hold, pay) hides it — its own action bar is there */
html.app-shell body.app{padding-bottom:calc(var(--dtab-h) + var(--safe-b) + 16px)}
html.app-shell body.app.has-action{padding-bottom:calc(var(--actionbar-h) + var(--safe-b) + 8px)}
html.app-shell.shell-flow .dtabs{display:none}
html.app-shell.shell-flow body.app:not(.has-action){padding-bottom:calc(var(--safe-b) + 16px)}
html.app-shell .toast{bottom:calc(var(--dtab-h) + var(--safe-b) + 14px)}
html.app-shell.shell-flow .toast{bottom:calc(var(--actionbar-h) + var(--safe-b) + 14px)}

/* -- the top bar: the logo, the person on duty, and ‹ back on inner pages. The menu, Hadi and My trips live in the tab bar -- */
html.app-shell .appbar{view-transition-name:dc-appbar;background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px)}
html.app-shell .appbar [data-menu],html.app-shell .appbar .askpill,html.app-shell .appbar .tripslink{display:none}
html.app-shell .appbar .in{min-height:52px;padding:0 10px 0 6px;gap:4px}
html.app-shell .appbar .brand{padding-inline-start:6px}
html.app-shell .appbar .brand-logo{height:24px}
html.app-shell .shell-back{margin-inline-end:-4px}
html.app-shell .shell-back svg{width:24px;height:24px}
.shell-back{display:none}
html.app-shell .shell-back{display:inline-flex}
/* the page itself shows under the bouncing edges, not a white band */
html.app-shell{background:var(--bg)}

/* -- no floating Hadi pill in the app: Hadi is the centre tab. Its sheet opens full screen; "minimise" is just close -- */
html.app-shell .hfloat{display:none!important}
html.app-shell #hd-min{display:none}
html.app-shell.hadi-float body.app{padding-bottom:calc(var(--dtab-h) + var(--safe-b) + 16px)}

/* -- no website footer: the legal pages and "Powered by Digents" are in আরও (the menu) -- */
html.app-shell body.app .foot,html.app-shell body.app.show-foot .foot{display:none}
html.app-shell .skip{display:none}

/* -- home: search first. The story sections (facts, the journey, for the family, who is with you, stays) belong to the
   website; the app opens on the search, recent searches and places -- */
html.app-shell .home7 > .v15-facts,
html.app-shell .home7 > .v15-sec,
html.app-shell .home7 .sec7:has(.sgrid),
html.app-shell .home7 .v15-sub{display:none}
@media (max-width:899px){
  html.app-shell .home7 .hero7{padding-top:14px}
  html.app-shell .home7 .h7{font-size:26px;line-height:1.3;margin-bottom:14px}
  html.app-shell .home7 .vtiles{display:flex;gap:8px;margin-bottom:14px}
  html.app-shell .home7 .vtile{flex-direction:row;gap:6px;min-height:40px;padding:0 14px 0 8px;border-radius:999px;background:var(--surface);
    box-shadow:0 0 0 1px var(--hair-2);font-size:14px}
  html.app-shell .home7 .vtile .vi{width:26px;height:26px;border-radius:999px;background:transparent;box-shadow:none}
  html.app-shell .home7 .vtile .vi svg{width:18px;height:18px}
  html.app-shell .home7 .vtile.on{background:var(--ink);color:var(--surface);box-shadow:none}
  html.app-shell .home7 .vtile.on .vi{background:transparent;color:var(--surface)}
}

/* -- native touch: things you press dim or give a little; long-press doesn't pop up link previews on controls -- */
html.app-shell :is(button,a,label,.dtab,.dcard,.scard,.fare,.vtile){-webkit-touch-callout:none}
html.app-shell :is(button,.btn,.dtab,.vtile,.drow,.row,.chip,.qchip):active{opacity:.62;transition:opacity 0s}
html.app-shell :is(.dcard,.fare,.db-card):active{transform:scale(.98);transition:transform .08s}
html.app-shell :is(button,.btn,.dtab,.vtile,.drow,.row){transition:opacity .18s}
html.app-shell .dtab-hadi:active .dtab-orb{transform:scale(.92)}

/* -- moving between pages: push slides in from the side, Back slides out, tabs fade. The bars stay put.
   (The @view-transition opt-in itself is added by shell.js, in the app only.) -- */
::view-transition-group(dc-appbar),::view-transition-group(dc-tabs){animation-duration:0s}
::view-transition-old(dc-appbar),::view-transition-new(dc-appbar){animation-duration:.18s}
html.vt-push::view-transition-old(root){animation:vt-out-l .34s cubic-bezier(.2,.8,.2,1) both}
html.vt-push::view-transition-new(root){animation:vt-in-r .34s cubic-bezier(.2,.8,.2,1) both}
html.vt-back::view-transition-old(root){animation:vt-out-r .3s cubic-bezier(.2,.8,.2,1) both;z-index:2}
html.vt-back::view-transition-new(root){animation:vt-in-l .3s cubic-bezier(.2,.8,.2,1) both}
html.vt-tab::view-transition-old(root){animation:vt-fade-out .16s ease both}
html.vt-tab::view-transition-new(root){animation:vt-fade-in .2s ease both}
@keyframes vt-in-r{from{transform:translateX(100%)}to{transform:none}}
@keyframes vt-out-l{from{transform:none;opacity:1}to{transform:translateX(-28%);opacity:.6}}
@keyframes vt-in-l{from{transform:translateX(-28%);opacity:.6}to{transform:none;opacity:1}}
@keyframes vt-out-r{from{transform:none}to{transform:translateX(100%)}}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.hadi-busy .dtab-orb::after{animation:none;opacity:.8;transform:none}
}

/* -- আরও opens the menu the app way: a sheet that rises from the tab bar (a website opens it as the ☰ side drawer) -- */
html.app-shell .sheet.drawer{justify-content:center;align-items:flex-end}
html.app-shell .sheet.drawer .sheet-panel{width:100%;height:auto;max-height:88dvh;border-radius:20px 20px 0 0;animation:sheetup .26s cubic-bezier(.2,.8,.2,1)}
html.app-shell .sheet.drawer .sheet-body{padding-bottom:calc(18px + var(--safe-b))}
@media (min-width:700px){
  html.app-shell .sheet.drawer{padding:0 0 calc(var(--dtab-h) + var(--safe-b) + 10px)}
  html.app-shell .sheet.drawer .sheet-panel{width:min(480px,100%);max-height:min(80vh,760px);border-radius:20px}
}

/* -- the person on duty, in words: the app's top bar has room once ☰, Hadi and My trips moved to the tab bar —
   "● Rafiq · online". Off duty the header shows nothing (v2-site.js; MSD 2026-09-27: no hours on screen) -- */
@media (max-width:599px){
  html.app-shell .v15-presence{font-size:13px;gap:6px;padding:0 6px}
  html.app-shell .v15-presence .pn{display:inline}
  html.app-shell .v15-presence .pn+.ps::before{content:"·"!important;margin:0 5px}
}

/* ============================================================================
   ROUND 17 · results like KAYAK's (MSD 2026-09-27: "too much junk — the airline logos are invisible, and that matters").
   The logo is the airline's SYMBOL on its own colour (v2.js), shown whole and bare — no pale tile, no inner padding;
   the card is times, airports, duration and stops, then airline and price. Bags, change and refund fees and the no-bag
   alternative are one tap away in the fare detail. The list head is the count and the sort.
   ========================================================================== */
.al-logo:not(.badge){background:transparent;border:0}
.al-logo:not(.badge) img,.fare.k .al-logo.xs:not(.badge) img{width:100%;height:100%;object-fit:cover}
.kc-leg{grid-template-columns:36px auto minmax(0,1fr) auto}
.kc-leg.ret{grid-template-columns:36px minmax(0,1fr)}
.fare.k .al-logo.xs{width:36px;height:36px;border-radius:9px}
.fare.k .al-logo.xs.badge{font-size:12px}
@media (min-width:600px){
  .kc-leg{grid-template-columns:42px auto minmax(0,1fr) auto}
  .kc-leg.ret{grid-template-columns:42px minmax(0,1fr)}
  .fare.k .al-logo.xs{width:42px;height:42px;border-radius:10px}
}
#howbar[hidden]{display:none}

/* UAT only (the server says "sample"): one plain strip under the top bar on every page — invented fares never look real */
.samplestrip{margin:0;padding:8px 16px;background:#fff4d6;color:#4a3500;font-size:13.5px;font-weight:600;text-align:center;border-bottom:1px solid #f0d58a}
:root[data-theme="dark"] .samplestrip{background:#3a2e0a;color:#ffe7a3;border-color:#5a4712}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .samplestrip{background:#3a2e0a;color:#ffe7a3;border-color:#5a4712}}

/* fare types are choices (MSD 2026-09-27): one radio card per type — name, what's included, the price */
.ftypes{display:grid;gap:8px}
.ftopt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:start;border:1.5px solid var(--hair-2);border-radius:12px;
  padding:12px;cursor:pointer;background:var(--surface)}
.ftopt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.ftopt .ftx{min-width:0;display:flex;flex-direction:column;gap:3px}
.ftopt b{font-size:15.5px;color:var(--ink)}
.ftopt .fs{font-size:13px;color:var(--ink-2);line-height:1.45}
.ftopt .fp{font-weight:700;font-variant-numeric:tabular-nums;font-size:16px;color:var(--ink);white-space:nowrap}
.ftopt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ftopt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* round trips — choose your return (MSD 2026-09-27): the same radio cards as the fare types, times first, the difference right */
.rt-sub{margin:-4px 0 10px;font-size:13.5px;color:var(--ink-2)}
.rtypes{display:grid;gap:8px}
.rtopt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:start;border:1.5px solid var(--hair-2);border-radius:12px;
  padding:12px;cursor:pointer;background:var(--surface)}
.rtopt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.rtopt .rtx{min-width:0;display:flex;flex-direction:column;gap:4px}
.rtopt b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.rtopt b sup{font-size:11px;color:var(--ink-2);margin-inline-start:1px}
.rtopt .fs{font-size:13px;color:var(--ink-2);line-height:1.45}
.rtopt .fp{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink);white-space:nowrap}
.rtopt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.rtopt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.rt-tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700}
.rt-tag.warn{background:#fdecec;color:#8a1c1c}
.rt-tag.good{background:#e6f6ef;color:#0f5c3a}
:root[data-theme="dark"] .rt-tag.warn{background:#3a1616;color:#ffb3b3}
:root[data-theme="dark"] .rt-tag.good{background:#0f2e22;color:#9fe3c2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rt-tag.warn{background:#3a1616;color:#ffb3b3}:root:not([data-theme="light"]) .rt-tag.good{background:#0f2e22;color:#9fe3c2}}
.rt-wait{display:flex;align-items:center;gap:10px;margin:0;padding:12px;border-radius:12px;background:var(--chip);color:var(--ink);font-size:14px}
.rt-wait .spin{flex:none}
.rt-fail{margin:0;padding:12px;border-radius:12px;background:var(--chip);color:var(--ink);font-size:14px;line-height:1.5}
.rt-sample{margin:0 0 8px;font-size:12.5px;font-weight:700;color:#4a3500;background:#fff4d6;border-radius:8px;padding:6px 10px;display:inline-block}
.rt-note{margin:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.linkbtn{border:0;background:none;padding:6px 2px;margin:-6px 0;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;min-height:44px}
.fsum .rtline{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.fsum .rtline b{color:var(--ink)}
.rtopt .rt-air{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.rtopt .rt-air .al-logo.xs{width:22px;height:22px;border-radius:6px}