/* v6 UI/UX polish layer — loaded after styles.css and theme.css.
   Keeps the existing look; improves readability, touch ergonomics, motion and mobile layout. */

/* ---------- Base ergonomics ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,a,label,summary,input[type=checkbox]{-webkit-tap-highlight-color:transparent}
button,summary,[data-action]{touch-action:manipulation}
::selection{background:#d9cffd;color:#181c37}

/* Visible keyboard focus everywhere, never on mouse/touch */
:where(button,a,input,select,textarea,summary,[tabindex]):focus{outline:none}
:where(button,a,input,select,textarea,summary,[tabindex]:not(#main)):focus-visible{outline:2.5px solid #7160ef;outline-offset:2px;border-radius:10px}
.hero :where(button,a):focus-visible,.park-launches :focus-visible{outline-color:#fff}

/* Press feedback */
:where(.btn,.chip,.day,.event,.nav-btn,.icon-btn,.park-launch,.hero-pulse,.back-btn,.guide-card,.category-card){transition:transform .14s ease,background-color .15s,box-shadow .2s,border-color .15s}
:where(.btn,.chip,.day,.event,.icon-btn,.hero-pulse,.back-btn):active{transform:scale(.97)}
:where(.event,.park-launches>*):active{transform:scale(.985)}

/* Hover lift on pointer devices only */
@media (hover:hover){
  .event:hover{box-shadow:0 10px 28px #2526571a;border-color:#d8d1f4}
  .day:not(.active):hover{border-color:#cfc6f1;box-shadow:0 6px 16px #2526570f}
}

/* ---------- Route enter animation ---------- */
@keyframes route-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.main.enter>*{animation:route-in .32s cubic-bezier(.2,.7,.2,1) both}
.main.enter>*:nth-child(2){animation-delay:.03s}
.main.enter>*:nth-child(3){animation-delay:.06s}

/* Images fade in instead of popping */
img.guide-photo,.park-launches img,.experience-hero img{transition:opacity .45s ease}
img.guide-photo:not(.loaded),.experience-hero img:not(.loaded){opacity:0}

/* ---------- Top bar: alert badge ---------- */
.bell-btn{position:relative}
.bell-btn .badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#f67574;color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 0 2.5px #11152e;font-variant-numeric:tabular-nums}

/* ---------- Toast with Undo ---------- */
#toast{display:flex;align-items:center;gap:14px;font-size:13.5px;min-width:min(340px,calc(100% - 30px))}
#toast:not(.has-action){display:block}
#toast.has-action{pointer-events:auto;justify-content:space-between;padding:10px 10px 10px 18px}
#toast .toast-action{border:0;background:#ffffff1f;color:#fff;font:inherit;font-weight:750;border-radius:10px;padding:9px 15px;min-height:40px;cursor:pointer}
#toast .toast-action:hover{background:#ffffff33}

/* ---------- Itinerary ---------- */
.hero-pulse{display:flex;align-items:center;gap:12px;margin:18px 0 4px;padding:11px 14px 11px 12px;max-width:440px;border-radius:15px;border:1px solid #ffffff2b;background:#ffffff17;color:#fff;font:inherit;text-align:left;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer}
div.hero-pulse{cursor:default}
.hero-pulse:hover{background:#ffffff24}
.hero-pulse .pulse-label{flex:none;font-size:12px;font-weight:800;letter-spacing:.02em;padding:6px 10px;border-radius:99px;background:#ffca66;color:#2a2040;white-space:nowrap}
.hero-pulse .pulse-detail{font-size:13.5px;font-weight:600;line-height:1.35;min-width:0}
.hero-pulse .icon{flex:none;width:16px;height:16px;margin-left:auto;opacity:.8}
.hero .hero-text{position:relative}

.plan-parks-title{display:none}

.time{line-height:1.25}
.time .t-ampm{font-size:.82em;font-weight:650;margin-left:2px;opacity:.85}
.time small{margin-top:4px;white-space:normal;line-height:1.3}

/* Clear "done" state for agenda cards */
.event.finished{opacity:.62}
.event.finished h3{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#9c95c4}

/* ---------- Guide detail back button ---------- */
.guide-breadcrumb .back-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 13px 7px 10px;margin-right:6px;border-radius:99px;border:1px solid #e2dcf3;background:#fff;color:#4c3d8f;font-weight:700;font-size:12.5px;box-shadow:0 2px 6px #2526570a}
.guide-breadcrumb .back-btn .icon{width:15px;height:15px;transform:rotate(180deg)}
.guide-breadcrumb .back-btn+button{margin-left:2px}

/* ---------- Checklists ---------- */
.check-row{align-items:center}
.check-row input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:#7160ef;cursor:pointer}
.check-row label{cursor:pointer;padding:6px 0}
.check-row .remove{min-width:40px;min-height:40px;border-radius:10px;font-size:20px;line-height:1;color:#a39cbc;opacity:.75}
.check-row .remove:hover{background:#fbeeee;color:#d25555;opacity:1}
.check-row.complete label{text-decoration:line-through;text-decoration-color:#bdb6d6}

/* ---------- Dialog polish ---------- */
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
dialog[open]{animation:dialog-in .24s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:backdrop-in .2s ease}
dialog{overscroll-behavior:contain}
body:has(dialog[open]){overflow:hidden}

/* ---------- Mobile ---------- */
@media (max-width:680px){
  /* iOS Safari zooms into inputs smaller than 16px — prevent it */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}

  /* Itinerary: agenda first, park cards after */
  .plan-flow{display:flex;flex-direction:column}
  .plan-flow>.page-head{order:0}
  .plan-flow>.hero{order:1}
  .plan-flow>.day-strip{order:2}
  .plan-flow>.notice{order:3}
  .plan-flow>.content-grid{order:4}
  .plan-flow>.plan-parks{order:5;margin-top:26px}
  .plan-parks-title{display:block;margin-bottom:4px}
  .plan-parks-title h2{font-size:24px;letter-spacing:-.02em}
  .plan-parks-title small{color:var(--muted);font-size:12.5px}
  .plan-flow>.page-head p{display:none}

  /* Compact hero so today's plan is visible without scrolling */
  .plan-flow .hero{min-height:0;padding:22px 20px 20px}
  .plan-flow .hero h2{font-size:32px;max-width:none}
  .plan-flow .hero-text p{font-size:13px}
  .plan-flow .hero-sub{display:none}
  .plan-flow .hero-text>.eyebrow{display:none}
  .plan-flow .hero .pill{display:none}
  .hero-pulse{width:100%;max-width:none;margin-top:14px}

  /* Sticky, swipeable day picker */
  .plan-flow>.day-strip{position:sticky;top:0;z-index:6;margin:14px -17px 16px;padding:8px 17px;background:#f5f6fcf0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .plan-flow>.day-strip .day{padding:9px 4px;gap:3px}
  .day .where{line-height:1.3}

  /* Timeline */
  .agenda-row{grid-template-columns:64px minmax(0,1fr)!important;gap:8px!important}
  .time{font-size:13px!important;padding-top:17px}
  .time small{font-size:11px!important;white-space:nowrap}

  /* Food tabs: one swipeable row instead of a wrapped grid */
  .food-tabs{display:flex!important;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-left:-17px!important;margin-right:-17px!important;padding:8px 17px 10px!important;gap:8px!important}
  .food-tabs::-webkit-scrollbar{display:none}
  .food-tabs .chip{flex:0 0 auto;white-space:nowrap;min-height:42px;padding:8px 15px;font-size:12.5px;scroll-snap-align:center}
  .guide-category-bar{scrollbar-width:none}
  .guide-category-bar::-webkit-scrollbar{display:none}

  /* Bottom sheet dialogs */
  dialog{width:100%!important;max-width:100%!important;margin:auto 0 0!important;border-radius:24px 24px 0 0!important;max-height:92dvh!important;border-bottom:0!important;padding-bottom:env(safe-area-inset-bottom)!important}
  dialog::before{content:"";display:block;width:40px;height:5px;border-radius:9px;background:#dcd6ea;margin:9px auto 0}
  @keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
  dialog[open]{animation:sheet-up .3s cubic-bezier(.2,.8,.2,1)}
  .dialog-actions{position:sticky;bottom:0;background:#fff;padding-top:12px;padding-bottom:6px;margin-top:18px}
  .dialog-actions .btn{flex:1}

  /* Bottom nav: clearer active state */
  .nav-btn.active{color:#5b45c9!important}
  .nav-btn .icon{width:22px;height:22px}

  /* Toast above the bottom nav and full width */
  #toast{bottom:calc(86px + env(safe-area-inset-bottom))!important;width:calc(100% - 24px)}
}

@media (max-width:360px){
  .plan-flow .hero h2{font-size:28px}
  .hero-pulse .pulse-detail{font-size:12.5px}
}

/* Honour reduced motion */
@media (prefers-reduced-motion:reduce){
  .main.enter>*,dialog[open],dialog[open]::backdrop{animation:none!important}
  *{transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{
  .hero-pulse,.back-btn,.bell-btn .badge,#toast{display:none!important}
}