/* Apple-inspired web materials. Native Liquid Glass remains an iOS-shell concern. */
:root { --rove-green:#176d60; --rove-orange:#ff922f; --ui-ease:cubic-bezier(.22,.8,.25,1); }
:root[data-theme="light"] { --bg:#f5f6f4; --label:#173b35; --label-2:#64736e; --label-3:#87928d; --tint:#176d60; --tint-soft:rgba(23,109,96,.1); --on-tint:#fff; --ink:var(--label); --muted:var(--label-2); --it-accent:var(--tint); --glass:rgba(255,255,255,.68); --glass-strong:rgba(252,253,251,.88); }
body { -webkit-text-size-adjust:100%; }
button,input,select,textarea,summary { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { transition:background .18s,box-shadow .18s,transform .18s var(--ui-ease); }
button:active:not(:disabled) { transform:scale(.97); }
[hidden] { display:none !important; }
.app { padding:12px !important; background:radial-gradient(ellipse at 6% 10%,rgba(103,172,145,.09),transparent 50%),var(--bg) !important; }
.workspace { grid-template-rows:minmax(0,1fr) !important; gap:12px !important; }
.sidebar.glass { border-radius:28px !important; background:color-mix(in srgb,var(--bg) 95%,transparent) !important; border:.5px solid var(--glass-edge) !important; box-shadow:inset 0 1px var(--glass-spec) !important; }
.rv-band { border-radius:28px 28px 0 0; background:color-mix(in srgb,var(--bg) 88%,transparent); }
.start-page { gap:10px !important; padding-bottom:0; }
.sp-top { gap:12px; }
.sp-brand { gap:10px !important; flex:none; }
.sp-brand > span { font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,sans-serif; font-weight:850; line-height:.98; color:var(--label); }
.sp-brand small { display:block; font-weight:650; color:var(--label-2); }
.sp-brand-caption { color:var(--label-2); }
.sp-card { padding:12px !important; }
.sp-label { letter-spacing:0; }
.sp-when .date-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
.date-box { min-width:0; min-height:42px; }
.date-display { font-size:14px !important; }
.sp-bags { font-size:12px !important; }
.sp-bags-l,.sp-bags-v,#bagText { font-size:12px !important; }
.sp-bags #bagHint { display:none; }
.jr-end { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; background:var(--fill); }
.jr-end button { height:auto; border-radius:10px; font-weight:600; }
.jr-end button.on { color:var(--tint); background:var(--card); box-shadow:0 1px 5px rgba(0,0,0,.07); }
.sp-ai-note { display:flex; gap:6px; border-radius:11px; background:var(--tint-soft); color:var(--tint); }
.start-page > .sp-go { position:sticky; bottom:0; width:100%; min-height:48px; height:48px !important; margin:0; z-index:8; font-size:15px !important; color:var(--on-tint) !important; background:linear-gradient(165deg,color-mix(in srgb,var(--tint) 88%,white),var(--tint)) !important; box-shadow:inset 0 1px rgba(255,255,255,.36),0 5px 18px rgba(20,90,65,.18) !important; }
.primary { color:var(--on-tint) !important; }
.map-shell { border-radius:28px !important; border:1px solid var(--glass-edge); }
.map-pill,.rv-dock,.mobile-switch { -webkit-backdrop-filter:blur(22px) saturate(165%); backdrop-filter:blur(22px) saturate(165%); }
.map-pill { min-height:40px; }
.empty-state { border-radius:26px !important; }
.empty-icon { background:none !important; width:56px; height:56px; }
.empty-icon img { width:56px; height:56px; border-radius:17px; }
.sp-alts { order:8; padding:4px 2px; }
.sp-outlook { order:7; }
.sp-results { order:9; }
/* Seasonal inspiration stays beside the map, leaving the planning form in one screen. */
.map-shell > .sp-seasons { position:absolute; z-index:710; background:var(--glass-strong) !important; -webkit-backdrop-filter:blur(26px) saturate(165%); backdrop-filter:blur(26px) saturate(165%); box-shadow:var(--glass-shadow) !important; gap:8px; }
.map-shell .ss-tile { border-radius:12px; }
.map-shell .ss-name { font-size:12px; }
.map-shell .ss-ico { font-size:18px; }
.map-shell .ss-score { font-size:10px; }

.mk-route-label { border-radius:999px; padding:4px 8px; background:var(--glass-strong); border:1px solid var(--glass-edge); box-shadow:0 2px 8px rgba(0,0,0,.1); color:var(--label); font:600 11px -apple-system,system-ui,sans-serif; white-space:nowrap; }
.mk-popup { max-width:300px; padding:12px; background:var(--card); color:var(--label); border-radius:16px; }
/* Shared web/native surface roles. A future native container supplies safe-area traits. */
:root { --material-content:var(--card); --material-navigation:var(--glass); --app-safe-top:max(env(safe-area-inset-top),var(--native-safe-top,0px)); --app-safe-bottom:max(env(safe-area-inset-bottom),var(--native-safe-bottom,0px)); }
:root[data-theme="dark"] { --bg:#101112; --card:#191b1c; --card-2:#202224; --fill:rgba(148,151,157,.10); --fill-2:rgba(148,151,157,.06); --fill-3:rgba(148,151,157,.17); --label:#d7d9da; --label-2:#a2a5a8; --label-3:#7d8286; --tint:#86b1a2; --tint-soft:rgba(134,177,162,.10); --on-tint:#e4ebe7; --glass:rgba(28,30,32,.82); --glass-strong:rgba(27,29,31,.96); --glass-edge:rgba(255,255,255,.08); --glass-spec:rgba(255,255,255,.07); --sep:rgba(255,255,255,.08); --glass-shadow:0 8px 24px rgba(0,0,0,.24); --map-filter:invert(1) hue-rotate(180deg) brightness(.67) contrast(.88) saturate(.25); }
:root[data-theme="dark"] .app { background:var(--bg) !important; }
:root[data-theme="dark"] .primary,:root[data-theme="dark"] .start-page > .sp-go { background:#294d42 !important; color:var(--on-tint) !important; box-shadow:0 3px 12px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.06) !important; }
:root[data-theme="dark"] .primary::before,:root[data-theme="dark"] .rv-dock::before { opacity:.12; }
:root[data-theme="dark"] .trip-hero .th-shade { background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.26) 40%,rgba(0,0,0,.87)); }
:root[data-theme="dark"] .pin.start { background:#345449 !important; }
.plan-day-tabs { display:flex; flex:none; gap:5px; padding:5px 0 10px; overflow-x:auto; scrollbar-width:none; }
.plan-day-tabs button { flex:none; min-height:36px; padding:0 12px; border:1px solid var(--sep); border-radius:999px; color:var(--label-2); background:var(--fill-2); font:600 12px -apple-system,system-ui,sans-serif; }
.plan-day-tabs button.on { color:var(--tint); background:var(--tint-soft); border-color:var(--tint); }
#timeline:not([data-day-view="all"]) > :not(.it-day):not(.it-stay) { display:none !important; }
.route-ac { z-index:3500; border:1px solid var(--glass-edge); background:var(--glass-strong) !important; }
.route-ac-head { display:flex; align-items:center; justify-content:space-between; padding:4px 10px; color:var(--label-2); font-size:11px; }
.route-ac .route-ac-head button { width:auto; padding:5px 0 5px 12px; color:var(--tint); font-size:11px; }
.route-ac button strong { color:var(--label); }
.route-picked-marker { display:grid; place-items:center; }
.trip-insights { display:none; position:absolute; width:min(350px,calc(100% - 32px)); max-height:calc(100% - 240px); z-index:850; overflow:auto; border:1px solid var(--glass-edge); border-radius:18px; background:var(--glass-strong); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
.trip-insights:has(#spOutlook:not([hidden]),#spAlts:not([hidden])) { display:block; }
.trip-insights summary { padding:11px 14px; color:var(--label-2); cursor:pointer; font-size:12px; font-weight:600; }
.trip-insights .sp-outlook { padding:10px !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
.trip-insights .sp-alts { padding:0 10px 10px; }
body:has(#pathSection.show) .trip-insights { display:none; }
/* Comfortable content spacing. The panel scrolls naturally at every window height. */
:root { --planner-width:438px; }
body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif; }
.workspace { grid-template-columns:var(--planner-width) minmax(0,1fr) !important; }
.sidebar.glass { display:flex; flex-direction:column; overflow-y:auto !important; overflow-x:hidden; padding:0 20px 28px !important; scrollbar-width:thin; scroll-padding-top:90px; overscroll-behavior:contain; }
#setupSection:not(.hidden) { display:block; flex:none; min-height:auto; }
#startPage.start-page { display:flex; flex-direction:column; gap:10px !important; padding:6px 0 10px !important; min-height:auto; }
#startPage > * { flex:none; }
.rv-band { height:66px !important; min-height:66px; margin:0 -20px; top:0; z-index:20; }
.rv-dock { top:25px; left:33px; width:calc(var(--planner-width) - 40px); max-width:none !important; gap:12px; padding:0; justify-content:space-between; background:none !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.rv-dock::before { display:none; }
.rv-settings { display:flex; align-items:center; flex:none; padding:3px; border:1px solid var(--glass-edge); border-radius:999px; background:var(--glass); box-shadow:inset 0 1px var(--glass-spec),0 3px 12px rgba(0,0,0,.04); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
.rv-settings > i { display:none; }
.rv-dock .home-tabs { display:flex !important; flex:none; margin:0; border:0; }
#savedRoutesTab.home-tab { display:flex; align-items:center; gap:7px; min-height:46px; height:46px; max-width:none; padding:0 13px !important; border:1px solid var(--glass-edge); border-radius:999px; color:var(--label); font-size:13px; font-weight:600; -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
#savedRoutesTab svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
#savedRoutesTab[aria-expanded="true"] { color:var(--tint); }
#savedRouteCount { min-width:18px; font-size:10px; padding:2px 5px; background:var(--fill); border-radius:999px; }
#savedRouteCount:empty { display:none; }
body:has(#pathSection.show) .rv-settings .rv-p2 { position:fixed; top:58px; left:0; background:var(--glass-strong); border-radius:999px; padding:4px; border:1px solid var(--glass-edge); }
body:has(#pathSection.show) .rv-band { height:125px !important; min-height:125px; }
body:has(#pathSection.show) .trip-head { top:125px !important; }
.sp-head { padding:0 3px 4px !important; }
.sp-top { justify-content:space-between !important; align-items:center !important; }
.sp-brand > span { font-size:29px; letter-spacing:-1.3px; }
.sp-brand small { font-size:6px; letter-spacing:1px; margin-top:7px; }
.sp-brand-caption { font-size:12px; line-height:1.5; }
#startPage .sp-card { padding:13px !important; border-radius:18px !important; background:var(--card) !important; border:.5px solid var(--sep) !important; }
.sp-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px !important; font-size:14px !important; line-height:1.45; font-weight:600 !important; }
.sp-label small { font-size:11px; color:var(--label-3); font-weight:450; }
.sp-when .date-row { gap:10px; }
.sp-when .date-box { min-height:44px; height:44px !important; border-radius:13px; }
.sp-when .date-display { font-size:15px !important; }
.sp-bags { position:static; margin-top:8px !important; padding-top:7px !important; }
.sp-bags-l,.sp-bags-v,#bagText { font-size:12px !important; }
.sp-bags #bagSel { min-height:36px; }
.sp-nights { display:inline !important; }
.sp-ai-note { margin:0; font-size:12px; padding:8px 10px; line-height:1.5; }
.jr-end { gap:4px; padding:4px; border-radius:14px; }
.jr-end button { min-height:44px; font-size:12px; padding:0 6px; }
.sp-flight { margin-top:16px; }
.sp-prefs { display:grid; grid-template-columns:1fr !important; }
.sp-prefs .sp-label-sm { display:flex; margin:0 !important; }
.sp-prefs .chip-row { display:flex; flex-wrap:wrap; margin:0; }
.sp-prefs .chip-row + .sp-label-sm { margin-top:3px !important; }
.sp-prefs [data-pref-group="environment"] { grid-template-columns:1fr 1fr; }
.sp-prefs [data-pref-group="environment"] button { padding:0 5px; }
#startPage > .sp-go { position:static; margin:0; width:100%; height:50px !important; min-height:50px; font-size:16px !important; }
.sp-results { position:static; max-height:none; }
.sp-results:empty { display:none; }
/* Floating navigation uses glass; content keeps a quiet, legible solid surface. */
.map-top { left:20px !important; right:62px !important; top:20px !important; display:flex; align-items:flex-start; gap:10px; pointer-events:none; }
.map-top > * { pointer-events:auto; }
.map-search { position:relative; width:min(360px,100%); flex:1; max-width:360px; margin:0; color:var(--label); }
.map-search-field { display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid var(--glass-edge); background:var(--glass-strong); box-shadow:0 4px 18px rgba(0,0,0,.1),inset 0 1px var(--glass-spec); -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%); }
.map-search-field > svg { width:19px; height:19px; flex:none; fill:none; stroke:var(--label-2); stroke-width:1.8; stroke-linecap:round; }
.map-search input { width:100%; min-width:0; flex:1; height:46px; background:none; border:0; outline:0; font:400 15px -apple-system,system-ui,sans-serif; color:var(--label); }
.map-search input::placeholder { color:var(--label-2); }
.map-search input::-webkit-search-cancel-button { display:none; }
.map-search:focus-within .map-search-field { box-shadow:0 0 0 3px var(--tint-soft),0 4px 18px rgba(0,0,0,.1); border-color:var(--tint); }
#clearMapSearch { border:0; border-radius:50%; width:28px; height:28px; flex:none; padding:0; color:var(--label-2); background:var(--fill); font-size:21px; }
.map-search-results { position:absolute; top:56px; left:0; right:0; padding:6px; border:1px solid var(--glass-edge); border-radius:17px; background:var(--glass-strong); box-shadow:var(--glass-shadow); max-height:min(420px,60vh); overflow:auto; }
.map-search-results button { display:flex; align-items:flex-start; flex-direction:column; gap:4px; width:100%; padding:12px; min-height:50px; border:0; border-radius:11px; background:none; color:var(--label); text-align:left; cursor:pointer; }
.map-search-results button:hover,.map-search-results button[aria-selected="true"] { background:var(--tint-soft); }
.map-search-results strong { font-size:14px; font-weight:600; }
.map-search-results small { color:var(--label-2); font-size:11px; line-height:1.5; }
.map-search-note { margin:0; padding:12px; font-size:12px; color:var(--label-2); line-height:1.5; }
.map-top #seasonToggle { flex:none; min-height:48px; height:48px; padding:0 14px; font-size:12px; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; clip-path:inset(50%); overflow:hidden !important; white-space:nowrap; pointer-events:none !important; }
.trip-insights { left:20px; }
.map-shell > .sp-seasons { width:330px; max-width:calc(100% - 24px); max-height:calc(100% - 110px); padding:14px !important; overflow:auto; right:20px; bottom:40px; }
.season-card-head { display:flex; gap:8px; align-items:center; margin:-4px -4px 10px; }
.season-drag-handle { flex:1; display:flex; align-items:center; gap:8px; min-height:36px; padding:0 5px; border:0; background:none; color:var(--label-2); font:600 12px -apple-system,system-ui,sans-serif; text-align:left; cursor:grab; touch-action:none; }
.season-reset { width:36px; height:36px; border:0; border-radius:50%; color:var(--label-2); background:var(--fill); font-size:20px; cursor:pointer; }
#spSeasons.is-dragging { user-select:none; cursor:grabbing; }
.map-shell .ss-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.map-shell .ss-tile { display:flex !important; flex-direction:column; align-items:center; gap:6px; min-height:90px !important; padding:12px 4px !important; }
.map-shell .ss-score { position:static; transform:none; width:30px; height:19px; border-radius:999px; }

body:has(#pathSection.show) .map-shell > .sp-seasons { display:none; }
/* Modal library keeps the current planner and all unsaved fields in place. */
.trip-library { position:fixed; inset:16px 16px 16px auto; margin:0; width:min(440px,calc(100vw - 32px)); max-width:none; height:calc(100dvh - 32px); max-height:none; padding:30px 24px; border:1px solid var(--glass-edge); border-radius:28px; background:var(--glass-strong); color:var(--label); box-shadow:0 24px 100px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(32px); backdrop-filter:blur(32px); overflow:auto; overscroll-behavior:contain; }
.trip-library::backdrop { background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.trip-library .saved-routes-panel { display:block !important; padding:0; }
.trip-library h1 { font-size:32px; font-weight:700; letter-spacing:-1px; margin:10px 0 12px; padding-right:36px; }
.trip-library .eyebrow { color:var(--label-3); font-size:10px; letter-spacing:1.5px; padding-right:40px; }
.trip-library .intro { color:var(--label-2); font-size:14px; line-height:1.6; margin-bottom:22px; }
.library-close { position:absolute; top:22px; right:20px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:var(--fill); color:var(--label-2); font-size:25px; cursor:pointer; }
.trip-library .saved-route-list { display:grid; gap:12px; margin-top:22px; }
.trip-library .saved-route { padding:18px; border:1px solid var(--sep); border-radius:18px; background:var(--card); }
.trip-library .saved-route strong { font-size:16px; line-height:1.45; }
.trip-library .saved-route small { display:block; font-size:12px; line-height:1.65; color:var(--label-2); margin-top:8px; }
.trip-library .saved-route-actions { display:flex; gap:10px; margin-top:18px; }
.trip-library button.primary,.trip-library button.secondary { min-height:44px; border-radius:12px; }
button:focus-visible,summary:focus-visible,select:focus-visible { outline:2px solid var(--tint); outline-offset:3px; }
@media (max-width:1150px) and (min-width:601px) {
:root { --planner-width:410px; }
.map-top { flex-wrap:wrap; }
.map-search { flex-basis:100%; }
.map-shell > .sp-seasons { width:300px; }
}
@media (max-width:600px) {
.app { padding:0 !important; height:var(--rovego-viewport-height,100dvh) !important; }
.workspace { display:block !important; height:100%; }
.sidebar.glass { border-radius:0 !important; border:0 !important; height:100%; padding:0 18px calc(90px + var(--app-safe-bottom)) !important; }
.rv-band { height:calc(64px + var(--app-safe-top)) !important; min-height:calc(64px + var(--app-safe-top)); margin:0 -18px; border-radius:0; }
.rv-dock { top:max(10px,var(--app-safe-top)); left:18px; right:18px; width:auto; gap:8px; }
.rv-dock-btn { min-width:38px; width:38px; }
#savedRoutesTab.home-tab { padding:0 12px !important; font-size:12px; }
#startPage.start-page { gap:10px !important; padding-top:5px !important; }
#startPage .sp-card { padding:13px !important; }
.sp-brand-caption { font-size:11px; max-width:85px; }
.sp-brand > span { font-size:30px; }
.map-shell { height:100% !important; min-height:100%; border-radius:0 !important; border:0; }
body[data-view="map"] .map-top { top:78px !important; left:12px !important; right:54px !important; flex-wrap:wrap; gap:8px; }
.map-search { max-width:none; width:100%; flex-basis:100%; }
.map-shell > .sp-seasons { width:min(330px,calc(100% - 24px)); left:auto; right:12px; bottom:94px; max-height:calc(100% - 210px); }
body[data-view="map"] .empty-state { display:none; }
.trip-insights { top:190px; left:12px; width:calc(100% - 24px); max-height:40%; }
.mobile-switch,body:not(.page2) .mobile-switch { display:flex !important; width:184px; height:48px; bottom:max(12px,var(--app-safe-bottom)) !important; }
.mobile-switch button { display:flex !important; align-items:center; justify-content:center; gap:6px; min-height:40px; height:40px !important; padding:0 !important; font-size:12px !important; }
.mobile-switch button::before { position:static; width:18px; height:18px; transform:none; }
.trip-library { inset:auto 0 0; width:100%; height:min(88dvh,850px); padding:30px 22px calc(28px + var(--app-safe-bottom)); border-radius:28px 28px 0 0; }
body:has(#pathSection.show) .rv-settings .rv-p2 { top:58px; }
}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (prefers-reduced-transparency:reduce) {
:is(.rv-settings,#savedRoutesTab,.map-search-field,.trip-library,.map-shell > .sp-seasons) { background:var(--card) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}
:root[data-reduced-transparency] :is(.rv-settings,#savedRoutesTab,.map-search-field,.trip-library,.map-pill,.trip-insights,.mobile-switch,.route-ac,.sp-seasons) { background:var(--card) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
@media (prefers-contrast:more) {
:is(.sp-card,.jr-destination,.rv-settings,.map-search-field) { border:1px solid var(--label-2) !important; }
input::placeholder,textarea::placeholder { color:var(--label-2) !important; }
}
body:has(#pathSection.show) .rv-dock .home-tabs { display:flex !important; }
.empty-state { left:20px; right:auto; bottom:42px; top:auto; width:270px; max-width:calc(100% - 40px); padding:18px !important; text-align:left; }
.empty-state .empty-icon { display:block; position:static; width:34px; height:34px; margin:0 0 12px; }
.empty-state .empty-icon img { display:block; width:34px; height:34px; border-radius:10px; }
.empty-state p { margin:0 !important; font-size:12px !important; line-height:1.6; }
.map-top :is(#seasonToggle,#discoverBtn) { min-height:48px; height:48px; padding:0 14px; border-radius:16px; font-size:12px; }
.rv-dock .home-tabs { padding:0 !important; background:none !important; }
#savedRoutesTab.home-tab { width:auto; min-width:108px; background:var(--glass) !important; box-shadow:inset 0 1px var(--glass-spec),0 3px 12px rgba(0,0,0,.04) !important; }
#savedRoutesTab svg { flex:none; }
#savedRoutesTab[aria-expanded="true"] { background:var(--tint-soft) !important; }
.sp-prefs .chip-row button { width:auto !important; overflow:visible; text-overflow:clip; white-space:normal; line-height:1.35; }
.sp-prefs [data-pref-group="style"] button { width:auto !important; }
body:not(:has(#pathSection.show)) .day-legend { display:none !important; }
@media (max-width:600px) {
.sp-prefs [data-pref-group="style"] { gap:8px; }
}
/* A compact entry keeps the journey form calm; the import opens as a sheet. */
.inspiration-entry { display:flex; align-items:center; gap:7px; width:100%; min-height:32px; padding:4px 2px; border:0; background:none; color:var(--tint); font-size:12px; text-align:left; }
.inspiration-entry > span:last-child { margin-left:auto; font-size:14px; }
#inspirationCount { padding:2px 6px; border-radius:8px; background:var(--tint-soft); font-size:10px; }
.inspiration-sheet { color:var(--label); background:var(--glass-strong); border:.5px solid var(--glass-edge); border-radius:30px; padding:26px; width:min(530px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow-y:auto; box-shadow:0 24px 90px #0003,inset 0 1px var(--glass-spec); -webkit-backdrop-filter:blur(36px) saturate(130%); backdrop-filter:blur(36px) saturate(130%); }
.inspiration-sheet::backdrop { background:#0b151a55; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.inspiration-heading { display:flex; gap:16px; align-items:flex-start; justify-content:space-between; }
.inspiration-eyebrow { display:block; font-size:9px; color:var(--tint); font-weight:700; letter-spacing:1.3px; margin-bottom:8px; }
.inspiration-heading h2 { margin:0; font-size:25px; font-weight:720; line-height:1.2; letter-spacing:-.8px; max-width:320px; }
.inspiration-close { flex:none; width:32px; height:32px; border:0; background:var(--fill); color:var(--label-2); border-radius:50%; font-size:22px; }
.inspiration-subtitle { color:var(--label-2); font-size:13px; line-height:1.55; margin:12px 0 20px; }
.inspiration-label { display:block; font-size:12px; font-weight:650; margin-bottom:8px; }
.inspiration-sheet :is(textarea,input) { color:var(--label); background:var(--card); border:.5px solid var(--sep); border-radius:14px; }
#inspirationText { display:block; width:100%; resize:vertical; padding:12px; min-height:100px; max-height:220px; font-size:14px; line-height:1.5; }
.inspiration-sheet :is(textarea,input)::placeholder { color:var(--label-3); }
.inspiration-import-row { display:flex; gap:16px; align-items:center; justify-content:space-between; margin-top:10px; }
.inspiration-import-row small { color:var(--label-2); font-size:11px; line-height:1.4; }
.inspiration-sheet button { cursor:pointer; }
:is(#inspirationRead,#inspirationUse) { min-height:40px; flex:none; padding:0 15px; border:0; border-radius:13px; font-size:12px; font-weight:650; background:var(--tint-soft); color:var(--tint); }
#inspirationRead:disabled { opacity:.5; cursor:wait; }
.inspiration-status { margin:12px 0; color:var(--label-2); font-size:12px; line-height:1.5; }
.inspiration-status:empty { display:none; }
.inspiration-sources { display:flex; flex-wrap:wrap; gap:6px; }
.inspiration-sources a { font-size:10px; color:var(--label-2); text-decoration:none; padding:4px 8px; background:var(--fill); border-radius:7px; }
.inspiration-places { display:grid; gap:6px; margin:12px 0; }
.inspiration-places:empty { margin:0; }
.inspiration-place { display:flex; align-items:center; gap:10px; padding:10px 12px; border:.5px solid var(--sep); border-radius:14px; background:var(--card); cursor:pointer; }
.inspiration-place input { width:18px; height:18px; accent-color:var(--tint); }
.inspiration-place strong { display:block; font-size:13px; font-weight:650; }
.inspiration-place small { display:block; margin-top:3px; color:var(--label-2); font-size:11px; }
.inspiration-manual { display:flex; gap:6px; margin:12px 0 20px; }
.inspiration-manual input { min-width:0; flex:1; padding:10px 12px; font-size:12px; min-height:42px; }
.inspiration-manual button { width:42px; border:0; background:var(--tint-soft); color:var(--tint); font-size:22px; border-radius:13px; }
.inspiration-footer { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-top:24px; }
#inspirationClear { background:none; border:0; color:var(--label-2); min-height:44px; padding:0 4px; font-size:12px; }
#inspirationUse { background:var(--tint); color:var(--on-tint); min-height:44px; }
#inspirationUse span { margin-left:12px; }
@media(max-width:600px) {
.inspiration-sheet { padding:24px 20px max(24px,var(--app-safe-bottom)); border-radius:26px; }
.inspiration-sheet :is(input,textarea) { font-size:16px; }
.inspiration-heading h2 { font-size:23px; }
}
@media(prefers-reduced-transparency:reduce) {
.inspiration-sheet { background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
:root[data-reduced-transparency] .inspiration-sheet { background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Compact preference pills keep content-sized widths instead of stretching cards. */
.sp-prefs { gap:6px; }
.sp-prefs .chip-row { gap:8px; }
.sp-prefs .chip-row button { flex:0 0 auto !important; min-height:34px; height:34px !important; padding:0 11px !important; font-size:12px !important; border-radius:11px; position:relative; }
.sp-prefs .chip-row button::after { content:''; position:absolute; inset:-5px -3px; }
.sp-prefs [data-pref-group="environment"] { display:flex; flex-wrap:wrap; }
.sp-prefs .sp-label-sm { font-size:12px !important; color:var(--label-2); }
.empty-state { pointer-events:none; }
.public-preview-note { margin-top:10px; padding:8px 10px; border-radius:11px; background:var(--tint-soft); color:var(--label-2); font-size:11px; line-height:1.5; }
/* Safari-like fields: low, rounded and quiet, with a clear focus ring. */
.map-search-field { min-height:42px !important; height:42px !important; }
.map-search-field input { height:40px !important; }
.sp-prefs [data-pref-group="style"] { display:flex !important; flex-wrap:nowrap !important; gap:5px !important; overflow:visible; }
.sp-prefs [data-pref-group="style"] button { flex:0 0 auto !important; min-height:30px !important; height:30px !important; padding:0 9px !important; font-size:11px !important; white-space:nowrap !important; border-radius:999px !important; letter-spacing:-.1px; }
.trip-insights { top:130px; }
@media(max-width:600px) {
.trip-insights { top:190px; }
.sp-prefs [data-pref-group="style"] { gap:4px !important; }
.sp-prefs [data-pref-group="style"] button { padding:0 8px !important; font-size:11px !important; }
}
.account-entry { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--glass); border:.5px solid var(--glass-edge); color:var(--label-2); }
.account-entry svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.account-entry.signed-in { color:var(--tint); background:var(--tint-soft); }
.pin.is-endpoint { filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tint) 55%,transparent)); z-index:3; }
.pin.is-endpoint::after { content:''; position:absolute; inset:-5px; border:2px solid var(--tint); border-radius:inherit; pointer-events:none; }
.hover-card { border-radius:24px !important; overflow:hidden; box-shadow:0 14px 44px #0003 !important; animation:hover-card-in .18s ease-out; }
.hover-card .hc-img { position:relative; min-height:160px; height:160px; background-position:center; background-size:cover; }
.hover-card .hc-img::after { content:''; position:absolute; inset:0; }
.hover-card .hc-photo-title { position:absolute; left:17px; right:20px; z-index:1; color:white; font-size:21px; font-weight:650; line-height:1.2; letter-spacing:-.4px; text-shadow:0 1px 5px #0004; }
.hover-card .hc-body { padding:15px 17px 17px; }
.hover-card .hc-body p { margin:10px 0; font-size:12px; line-height:1.6; color:var(--label-2); }
.hover-card .hc-x { border-radius:50%; background:rgba(25,35,30,.3); color:white; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
@keyframes hover-card-in { from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none} }
/* Visits are the traveller's wishes; the final stop is a separate, explicit choice. */
#visitInput { width:100%; }
#hoverCard.hc-closing { opacity:0; transform:translateY(5px); pointer-events:none; }
#hoverCard { transition:opacity .16s ease,transform .16s ease; }
@media(prefers-reduced-motion:reduce) {
#hoverCard { transition:none; animation:none; }
}
.hover-card .hc-img::after { background:linear-gradient(180deg,transparent 26%,rgba(10,20,18,.12) 48%,rgba(10,20,18,.65) 78%,var(--card) 100%); }
.hover-card .hc-body { padding-top:8px; }
.hover-card .hc-body > p:first-child { margin-top:0; }
/* Role colors stay separate from day-by-day route line colors. */
.pin[data-route-role="start"],.route-picked-pin[data-route-role="start"] { background:#007aff !important; border-radius:50% !important; transform:none; color:white !important; }
.pin[data-route-role="finish"],.route-picked-pin[data-route-role="finish"] { background:#af52de !important; border-radius:7px !important; transform:none; color:white !important; }
.pin[data-route-role="visit"],.route-picked-pin[data-route-role="visit"] { background:#c66b08 !important; color:white !important; }
.pin[data-route-role="start-end"],.route-picked-pin[data-route-role="start-end"] { background:linear-gradient(135deg,#007aff 49%,#af52de 51%) !important; border-radius:50% !important; transform:none; color:white !important; }
.pin:is([data-route-role="start"],[data-route-role="finish"],[data-route-role="start-end"]) span { transform:none; }
.pin[data-route-role].is-endpoint::after { border-color:currentColor; opacity:.75; inset:-4px; }