/* DillenSecurities: lightweight interaction polish. GPU-friendly transforms and opacity. */
:root{--motion-fast:150ms;--motion-normal:220ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent }
button,.btn,.side-link,.nav button,.mobile-nav button,.day-tab,.trip-switcher,.trip-menu button,.lookup-choice,.day-choice{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,transform var(--motion-normal) var(--motion-ease)}
button:active,.btn:active{transform:scale(.985)}
button:disabled{cursor:wait;opacity:.65}
input,select,textarea{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
/* Initial content entrance; replays naturally when the itinerary rerenders. */
.wrap>.heading,.wrap>.hero-panel,.wrap>.discover-hero,.main>header,.main>section{animation:ds-enter 240ms var(--motion-ease) both}
@keyframes ds-enter{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* Interactive surfaces only: avoid animating large collections at once. */
.card.click,.project[href],.gallery-tile,.discover-result,.timeline-entry .card{transition:transform var(--motion-normal) var(--motion-ease),border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease}
.card.click:hover,.project[href]:hover,.discover-result:hover{transform:translateY(-2px);box-shadow:0 7px 22px #00000016}
.timeline-entry .card:hover,.gallery-tile:hover{border-color:var(--accent)}
.day-tab:hover,.trip-switcher:hover,.lookup-choice:hover{border-color:var(--accent)}
.day-tab.active{box-shadow:inset 0 -2px var(--accent)}
/* Modal/lightbox animation, no blur or expensive backdrop filters. */
.modal-back,.lightbox{animation:ds-overlay 160ms ease-out both}
.modal{animation:ds-dialog 220ms var(--motion-ease) both}
.lightbox img{animation:ds-dialog 200ms var(--motion-ease) both}
@keyframes ds-overlay{from{opacity:0}to{opacity:1}}
@keyframes ds-dialog{from{opacity:.7;transform:translateY(7px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Checklist progress, photos, and upload drop feedback. */
.checklist-progress-fill{transition:width 260ms var(--motion-ease)}
.drop-zone,.drop-target{transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,outline-color var(--motion-fast) ease}
.photo,.gallery-tile img,.booking-images img{transition:opacity var(--motion-fast) ease}
.photo:hover,.gallery-tile img:hover,.booking-images img:hover{opacity:.9}
/* Homepage-only visual restraint. */
body:not(:has(.app)) .project[href]:hover{box-shadow:0 0 0 1px #a78bfa28,0 7px 24px #a78bfa16}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important;transform:none!important}}

/* More tactile navigation, without continuous animation or expensive filters. */
.app .sidebar .nav button[data-nav]{position:relative;transform-origin:left center;transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease,border-color 200ms ease,filter 200ms ease}
.app .sidebar .nav button[data-nav]:hover{transform:translateX(5px) scale(1.025);box-shadow:0 7px 19px #00000026;filter:brightness(1.16)}
.app .sidebar .nav button[data-nav]:active{transform:translateX(3px) scale(1.01)}
/* Balanced spacing above and below Discover. */
.app .sidebar .nav .discover-separator{margin:24px 10px 0}
.app .sidebar .nav button[data-nav="discover"]{margin-top:14px;margin-bottom:14px}
.app .sidebar .nav:after{content:"";height:1px;background:var(--border);margin:0 10px;opacity:.7}
/* A restrained per-section color signature. */
.app[data-view="overview"]{--page-hue:#c2b1e1}
.app[data-view="itinerary"]{--page-hue:#b9d6e8}
.app[data-view="places"]{--page-hue:#c1dfcd}
.app[data-view="images"]{--page-hue:#e7b7ca}
.app[data-view="bookings"]{--page-hue:#e7d5ac}
.app[data-view="checklist"]{--page-hue:#b7dddd}
.app[data-view="budget"]{--page-hue:#cbc6e7}
.app[data-view="review"]{--page-hue:#c7d5e4}
.app[data-view="discover"]{--page-hue:#cbb8e9}
.app .wrap>.heading{border-left:3px solid var(--page-hue);padding-left:15px}
.app .wrap>.heading .eyebrow{color:var(--page-hue)}
.app .wrap>.heading h1{transition:color 220ms ease}
.app .wrap>.section h2{border-bottom:2px solid color-mix(in srgb,var(--page-hue) 50%,transparent);padding-bottom:5px}
.app .day-tab.active{border-color:var(--page-hue);box-shadow:inset 0 -2px var(--page-hue)}
.app .timeline-entry .card,.app .checklist-draggable{will-change:auto}
.app .timeline-entry[draggable="true"],.app .checklist-draggable[draggable="true"]{transition:border-color 160ms ease,box-shadow 160ms ease}
.app .timeline-entry[draggable="true"]:active .card,.app .checklist-draggable[draggable="true"]:active{box-shadow:0 8px 24px #0003;border-color:var(--page-hue)}
@media(max-width:700px){.app .wrap>.heading{padding-left:11px}.app .sidebar .nav:after{display:none}}
@media(prefers-reduced-motion:reduce){.app .sidebar .nav button[data-nav]:hover{transform:none}}

/* Mobile ergonomics and restrained motion */
@media(max-width:700px){
 html{scroll-padding-bottom:95px}body{overflow-x:hidden}
 .top{gap:8px;align-items:flex-start}.top .actions{justify-content:flex-end}.top .actions .btn.primary{padding:9px 10px}
 .wrap{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
 .mobile-nav{gap:2px!important;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;justify-content:space-between!important;box-shadow:0 -8px 28px #0002;backdrop-filter:blur(14px)}
 .mobile-nav::-webkit-scrollbar{display:none}.mobile-nav button{min-width:49px!important;min-height:49px;padding:6px 7px!important;border-radius:10px;transition:background .2s,color .2s,transform .18s}
 .mobile-nav button:active{transform:scale(.94)}
 .day-tabs{scroll-snap-type:x proximity;overscroll-behavior-x:contain}.day-tab{scroll-snap-align:start;min-height:62px}
 .item{flex-wrap:wrap;gap:10px}.item-main{flex-basis:100%}.item>.row{width:100%;justify-content:flex-end}
 .timeline-entry .card{padding:14px}.timeline-entry .row{gap:7px}
 .modal-back{align-items:flex-end;padding:0}.modal{width:100%;max-height:calc(92dvh - env(safe-area-inset-top));border-radius:18px 18px 0 0;padding:20px 17px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain}
 input,select,textarea{font-size:16px;min-height:44px}.btn{min-height:40px}.btn.small{min-height:36px}
 .discover-hero .row,.lookup-block .row{flex-wrap:wrap}.discover-hero .row input,.lookup-block .row input{flex:1 1 100%!important}
 .gallery-tile img{height:170px}.checklist-draggable{flex-wrap:nowrap}.checklist-draggable .check{flex:1}.checklist-draggable>.row{width:auto}
 .task-grip,.timeline-entry .drag{touch-action:none;user-select:none;-webkit-user-select:none;padding:7px;margin:-7px}
}
@media(max-width:390px){.mobile-nav button{min-width:46px!important;padding:5px!important}.top .crumb{max-width:38vw}.wrap{padding-left:13px;padding-right:13px}.gallery{grid-template-columns:1fr}}
.mobile-more-sheet{display:none}
@media(max-width:700px){.mobile-more-sheet{display:grid;position:fixed;bottom:calc(73px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:29;background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:12px;box-shadow:0 14px 45px #0006;gap:5px;animation:mobileSheetIn .2s ease-out}.mobile-more-title{display:flex;align-items:center;justify-content:space-between;padding:3px 6px 9px;font-weight:700}.mobile-more-sheet>button{background:var(--surface2);color:var(--text);border:0;border-radius:9px;padding:13px;text-align:left;font-weight:600}}
@keyframes mobileSheetIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.touch-sorting{position:relative;z-index:5;opacity:.84;box-shadow:0 12px 24px #0004;transition:none!important;pointer-events:none}.touch-drop-target{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.mobile-more-sheet{animation:none}.mobile-nav button{transition:none}}


/* Trip identity: vivid but controlled color, with neutral content surfaces. */
.app{--trip-color:#b69aff}
.trip-switcher{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--trip-color) 38%,var(--border));background:linear-gradient(105deg,color-mix(in srgb,var(--trip-color) 15%,var(--surface2)),var(--surface2) 80%);box-shadow:inset 3px 0 var(--trip-color)}
.trip-switcher .trip-name{color:var(--trip-color)}
.trip-switcher:hover{border-color:var(--trip-color);box-shadow:inset 3px 0 var(--trip-color),0 0 18px color-mix(in srgb,var(--trip-color) 16%,transparent)}
.trip-menu{gap:6px;scroll-behavior:smooth;overscroll-behavior:contain;transform-origin:top;animation:trip-menu-in 220ms cubic-bezier(.22,1,.36,1) both}
.trip-menu button[data-trip]{position:relative;min-height:54px;border:1px solid transparent;border-left:3px solid color-mix(in srgb,var(--trip-color) 55%,transparent);background:color-mix(in srgb,var(--trip-color) 8%,var(--surface));transition:background-color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,transform 220ms cubic-bezier(.22,1,.36,1)}
.trip-menu button[data-trip] .muted{transition:color 220ms ease}
.trip-menu button[data-trip]:hover{background:color-mix(in srgb,var(--trip-color) 21%,var(--surface));border-color:color-mix(in srgb,var(--trip-color) 55%,transparent);transform:translateX(2px);box-shadow:0 0 15px color-mix(in srgb,var(--trip-color) 12%,transparent)}
.trip-menu button[data-trip].chosen{background:color-mix(in srgb,var(--trip-color) 28%,var(--surface));border-color:color-mix(in srgb,var(--trip-color) 75%,transparent);border-left-color:var(--trip-color);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trip-color) 18%,transparent),0 0 14px color-mix(in srgb,var(--trip-color) 13%,transparent)}
.trip-menu button[data-trip].chosen .muted{color:color-mix(in srgb,var(--trip-color) 70%,var(--text))}
.crumb-trip{color:var(--trip-color);font-weight:700}
.trip-card{border-left:3px solid var(--trip-color)!important;transition:border-color 220ms ease,box-shadow 220ms ease,transform 220ms ease}
.trip-card .eyebrow{color:var(--trip-color)!important}
.trip-card:hover{border-color:var(--trip-color)!important;box-shadow:0 8px 28px color-mix(in srgb,var(--trip-color) 14%,transparent)}
.trip-color-field{margin:0 0 16px}.trip-color-label{font-size:12px;font-weight:650;color:var(--muted);margin-bottom:9px}.trip-color-options{display:flex;gap:11px;flex-wrap:wrap}.trip-color-option{position:relative;display:grid;place-items:center;width:34px;height:34px;cursor:pointer}.trip-color-option input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.trip-color-option span{width:25px;height:25px;border-radius:50%;background:var(--swatch);border:2px solid color-mix(in srgb,var(--swatch) 55%,var(--surface));transition:transform 180ms ease,box-shadow 180ms ease}.trip-color-option:hover span{transform:scale(1.12)}.trip-color-option input:checked+span{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--swatch),0 0 15px color-mix(in srgb,var(--swatch) 35%,transparent)}.trip-color-option input:focus-visible+span{outline:2px solid var(--text);outline-offset:5px}
@keyframes trip-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.trip-menu{animation:none!important;scroll-behavior:auto!important}.trip-color-option span{transition:none!important}}