/* Small souvenirs of the journey: sunlit sand, turquoise seas, a coral sail.
   Requests set the pace; these details never hold up navigation. */

#voyage-status.voyage-status{
  position:fixed;
  z-index:240;
  left:50%;
  bottom:max(24px,env(safe-area-inset-bottom));
  translate:-50% 0;
  display:flex;
  align-items:center;
  gap:16px;
  width:390px;
  max-width:calc(100vw - 36px);
  padding:13px 26px 13px 14px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--sand-tint);
  color:var(--ink);
  box-shadow:0 12px 35px #173c5018,0 2px 4px #173c5008;
  pointer-events:none;
  animation:voyage-ticket-arrive .3s cubic-bezier(.2,.75,.25,1) both
}
#voyage-status[hidden]{display:none!important}
.voyage-ticket-edge{
  position:absolute;
  top:12px;
  right:10px;
  bottom:12px;
  border-left:1px dashed var(--sand)
}
.voyage-scene{
  position:relative;
  display:block;
  flex:0 0 112px;
  width:112px;
  height:86px;
  overflow:hidden;
  border-radius:55px 55px 4px 4px;
  background:var(--surface-2);
  isolation:isolate
}
.voyage-horizon{position:absolute;inset:0;width:100%;height:100%}
.voyage-ship{
  position:absolute;
  z-index:1;
  left:24px;
  bottom:5px;
  display:block;
  width:65px;
  height:56px;
  object-fit:contain;
  transform-origin:50% 75%;
  animation:voyage-bob 3.6s ease-in-out infinite
}
.voyage-wake{
  position:absolute;
  left:-40px;
  right:-40px;
  bottom:3px;
  height:14px;
  background:url('motifs/wave-line.svg') repeat-x left center / 80px 12px;
  opacity:.6;
  animation:voyage-current 5s linear infinite
}
.voyage-status-copy{display:block;min-width:0}
.voyage-status-copy .voyage-status-kicker{
  margin:0 0 7px;
  color:var(--coral-text);
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.4
}
.voyage-status-copy strong{
  display:block;
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.17;
  font-weight:500;
  letter-spacing:-.02em;
  text-wrap:balance
}
.voyage-status-copy span{
  display:block;
  margin-top:6px;
  color:var(--ink-3);
  font-size:11px;
  line-height:1.5
}

/* The wake stays inside a button without moving its label or focus ring. */
.button.is-sailing{position:relative;isolation:isolate;cursor:wait}
.button.is-sailing::after{
  content:'';
  position:absolute;
  left:2px;
  right:2px;
  bottom:2px;
  height:3px;
  border-radius:0 0 7px 7px;
  background:linear-gradient(105deg,transparent 15%,#fff8ec80 43%,var(--sun) 50%,#fff8ec80 57%,transparent 85%) 140% 0 / 220% 100%;
  pointer-events:none;
  animation:voyage-button-wake 1.8s ease-in-out infinite
}
form[aria-busy="true"] .button.is-sailing{opacity:.85}
.voyage-form-status{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:12px 0 6px;
  color:var(--ink-2);
  font-size:12px;
  line-height:1.5;
  animation:voyage-arrive .2s ease-out both
}
.voyage-form-status[hidden]{display:none!important}
.voyage-form-status img{
  display:block;
  flex:0 0 36px;
  width:36px;
  height:31px;
  object-fit:contain;
  animation:voyage-bob 3.6s ease-in-out infinite
}
.form-actions:has(>.voyage-form-status){flex-wrap:wrap}
.form-actions>.voyage-form-status{flex-basis:100%;order:-1;margin:0 0 3px}

#toast.voyage-toast{
  padding:17px 23px 17px 68px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--sand-tint);
  color:var(--ink);
  box-shadow:0 9px 28px #173c501a;
  line-height:1.5
}
#toast.voyage-toast:not(.error)::before{
  content:'';
  position:absolute;
  left:18px;
  top:50%;
  width:33px;
  height:32px;
  margin-top:-16px;
  background:url('motifs/journal-sailboat.svg') no-repeat center / contain
}
#toast.voyage-toast.voyage-celebrate:not(.error)::before{
  animation:voyage-dock .58s cubic-bezier(.2,.8,.3,1) both
}
#toast.voyage-toast.voyage-celebrate:not(.error)::after{
  content:'';
  position:absolute;
  left:11px;
  top:50%;
  margin-top:-24px;
  width:45px;
  height:45px;
  border:1px dashed var(--coral);
  border-radius:50%;
  pointer-events:none;
  animation:voyage-stamp .65s cubic-bezier(.2,.75,.25,1) both
}
#toast.voyage-toast.error{padding-left:22px}
#toast.voyage-toast.error::before,#toast.voyage-toast.error::after{content:none}

/* Native progress retains its value and semantics; the ship marks its bow. */
.voyage-progress{
  position:relative;
  display:block;
  width:100%;
  min-width:60px;
  height:20px;
  margin:13px 0 22px;
  padding-top:10px
}
.voyage-progress progress{
  display:block;
  width:100%;
  height:7px;
  margin:0;
  background:var(--tint)
}
.voyage-progress progress::-webkit-progress-value{background:var(--teal)}
.voyage-progress progress::-moz-progress-bar{background:var(--teal)}
.voyage-progress-ship{
  position:absolute;
  display:block;
  top:-7px;
  left:clamp(0px,calc(var(--voyage-progress,0%) - 19px),calc(100% - 38px));
  width:38px;
  height:23px;
  max-width:none;
  visibility:hidden;
  background:url('motifs/ship.svg') no-repeat center / contain;
  pointer-events:none;
  transition:left .65s cubic-bezier(.2,.75,.25,1)
}
.voyage-progress-ready>.voyage-progress-ship{visibility:visible}
.voyage-progress-arrived>.voyage-progress-ship{animation:voyage-dock .65s cubic-bezier(.2,.8,.3,1) both}
.task-progress>.voyage-progress{
  flex:1 1 130px;
  max-width:320px;
  margin:4px 0 0
}
.task-progress .voyage-progress progress{max-width:none;margin:0}

/* Stationary details add place without adding visual noise. */
.app-footer{position:relative}
.app-footer::before{
  content:'';
  position:absolute;
  top:-9px;
  left:calc(50% - 50px);
  width:100px;
  height:18px;
  background:var(--bg) url('motifs/wave-line.svg') no-repeat center / 88px 14px;
  pointer-events:none
}
.auth-trip{position:relative;padding-right:62px}
.auth-trip::after{
  content:'';
  position:absolute;
  top:13px;
  right:-5px;
  width:59px;
  height:74px;
  background:url('motifs/palm-frond.svg') no-repeat center / contain;
  opacity:.5;
  pointer-events:none
}
.empty{position:relative;isolation:isolate}
.empty::after{
  content:'';
  position:absolute;
  z-index:-1;
  bottom:10px;
  right:15px;
  width:90px;
  height:58px;
  background:url('motifs/island.svg') no-repeat center / contain;
  opacity:.6;
  pointer-events:none
}
.text-link .voyage-arrow,.button .voyage-arrow{transition:transform .2s ease}
.discovery-card-photo{overflow:hidden}
.discovery-card-photo img{transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.discovery-card-arrow{transition:transform .2s ease}
.discovery-card:focus-visible,.discovery-card:has(:focus-visible){outline:2px solid var(--teal);outline-offset:4px}
dialog[id^="discovery-"] .sheet-body{overscroll-behavior-y:contain}
@media(hover:hover){
  .text-link:hover .voyage-arrow,.button:hover:not(:disabled) .voyage-arrow{transform:translateX(3px)}
  .discovery-card:hover .discovery-card-photo img{transform:scale(1.025)}
  .discovery-card:hover .discovery-card-arrow{transform:translateX(3px)}
}
@media(min-width:761px){
  .modal[open]{animation:voyage-arrive .24s cubic-bezier(.2,.75,.25,1) both}
}

/* A page settles like a fresh journal leaf; the navigation shell stays still. */
::view-transition-old(main){animation:voyage-page-away .16s ease-in both}
::view-transition-new(main){animation:voyage-page-arrive .3s cubic-bezier(.2,.75,.25,1) both}
@keyframes voyage-page-away{
  to{opacity:0;transform:translateX(-4px)}
}
@keyframes voyage-page-arrive{
  from{opacity:0;transform:translate(10px,3px)}
  to{opacity:1;transform:none}
}
@keyframes voyage-ticket-arrive{
  from{opacity:0;transform:translateY(7px) rotate(-1deg)}
  to{opacity:1;transform:translateY(0) rotate(0)}
}
@keyframes voyage-arrive{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes voyage-bob{
  0%,100%{transform:translate(0,0) rotate(-2deg)}
  50%{transform:translate(3px,-2px) rotate(2deg)}
}
@keyframes voyage-current{to{transform:translateX(-40px)}}
@keyframes voyage-button-wake{
  0%{background-position:140% 0;opacity:.3}
  50%{opacity:1}
  100%{background-position:-40% 0;opacity:.3}
}
@keyframes voyage-dock{
  0%{opacity:0;transform:translateX(-8px) rotate(-5deg)}
  65%{opacity:1;transform:translateX(2px) rotate(2deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}
}
@keyframes voyage-stamp{
  0%{opacity:0;transform:scale(1.3) rotate(9deg)}
  50%{opacity:.85;transform:scale(.94) rotate(-9deg)}
  100%{opacity:.55;transform:scale(1) rotate(-9deg)}
}
@media(max-width:1250px){
  .task-progress>.voyage-progress{max-width:190px}
}
@media(max-width:1030px){
  .task-progress>.voyage-progress{max-width:none}
}
@media(max-width:760px){
  #voyage-status.voyage-status{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);gap:14px;padding:11px 23px 11px 11px;max-width:calc(100vw - 32px)}
  .voyage-scene{flex-basis:92px;width:92px;height:76px}
  .voyage-ship{left:15px;width:63px;height:54px;bottom:4px}
  .voyage-status-copy strong{font-size:18px}
  .voyage-status-copy .voyage-status-kicker{margin-bottom:5px}
  /* Keep the cue clear of the floating action and of a showing toast. */
  body:has(#main:is([data-page="plan"],[data-page="checklist"],[data-page="packing"],[data-page="budget"],[data-page="notes"],[data-page="admin"])) #voyage-status.voyage-status{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 80px)}
  body:has(#toast:not([hidden])) #voyage-status.voyage-status{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 76px)}
  body:has(#toast:not([hidden])):has(#main:is([data-page="plan"],[data-page="checklist"],[data-page="packing"],[data-page="budget"],[data-page="notes"],[data-page="admin"])) #voyage-status.voyage-status{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 144px)}
  .task-progress>.voyage-progress{flex-basis:100%;width:100%;margin:7px 0 0}
  .empty::after{width:76px;height:49px;right:8px;bottom:7px;opacity:.45}
  #toast.voyage-toast{padding:15px 18px 15px 66px}
  #toast.voyage-toast:not(.error)::before{left:17px;width:33px}
  #toast.voyage-toast.error{padding-left:22px}
}
@media(prefers-reduced-motion:reduce){
  #voyage-status.voyage-status,.voyage-ship,.voyage-wake,.button.is-sailing::after,
  .voyage-form-status,.voyage-form-status img,
  #toast.voyage-toast.voyage-celebrate::before,.modal[open],.modal::backdrop,#toast,
  .text-link .voyage-arrow,.button .voyage-arrow,.voyage-progress-ship,
  .discovery-card-photo img,.discovery-card-arrow{
    animation:none!important;
    transition:none!important;
    transform:none!important
  }
  #toast.voyage-toast.voyage-celebrate::after{display:none!important}
  .button.is-sailing::after{background:var(--line-2);opacity:.65}
  ::view-transition-old(main),::view-transition-new(main){animation:none!important}
}
@media print{
  #voyage-status.voyage-status,.voyage-form-status,.voyage-progress-ship,.app-footer::before,
  .auth-trip::after,.empty::after,.button.is-sailing::after{display:none!important}
  .voyage-progress{height:7px;padding-top:0}
}