.ptcell .pt{font-size:14px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
  .ptload{color:var(--muted);font-size:14.5px;margin-top:10px}
  .ptnote{color:var(--muted);font-size:14px;margin-top:8px}
  .pack{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;margin-top:16px}
  .pack h4{font-family:var(--ff-display);font-size:17px;margin:0 0 8px;font-weight:600}
  .packlist{list-style:none;margin:0;padding:0}
  .packlist li{padding:8px 0 8px 20px;border-top:1px dashed var(--line);font-size:14px;position:relative}
  .packlist li:first-child{border-top:none}
  .packlist li::before{content:"";position:absolute;left:3px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
  .packlist li a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-color:var(--amber-ink)}
  .packlist li.pki{cursor:pointer;transition:color .15s}
  .packlist li.done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
  .packlist li.done::before{background:var(--teal)}
  .pkprog{font-family:var(--ff-data);font-size:14.5px;color:var(--muted);font-weight:400}
  #app[dir="rtl"] .pkprog{font-family:var(--ff-body)}
  .pkhint{color:var(--muted);font-size:14px;margin:-2px 0 8px}
  #app[dir="rtl"] .packlist li{padding-left:0;padding-right:20px}
  #app[dir="rtl"] .packlist li::before{left:auto;right:3px}
  .pro{background:linear-gradient(160deg,var(--card),var(--paper2));border:1px solid var(--amber);border-radius:16px;box-shadow:var(--shadow);padding:22px 20px;margin-top:16px;text-align:center}
  .proeyebrow{font-family:var(--ff-data);font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--amber-ink);font-weight:700}
  #app[dir="rtl"] .proeyebrow{letter-spacing:normal;font-family:var(--ff-body)}
  .pro h4{font-family:var(--ff-display);font-size:22px;margin:8px 0 4px;font-weight:600}
  .prosub{color:var(--muted);font-size:14px;max-width:360px;margin:0 auto;text-wrap:balance}
  .probtn{margin-top:8px;padding:14px 26px;border:none;border-radius:12px;background:var(--amber);color:#231a0a;font-size:15px;font-weight:700;font-family:var(--ff-body);cursor:pointer;box-shadow:var(--shadow);transition:filter .15s}
  .probtn:hover{filter:brightness(1.05)}
  .probtn:active{transform:translateY(1px)}
  .pronote{color:var(--muted);font-size:14px;margin-top:10px}
  .pwhave{color:var(--muted);font-size:14.5px;margin:8px 0 4px}
  .pwpick{font-family:var(--ff-data);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
  #app[dir="rtl"] .pwpick{letter-spacing:normal;font-family:var(--ff-body)}
  .pkgs{display:flex;flex-direction:column;gap:8px}
  .pkg{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:var(--paper2);color:var(--ink);font-family:var(--ff-body);cursor:pointer;transition:all .15s}
  .pkg:hover{border-color:var(--amber-ink);background:var(--amber-soft)}
  .pkg:active{transform:translateY(1px)}
  .pkgn{font-size:15px;font-weight:700}
  .pkgp{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
  .pkgper{color:var(--muted);font-size:14.5px;font-weight:400;margin-left:6px}
  #app[dir="rtl"] .pkgper{margin-left:0;margin-right:6px}
  /* Migration notice for the retired github.io host. Reuses the .fbnudge card tokens — same
     surface, border, radius and shadow — but sits in the flow under the hero rather than fixed
     at the bottom, where the tab bar, the chat button and the toast already compete. Every
     colour is an existing variable, so both themes follow without a second rule. */
  .mignote{position:relative;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px 42px 12px 16px;margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--ink)}
  .mignote b{display:block;font-family:var(--ff-display);font-size:17px;margin-bottom:7px}
  .mignote p{margin:0 0 8px}
  .mignote p.mignlast{margin:0;color:var(--muted)}
  .mignote a{color:var(--teal);font-weight:700;word-break:break-word;display:inline-block;direction:ltr;unicode-bidi:isolate}
  /* Arabic sets the card RTL, so the close button and padding mirror with it. */
  .mignote[dir="rtl"]{text-align:right;padding:14px 16px 12px 42px}
  .mignote[dir="rtl"] .mignox{right:auto;left:9px}
  /* Back to My trips: needs both the arming class and a plan on screen. */
  #tripBack{display:none;margin:0 0 2px}
  body.planmode.tripback #tripBack{display:inline-block}
  .mignox{position:absolute;top:7px;right:9px;background:none;border:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:5px}
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:all .25s;z-index:9;max-width:86vw}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast.undo{pointer-events:auto;display:inline-flex;align-items:center;gap:16px}
  .toastundo{background:none;border:none;color:var(--paper);font-family:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:2px;flex:0 0 auto}
  .fbnudge{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(30px);width:calc(100% - 32px);max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px 14px 10px;z-index:6;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
  .fbnudge.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  .fbnq{font-size:14px;font-weight:600;color:var(--ink);text-align:center;margin-bottom:8px}
  .fbnstars{display:flex;justify-content:center;gap:10px;margin-bottom:4px}
  .fbnstar{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--line);transition:color .12s,transform .12s;padding:0}
  .fbnstar:hover,.fbnstar:active{transform:scale(1.15);color:var(--amber-ink)}
  .fbnno{display:block;margin:2px auto 0;background:none;border:none;color:var(--muted);font-size:14.5px;cursor:pointer;padding:4px 8px}
  /* This is how most people are meant to plan a trip, so it has to look like the main way in —
     not a small helper tucked in the corner. */
  .chatfab{position:fixed;right:16px;bottom:20px;z-index:7;display:flex;align-items:center;gap:9px;padding:16px 24px;border:none;border-radius:999px;background:var(--teal);color:#fff;font-size:17.5px;font-weight:700;font-family:var(--ff-body);box-shadow:var(--shadow-fab),0 2px 6px rgba(0,0,0,.18);cursor:pointer;transition:bottom .25s}
  .chatfab.nudged{bottom:132px}
  /* A soft ring on arrival, so the eye finds it once. It stops on its own and never repeats. */
  @keyframes fabring{0%{box-shadow:var(--shadow-fab),0 0 0 0 var(--teal)}
    70%{box-shadow:var(--shadow-fab),0 0 0 16px rgba(0,0,0,0)}
    100%{box-shadow:var(--shadow-fab),0 0 0 0 rgba(0,0,0,0)}}
  .chatfab.hint{animation:fabring 1.7s ease-out 3}
  @media (prefers-reduced-motion:reduce){.chatfab.hint{animation:none}}
  #app[dir="rtl"] .chatfab{right:auto;left:16px}
  .chatfab .chatfabic{font-size:20px}
  .chatpanel{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain;touch-action:none}
  body.chatlock{overflow:hidden}
  /* Freeze the page behind any open popup/sheet/drawer so scrolling inside it never drags the
     background (matches the chat panel's lock). .intro is inline content, not an overlay, so it's
     left out on purpose. Belt-and-braces overscroll-behavior on the scrollable panels below. */
  body:has(.drawer.show),body:has(.welcome.show),body:has(.cmpsheet.show),body.lbopen{overflow:hidden}
  .chatpanel.show{opacity:1;pointer-events:auto}
  .chatsheet{width:100%;max-width:520px;height:82vh;background:var(--card);border-radius:20px 20px 0 0;display:flex;flex-direction:column;transform:translateY(24px);transition:transform .25s;overflow:hidden}
  .chatpanel.show .chatsheet{transform:translateY(0)}
  .chathead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .chattitle{font-family:var(--ff-display);font-size:17px;font-weight:600;color:var(--ink)}
  .chatx{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px}
  .chatbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:16px;display:flex;flex-direction:column;gap:10px}
  .chatmsg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:15.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
  .chatmsg.bot{align-self:flex-start;background:var(--paper2);color:var(--ink);border-bottom-left-radius:5px}
  .chatmsg.user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:5px}
  #app[dir="rtl"] .chatmsg.bot{border-bottom-left-radius:14px;border-bottom-right-radius:5px}
  #app[dir="rtl"] .chatmsg.user{border-bottom-right-radius:14px;border-bottom-left-radius:5px}
  .chatmsg.typing{color:var(--muted)}
  .chatfoot{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line);flex:0 0 auto}
  .chatfoot textarea{flex:1;min-width:0;padding:11px 15px;border:1px solid var(--line);border-radius:20px;background:var(--paper2);color:var(--ink);font-size:16px;line-height:1.5;font-family:var(--ff-body);outline:none;resize:none;max-height:34vh;min-height:44px;overflow-y:auto}
  .chatfoot textarea:focus{border-color:var(--teal)}
  .chatfoot #chatSend{flex:0 0 auto;width:44px;height:44px;border:none;border-radius:50%;background:var(--teal);color:#fff;font-size:19px;font-weight:700;cursor:pointer}
  .chatfoot #chatMic{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--teal);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
  .chatfoot #chatMic svg{width:20px;height:20px}
  .chatfoot #chatMic:hover{border-color:var(--teal)}
  .chatfoot #chatMic.is-hidden{display:none}
  .chatfoot #chatMic.rec{background:#e5484d;border-color:#e5484d;color:#fff;animation:micpulse 1.2s infinite}
  /* The example is the instruction. It sits above the starter chips and reads as something you
     could have typed yourself, because that is the whole point. */
  .chateglbl{margin:14px 2px 6px;font-size:14px;font-weight:600;color:var(--muted)}
  .chateglbl.chipslbl{margin-top:20px}
  .chateg{display:block;width:100%;text-align:start;padding:12px 14px;border:1px dashed var(--teal);
    border-radius:12px;background:transparent;color:var(--ink);font-family:var(--ff-body);
    font-size:15px;line-height:1.5;cursor:pointer}
  .chateg:hover{background:rgba(0,0,0,.03);border-style:solid}
  .chatchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;align-self:flex-start;max-width:100%}
  .chatchip{padding:8px 13px;border:1px solid var(--teal);border-radius:999px;background:var(--teal-soft);color:var(--ink);font-size:15px;font-weight:600;font-family:var(--ff-body);cursor:pointer}
  .chatchip:active{transform:translateY(1px)}
  .ticket .tip{margin-top:11px;font-size:14.5px;background:rgba(255,255,255,.1);border-left:3px solid #e9d6a8;padding:8px 11px;border-radius:8px;line-height:1.45}
  #app[dir="rtl"] .ticket .tip{border-left:none;border-right:3px solid #e9d6a8}

  /* collapsible itinerary sections */
  .bud>h4,.pack>h4,.bookbar>.maphdr,.mapcard>.maphdr,.notecard>.maphdr{cursor:pointer;user-select:none;position:relative;padding-right:24px}
  #app[dir="rtl"] .bud>h4,#app[dir="rtl"] .pack>h4,#app[dir="rtl"] .bookbar>.maphdr,#app[dir="rtl"] .mapcard>.maphdr,#app[dir="rtl"] .notecard>.maphdr{padding-right:0;padding-left:24px}
  .bud>h4::after,.pack>h4::after,.bookbar>.maphdr::after,.mapcard>.maphdr::after,.notecard>.maphdr::after{content:"";position:absolute;right:4px;top:calc(50% - 5px);width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
  #app[dir="rtl"] .bud>h4::after,#app[dir="rtl"] .pack>h4::after,#app[dir="rtl"] .bookbar>.maphdr::after,#app[dir="rtl"] .mapcard>.maphdr::after,#app[dir="rtl"] .notecard>.maphdr::after{right:auto;left:4px}
  .collapsed>h4::after,.collapsed>.maphdr::after{transform:rotate(-135deg)}
  .collapsed>*:not(h4):not(.maphdr){display:none!important}

  @media print{
    /* white paper, black text */
    body,#app,.wrap{background:#fff!important;color:#000!important}
    /* hide the app chrome + the input form entirely */
    #topo,.hero,.langbar,.foot,.editfab,.card,.toast,.drawer,.scrim{display:none!important}
    /* safety net: only the itinerary is visible even if something above was missed */
    body *{visibility:hidden}
    #out,#out *{visibility:visible}
    .out{margin:0}
    /* drop the interactive controls that don't belong on paper */
    .picpop,#out .picinline,#out .infinline,#out .infobtn,#out .picbtn,#out .tuner,#out .daynav,#out .realtag,#out .actions,#out .cvbar,#out .flycard,#out .staybar,#out .bookrow,#out .provrow,#out .tuneanother,#out .dayshuffle,#out .swapbtn,#out .swappick,#out .dchev,#out button{display:none!important}
    #out .day.dcol .dbody{display:block!important} #out .dsum{display:none!important} /* PDF shows every day in full */
    .ticket{background:#173a5c!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .ticket,.day,.bud,.bookbar,.mapcard{break-inside:avoid}
    a[href]:after{content:""!important} /* don't append raw URLs after links */
  }

  #app[dir="rtl"]{text-align:right}
  #app[dir="rtl"] .hero,#app[dir="rtl"] .langbar,#app[dir="rtl"] .note,#app[dir="rtl"] .foot,#app[dir="rtl"] .realtag{text-align:center}
  #app[dir="rtl"] .eyebrow,#app[dir="rtl"] label,#app[dir="rtl"] .dlabel,#app[dir="rtl"] .slot .t,#app[dir="rtl"] .stat .k{letter-spacing:normal;text-transform:none;font-family:var(--ff-body)}
  /* Arabic has no capitals to give a short label weight, and its letterforms need the extra size */
  #app[dir="rtl"] label{font-size:16px}
  /* Arabic letterforms carry less at the same pixel size, so the small print gets a size up */
  #app[dir="rtl"] .slot .t,#app[dir="rtl"] .stat .k,#app[dir="rtl"] .dnavlbl,#app[dir="rtl"] .maphdr,
  #app[dir="rtl"] .realtag,#app[dir="rtl"] .nightslbl,#app[dir="rtl"] .transfer .tlabel,
  #app[dir="rtl"] .stayamenlbl,#app[dir="rtl"] .wxlabel,#app[dir="rtl"] .flylbl,#app[dir="rtl"] .applbl,
  #app[dir="rtl"] .pgbtn .pgdir,#app[dir="rtl"] .swappick .spk{font-size:15px}
  #app[dir="rtl"] .note,#app[dir="rtl"] .foot,#app[dir="rtl"] .budnote,#app[dir="rtl"] .nnote,
  #app[dir="rtl"] .cvnote,#app[dir="rtl"] .flynote,#app[dir="rtl"] .welnote,#app[dir="rtl"] .pronote,
  #app[dir="rtl"] .ptnote,#app[dir="rtl"] .pkhint,#app[dir="rtl"] .maptaphint{font-size:15px}
  #app[dir="rtl"] .day{border-left:none;border-right:2px solid var(--line);margin-left:0;margin-right:8px;padding-left:0;padding-right:26px}
  #app[dir="rtl"] .day:last-child{border-right-color:transparent}
  #app[dir="rtl"] .day::before{left:auto;right:-7px}
  #app[dir="rtl"] .route{padding-left:0;padding-right:4px}
  /* ---- Community: traveller-shared trips ---- */
  .cmwrap{margin:26px 0 8px}
  /* browsing shared trips — or your favourites — is a screen, not a section under the planner */
  body.cmmode .card,body.cmmode #mytrips,body.cmmode #lastTrip,
  body.cmmode #out,body.cmmode #saved,body.cmmode .intro,body.cmmode .editfab{display:none!important}
  body.svmode .card,body.svmode #mytrips,body.svmode #lastTrip,
  body.svmode #out,body.svmode #community,body.svmode .intro,body.svmode .editfab{display:none!important}
  /* My trips is a screen of its own now (the Trips tab), so unlike every other mode this one
     keeps #mytrips on screen and hides the planner around it instead. */
  body.tpmode .card,body.tpmode #lastTrip,body.tpmode #out,body.tpmode #community,
  body.tpmode #saved,body.tpmode #recscr,body.tpmode #mkscr,body.tpmode .intro,
  body.tpmode .editfab{display:none!important}
  /* A planned trip is a place, not a section under the form: once it exists it owns the
     screen, and the form is one tap away. People were pressing Plan and still looking at the
     form, or scrolling up later and thinking their trip had vanished. */
  body.planmode .card,body.planmode #mytrips,body.planmode #lastTrip,
  body.planmode .intro{display:none!important}
  body.recmode .card,body.recmode #mytrips,body.recmode #lastTrip,
  body.recmode #out,body.recmode #community,body.recmode #saved,body.recmode .intro,
  body.recmode .editfab,body.recmode .chatfab{display:none!important}
  body.cmmode #recscr,body.svmode #recscr{display:none!important}
  /* ---- Build it yourself ---------------------------------------------------------------------
     A blank itinerary for a traveller who already knows where they went: the same day cards as a
     generated plan, with every line typed by hand. Deliberately reuses .day / .slot so a hand-made
     trip and a generated one look like the same app. */
  body.mkmode .card,body.mkmode #mytrips,body.mkmode #lastTrip,
  body.mkmode #out,body.mkmode #community,body.mkmode #saved,body.mkmode #recscr,
  body.mkmode .intro,body.mkmode .editfab,body.mkmode .chatfab{display:none!important}
  body.cmmode #mkscr,body.svmode #mkscr,body.recmode #mkscr{display:none!important}
  /* the picker's dropdown is absolutely positioned, so its input needs to be the anchor */
  .mkcombo{position:relative;flex:1;min-width:0}
  .mkcombo input{width:100%}
  .prefbox{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
  .prefrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
  .prefrow:last-child{border-bottom:none}
  .prefrow label{flex:0 0 auto;min-width:88px;font-size:13.5px;color:var(--muted)}
  .prefrow select{flex:1;min-width:0;padding:9px 8px;border:1px solid var(--line);border-radius:12px;
    background:var(--paper);color:var(--ink);font-size:14px;font-family:var(--ff-body)}
  /* The two type-and-filter boxes sit exactly where their dropdowns did, at the same weight, so
     the row still reads as a settings line rather than as a search field. The menu overlays the
     rows beneath it — hence the raised stacking on the row that owns an open one. */
  .prefrow .racw{flex:1;min-width:0}
  .prefrow .racw input{padding:9px 10px;font-size:14px;background:var(--paper)}
  .prefrow:has(.racm.on){position:relative;z-index:7}
  .prefrow .racm{max-height:min(46vh,300px);overflow-y:auto;overscroll-behavior:contain}
  .prefrow .racm button{padding:10px 12px;font-size:14.5px}
  .mktrip{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:14px}
  .mkfield{display:flex;gap:8px;align-items:center;margin-bottom:8px}
  .mkfield:last-child{margin-bottom:0}
  .mkfield label{flex:0 0 auto;font-size:12.5px;color:var(--muted);min-width:74px}
  .mkfield input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:12px;
    background:var(--paper);color:var(--ink);font-size:14.5px;font-family:var(--ff-body)}
  .mkday{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
  .mkday .dlabel{font-family:var(--ff-data);font-size:11.5px;letter-spacing:1px;color:var(--amber-ink);text-transform:uppercase}
  /* a filled row borrows the itinerary's own slot — same icon, same amber label, same weight —
     so a hand-built day and a generated one read as the same document */
  .mkslot{padding:22px 2px 11px}
  .mkslot .mksub{display:block;font-size:12px;color:var(--muted);opacity:.75;margin-top:1px}
  /* .picbtn is hidden until a touch device asks for it; the builder's edit button is the only way
     back into a finished row, so it is always shown */
  .mkslot .mkedit{display:flex;color:var(--muted)}
  .mkrow{display:flex;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
  .mkrow:last-of-type{border-bottom:none}
  .mkrow select{flex:0 0 auto;width:34%;max-width:132px;padding:8px 6px;border:1px solid var(--line);border-radius:8px;
    background:var(--paper);color:var(--muted);font-size:12.5px;font-family:var(--ff-body)}
  .mkrow input{flex:1;min-width:0;padding:8px 9px;border:1px solid var(--line);border-radius:8px;
    background:var(--paper);color:var(--ink);font-size:14px;font-family:var(--ff-body)}
  .mkgo,.mkx{flex:0 0 auto;border:none;background:none;cursor:pointer;padding:3px 5px;font-size:14px;font-family:inherit}
  .mkgo{color:var(--teal)}
  .mkx{color:var(--muted);opacity:.7}
  .mkadd{margin-top:9px;width:100%;padding:9px;border:1px dashed var(--line);border-radius:12px;
    background:none;color:var(--muted);font-size:13.5px;font-family:var(--ff-body);cursor:pointer}
  .mkadd:hover{border-color:var(--amber-ink);color:var(--amber-ink)}
  .mkacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .mklist{margin-top:10px}
  .mkitem{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:12px;margin-bottom:8px;
    background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:pointer;font-family:var(--ff-body)}
  .mkitem b{font-size:15px;color:var(--ink)}
  .mkitem span{font-size:12.5px;color:var(--muted)}
  .mkitem .mkgrow{flex:1;min-width:0}
  /* the bottom tab bar from Ahmed's mockups: four rooms, one hallway */
  /* Three fixed layers — two pills and the nav — sat permanently over the bottom quarter of the
     screen, hiding 35 separate rows of the itinerary. They now step aside while you scroll down
     through a plan and come straight back the moment you stop or scroll up, so reading a day is
     full-screen and every action is still one flick away. */
  .chromehide .editfab,.chromehide .chatfab{opacity:0;transform:translateY(16px);pointer-events:none}
  .chromehide .tabbar{transform:translateY(100%)}
  .editfab,.chatfab{transition:opacity .2s ease,transform .2s ease}
  .tabbar{transition:transform .22s ease}
  @media (prefers-reduced-motion:reduce){
    .editfab,.chatfab,.tabbar{transition:none}
  }
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;justify-content:space-around;
    padding:7px 8px calc(9px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line)}
  .tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;
    color:var(--muted);font-size:11.5px;font-weight:600;font-family:var(--ff-body);cursor:pointer;padding:2px 0}
  .tabbar .tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar .tab.on{color:var(--amber-ink)}
  body.lbopen .tabbar{display:none!important}
  body.welopen .chatfab,body.welopen .tabbar,body.welopen .topbtn{display:none!important}
  @media print{.tabbar,.topbtn{display:none!important}}
  /* everything floating steps up over the bar, and the page leaves room for it */
  .wrap{padding-bottom:120px}
  .chatfab{bottom:76px}
  .topbtn{bottom:82px}
  .toast{bottom:86px}
  /* the passport screen: the pocket globe and its dressing */
  #recscr canvas{display:block;width:100%;height:auto;border-radius:16px;touch-action:none;cursor:grab}
  .reccard{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
  .recseg button.on{background:var(--amber);color:var(--paper);font-weight:700}
  .reclbl{font-size:13px;color:var(--muted);margin:12px 0 5px;font-weight:600}
  .racw{position:relative}
  .racw input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-size:15px;font-family:inherit}
  .racm{position:absolute;top:calc(100% + 4px);inset-inline:0;background:var(--card);border:1px solid var(--line);border-radius:12px;z-index:6;display:none;overflow:hidden;box-shadow:var(--shadow)}