/* ============ China 2026 ============ */

:root{
  color-scheme:dark;
  --bg:#130d15;
  --bg2:#1a1119;
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.06);
  --card:rgba(255,255,255,.04);
  --card2:rgba(255,255,255,.07);
  --text:#f4ecf0;
  --mut:#a99daa;
  --mut2:#7f7381;

  --rose:#ff9ebb;
  --rose-d:#e0688d;
  --blush:#ffd3e0;
  --peach:#ffb182;
  --gold:#f2c98d;
  --mint:#86dcc2;
  --lilac:#cbabf7;

  /* the cyberpunk half of the brief — electric accents used sparingly,
     for glow and edges rather than large fills */
  --neon-pink:#ff6ec7;
  --neon-cyan:#60e8ff;
  --glow-pink:0 0 18px rgba(255,110,199,.42);
  --glow-cyan:0 0 18px rgba(96,232,255,.34);

  --r:20px;
  --rs:14px;
  --shadow:0 22px 60px -26px rgba(0,0,0,.85);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100vh;
}
.zh{font-weight:500;letter-spacing:.02em}
.wrap{width:min(1280px,100% - 40px);margin-inline:auto}
@media(max-width:640px){.wrap{width:min(1280px,100% - 22px)}}

.glow{position:fixed;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:0;opacity:.45}
.g1{width:640px;height:640px;top:-280px;left:-180px;background:radial-gradient(circle,rgba(255,158,187,.55),transparent 68%)}
.g2{width:700px;height:700px;top:200px;right:-300px;background:radial-gradient(circle,rgba(203,171,247,.4),transparent 68%)}

/* ---------- HERO ---------- */
.hero{position:relative;z-index:1;padding:34px 0 18px;
  background:linear-gradient(180deg,rgba(255,158,187,.08),transparent 72%)}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{display:flex;gap:16px;align-items:center}
.lantern{font-size:44px;line-height:1;filter:drop-shadow(0 0 22px rgba(255,158,187,.8));animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}}
h1{font-size:clamp(32px,5.5vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1}
h1 .zh{background:linear-gradient(100deg,var(--blush),var(--rose) 45%,var(--peach));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.sub{color:var(--mut);font-size:14px;margin-top:8px}

.countdown{text-align:right;padding:12px 22px;border:1px solid rgba(255,158,187,.28);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,158,187,.16),rgba(255,255,255,.02));min-width:132px}
.cd-num{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--rose)}
.cd-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.17em;color:var(--mut);margin-top:5px}

/* ---- status bar: one compact row, no repeated title ---- */
.statusbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.statusbar .lantern{font-size:24px;filter:drop-shadow(0 0 14px rgba(255,158,187,.7))}
.statusbar .countdown{display:flex;align-items:baseline;gap:7px;padding:7px 15px;min-width:0;
  border-radius:99px;text-align:left}
.statusbar .cd-num{font-size:22px}
.statusbar .cd-lbl{margin:0;font-size:9.5px;letter-spacing:.15em;line-height:1.15}
.statusbar .cd-lbl i{display:block;font-style:normal;opacity:.7}
.ghost.sm{padding:6px 12px;font-size:12px}
.whobar{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.spacer{flex:1}
.statpill{font-size:12.5px;color:var(--mut);border:1px solid var(--line2);border-radius:99px;padding:6px 15px;background:var(--card)}
.syncpill{font-size:11px;letter-spacing:.02em;border-radius:99px;padding:5px 13px;
  border:1px solid var(--line2);background:var(--card);color:var(--mut2);white-space:nowrap;transition:.25s}
.syncpill.synced{border-color:rgba(96,232,255,.4);color:var(--neon-cyan);
  background:rgba(96,232,255,.09);box-shadow:var(--glow-cyan)}
.syncpill.offline{border-color:rgba(255,158,187,.4);color:var(--rose);background:rgba(255,158,187,.09)}
.syncpill.connecting{color:var(--mut)}
.statpill b{color:var(--rose);font-size:13.5px;font-weight:700}

.ghost{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:11px;
  padding:8px 15px;font:600 13px/1 inherit;cursor:pointer;transition:.18s}
.ghost:hover{background:var(--card2);border-color:var(--rose)}

.datapanel{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
.datapanel p{font-size:13px;color:var(--mut);margin-bottom:12px}
.datarow{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:rgba(255,158,187,.15);border:1px solid rgba(255,158,187,.4);color:var(--rose);
  border-radius:11px;padding:9px 15px;font:600 13px/1 inherit;cursor:pointer;transition:.18s}
.btn:hover{background:rgba(255,158,187,.26)}
.btn.danger{background:rgba(255,120,120,.1);border-color:rgba(255,120,120,.3);color:#ff9a9a}
.databox{width:100%;margin-top:12px;min-height:76px;background:rgba(0,0,0,.4);border:1px solid var(--line);
  border-radius:12px;color:var(--mut);padding:11px;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical}

/* ---------- TABS ---------- */
/* transparent at rest so the glow orbs run uninterrupted behind it; tint +
   blur only once it's actually stuck — app.js flips .stuck when the 1px
   sentinel above the nav leaves the viewport */
.tabs{position:sticky;top:0;z-index:400;margin-top:20px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease}
.tabs.stuck{backdrop-filter:blur(18px);background:rgba(19,13,21,.9);border-bottom-color:var(--line)}
#tabSentinel{height:1px;margin-bottom:-1px}
.tabrow{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:9px 0}
.tabrow::-webkit-scrollbar{display:none}
.tab{background:none;border:0;color:var(--mut);padding:9px 16px;border-radius:11px;
  font:600 14px/1 inherit;cursor:pointer;white-space:nowrap;transition:.18s}
.tab:hover{color:var(--text);background:var(--card)}
.tab.active{color:#2a1420;background:linear-gradient(100deg,var(--blush),var(--rose))}

/* ---------- LAYOUT ---------- */
main{position:relative;z-index:1;padding:32px 0 60px}
.view{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:40px 0 16px;display:flex;align-items:center;gap:12px}
.h2:first-child,.h2.nom{margin-top:0}
.h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,158,187,.35),transparent)}
.h2.nom::after{display:none}
.lede{color:var(--mut);font-size:14px;margin-top:6px;max-width:70ch}
.lede.small{font-size:12.5px;margin-top:12px}
.secthead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.cityhead{margin-bottom:20px;padding-left:16px;border-left:3px solid var(--peach)}
.cityhead.cq{border-color:var(--rose)}
/* a thin ribbon of the city's own photos under the heading — decoration,
   not navigation, so it's aria-hidden and every frame shares the row */
.citystrip{display:flex;gap:5px;margin-top:14px;max-width:100%;
  border-radius:12px;overflow:hidden}
.citystrip img{height:62px;flex:1 1 0;min-width:0;object-fit:cover;display:block;
  filter:saturate(1.05)}

.cardgrid{display:grid;gap:16px}
.cardgrid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.cardgrid.three{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
/* auto-fit means "two" quietly became three columns on a wide screen, which left
   the fourth card on the Brief stranded alone on its own row. These grids are
   written as pairs and triples on purpose — hold them there. */
@media(min-width:860px){ .cardgrid.two{grid-template-columns:1fr 1fr} }
@media(min-width:1080px){ .cardgrid.three{grid-template-columns:1fr 1fr 1fr} }
.cardgrid.poi{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* ---------- BOOKINGS ---------- */
.bk{border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,177,130,.1),var(--card));box-shadow:var(--shadow)}
.bk.cq{background:linear-gradient(150deg,rgba(255,158,187,.12),var(--card))}
.bkgal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:74px 74px;gap:5px;
  margin:-22px -22px 17px;background:#241a22}
.bkgal img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:opacity .2s}
.bkgal img:hover{opacity:.82}
.bkgal img:first-child{grid-row:1 / span 2}
.bkgal img:nth-child(n+6){display:none}
@media(max-width:420px){.bkgal{grid-template-columns:1fr 1fr;grid-template-rows:80px}
  .bkgal img:first-child{grid-row:auto}.bkgal img:nth-child(n+5){display:none}}
.bk .bkcity{font-size:10.5px;text-transform:uppercase;letter-spacing:.19em;color:var(--peach)}
.bk.cq .bkcity{color:var(--rose)}
.bk h3{font-size:18px;margin:7px 0 2px;letter-spacing:-.015em}
.bk .bkzh{color:var(--mut);font-size:14px;margin-bottom:14px}
.bk dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-bottom:12px}
.bk dt{color:var(--mut2);white-space:nowrap}
.bk .bknote{font-size:13px;color:var(--mut);border-top:1px solid var(--line2);padding-top:13px;margin-top:6px}
.bk .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---------- TONIGHT'S JOB ---------- */
.tonight{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:16px;
  border:1px solid rgba(255,158,187,.3);border-radius:var(--r);padding:22px 24px;
  background:linear-gradient(120deg,rgba(255,158,187,.13),rgba(203,171,247,.07))}
.tn-l{flex:1;min-width:280px}
.tn-l h3{font-size:17px;letter-spacing:-.015em;margin-bottom:9px}
.tn-l p{font-size:13.5px;color:var(--mut);margin-bottom:8px;max-width:68ch}
.tn-l p:last-child{margin-bottom:0}
.tn-l b{color:var(--text)}
.tn-sub{font-size:12.5px!important;color:var(--mut2)!important}
.tn-r{display:flex;gap:12px}
.tn-stat{text-align:center;background:rgba(0,0,0,.26);border-radius:var(--rs);padding:14px 20px;min-width:96px}
.tn-stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--rose)}
.tn-stat span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--mut2);margin-top:6px}
@media(max-width:520px){.tonight{padding:18px}.tn-r{width:100%}.tn-stat{flex:1}}

/* ---------- RIBBON ---------- */
.ribbon{list-style:none;display:flex;gap:10px;overflow-x:auto;padding-bottom:10px}
.rday{min-width:134px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--rs);padding:14px;
  background:var(--card);transition:.2s}
.rday:hover{background:var(--card2);transform:translateY(-2px)}
.rday .rd{font-size:12px;color:var(--mut2);letter-spacing:.04em}
.rday .rc{font-size:14px;font-weight:700;margin:5px 0 4px}
.rday .rl{font-size:11.5px;color:var(--mut);line-height:1.45}
.rday.sh{border-top:2px solid var(--peach)}
.rday.cq{border-top:2px solid var(--rose)}
.rday.tr{border-top:2px solid var(--lilac)}
.rday.st{border-top:2px solid var(--gold);background:linear-gradient(160deg,rgba(242,201,141,.16),var(--card))}

/* the Brief is one long page of sections — give its surfaces air. Scoped to
   the brief so .note as a grid child elsewhere keeps its geometry. */
#v-brief .h2{margin-top:52px}
#v-brief .lede+.cardgrid{margin-top:18px}
#v-brief .cardgrid+.note{margin-top:18px}

/* ---------- NOTES ---------- */
.note{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--card)}
.note h3{font-size:15.5px;margin-bottom:11px;letter-spacing:-.01em}
.note p{font-size:13.5px;color:var(--mut);margin-bottom:11px}
.note p:last-child{margin-bottom:0}
.note b{color:var(--text)}
.note ul{margin:8px 0 11px 18px;font-size:13.5px;color:var(--mut)}
.note ul li{margin-bottom:7px}
.note.warn{border-color:rgba(255,140,140,.3);background:linear-gradient(160deg,rgba(255,140,140,.08),var(--card))}
.note.good{border-color:rgba(134,220,194,.28);background:linear-gradient(160deg,rgba(134,220,194,.08),var(--card))}
.note.star{border-color:rgba(242,201,141,.35);background:linear-gradient(160deg,rgba(242,201,141,.11),var(--card))}
.note .fix{color:var(--text);background:rgba(0,0,0,.26);border-left:2px solid var(--rose);
  padding:11px 14px;border-radius:0 11px 11px 0;font-size:13.5px}

/* ---------- WEATHER ---------- */
.wxgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.wx{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--card)}
.wx h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--mut2);margin-bottom:10px}
.wxbig{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--peach)}
.wxbig span{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin-left:9px}
.wxsm{font-size:13px;color:var(--mut);margin-top:12px}

/* ---------- CHECKLIST ---------- */
.ring{position:relative;width:64px;height:64px;flex-shrink:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.5;stroke-linecap:round}
.rbg{stroke:rgba(255,255,255,.09)}
.rfg{stroke:var(--rose);stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .55s ease}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700}

.clgroup{border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden;background:var(--card)}
.clhead{display:flex;align-items:center;gap:12px;padding:16px 19px;cursor:pointer;user-select:none;transition:.18s}
.clhead:hover{background:var(--card2)}
.clhead h3{font-size:15px;flex:1;letter-spacing:-.01em}
.clcount{font-size:12px;color:var(--mut2);font-variant-numeric:tabular-nums}
.chev{color:var(--mut2);transition:transform .24s;font-size:11px}
.clgroup.open .chev{transform:rotate(90deg)}
.clbody{display:none;padding:0 19px 15px}
.clgroup.open .clbody{display:block}
.clblurb{font-size:13px;color:var(--mut);border-top:1px solid var(--line2);padding-top:12px;margin-bottom:6px}
.bar{height:3px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--rose),var(--peach));transition:width .45s ease}

/* ---- prep rows: one or two boxes, K's first ---- */
.cihead{display:flex;gap:8px;justify-content:flex-start;padding:0 0 7px;margin-bottom:2px}
/* explicit font props, not the shorthand: `font:... inherit` is invalid CSS
   (a CSS-wide keyword can't sit inside a shorthand), the declaration drops,
   and the chips ballooned to 35px checkbox-lookalikes. See CLAUDE.md. */
.cihead .cwho{width:24px;text-align:center;font-weight:800;font-size:10px;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 0;border-radius:6px}
.cihead .cwho.k{background:rgba(255,110,199,.2);color:var(--neon-pink)}
.cihead .cwho.c{background:rgba(96,232,255,.16);color:var(--neon-cyan)}

.ci{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line2)}
.ci:last-child{border-bottom:0}
.ci .boxes{display:flex;gap:8px;flex-shrink:0;margin-top:1px}
.ci .box{width:24px;height:24px;border:1.5px solid rgba(255,255,255,.24);border-radius:8px;
  background:rgba(255,255,255,.03);display:grid;place-items:center;font-size:12px;font-weight:800;
  color:transparent;transition:.18s;cursor:pointer;padding:0;font-family:inherit}
.ci .box:hover{border-color:var(--rose);background:rgba(255,158,187,.1)}
.ci .box.on{color:#2a1420}
.ci .box.pK.on{background:var(--neon-pink);border-color:var(--neon-pink);box-shadow:var(--glow-pink)}
.ci .box.pC.on{background:var(--neon-cyan);border-color:var(--neon-cyan);box-shadow:var(--glow-cyan)}
.ci .box.shared.on,.ci .box.solo.on{background:var(--rose);border-color:var(--rose);box-shadow:var(--glow-pink)}
/* a shared box is visually one wide box so the column never looks half-empty */
.ci .box.shared{width:56px}
.tag-who{font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.tag-who.k{background:rgba(255,110,199,.18);color:var(--neon-pink)}
.tag-who.c{background:rgba(96,232,255,.16);color:var(--neon-cyan)}
@media(max-width:520px){
  .ci .box{width:28px;height:28px}
  .ci .box.shared{width:64px}
}
.ci .txt{font-size:13.5px;transition:.18s}
.ci.done .txt{color:var(--mut2);text-decoration:line-through}
.ci.hot .txt::after{content:"priority";font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;
  background:rgba(255,158,187,.2);color:var(--rose);padding:2px 8px;border-radius:99px;margin-left:8px;
  vertical-align:middle;text-decoration:none;display:inline-block}
.ci.done.hot .txt::after{opacity:.3}

/* ---------- TOOLBAR ---------- */
.toolbar,.maptools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px;
  padding:13px;border:1px solid var(--line);border-radius:var(--rs);background:var(--card)}
.toolbar{flex-direction:column;align-items:stretch;gap:11px}
.tbrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tbrow.sub{padding-top:10px;border-top:1px solid var(--line2)}
.tblab{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut2);margin-right:2px}
.chip.big{padding:9px 16px;font-size:13px}
.chip.big b{font-weight:800;opacity:.65;margin-left:5px}
.chip.big.on b{opacity:.75}
.chip.sm{padding:5px 11px;font-size:11.5px}
.linkish{background:none;border:0;color:var(--mut2);font:inherit;font-size:11.5px;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.2);cursor:pointer;padding:0;margin-left:6px;transition:.18s}
.linkish:hover{color:var(--rose);text-decoration-color:var(--rose)}
.mk.extra{width:13px;height:13px;background:rgba(203,171,247,.5);border-color:rgba(255,255,255,.55);border-width:2px}
.maplegend .pin.extra{background:rgba(203,171,247,.5)}
.search{flex:1;min-width:170px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:11px;
  color:var(--text);padding:9px 13px;font:14px/1 inherit}
.search:focus{outline:none;border-color:var(--rose)}
.chip{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--mut);border-radius:99px;
  padding:7px 14px;font:600 12px/1 inherit;cursor:pointer;transition:.18s;white-space:nowrap}
.chip:hover{color:var(--text);border-color:rgba(255,255,255,.26)}
.chip.on{background:linear-gradient(100deg,var(--blush),var(--rose));border-color:transparent;color:#2a1420}
.chipsep{width:1px;height:20px;background:var(--line);margin:0 3px}
.tbcount{font-size:12px;color:var(--mut2);margin-left:auto;font-variant-numeric:tabular-nums}
.daylab{font-size:12px;color:var(--mut2);display:flex;align-items:center;gap:7px}

/* ---------- POI CARDS ---------- */
.p{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  display:flex;flex-direction:column;transition:.22s;position:relative;overflow:hidden}
.p:hover{background:var(--card2);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.p.locked{border-color:rgba(255,158,187,.55);
  background:linear-gradient(158deg,rgba(255,158,187,.13),var(--card));
  box-shadow:0 0 0 1px rgba(255,158,187,.16),0 18px 46px -24px rgba(255,158,187,.65)}
.p.skipped{opacity:.32}
.p.skipped:hover{opacity:.75}

.shotwrap{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#2a1c28,#1c1420);overflow:hidden}
.shotwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.p:hover .shotwrap img{transform:scale(1.05)}
.shotwrap::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,13,21,.92) 2%,rgba(19,13,21,.15) 45%,transparent 75%)}
.noshot{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;opacity:.3}
.illus{position:absolute;top:11px;left:11px;z-index:2;font-size:9px;text-transform:uppercase;
  letter-spacing:.13em;font-weight:700;padding:4px 8px;border-radius:99px;cursor:help;
  background:rgba(19,13,21,.72);color:var(--mut);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14)}
.illus-note{color:var(--gold)!important;font-size:11.5px!important;max-width:60ch}
.shottitle{position:absolute;left:17px;right:17px;bottom:12px;z-index:2}
.shottitle h3{font-size:17px;letter-spacing:-.02em;line-height:1.25;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.shottitle .pzh{font-size:12.5px;color:var(--blush);margin-top:2px;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.badges{position:absolute;top:11px;right:11px;z-index:2;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.bdg{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;padding:4px 9px;border-radius:99px;
  backdrop-filter:blur(8px);white-space:nowrap;font-weight:700}
.bdg.t1{background:rgba(242,201,141,.9);color:#3a2a12}
.bdg.rec{background:rgba(203,171,247,.85);color:#2a1c3a}
.bdg.them{background:rgba(134,220,194,.85);color:#123028}
.bdg.flag{background:rgba(255,140,140,.9);color:#3a1414}

.pbody{padding:15px 17px 17px;display:flex;flex-direction:column;gap:11px;flex:1}
.p .why{font-size:13.5px;opacity:.92}
.p .meta{display:grid;grid-template-columns:auto 1fr;gap:4px 11px;font-size:12px;color:var(--mut)}
.p .meta dt{color:var(--mut2)}
.p .tips{font-size:12.5px;color:var(--mut);background:rgba(0,0,0,.24);border-radius:11px;padding:11px 13px;
  border-left:2px solid rgba(242,201,141,.6)}
.p .tips.warnt{border-left-color:#ff8c8c}

.p .links{display:flex;gap:6px;flex-wrap:wrap}
.lk{font-size:11.5px;padding:6px 11px;border-radius:9px;border:1px solid var(--line);color:var(--mut);
  text-decoration:none;transition:.18s;background:rgba(255,255,255,.03);cursor:pointer;font-family:inherit;font-weight:600}
.lk:hover{color:var(--text);border-color:var(--rose);background:rgba(255,158,187,.1)}
.lk.amap{color:var(--mint);border-color:rgba(134,220,194,.3)}

.p .ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line2);padding-top:12px;margin-top:auto}
.lockbtn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mut);border-radius:10px;
  padding:8px 14px;font:700 12.5px/1 inherit;cursor:pointer;transition:.18s;display:flex;align-items:center;gap:6px}
.lockbtn:hover{color:var(--text);border-color:var(--rose)}
.lockbtn.on{background:linear-gradient(100deg,var(--blush),var(--rose));border-color:transparent;color:#2a1420}
.skipbtn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mut2);border-radius:10px;
  padding:8px 11px;font:700 12.5px/1 inherit;cursor:pointer;transition:.18s}
.skipbtn:hover{color:#ff9a9a;border-color:rgba(255,140,140,.4)}
.skipbtn.on{background:rgba(255,140,140,.18);border-color:rgba(255,140,140,.45);color:#ff9a9a}
.daysel{margin-left:auto;background:rgba(0,0,0,.33);border:1px solid var(--line);color:var(--mut);
  border-radius:10px;padding:8px 9px;font:600 12px/1 inherit;cursor:pointer;max-width:152px}
.daysel:focus{outline:none;border-color:var(--rose)}
/* the popup list is UA-drawn: without explicit colors the options inherit pale
   pink onto a light popup and vanish (seen live on Windows). */
select option{background:var(--bg2);color:var(--text)}
select option:disabled{color:var(--mut2)}
.daysel.set{color:var(--rose);border-color:rgba(255,158,187,.45);background:rgba(255,158,187,.09)}
.daysel.map{max-width:190px;margin:0}
.pnote{width:100%;background:rgba(0,0,0,.28);border:1px solid var(--line2);border-radius:10px;color:var(--text);
  padding:9px 11px;font:12.5px/1.5 inherit;resize:vertical;min-height:34px}
.pnote:focus{outline:none;border-color:var(--rose)}
.pnote::placeholder{color:var(--mut2)}
.pcred{font-size:9.5px;color:var(--mut2);opacity:.6}
.pcred a{color:inherit}

/* ---------- MAP ---------- */
.mapbox{height:min(66vh,620px);min-height:400px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#1a1119;z-index:1}
.leaflet-container{background:#1a1119;font:inherit}
.leaflet-popup-content-wrapper{background:#221720;color:var(--text);border-radius:var(--rs);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9);border:1px solid var(--line)}
.leaflet-popup-tip{background:#221720;border:1px solid var(--line)}
.leaflet-popup-content{margin:0;width:238px!important}
.leaflet-popup-close-button{color:var(--mut)!important;padding:8px 8px 0 0!important}
.pop img{width:100%;height:112px;object-fit:cover;display:block;border-radius:13px 13px 0 0}
.popb{padding:11px 13px 13px}
.popb h4{font-size:14px;letter-spacing:-.01em;line-height:1.3}
.popb .pz{font-size:11.5px;color:var(--mut);margin:2px 0 7px}
.popb .pw{font-size:11.5px;color:var(--mut);margin-bottom:9px;line-height:1.5}
.popb .pacts{display:flex;gap:6px;flex-wrap:wrap}

.mk{border-radius:50%;border:2.5px solid rgba(255,255,255,.85);box-shadow:0 3px 10px rgba(0,0,0,.6);
  transition:transform .15s;display:grid;place-items:center;font-size:9px;font-weight:800;color:#2a1420}
.mk:hover{transform:scale(1.25)}
.mk.cand{width:16px;height:16px;background:rgba(255,158,187,.55);border-color:rgba(255,255,255,.85)}
.mk.locked{width:23px;height:23px;background:var(--rose);border-color:#fff}
.mk.hotel{width:25px;height:25px;background:var(--gold);border-color:#fff;font-size:12px}
.mk.skip{width:12px;height:12px;background:rgba(140,130,140,.5);border-color:rgba(255,255,255,.4)}
.mk.dim{opacity:.35}

.mk.step{width:26px;height:26px;background:#c06a79;border-color:#fff;color:#fff;font-size:12px}
.nudgehint{font-size:12.5px;color:var(--gold);background:rgba(242,201,141,.1);border:1px solid rgba(242,201,141,.28);
  border-radius:12px;padding:10px 14px;margin-bottom:12px}
.nudgehint b{color:var(--text)}
.popb .pmoved{font-size:10.5px;color:var(--mint);margin:3px 0 6px}
.lk.tiny{padding:2px 7px;font-size:10px}
.leaflet-marker-draggable{cursor:grab}
.leaflet-marker-draggable:active{cursor:grabbing}
.chip.clear{background:rgba(255,140,140,.16);border-color:rgba(255,140,140,.4);color:#ff9a9a}
.popb .papprox{font-size:10.5px;color:var(--gold);margin:3px 0 6px}
.pop img{cursor:zoom-in}
.lk.go{color:var(--lilac);border-color:rgba(203,171,247,.35)}

/* ---- suggested routes ---- */
/* folded by default behind a quiet toggle — the map is the point */
.routebar{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.routetoggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;
  background:none;border:0;color:var(--mut);font-weight:600;font-size:13.5px;line-height:1;
  letter-spacing:.02em;padding:15px 18px;cursor:pointer;text-align:left}
.routetoggle:hover{color:var(--text)}
.routetoggle .chev{font-size:10px;transition:transform .2s}
.routebar.open .routetoggle .chev{transform:rotate(90deg)}
.routebody{padding:0 18px 18px}
.routelede{font-size:12.5px;color:var(--mut);margin-bottom:13px}
.routerow{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.rcard{flex-shrink:0;width:190px;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:var(--rs);padding:13px;cursor:pointer;transition:.18s;color:var(--text);font:inherit;
  display:flex;flex-direction:column;gap:4px}
.rcard:hover{background:var(--card2);border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
.rcard.on{border-color:var(--rose);background:linear-gradient(155deg,rgba(255,158,187,.16),var(--card))}
.rcard.star{border-left:3px solid var(--gold)}
.rwhen{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--peach)}
.rname{font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.rmeta{font-size:11.5px;color:var(--mut2)}

.routedetail{margin-top:16px;border-top:1px solid var(--line2);padding-top:16px}
.rdhead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.rdhead h4{font-size:16px;letter-spacing:-.015em}
.rdwhen{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--peach)}
.rdmode{font-size:11.5px;color:var(--mut2);margin-left:auto}
.rdblurb{font-size:13.5px;color:var(--mut);margin-bottom:14px;max-width:76ch}
.rdstops{list-style:none;display:grid;gap:7px;margin-bottom:14px}
.rdstops li{display:flex;align-items:center;gap:11px;background:rgba(0,0,0,.2);border-radius:12px;padding:7px 11px;
  border:1px solid transparent;transition:.18s}
.rdstops li.lk-on{border-color:rgba(255,158,187,.32);background:rgba(255,158,187,.08)}
.rnum{width:22px;height:22px;border-radius:50%;background:#c06a79;color:#fff;display:grid;place-items:center;
  font:800 11px/1 inherit;flex-shrink:0}
.rdstops img{width:46px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0}
.rnoimg{width:46px;height:34px;border-radius:8px;background:rgba(255,255,255,.05);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.rtxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.rtxt b{font-size:13px;font-weight:600}
.rtxt i{font-size:11.5px;color:var(--mut2);font-style:normal}
.rlock{margin-left:auto;background:none;border:1px solid var(--line);color:var(--mut2);border-radius:9px;
  width:32px;height:29px;cursor:pointer;font-size:13px;transition:.18s;flex-shrink:0}
.rlock:hover{color:var(--rose);border-color:var(--rose)}
.rlock.on{background:rgba(255,158,187,.2);border-color:var(--rose);color:var(--rose)}
.rdacts{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.rdhint{font-size:11.5px;color:var(--mut2)}

/* ---- lightbox ---- */
.lbox{position:fixed;inset:0;z-index:1000;background:rgba(10,6,11,.93);display:grid;place-items:center;
  padding:24px;cursor:zoom-out;animation:fade .2s ease}
.lbin{position:relative;max-width:min(1000px,94vw);max-height:90vh;display:flex;flex-direction:column;gap:10px}
.lbin img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--rs);box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
.lbcap{font-size:12.5px;color:var(--mut);display:flex;flex-direction:column;gap:3px}
.lbcap b{color:var(--text);font-size:14px}
.lbcap span{font-size:11px;color:var(--mut2)}
.lbx{position:absolute;top:-6px;right:-6px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--rose);color:#2a1420;font:700 15px/1 inherit}

.p.flash{animation:flash 1.8s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(255,158,187,0)}
  15%,60%{box-shadow:0 0 0 3px rgba(255,158,187,.65),0 18px 46px -20px rgba(255,158,187,.7)}}
.shotwrap img{cursor:zoom-in}

.maplegend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:12px;color:var(--mut)}
.maplegend span{display:flex;align-items:center;gap:7px}
.maplegend .pin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.8);display:inline-block}
.maplegend .pin.locked{background:var(--rose)}
.maplegend .pin.cand{background:rgba(255,158,187,.55)}
.maplegend .pin.hotel{background:var(--gold)}
.maplegend .pin.skip{background:rgba(140,130,140,.5)}
/* prose, not a flex row — as a flex item the nudge button refused to wrap and
   pushed the page 3px wide at 380px */
.maplegend .mnote{display:block;color:var(--mut2);font-size:11.5px;flex:1;min-width:240px;max-width:100%}

/* ---------- PLAN ---------- */
.pday{border:1px solid var(--line);border-radius:var(--r);margin-bottom:13px;background:var(--card);overflow:hidden}
.pday.star{border-color:rgba(242,201,141,.45);background:linear-gradient(150deg,rgba(242,201,141,.1),var(--card))}
.pdhead{display:flex;align-items:baseline;gap:12px;padding:16px 19px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.pdhead .pdate{font-size:15px;font-weight:700}
.pdhead .pcity{font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.06);color:var(--mut)}
.pdhead .pcity.Shanghai{background:rgba(255,177,130,.18);color:var(--peach)}
.pdhead .pcity.Chongqing{background:rgba(255,158,187,.18);color:var(--rose)}
.pdhead .plabel{font-size:13px;color:var(--mut);margin-left:auto}
.pdbody{padding:15px 19px}
.pdnote{font-size:13px;color:var(--mut);background:rgba(0,0,0,.24);border-left:2px solid var(--peach);
  padding:11px 14px;border-radius:0 11px 11px 0;margin-bottom:13px}
/* pencilled day shape on the printable plan — dashed, and it stays dashed on paper
   so a printout doesn't read as a committed schedule either */
.pdplan{font-size:13px;line-height:1.6;color:var(--blush);border:1px dashed var(--line);
  border-radius:11px;padding:11px 14px;margin-bottom:11px}
.pdplan b{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--mut2);
  display:block;margin-bottom:4px;font-weight:700}
.fx{display:flex;gap:12px;align-items:baseline;padding:9px 0;font-size:13.5px;border-bottom:1px dashed var(--line2)}
.fx .ft{font-variant-numeric:tabular-nums;color:var(--mint);font-weight:700;min-width:88px;font-size:12.5px}
.fx.hotel .ft{color:var(--peach)}
.fx.travel .ft{color:var(--lilac)}
.fx.star{background:rgba(242,201,141,.1);border-radius:11px;padding:11px 13px;border:0;margin:6px 0}
.fx.star .ft{color:var(--gold)}
.slot{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line2)}
.slot:last-child{border-bottom:0}
.slot .sthumb{width:52px;height:38px;border-radius:9px;object-fit:cover;flex-shrink:0;background:#2a1c28}
.slot .sn{font-size:14px;font-weight:600}
.slot .sz{font-size:12px;color:var(--mut2);font-weight:400}
.slot .sm{font-size:12px;color:var(--mut);margin-top:2px}
.slot .snote{font-size:12px;color:var(--gold);margin-top:3px;font-style:italic}
.slot .rm{margin-left:auto;background:none;border:0;color:var(--mut2);cursor:pointer;font-size:16px;padding:3px 7px;border-radius:8px}
.slot .rm:hover{color:#ff9a9a;background:rgba(255,140,140,.12)}
.empty{font-size:13px;color:var(--mut2);font-style:italic;padding:8px 0}

/* ---------- FLIGHT CARDS (Getting there, on the Brief) ---------- */
.book{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--card)}
.book.hot{border-color:rgba(255,158,187,.4);background:linear-gradient(155deg,rgba(255,158,187,.09),var(--card))}
.bh{display:flex;align-items:center;gap:11px;margin-bottom:13px;flex-wrap:wrap}
.bnum{width:25px;height:25px;border-radius:50%;background:var(--rose);color:#2a1420;
  display:grid;place-items:center;font:800 13px/1 inherit;flex-shrink:0}
.bh h3{font-size:16px;letter-spacing:-.015em}
.bh .tag{margin-left:auto}
.tag.warn{background:rgba(255,158,187,.2);color:var(--rose)}
.brec{font-size:14px;color:var(--text);background:rgba(0,0,0,.24);border-left:2px solid var(--mint);
  padding:12px 14px;border-radius:0 11px 11px 0;margin-bottom:14px}
.bfacts{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px;margin-bottom:13px}
.bfacts dt{color:var(--mut2);white-space:nowrap}
.bfacts dd{color:var(--mut)}
.bfacts b{color:var(--text)}
.bwhy{font-size:12.5px;color:var(--mut2);font-style:italic}
.tiny-note{font-size:11.5px!important;color:var(--mut2)!important;border-top:1px solid var(--line2);padding-top:10px}
.bwarn{font-size:12.5px;color:var(--mut);background:rgba(255,158,187,.1);
  border:1px solid rgba(255,158,187,.28);border-radius:11px;padding:11px 13px}
.bwarn b{color:var(--text)}

.whynot{margin-top:20px;border:1px solid var(--line);border-radius:var(--rs);background:var(--card);overflow:hidden}
.whynot summary{padding:15px 19px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--mut);
  list-style:none;transition:.18s;user-select:none}
.whynot summary::-webkit-details-marker{display:none}
.whynot summary::before{content:"▶ ";font-size:10px;color:var(--mut2);transition:.2s;display:inline-block}
.whynot[open] summary::before{transform:rotate(90deg)}
.whynot summary:hover{color:var(--text);background:var(--card2)}
.wn-body{padding:0 19px 17px;border-top:1px solid var(--line2)}
.wn-body p{font-size:13px;color:var(--mut);margin-top:13px}
.wn-body b{color:var(--text)}

/* the handoff to the big map — one obvious tap, not a quiet corner link */
.bigmap{white-space:nowrap;align-self:center;padding:13px 22px;font-size:14px;font-weight:700;
  border-color:var(--rose);color:var(--text);
  box-shadow:0 0 0 1px rgba(255,110,199,.25),0 0 18px -6px rgba(255,110,199,.55)}
.bigmap:hover{background:var(--card2);box-shadow:0 0 0 1px rgba(255,110,199,.5),0 0 22px -4px rgba(255,110,199,.8)}

/* the quiet way back to the printable view, at the foot of the Brief */
.printfoot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line2);text-align:center}
.printfoot .linkish{font-size:12.5px}

/* .tag is shared by the flight cards on the Brief */
.tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:5px 11px;border-radius:99px;
  background:rgba(203,171,247,.18);color:var(--lilac);white-space:nowrap}
.tag.good{background:rgba(134,220,194,.18);color:var(--mint)}

/* ---------- PHRASES ---------- */
.pgroup{border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;background:var(--card);overflow:hidden}
.pgroup h3{padding:15px 19px;border-bottom:1px solid var(--line2);
  text-transform:uppercase;letter-spacing:.13em;color:var(--peach);font-size:11.5px}
.prow{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;padding:13px 19px;border-bottom:1px solid var(--line2);
  cursor:pointer;transition:.18s;align-items:center}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--card2)}
.prow .pen{font-size:13px;color:var(--mut)}
.prow .pzh2{font-size:17px;font-weight:600;letter-spacing:.02em}
.prow .ppy{font-size:11.5px;color:var(--mut2);margin-top:3px;font-style:italic}
@media(max-width:560px){.prow{grid-template-columns:1fr;gap:4px}}

.foot{padding:28px 0 40px;border-top:1px solid var(--line2);margin-top:20px}
.foot p{font-size:12px;color:var(--mut2)}
.credits{margin-top:8px;font-size:11px;line-height:1.6}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,90px);z-index:900;
  background:linear-gradient(100deg,var(--blush),var(--rose));color:#2a1420;padding:12px 24px;border-radius:99px;
  font:700 13px/1 inherit;transition:transform .32s cubic-bezier(.2,1.3,.4,1);box-shadow:0 14px 34px -8px rgba(0,0,0,.7)}
.toast.show{transform:translate(-50%,0)}

/* ============ CYBERPUNK ✕ FEMININE ============
   A thin accent layer over the blush base. Neon only on the things that are
   "on" — active tabs, locked places, live pins — so the glow means something. */

.tabs.stuck{border-bottom-color:rgba(255,110,199,.22)}
.tab.active{
  box-shadow:0 0 0 1px rgba(255,110,199,.5), var(--glow-pink);
}
.tab:not(.active):hover{box-shadow:inset 0 -2px 0 rgba(96,232,255,.5)}

/* locked-in places get an electric edge, not just a pink one */
.p.locked{
  box-shadow:0 0 0 1px rgba(255,110,199,.4),
             0 18px 46px -24px rgba(255,110,199,.55),
             inset 0 1px 0 rgba(255,211,224,.14);
}
.lockflag{box-shadow:var(--glow-pink)}
.lockbtn.on{box-shadow:var(--glow-pink)}
.chip.on{box-shadow:0 0 0 1px rgba(255,110,199,.35), var(--glow-pink)}
.mk.locked{box-shadow:0 0 0 2px rgba(255,110,199,.35), 0 0 16px rgba(255,110,199,.6)}
.mk.step{box-shadow:0 0 0 2px rgba(96,232,255,.3), 0 0 14px rgba(255,110,199,.5)}

/* the countdown reads like a readout */
.countdown{
  border-color:rgba(255,110,199,.34);
  box-shadow:inset 0 0 24px rgba(255,110,199,.09), 0 0 24px -12px rgba(255,110,199,.4);
}
.cd-num{text-shadow:0 0 22px rgba(255,110,199,.55)}

/* section rules pick up a cyan tail */
.h2::after{background:linear-gradient(90deg,rgba(255,110,199,.45),rgba(96,232,255,.22) 55%,transparent)}

/* hairline top edge on the big surfaces gives depth without weight */
.bk,.note,.wx,.book,.clgroup,.pday,.pgroup,.tonight{
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,211,224,.07);
}

/* progress + rings glow when they're moving */
.bar i{background:linear-gradient(90deg,var(--neon-pink),var(--rose) 45%,var(--peach));
  box-shadow:0 0 12px rgba(255,110,199,.55)}
.rfg{filter:drop-shadow(0 0 5px rgba(255,110,199,.6))}

/* toast reads like a system message */
.toast{box-shadow:0 14px 34px -8px rgba(0,0,0,.7), var(--glow-pink)}

/* keyboard focus should be obvious and on-theme */
:where(button,a,select,textarea,input,summary):focus-visible{
  outline:2px solid var(--neon-cyan);outline-offset:2px;border-radius:8px;
}

@media(prefers-reduced-motion:reduce){
  .lantern,.cd-num{animation:none!important}
  *{scroll-behavior:auto!important}
}

/* ============ MOBILE ============
   This gets used on a phone far more than on a laptop — often one-handed, on a
   street, in daylight. So: bigger tap targets, fewer columns, less chrome, and
   nothing important hidden behind a hover. */
@media(max-width:600px){
  main{padding:20px 0 48px}
  .h2{font-size:18px;margin:30px 0 13px}
  .lede{font-size:13.5px}

  /* the status bar wraps to two tidy rows instead of five ragged ones */
  .statusbar{gap:7px}
  .statusbar .lantern{font-size:20px}
  .statusbar .statpill{font-size:11.5px;padding:5px 11px}
  .statusbar .countdown{order:-1;margin-left:auto;padding:6px 12px}
  .statusbar .cd-num{font-size:19px}
  .syncpill{font-size:10px;padding:4px 10px}

  /* tabs: six of them have to fit a 380px row with no scrolling */
  .tabs{position:sticky;top:0}
  .tabrow{padding:7px 0;gap:2px;-webkit-overflow-scrolling:touch}
  .tab{padding:10px 7px;font-size:12.5px;white-space:nowrap}

  /* one column everywhere — two never fitted honestly at this width */
  .cardgrid.two,.cardgrid.three,.cardgrid.poi,.wxgrid{grid-template-columns:1fr}
  .bk,.note,.book,.wx{padding:17px;border-radius:16px}
  .bkgal{margin:-17px -17px 14px}
  .tonight{padding:17px;gap:16px}
  .tn-stat b{font-size:26px}

  /* place cards: taller image, roomier controls */
  .shotwrap{aspect-ratio:3/2}
  .pbody{padding:13px 15px 15px}
  .p .ctl{gap:7px}
  .lockbtn{padding:10px 15px;font-size:13px}
  .skipbtn{padding:10px 13px}
  .daysel{margin-left:0;width:100%;max-width:none;padding:10px 9px;font-size:12.5px}

  /* filters: the category row is long, so let it scroll rather than stack.
     min-width:0 is load-bearing — .tbrow is a flex item, and a flex item's
     default min-width:auto lets it grow to its content instead of scrolling.
     Without it the row stretched the whole page to ~950px at 380px wide, and
     body{overflow-x:hidden} then quietly cut the right-hand chips off — so the
     Food and Nightlife filters were unreachable on a phone. */
  .tbrow.sub{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;
    min-width:0;max-width:100%;scrollbar-width:none}
  .tbrow.sub::-webkit-scrollbar{display:none}
  .chip.big{flex:1;justify-content:center;text-align:center;padding:10px 12px}
  .search{min-width:100%;order:99;padding:11px 13px}
  .tbcount{margin-left:0}

  /* map: taller, and the route strip scrolls */
  .mapbox{height:60vh;min-height:340px}
  .maptools{gap:6px;padding:11px}
  .routerow{gap:8px}
  .rcard{width:158px}

  /* prep: the two boxes are the main interaction, make them thumb-sized */
  .ci{padding:12px 0;gap:11px}
  .ci .box{width:34px;height:34px;border-radius:10px;font-size:14px}
  .ci .box.shared{width:76px}
  .cihead .cwho{width:34px;padding:5px 0}
  .ci .txt{font-size:13.5px;line-height:1.5}

  /* flight-card tables reflow */
  .bfacts,.bk dl{grid-template-columns:1fr;gap:2px 0}
  .bfacts dt,.bk dt{margin-top:8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}

  /* phrasebook is a point-and-show tool — the Chinese wants to be big */
  .prow{grid-template-columns:1fr;gap:5px;padding:14px 16px}
  .prow .pzh2{font-size:21px}

  /* the lightbox close button was under the thumb-guard on small screens */
  .lbx{top:4px;right:4px}
  .lbox{padding:14px}
}

/* very narrow — one-handed on an older phone */
@media(max-width:380px){
  .chip.big b{display:none}
  .statusbar .statpill{font-size:11px;padding:4px 9px}
  .tn-r{width:100%}
}

/* phones in landscape: the cover shouldn't eat the whole screen */
@media(max-height:520px) and (orientation:landscape){
  .cover{height:auto;min-height:0;padding:56px 0 30px}
  .cover-title{font-size:clamp(34px,7vw,56px)}
  .cover-note{display:none}
}

/* ---------- PRINT ---------- */
@media print{
  .glow,.tabs,.whobar,.datapanel,.countdown,.toolbar,.maptools,.ctl,.rm,.foot,.ghost,.maplegend,.mapbox{display:none!important}
  body{background:#fff;color:#000}
  .view[hidden]{display:none!important}
  .pday,.note,.p{border-color:#ccc;background:#fff;break-inside:avoid}
  .h2,h1,h3,.pdate,.sn{color:#000}
  .lede,.pdnote,.sm,.sz{color:#444}
  /* the pencilled shape has to stay legible and still look provisional on paper */
  .pdplan{color:#222;border-color:#999}
  .pdplan b{color:#666}
}