/* ================= screens ================= */
.screen{position:fixed;inset:0;z-index:2;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 110px);
  opacity:0;visibility:hidden;transform:translateY(24px);
  transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s linear .6s}
.screen.active{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .1s,transform .6s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s}
.screen.leave-up{transform:translateY(-30px) scale(.98)}
#s-card{justify-content:center;gap:22px;overflow:hidden;padding-bottom:calc(env(safe-area-inset-bottom) + 18px)}

.sheet{width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px}
.topline{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.back-btn{appearance:none;border:0;background:rgba(255,255,255,.55);color:#8b6474;font:500 italic 17px "Serif",Georgia,serif;
  padding:7px 14px 7px 11px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:4px;
  box-shadow:0 1px 2px rgba(120,50,80,.08)}
.back-btn svg{width:16px;height:16px}
.eyebrow{font:500 italic 15px "Serif",Georgia,serif;color:#b08898;letter-spacing:.5px}
.steps{display:flex;gap:6px}.steps i{width:22px;height:4px;border-radius:4px;background:rgba(212,106,134,.2)}.steps i.on{background:var(--rose)}
h2{font:500 italic clamp(34px,10vw,44px)/1.02 "Serif",Georgia,serif;color:#6e3f55;margin-top:4px}
h2 span{color:var(--rose)}
.sub{font:500 italic 18px/1.35 "Serif",Georgia,serif;color:#9a7584;margin-top:-4px}

.panel{background:rgba(255,252,247,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:22px;padding:16px;box-shadow:0 1px 1px rgba(90,40,60,.05),0 12px 30px -12px rgba(120,50,80,.25);
  border:1px solid rgba(255,255,255,.7)}

/* ================= buttons ================= */
.actions{position:relative;z-index:3;display:flex;gap:12px;align-items:center;justify-content:center;
  width:var(--w);min-height:56px;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.actions.show{opacity:1;transform:none;pointer-events:auto}
.btn{appearance:none;border:0;cursor:pointer;font:500 italic 21px "Serif",Georgia,serif;border-radius:999px;
  padding:14px 26px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s ease,box-shadow .2s ease,opacity .3s,background .3s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn.primary{color:#fff;background:linear-gradient(135deg,#e27b98,#c9577a);
  box-shadow:0 8px 20px -6px rgba(201,87,122,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:disabled{background:#ebc6d2;color:#fff;box-shadow:none;cursor:default;animation:none}
.btn.ghost{color:#9b7383;background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(120,50,80,.1)}
.btn.big{flex:1;font-size:23px;padding:16px 26px}
#yes{position:relative;z-index:6;animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 8px 20px -6px rgba(201,87,122,.6),0 0 0 0 rgba(226,123,152,.45)}50%{box-shadow:0 8px 20px -6px rgba(201,87,122,.6),0 0 0 10px rgba(226,123,152,0)}}
#no{transition:left .35s cubic-bezier(.3,1.4,.5,1),top .35s cubic-bezier(.3,1.4,.5,1),transform .35s}

.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;
  padding:14px 16px calc(env(safe-area-inset-bottom) + 14px);
  background:linear-gradient(to top,rgba(246,221,226,.97) 55%,rgba(246,221,226,0));
  transform:translateY(120%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.screen.active .bottom-bar{transform:none;transition-delay:.25s}
.bottom-bar .btn{width:100%;max-width:440px}

/* ================= date chips ================= */
.chips{display:flex;align-items:stretch;gap:8px}
.chip{flex:1;border-radius:16px;padding:10px 14px;background:rgba(255,255,255,.55);border:1.5px dashed rgba(212,106,134,.35);
  display:flex;flex-direction:column;gap:2px;transition:all .3s}
.chip small{font:500 italic 14px "Serif",Georgia,serif;color:#b08898}
.chip b{font:400 21px "Hand",cursive;color:var(--ink);min-height:1.3em}
.chip.filled{background:#fff;border:1.5px solid rgba(212,106,134,.55)}
.chip.next{border-color:var(--rose);animation:chipPulse 1.6s ease-in-out infinite}
@keyframes chipPulse{50%{box-shadow:0 0 0 4px rgba(212,106,134,.15)}}
.plane-sep{align-self:center;color:var(--rose);font-size:18px}

/* ================= calendar ================= */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head b{font:500 italic 23px "Serif",Georgia,serif;color:#6e3f55;text-transform:capitalize}
.cal-nav{appearance:none;border:0;width:38px;height:38px;border-radius:50%;background:rgba(212,106,134,.1);color:var(--rose);cursor:pointer;display:grid;place-items:center}
.cal-nav:disabled{opacity:.25}
.cal-nav svg{width:18px;height:18px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.cal-wd{text-align:center;font:500 italic 14px "Serif",Georgia,serif;color:#b89aa6;padding:4px 0 6px}
.cal-wd.we{color:#d890a6}
.day{position:relative;aspect-ratio:1/1;display:grid;place-items:center;border:0;background:none;cursor:pointer;
  font:500 18px "Serif",Georgia,serif;font-style:normal;color:#5d3d4d;-webkit-appearance:none;padding:0}
.day span{position:relative;z-index:1;width:84%;height:84%;display:grid;place-items:center;border-radius:50%;transition:background .2s,color .2s,transform .2s}
.day:disabled{color:#d6c3cb;cursor:default}
.day.today span{box-shadow:inset 0 0 0 1.5px rgba(212,106,134,.45)}
.day.in::before{content:"";position:absolute;inset:8% 0;background:rgba(226,123,152,.16)}
.day.start::before{content:"";position:absolute;inset:8% 0 8% 50%;background:rgba(226,123,152,.16)}
.day.end::before{content:"";position:absolute;inset:8% 50% 8% 0;background:rgba(226,123,152,.16)}
.day.start.end::before{display:none}
.day.start span,.day.end span{background:linear-gradient(135deg,#e27b98,#c9577a);color:#fff;transform:scale(1.02);box-shadow:0 4px 10px -3px rgba(201,87,122,.6)}
.day.pop span{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.2)}}

/* ================= flights ================= */
.leg{display:flex;flex-direction:column;gap:10px}
.leg-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px}
.route{font:500 italic 22px "Serif",Georgia,serif;color:#6e3f55;display:flex;align-items:center;gap:8px}
.route svg{width:18px;height:18px;color:var(--rose)}
.leg-date{font:400 17px "Hand",cursive;color:var(--ink);white-space:nowrap}
.list{display:flex;flex-direction:column;gap:9px}
.ticket{appearance:none;-webkit-appearance:none;text-align:left;cursor:pointer;position:relative;width:100%;
  background:#fffdf9;border:1.5px solid rgba(160,120,135,.16);border-radius:18px;padding:13px 16px 12px;
  display:flex;flex-direction:column;gap:7px;color:#5d3d4d;
  box-shadow:0 1px 1px rgba(90,40,60,.04),0 6px 14px -8px rgba(120,50,80,.25);
  transition:border-color .25s,transform .2s,box-shadow .25s,background .25s;
  animation:ticketIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes ticketIn{from{opacity:0;transform:translateY(10px)}}
.ticket:active{transform:scale(.985)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--bg2);border:1.5px solid rgba(160,120,135,.16)}
.ticket::before{left:-8px;clip-path:inset(0 0 0 50%)}.ticket::after{right:-8px;clip-path:inset(0 50% 0 0)}
.ticket.sel{border-color:var(--rose);background:#fff;box-shadow:0 10px 24px -10px rgba(201,87,122,.55)}
.t-times{display:flex;align-items:center;gap:10px;padding-right:30px}
.t-times b{font:600 26px/1 "Serif",Georgia,serif;font-style:normal;color:#4a2f3d;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.t-times b sup{font-size:12px;color:var(--rose);margin-left:2px}
.t-line{flex:1;display:flex;align-items:center;gap:6px;font:500 italic 14px "Serif",Georgia,serif;color:#b08898;white-space:nowrap}
.t-line i{flex:1;height:0;border-top:1.5px dashed rgba(176,136,152,.45)}
.t-meta{display:flex;justify-content:space-between;gap:10px;font:500 italic 16px "Serif",Georgia,serif;color:#9a7584}
.t-meta span:last-child{font-style:normal;font-size:14px;letter-spacing:.8px;color:#b08898}
.t-check{position:absolute;right:13px;top:12px;width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(176,136,152,.35);display:grid;place-items:center;color:transparent;font-size:14px;transition:all .25s}
.ticket.sel .t-check{background:var(--rose);border-color:var(--rose);color:#fff;transform:scale(1.08)}
.skel{height:82px;border-radius:18px;background:linear-gradient(100deg,rgba(255,255,255,.45) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.45) 70%);background-size:300% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-150% 0}}
.loading-note{display:flex;align-items:center;gap:8px;font:500 italic 16px "Serif",Georgia,serif;color:#b08898;padding:0 4px}
.loading-note svg{width:18px;height:18px;color:var(--rose);animation:fly 1.4s ease-in-out infinite}
@keyframes fly{50%{transform:translate(4px,-3px) rotate(-6deg)}}
.empty{font:500 italic 17px/1.35 "Serif",Georgia,serif;color:#9a7584;padding:4px 4px 2px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{appearance:none;border:1.5px solid rgba(212,106,134,.3);background:rgba(255,255,255,.7);color:#8b5a6e;cursor:pointer;
  font:500 italic 17px "Serif",Georgia,serif;padding:9px 15px;border-radius:999px;transition:all .2s}
.pill.sel{background:var(--rose);border-color:var(--rose);color:#fff}
.any-row{display:flex;justify-content:center;margin-top:2px}

.note-box{display:flex;flex-direction:column;gap:8px}
.note-box label{font:500 italic 18px "Serif",Georgia,serif;color:#8b6474;padding:0 4px}
.note-box textarea{width:100%;min-height:92px;resize:none;border-radius:18px;border:1.5px solid rgba(160,120,135,.2);
  background:#fffdf9 repeating-linear-gradient(transparent 0 31px,rgba(39,54,107,.08) 31px 32px);background-position:0 12px;
  padding:12px 16px;font:400 20px/32px "Hand",cursive;color:var(--ink);outline:none;-webkit-user-select:text;user-select:text}
.note-box textarea:focus{border-color:var(--rose)}
.note-box textarea::placeholder{color:#c4aab5}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);z-index:9;transform:translate(-50%,20px);opacity:0;
  background:#5d3d4d;color:#fff;font:500 italic 17px "Serif",Georgia,serif;padding:11px 18px;border-radius:14px;max-width:90vw;text-align:center;
  transition:all .35s;pointer-events:none}
.toast.show{opacity:.95;transform:translate(-50%,0)}

/* ================= done / boarding pass ================= */
#s-done{justify-content:center;padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
.done-title{font:400 clamp(40px,12vw,54px)/1.1 "Hand",cursive;color:var(--ink);text-align:center;transform:rotate(-3deg);margin:6px 0 2px}
.done-sub{text-align:center;font:500 italic 19px/1.35 "Serif",Georgia,serif;color:#9a7584}
.pass{position:relative;width:100%;max-width:400px;margin:0 auto;border-radius:22px;background:#fffdf9;overflow:hidden;
  box-shadow:0 1px 1px rgba(90,40,60,.06),0 18px 40px -16px rgba(120,50,80,.45);animation:passIn .9s cubic-bezier(.2,.9,.25,1.1) both .15s}
@keyframes passIn{from{opacity:0;transform:translateY(40px) rotate(-4deg) scale(.95)}}
.pass-top{background:linear-gradient(120deg,#e684a0,#c9577a);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.pass-top b{font:500 italic 20px "Serif",Georgia,serif}
.pass-top small{font:500 11px/1 Georgia,serif;letter-spacing:2px;opacity:.85}
.pass-body{padding:16px 20px 6px}
.pass-leg{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.pass-leg .code{font:600 36px/1 Georgia,serif;color:#4a2f3d;letter-spacing:1px}
.pass-leg .city{font:500 italic 15px "Serif",Georgia,serif;color:#a4808f}
.pass-leg .r{text-align:right}
.pass-leg .mid{color:var(--rose);display:flex;flex-direction:column;align-items:center;font:500 italic 13px "Serif",Georgia,serif}
.pass-leg .mid svg{width:26px;height:26px}
.pass-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 10px}
.pass-rows div{display:flex;flex-direction:column;gap:1px}
.pass-rows small{font:500 10px/1.2 Georgia,serif;letter-spacing:1.5px;color:#b89aa6;text-transform:uppercase}
.pass-rows b{font:400 18px "Hand",cursive;color:var(--ink)}
.pass-sep{position:relative;height:0;border-top:2px dashed rgba(176,136,152,.3);margin:6px 0}
.pass-sep::before,.pass-sep::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg2)}
.pass-sep::before{left:-31px}.pass-sep::after{right:-31px}
.pass-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 16px;gap:12px}
.pass-foot .who small{display:block;font:500 10px Georgia,serif;letter-spacing:1.5px;color:#b89aa6;text-transform:uppercase}
.pass-foot .who b{font:400 20px "Hand",cursive;color:var(--ink)}
.barcode{height:40px;width:120px;background:repeating-linear-gradient(90deg,#4a2f3d 0 2px,transparent 2px 4px,#4a2f3d 4px 5px,transparent 5px 8px,#4a2f3d 8px 11px,transparent 11px 13px);opacity:.75;border-radius:2px}
.done-heart{width:64px;margin:0 auto;animation:beat2 1.4s ease-in-out infinite}
@keyframes beat2{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(.97)}45%{transform:scale(1.08)}}
.again{margin:4px auto 0;display:block}

@media (min-height:760px){.screen:not(#s-card){padding-top:calc(env(safe-area-inset-top) + 34px)}}

.t-times b,.day,.cal-head b,.pass-leg .code,.t-line{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.t-approx{font-style:normal;color:var(--rose);font-size:13px}
.approx-note{font:500 italic 15px "Serif",Georgia,serif;color:#b08898;padding:0 6px}
.hint-chips{display:flex;flex-wrap:wrap;gap:7px}
.hint-chip{appearance:none;border:1.5px solid rgba(212,106,134,.28);background:rgba(255,255,255,.7);color:#8b5a6e;cursor:pointer;font:500 italic 16px "Serif",Georgia,serif;padding:7px 13px;border-radius:999px;transition:all .2s}
.hint-chip.sel{background:var(--rose);border-color:var(--rose);color:#fff}
.hint-chip:active{transform:scale(.95)}