/* ─── assets/travel.css ─── Travel mode on Today. The rail's vocabulary throughout
   (widget tiles, mono overlines, row-tag chips, tt-rows); the pearl material for
   fills; one new component, the flight card / progress line. Order and behaviour
   per Haseeb, 5 Sep 2026. ─────────────────────────────────────────────────── */
.trv-page{display:none}
html.travel .trv-page{display:flex;flex-direction:column;gap:18px;padding:28px 0 8px}
html.travel .tg-right{display:none}
html.travel .today-grid{grid-template-columns:1fr}
html.travel .tg-left{padding-right:0}
.trv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.trv-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.trv-h1{font-weight:500;font-size:clamp(24px,3.2vw,36px);letter-spacing:-0.02em;line-height:1.05;text-wrap:balance;margin-top:8px}
.trv-h1 em{font-style:normal;color:#DDD9FF}
.trv-refresh{font:inherit;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--border-hi);border-radius:999px;padding:5px 12px;color:var(--muted);cursor:pointer}
.trv-refresh:hover{color:var(--text)}
.trv-refresh.busy{animation:pulse 1.2s ease-in-out infinite}
.trv-tile{display:flex;flex-direction:column;gap:12px}
.trv-tile .widget-label{margin-bottom:4px}
.trv-tile .widget-label .pill{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--border-hi);color:var(--muted);white-space:nowrap;font-weight:400}
.trv-tile .widget-label .pill.live{border-color:rgba(221,217,255,.5);color:#DDD9FF}
.trv-tile .widget-label .pill.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#DDD9FF;margin-right:6px;box-shadow:0 0 8px #DDD9FF;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.trv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--tile-pad,18px)}
.trv-grid .c4{grid-column:span 4}.trv-grid .c5{grid-column:span 5}.trv-grid .c3{grid-column:span 3}.trv-grid .c6{grid-column:span 6}
@media(max-width:900px){.trv-grid .c4,.trv-grid .c5,.trv-grid .c3,.trv-grid .c6{grid-column:span 12}}
.trv-empty{font-family:var(--mono);font-size:var(--chip-font,10.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:6px 0}
/* ── NEXT MOVE: glyph · time · action, the live one bigger; a Done disc confirms ── */
.mv-row{display:grid;grid-template-columns:18px 52px 1fr auto;align-items:center;gap:12px;padding:8px 0}
.mv-row svg{width:14px;height:14px;fill:var(--dim);justify-self:center}
.mv-row .tm{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--dim)}
.mv-row .act{min-width:0}
.mv-row .verb{font-size:15px;color:var(--muted);line-height:1.3}
.mv-row.live{grid-template-columns:1fr auto;align-items:start;padding:4px 0 10px}
.mv-row.live .lhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mv-row.live svg{width:15px;height:15px;fill:var(--text);justify-self:start}
.mv-row.live .tm{font-size:15px;color:var(--text)}
.mv-row.live .verb{font-size:clamp(20px,2.6vw,26px);font-weight:500;letter-spacing:-0.015em;color:var(--text);line-height:1.15;text-wrap:balance}
.mv-row.live .detail{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px;line-height:1.7}
.mv-side{display:flex;align-items:center;gap:12px}
.mv-count{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.mv-count.soon{color:#DDD9FF}.mv-count.warn{color:var(--over)}
.mv-done{width:40px;height:40px;border-radius:50%;border:2px solid var(--border-hi);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),transform .12s var(--ease)}
.mv-done svg{width:14px;height:14px;fill:var(--dim)}
.mv-done:hover{border-color:var(--muted)}.mv-done:active{transform:scale(.9)}
.mv-done.hit{background:linear-gradient(135deg,var(--done),#86EFAC);border-color:transparent}.mv-done.hit svg{fill:var(--bg)}
.mv-act{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.mv-act[hidden]{display:none}
.mv-act a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid var(--border-hi);color:var(--text);text-decoration:none}
.mv-act a.primary{background:var(--text);color:var(--bg);border-color:transparent;font-weight:700}
.mv-more{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-top:10px;background:none;border:0;border-top:1px solid var(--border);cursor:pointer;color:var(--dim)}
.mv-more[hidden]{display:none}
.mv-more svg{width:12px;height:12px;fill:currentColor;transition:transform .25s var(--ease)}
.mv-more.open svg{transform:rotate(180deg)}
.mv-then{display:none;padding-top:2px}.mv-then.open{display:block}
.mv-then .mv-row .verb,.mv-then .mv-row .tm{color:var(--dim)}.mv-then .mv-row svg{fill:var(--dim)}
.mv-steps{display:flex;align-items:center;gap:5px;margin-top:16px;flex-wrap:wrap}
.mv-steps i{width:16px;height:3px;border-radius:2px;background:var(--faint)}
.mv-steps i{cursor:pointer}.mv-steps i.done{background:var(--dim)}.mv-steps i.on{background:#DDD9FF;box-shadow:0 0 8px rgba(221,217,255,.5)}.mv-steps i.now{background:#DDD9FF;opacity:.5}
.mv-nav{width:26px;height:26px;border-radius:50%;border:1px solid var(--border-hi);background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color .2s var(--ease),border-color .2s var(--ease)}
.mv-nav svg{width:9px;height:9px;fill:currentColor}.mv-nav:hover{color:var(--text);border-color:var(--muted)}.mv-nav:disabled{opacity:.3;cursor:default}
.mv-nav.prev{margin-right:6px}.mv-nav.next{margin-left:6px}
.mv-then .mv-row{cursor:pointer;border-radius:10px}.mv-then .mv-row:hover .verb{color:var(--muted)}
.mv-side .st{cursor:pointer;background:transparent}
.trv-map .widget-label .st{font-size:10px}
.mv-steps span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-left:8px}
@media(max-width:560px){.mv-row{grid-template-columns:20px 48px 1fr auto;gap:10px}.mv-count{display:none}}
/* the boarding pass: a ticket — body, perforated tear, stub; one per traveller, swipe */
.mv-pass{margin:10px 0 6px}.mv-pass[hidden]{display:none}
.bp-wrap{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;touch-action:pan-x pan-y;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 4px}
.bp-wrap::-webkit-scrollbar{display:none}
.bp{position:relative;display:grid;grid-template-columns:1fr 140px;background:var(--card-hi);border:1px solid var(--border-hi);border-radius:18px;flex:0 0 100%;scroll-snap-align:start}
.bp::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#DDD9FF,#FFD9EE 50%,#D5F6FF)}
.bp-main{padding:16px 18px 16px 22px;min-width:0}
.bp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bp-head b{color:var(--muted);font-weight:400}
.bp-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:12px 0 4px}
.bp-route .code{font-family:var(--mono);font-size:30px;letter-spacing:-0.03em;line-height:1}
.bp-route .code small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:5px}
.bp-route .code.to{text-align:right}
.bp-route .line{position:relative;height:14px}
.bp-route .line::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px dashed var(--border-hi)}
.bp-route .line svg{position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;fill:var(--muted);background:var(--card-hi);padding:0 2px;box-sizing:content-box}
.bp-grid{display:grid;grid-template-columns:repeat(4,auto);gap:10px 22px;margin-top:14px}
.bp-grid .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bp-grid .v{font-family:var(--mono);font-size:14px;margin-top:3px;white-space:nowrap}.bp-grid .v.big{font-size:18px}
.bp-name{grid-column:1/-1;font-size:13px;font-weight:500;letter-spacing:-0.01em;margin-top:10px}
.bp-stub{position:relative;padding:16px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.bp-stub .sq{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;line-height:1.7}
.bp-stub .sq b{display:block;color:var(--text);font-weight:400;font-size:14px;letter-spacing:0}
.bp-mail{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid var(--border-hi);color:var(--text);text-decoration:none}
.bp-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.bp-dots i{width:6px;height:6px;border-radius:50%;background:var(--faint)}.bp-dots i.on{background:#DDD9FF}
.bp-who{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center;margin-top:6px}.bp-who b{color:var(--muted);font-weight:400}
@media(max-width:600px){.bp{grid-template-columns:1fr}.bp-stub{flex-direction:row;justify-content:space-between;padding:4px 18px 14px 22px}
  .bp-grid{grid-template-columns:repeat(2,1fr);gap:10px 16px}.bp-route .code{font-size:26px}}
/* ── MAP ── */
.trv-map{position:relative;min-height:440px}
.trv-map canvas{position:absolute;inset:0;width:100%;height:100%;cursor:default;touch-action:none}
.trv-map canvas.hit{cursor:pointer}
.trv-map .widget-label{position:absolute;top:18px;left:18px;right:18px;margin:0;z-index:2}
.trv-map-tile{padding:0!important;overflow:hidden}
@media(max-width:640px){.trv-map{min-height:330px}}
/* ── PROGRESS LINE ── */
.pl{position:relative;padding:8px 10px 48px}
.pl-count{text-align:center;margin-bottom:22px}
.pl-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.roll{display:inline-flex;justify-content:center;font-family:var(--mono);font-size:30px;letter-spacing:-0.02em;text-transform:uppercase;color:var(--text);line-height:1;height:1em}
.roll .slot{display:inline-block;overflow:hidden;height:1em;line-height:1;width:.64em;text-align:center}.roll .slot.sp{width:.36em}
.roll .strip{display:block;transition:transform .5s var(--ease);will-change:transform}.roll .d{display:block;height:1em;line-height:1}
.pl-line{position:relative;height:56px}
.pl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.pl-svg .track{fill:none;stroke:var(--faint);stroke-width:3;stroke-linecap:round}
.pl-svg .fill{fill:none;stroke:url(#plGrad);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 100;filter:drop-shadow(0 0 5px rgba(221,217,255,.32));transition:stroke-dasharray .25s linear}
.pl-svg .dim{fill:none;stroke:var(--card);stroke-width:5;opacity:.62;pointer-events:none}
.pl-node{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--card);border:1.5px solid rgba(250,250,250,.4);cursor:pointer;transition:transform .2s var(--ease),border-color .3s var(--ease);z-index:2}
.pl-node.stop{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:1px;transform:rotate(45deg)}
.pl-node.past,.pl-node.anchor{background:#FAFAFA;border-color:#FAFAFA}
.pl-node::after{content:"";position:absolute;inset:-9px}
.pl-head{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;z-index:3;transition:left .25s linear,top .25s linear;box-shadow:0 0 6px 2px rgba(255,255,255,.9),0 0 18px 6px rgba(221,217,255,.55);animation:plBreathe 1.6s ease-in-out infinite}
@keyframes plBreathe{50%{box-shadow:0 0 8px 3px rgba(255,255,255,.95),0 0 26px 10px rgba(221,217,255,.7);transform:scale(1.15)}}
.trv-map-head{position:absolute;top:auto;margin:-4.5px 0 0 -4.5px;pointer-events:none}.trv-map-head[hidden]{display:none}
.pl-lab{position:absolute;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);white-space:nowrap;line-height:1.6}
.pl-lab b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.pl-lab.start{transform:none}.pl-lab.end{transform:translateX(-100%);text-align:right}
@media(prefers-reduced-motion:reduce){.pl-head,.trv-tile .widget-label .pill.live::before{animation:none}}
@media(max-width:640px){.roll{font-size:26px}}
/* ── AGENT ── */
/* ── clocks · itinerary · stay · travellers ── */
.trv-clocks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.trv-clocks .clock{text-align:center}.trv-clocks .clock svg{width:100%;max-width:84px;height:auto}
.trv-clocks .clock .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.trv-clocks .clock .t{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums}
@media(max-width:640px){.trv-clocks{gap:4px}.trv-clocks .clock .t{font-size:13px}.trv-clocks .clock .n{font-size:8.5px}}
.leg-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}
.leg-row:first-child{border-top:0}.leg-row b{color:var(--muted);font-weight:400}.leg-row.done b{color:var(--dim)}
.leg-row .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}.leg-row.done .dot{background:var(--dim)}
.st{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--border-hi);color:var(--muted);white-space:nowrap}
.st.ok{color:var(--done);border-color:rgba(74,222,128,.4)}.st.warn{color:var(--over);border-color:rgba(248,113,113,.4)}.st.live{color:#DDD9FF;border-color:rgba(221,217,255,.45)}
.trv-stay .name{font-size:18px;font-weight:500;letter-spacing:-0.02em;line-height:1.15}
.trv-stay .name a{color:inherit;text-decoration:none}
.trv-stay .addr{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.trv-stay .dates{display:flex;gap:10px;margin-top:14px}.trv-stay .d{border:1px solid var(--border-hi);border-radius:14px;padding:10px 12px;flex:1}
.trv-stay .d .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.trv-stay .d .v{font-family:var(--mono);font-size:13px;margin-top:3px}
.trv-pax{display:flex;flex-direction:column;gap:10px}
.trv-pax .p{display:flex;align-items:center;gap:12px;font-size:13px}
.trv-pax .av{width:32px;height:32px;border-radius:50%;background:var(--card-hi);border:1px solid var(--border-hi);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:#DDD9FF;flex:0 0 auto}
.trv-pack{display:flex;flex-direction:column;gap:var(--card-gap,6px);margin-top:4px}
.trv-pack .tt-row{max-width:none;min-height:34px;padding:6px 10px}
.trv-pack .tt-row.done .tt-row-name{text-decoration:line-through;color:var(--dim)}
/* ── node modal: the house modal's chrome ── */
.trv-nm-veil{position:fixed;inset:0;background:rgba(8,8,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:9050;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.trv-nm-veil.on{opacity:1;pointer-events:auto}
.trv-nm{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow-y:auto;background:var(--card);border:1px solid var(--border-hi);border-radius:24px;padding:26px;z-index:9051;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.trv-nm.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.trv-nm .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#DDD9FF;margin-bottom:6px}
.trv-nm .iata{font-family:var(--mono);font-size:44px;letter-spacing:-0.03em;line-height:1}
.nm-gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:18px 0}
.nm-gates .gate{border:1px solid var(--border-hi);border-radius:16px;padding:12px 14px;background:var(--card-hi);display:flex;flex-direction:column;gap:4px}
.nm-gates .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.nm-gates .v{font-family:var(--mono);font-size:26px;line-height:1}.nm-gates .v.p{color:#DDD9FF}.nm-gates .v.c{color:#22D3EE}
.nm-sec{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.nm-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.nm-row b{color:var(--text);font-weight:500;text-align:right}
.nm-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.nm-act a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid var(--border-hi);color:var(--text);text-decoration:none}
.nm-act a.primary{background:var(--text);color:var(--bg);border-color:transparent;font-weight:700}

/* ── travel agent (embedded ClientChat) ── */
.trv-chat{height:min(72vh,680px);min-height:420px}
.trv-chat .cc-embed{min-height:0;height:100%}
.trv-chat .cc-embed:not(.cc-no-chrome){background:transparent;border:none;border-radius:0}
.trv-empty{color:var(--dim);font-size:13px;margin:0}
@media(max-width:640px){.trv-chat{height:min(70vh,560px);min-height:360px}}

/* ── dummy mode + the new-trip state ── */
.trv-page.trv-none .trv-tile:not(.trv-agent),.trv-page.trv-none .trv-map-tile,.trv-page.trv-none .trv-grid{display:none}
.trv-sub{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5}
.sd-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sd-links a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border-hi);border-radius:999px;padding:5px 10px;text-decoration:none}
.sd-links a:hover{color:var(--text)}

/* ── legs: one journey at a time on the map and the line ── */
.wl-right{display:inline-flex;align-items:center;gap:10px}
.leg-nav{display:inline-flex;align-items:center;gap:6px}.leg-nav:empty{display:none}
.leg-nav .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.leg-nav .mv-nav{width:24px;height:24px}
.stay-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.stay-row:first-child{border-top:0;padding-top:0}
.stay-row .nm{font-size:14px;color:var(--text);line-height:1.25}.stay-row .nm a{color:inherit;text-decoration:none}.stay-row.past .nm{color:var(--dim)}
.stay-row .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap}

/* ── desktop: the node opens as a right-hand drawer, the map stays in view ── */
@media(min-width:641px){
  .trv-nm{left:auto;right:0;top:0;bottom:0;transform:translateX(100%);width:min(440px,42vw);max-height:none;border-radius:0;border-width:0 0 0 1px;padding:32px 30px;transition:transform .42s var(--ease),opacity .25s var(--ease)}
  .trv-nm.on{transform:translateX(0)}
  .trv-nm-veil{background:rgba(8,8,10,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
  .trv-nm .iata{font-size:56px;margin-bottom:4px}
}