/* Destination planner. Loaded after /assets/css/brand.css, which provides tokens, type, buttons, forms, header and footer. */

#app { min-height: 60vh; }
.lead { font-size: 1.0625rem; color: var(--ink-3); }
.icon-only { width: 38px; padding: 0; }
.btn-xs.icon-only { width: 30px; }
.tag-free { background: var(--mint); }
.tag-mine { background: var(--sun); gap: 4px; }
.tag .icon { width: 13px; height: 13px; }

/* page scaffolding */
.page { position: relative; padding: 48px 0 96px; }
.page-tight { padding-top: 32px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.page-head h1 { font-size: clamp(2.125rem, 4vw, 3.25rem); margin-bottom: 0; animation: dropIn 0.6s var(--ease) both; }
.page-head h1::after { content: ""; display: block; width: 132px; height: 14px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14' fill='none' stroke='%23ff5a5f' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M2 8c8-7 14-7 22 0s14 7 22 0 14-7 22 0 14 7 22 0 14-7 22 0 12 5 18 2'/%3E%3C/svg%3E") no-repeat left center / contain; clip-path: inset(0 100% 0 0); animation: draw 0.9s 0.35s var(--ease) forwards; }
.page-head p { margin: 14px 0 0; color: var(--ink-3); font-size: 1.0625rem; max-width: 62ch; animation: dropIn 0.6s 0.1s var(--ease) both; }
.sub-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 64px 0 22px; }
.status-page { position: relative; overflow: hidden; padding: 112px 0 128px; text-align: center; }
.status-page .wrap { max-width: 560px; position: relative; }
.status-page .ico-box { width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; box-shadow: var(--pop); animation: popIn 0.6s var(--spring) both, bob 5s 0.6s ease-in-out infinite; }
.status-page .ico-box .icon { width: 36px; height: 36px; stroke-width: 2; }
.status-page h1 { font-size: clamp(2rem, 4vw, 3rem); animation: dropIn 0.6s 0.1s var(--ease) both; }
.status-page p { color: var(--ink-3); font-size: 1.0625rem; animation: dropIn 0.6s 0.2s var(--ease) both; }
.status-page .row { justify-content: center; margin-top: 28px; gap: 12px; animation: dropIn 0.6s 0.3s var(--ease) both; }
.status-page .scribble { position: absolute; right: 4%; top: 6px; animation: dropIn 0.6s 0.6s var(--ease) both; }
.status-page::before { content: ""; position: absolute; left: 50%; top: 40px; width: 560px; height: 560px; margin-left: -280px; border-radius: 50%; background: radial-gradient(circle, var(--sun-2) 0%, rgba(255, 231, 163, 0) 65%); z-index: -1; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

/* home hero */
.vh { position: relative; isolation: isolate; z-index: 2; color: #fff; background: #0f5d63; overflow: hidden; }
.vh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -3; animation: heroZoom 18s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.vh::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(circle at 92% 4%, rgba(255, 201, 60, 0.55), rgba(255, 201, 60, 0) 32%),
  linear-gradient(95deg, rgba(19, 34, 58, 0.86) 0%, rgba(19, 34, 58, 0.55) 45%, rgba(19, 34, 58, 0.18) 100%); }
.vh-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.vh-path path { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 2.5; stroke-dasharray: 2 12; stroke-linecap: round; animation: dashMove 2.4s linear infinite; }
.vh-path .plane { fill: var(--sun); stroke: var(--navy); stroke-width: 1.2; }
.vh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: center; padding: 72px 0 120px; }
.vh-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--sun); color: var(--navy); font-weight: 700; font-size: 0.875rem; border: 1px solid var(--hair-2); box-shadow: var(--pop); animation: dropIn 0.7s 0.1s var(--ease) both; }
.vh-kicker::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--coral); animation: pulse 1.8s infinite; }
.vh h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 13ch; margin-bottom: 22px; text-shadow: 0 2px 24px rgba(19, 34, 58, 0.35); animation: dropIn 0.8s 0.2s var(--ease) both; }
.vh h1 .swash { color: var(--sun); }
.vh-lead { font-size: 1.1875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); max-width: 44ch; margin-bottom: 30px; animation: dropIn 0.8s 0.35s var(--ease) both; }
.vh-proof { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px 34px; flex-wrap: wrap; animation: dropIn 0.8s 0.5s var(--ease) both; }
.vh-proof li { display: flex; flex-direction: column; line-height: 1.1; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.vh-proof b { font-family: var(--display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--sun); font-variant-numeric: tabular-nums; }
.vh-proof li:nth-child(2) b { color: var(--mint); }
.vh-proof li:nth-child(3) b { color: #ff8f93; }
.vh-planner { position: relative; background: #fff; color: var(--ink-2); border: 1px solid var(--hair-2); border-radius: 22px; padding: 0 24px 24px; box-shadow: var(--pop-lg); transform: rotate(0.8deg); animation: plannerIn 0.9s 0.4s var(--spring) both; }
@keyframes plannerIn { from { opacity: 0; transform: translateY(40px) rotate(4deg); } to { opacity: 1; transform: rotate(0.8deg); } }
.vh-planner::before { content: ""; position: absolute; top: -14px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: rgba(255, 90, 95, 0.8); transform: rotate(-3deg); }
.vh-planner h2 { margin: 0 -24px 6px; padding: 22px 24px 16px; font-size: 1.5rem; background: var(--sun); border-radius: 20px 20px 0 0; border-bottom: 1px dashed var(--hair-2); }
.vh-planner > p { margin-bottom: 18px; }
.vh-planner .field { margin-bottom: 14px; }
.vh-planner .chip { min-height: 40px; height: auto; padding: 8px 14px; font-size: 0.8125rem; }
.vh-planner .btn { margin-top: 6px; }
.vh-note { position: absolute; right: 18px; top: -48px; color: #fff; transform: rotate(5deg); font-size: 1.625rem; text-shadow: 0 2px 10px rgba(19, 34, 58, 0.85), 0 0 2px rgba(19, 34, 58, 0.9); }
.vh-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 64px; z-index: 1; }
.vh-wave path { fill: var(--paper); }

/* destination ticker */
.ticker { position: relative; z-index: 3; margin: -26px -10px 0; padding: 13px 0; background: var(--sun); border-block: 1px solid var(--hair-2); transform: rotate(-1.4deg); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker a { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--display); font-weight: 800; font-size: clamp(1.125rem, 2vw, 1.5rem); text-transform: uppercase; letter-spacing: -0.01em; color: var(--navy); white-space: nowrap; }
.ticker a:hover { color: var(--coral); text-decoration: none; }
.ticker a::after { content: ""; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5a5f' stroke='%2313223a' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1' fill='none' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
.vh + .ticker + .sec { padding-top: 104px; }

/* itinerary cards */
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; }
.tcard { --acc: var(--sun); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 16px; color: var(--ink); background: #fff; border-radius: 18px; box-shadow: var(--sh-2); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.tcard:nth-child(4n + 2) { --acc: var(--mint); }
.tcard:nth-child(4n + 3) { --acc: var(--peach); }
.tcard:nth-child(4n) { --acc: var(--ice); }
.tcard:hover { text-decoration: none; transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 24px 38px -20px rgba(19, 34, 58, 0.6); }
.tcard:nth-child(even):hover { transform: translateY(-6px) rotate(0.6deg); }
.tcard-media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sun-2); margin-bottom: 12px; }
.tcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease), filter 0.3s; }
.tcard:hover .tcard-media img { transform: scale(1.07); filter: saturate(1.2); }
.tcard-badge { position: absolute; left: 10px; top: 10px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--acc); color: var(--navy); border: 1px solid var(--hair-2); font-size: 0.75rem; font-weight: 800; transform: rotate(-3deg); transition: transform 0.3s var(--spring); }
.tcard:hover .tcard-badge { transform: rotate(2deg) scale(1.06); }
.tcard-meta, .tcard h3, .tcard-route, .tcard-match, .tcard-price { padding: 0 6px; }
.tcard-meta { font-size: 0.8125rem; font-weight: 700; color: var(--coral); margin-bottom: 4px; }
.tcard h3 { font-size: 1.0625rem; line-height: 1.3; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-route { font-size: 0.875rem; color: var(--ink-3); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-match { display: flex; gap: 6px; align-items: flex-start; font-size: 0.8125rem; font-weight: 600; color: var(--deep); margin-bottom: 8px; }
.tcard-match .icon { margin-top: 2px; flex: none; padding: 1px; border-radius: 50%; background: var(--mint); stroke-width: 3; }
.tcard-price { font-size: 0.875rem; color: var(--ink-3); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--hair); margin-inline: 6px; padding-inline: 0; }
.tcard-price b { color: var(--navy); font-family: var(--display); font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.tcard-go {
  display: none; margin: 8px 6px 0; padding-top: 8px; border-top: 1px solid var(--hair);
  font: 750 0.875rem/1.2 var(--font); color: var(--deep);
}
.tcard-go::after { content: " →"; }

/* destinations */
.dests { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 20px; }
.dest { --tilt: -2deg; position: relative; display: block; padding: 8px 8px 12px; background: #fff; border-radius: 6px; color: var(--ink); box-shadow: 0 14px 28px -16px rgba(19, 34, 58, 0.55); transform: rotate(var(--tilt)); transition: transform 0.35s var(--spring), box-shadow 0.35s var(--ease); }
.dest:nth-child(even) { --tilt: 1.8deg; }
.dest:nth-child(3n) { --tilt: -0.8deg; }
.dest::before { content: ""; position: absolute; top: -10px; left: 50%; width: 56px; height: 18px; margin-left: -28px; background: rgba(255, 201, 60, 0.85); transform: rotate(-4deg); z-index: 1; }
.dest:nth-child(4n + 2)::before { background: rgba(255, 90, 95, 0.7); }
.dest:nth-child(4n + 3)::before { background: rgba(0, 166, 166, 0.65); }
.dest:nth-child(4n)::before { background: rgba(56, 189, 248, 0.65); }
.dest.rv.in { transform: rotate(var(--tilt)); }
.dest:hover, .dest.rv.in:hover { text-decoration: none; transform: rotate(0) translateY(-8px) scale(1.04); box-shadow: 0 26px 40px -20px rgba(19, 34, 58, 0.6); z-index: 2; }
.dest img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; display: block; margin-bottom: 8px; background: var(--sun-2); transition: filter 0.3s; }
.dest:hover img { filter: saturate(1.25) brightness(1.04); }
.dest b { display: block; font-family: var(--hand); font-size: 1.6rem; font-weight: 600; line-height: 1; text-align: center; color: var(--navy); }
.dest span { display: block; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--ink-3); margin-top: 2px; }

/* regions & months */
.region-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
.region-cards.three { grid-template-columns: repeat(3, 1fr); }
.region-cards.five { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.region-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--hair-2); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--pop); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.region-card:hover { transform: translate(-2px, -2px); box-shadow: var(--pop-lg); }
.region-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--sun-2); border-bottom: 1px solid var(--hair-2); }
.region-card > div { padding: 16px 18px 18px; }
.region-card h3 { margin: 0 0 4px; }
.region-card p { margin: 0 0 12px; font-size: 0.875rem; color: var(--ink-3); }
.region-best { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sun); border: 1px solid var(--hair-2); font-size: 0.8125rem; font-weight: 800; color: var(--navy); transform: rotate(-2deg); }
.region-best .icon { stroke-width: 2.4; animation: spin 12s linear infinite; }
.region-card:nth-child(4n + 2) .region-best { background: var(--mint); }
.region-card:nth-child(4n + 3) .region-best { background: var(--peach); }
.region-card:nth-child(4n) .region-best { background: var(--ice); }
.month-table { display: grid; gap: 6px; overflow-x: auto; }
.mt-row { display: grid; grid-template-columns: var(--mt-label, 120px) repeat(12, minmax(28px, 1fr)); gap: 5px; align-items: center; min-width: 560px; }
.month-table.full { --mt-label: 236px; }
.month-table.full .mt-row { min-width: 680px; }
.mt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-head span { font-size: 0.75rem; font-weight: 800; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.mt-label { font-family: var(--display); font-size: 0.9375rem; font-weight: 700; color: var(--ink); padding-right: 8px; }
.mt-cell { display: block; height: 32px; border-radius: 9px; background: #dff1fb repeating-linear-gradient(115deg, rgba(56, 189, 248, 0.42) 0 2px, transparent 2px 8px); transition: transform 0.2s var(--spring); }
.mt-cell:hover { transform: scale(1.14); }
.mt-cell.good { background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff8a1f' stroke='%2313223a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4' fill='none'/%3E%3C/svg%3E") no-repeat center / 20px; }
.mt-row.rv { opacity: 1; transform: none; }
.mt-row.rv .mt-cell { transform: scale(0.3); opacity: 0; transition: transform 0.45s var(--spring), opacity 0.3s; transition-delay: calc(var(--i, 0) * 60ms + var(--c, 0) * 28ms); }
.mt-row.rv.in .mt-cell { transform: none; opacity: 1; }
.mt-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.mt-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mt-legend .mt-cell { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--hair-2); background-size: 14px; }
.month-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.month-card { --acc: var(--sun); position: relative; border: 1px solid var(--hair-2); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; background: #fff; box-shadow: var(--pop); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.month-card:nth-child(4n + 2) { --acc: var(--mint); }
.month-card:nth-child(4n + 3) { --acc: var(--peach); }
.month-card:nth-child(4n) { --acc: var(--ice); }
.month-card::before { content: ""; position: absolute; left: 20px; top: -2px; width: 44px; height: 8px; border-radius: 0 0 6px 6px; background: var(--acc); border: 1px solid var(--hair-2); border-top: 0; }
.month-card:hover { transform: translate(-2px, -2px) rotate(-0.5deg); box-shadow: var(--pop-lg); }
.month-card h3 { margin-bottom: 6px; }
.month-card p { font-size: 0.875rem; color: var(--ink-3); flex: 1; }
.tone-cool { --tone: var(--ice); }
.tone-wet { --tone: var(--mint); }
.tone-hot { --tone: var(--peach); }
.tone-dry { --tone: var(--sun); }
.tone-spring { --tone: var(--rose); }
.tone-autumn { --tone: var(--apricot); }
.tone-mid { --tone: #d5dde9; }
.tone-wet-2 { --tone: #b9e59a; }
.tone-mid-2 { --tone: #ecdcbf; }
.tone-cool-2 { --tone: #c9d7ff; }
.tone-hot-2 { --tone: var(--apricot); }
.tone-dry-2 { --tone: var(--sun-2); }
.ts-peak { --tone: var(--coral); --tone-ink: #fff; }
.ts-shoulder { --tone: var(--sun); }
.ts-off { --tone: #dfe5ee; --tone-ink: var(--ink-3); }
.month-card[class*="tone-"] { --acc: var(--tone); }
.month-card .mc-good { flex: 0; margin-top: 10px; color: var(--ink-2); }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ss-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--tone); color: var(--tone-ink, var(--ink)); border: 1px solid var(--hair-2); font-size: 0.75rem; font-weight: 700; }
.ss-panel { margin-bottom: 28px; }
.ss-title { font-size: 1.25rem; margin: 0 0 16px; }
.ss-strip { display: grid; grid-template-columns: 76px 1fr; gap: 6px 12px; align-items: center; }
.ss-lab { font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.ss-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.ss-months span { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--ink-3); }
.ss-months .now { color: var(--ink); text-decoration: underline 2px var(--coral); text-underline-offset: 4px; }
.ss-run { display: flex; align-items: center; justify-content: center; min-width: 0; height: 34px; padding: 0 6px; border-radius: 8px; background: var(--tone); color: var(--tone-ink, var(--ink)); border: 1px solid var(--hair-2); font-size: 0.8125rem; font-weight: 700; }
.ss-run span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ss-legend + .ss-legend { margin-top: 6px; }
.ss-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ss-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--tone); border: 1px solid var(--hair-2); }
.ss-legend em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.season-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.season-card, .ts-card { border: 1px solid var(--hair-2); border-radius: var(--r-lg); padding: 18px 20px; background: #fff; box-shadow: var(--pop); }
.season-card { border-top: 8px solid var(--tone); }
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sc-head h3 { margin: 0; font-size: 1.0625rem; }
.sc-months { font-weight: 700; font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.season-card p, .ts-card p { font-size: 0.875rem; color: var(--ink-3); margin: 0; }
.sc-places { margin-top: 12px; }
.sc-places > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sc-place { padding: 3px 10px; border-radius: 999px; background: var(--sea); color: var(--deep); font-size: 0.8125rem; font-weight: 600; }
.sc-place:hover { background: var(--brand-100); text-decoration: none; }
.ts-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ts-badge { padding: 3px 12px; border-radius: 999px; background: var(--tone); color: var(--tone-ink, var(--ink)); font-weight: 800; font-size: 0.875rem; }
.ts-card .ts-hint { color: var(--ink); font-weight: 600; margin-bottom: 8px; }
@media (max-width: 760px) { .ts-cards { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ss-strip { grid-template-columns: 1fr; gap: 4px; }
  .ss-lab:empty { display: none; }
  .ss-lab { margin-top: 6px; font-size: 0.75rem; }
  .ss-cells { gap: 2px; }
  .ss-months span { font-size: 0.625rem; }
  .ss-run { height: 30px; padding: 0 3px; font-size: 0.6875rem; border-radius: 6px; }
  .ss-run.tight span { display: none; }
}
.month-card .link-arrow { font-size: 0.9375rem; }
.city-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.city-month { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; border: 1px solid var(--hair-2); border-radius: var(--r-lg); padding: 14px; background: #fff; box-shadow: var(--pop); }
.city-month img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); display: block; border: 1px solid var(--hair-2); transform: rotate(-3deg); }
.city-month h3 { margin-bottom: 8px; }
.city-month p { margin: 8px 0 0; }
.mini-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.mini-months span { height: 24px; display: grid; place-items: center; border-radius: 6px; background: #e6f4fb; font-size: 0.6875rem; font-weight: 700; color: var(--ink-3); }
.mini-months span.on { background: var(--sun); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }

.cta-panel { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--sun); border: 1px solid var(--hair-2); border-radius: 24px; padding: 48px 48px; box-shadow: var(--pop-lg); }
.cta-panel::before { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 138, 31, 0.5) 0 8deg, transparent 8deg 22deg); z-index: -1; animation: spin 40s linear infinite; }
.cta-panel h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); margin-bottom: 8px; }
.cta-panel p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; max-width: 48ch; }
.cta-panel .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--pop); }
.cta-panel .btn-primary:hover { background: var(--coral); color: #fff; box-shadow: var(--pop-lg); }
.balloon { position: absolute; z-index: -1; width: 46px; height: 58px; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; border: 1px solid var(--hair-2); background: repeating-linear-gradient(90deg, var(--coral) 0 10px, #fff 10px 20px); animation: drift 14s ease-in-out infinite; }
.balloon::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 12px; height: 10px; margin-left: -6px; background: #8a5a2b; border: 1px solid var(--hair-2); border-radius: 2px 2px 4px 4px; }
.balloon::before { content: ""; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 10px; margin-left: -7px; border-inline: 1px solid var(--hair-2); }
.balloon-1 { right: 34%; top: 18%; }
.balloon-2 { right: 26%; bottom: 14%; width: 32px; height: 40px; background: repeating-linear-gradient(90deg, var(--lagoon) 0 8px, #fff 8px 16px); animation-delay: -6s; animation-duration: 18s; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(14px, -22px) rotate(3deg); } }

/* collections */
.filters { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 10px; margin-bottom: 20px; padding: 14px; background: var(--sand); border: 1px solid var(--hair-2); border-radius: var(--r-lg); box-shadow: var(--pop); }
.filters .input, .filters select { box-shadow: none; }
.search-input { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--hair-2); border-radius: var(--r); background: #fff; color: var(--navy); cursor: text; transition: box-shadow 0.15s; }
.search-input .icon { stroke-width: 2.4; }
.search-input:focus-within { box-shadow: var(--pop); }
.search-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--ink); font-weight: 500; }
.count-line { margin: 0 0 24px; color: var(--ink-3); font-size: 0.9375rem; font-weight: 600; }
.count-line b, .count-line strong { color: var(--navy); }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 56px; font-weight: 700; color: var(--navy); }

/* board header */
.board-head { position: relative; padding: 24px 0 0; background: var(--sand); border-bottom: 1px solid var(--hair-2); }
.board-head::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(19, 34, 58, 0.1) 1.2px, transparent 1.4px); background-size: 18px 18px; pointer-events: none; }
.board-head > .wrap { position: relative; }
.city-head { padding-bottom: 32px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: 16px; }
.crumbs a { color: var(--deep); }
.crumbs a:hover { color: var(--coral); }
.crumbs > span:last-child { color: var(--ink-2); max-width: 40ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mosaic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 16 / 9; margin-bottom: 30px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; display: block; background: transparent; border-radius: 14px; transition: transform 0.6s var(--ease); }
.mosaic > :hover img, .mosaic img:hover { transform: scale(1.02); }
.mosaic .m-main, .mosaic .m-side { min-height: 0; border-radius: 14px; overflow: hidden; background: transparent; }
.mosaic .m-main { grid-row: 1 / 3; }
.mosaic:has(.m-side:only-of-type) { grid-template-rows: minmax(0, 1fr); }
.mosaic:has(.m-side:only-of-type) .m-main { grid-row: 1; }
.mosaic:not(:has(.m-side)) { grid-template-columns: minmax(0, 1fr); }
.board-title { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.board-title h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 14px; max-width: 24ch; }
.board-title .lead { margin: -4px 0 12px; }
.board-tags { display: flex; gap: 8px; margin-bottom: 12px; }
.board-tags .tag { transform: rotate(-2deg); }
.meta { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.875rem; color: var(--ink-2); }
.meta li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--hair-2); font-weight: 600; }
.meta .icon { color: var(--coral); stroke-width: 2.3; }
.meta b { color: var(--ink); font-family: var(--display); font-weight: 800; }
.meta li.meta-edit { padding: 0; }
.meta-edit button { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: inherit; color: inherit; cursor: pointer; transition: background 0.2s; }
.meta-edit button:hover, .meta-edit button:focus-visible { background: var(--sun-2); }
.meta-edit.is-prompt button { color: var(--brand-ink); }
.meta .meta-pen { width: 12px; height: 12px; color: var(--ink-2); opacity: 0.45; transition: opacity 0.2s; }
.meta-edit button:hover .meta-pen { opacity: 1; }
button.tag { font-family: inherit; cursor: pointer; transition: transform 0.2s var(--ease, ease); }
button.tag:hover { transform: rotate(0deg) translateY(-1px); }
.board-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.viewer-note { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; border-radius: var(--r); background: #fff; border: 1px dashed var(--hair-2); font-size: 0.9375rem; }
.viewer-note .icon { margin-top: 3px; color: var(--coral); }
.route-line { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.route-stop { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; font-size: 0.875rem; font-weight: 700; color: var(--ink); box-shadow: var(--pop-sm); transition: transform 0.25s var(--spring); }
.route-stop:hover { transform: translateY(-3px) rotate(-2deg); }
.route-stop small { font-size: 0.75rem; font-weight: 800; color: var(--navy); background: var(--sun); padding: 1px 7px; border-radius: 999px; }
.route-stop:nth-child(4n + 2) small { background: var(--mint); }
.route-stop:nth-child(4n + 3) small { background: var(--peach); }
.route-stop:nth-child(4n) small { background: var(--ice); }
.route-stop + .route-stop { margin-left: 34px; position: relative; }
.route-stop + .route-stop::before { content: ""; position: absolute; left: -32px; top: 50%; width: 26px; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, var(--coral) 0 5px, transparent 5px 9px); background-size: 9px 3px; animation: dashSlide 0.9s linear infinite; }
@keyframes dashSlide { to { background-position: 9px 0; } }
.route-stop.is-daytrip { border-style: dashed; box-shadow: none; }
.stop-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hair-2); }
.tabs { display: flex; gap: 8px; margin-top: 26px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; border: 2px solid transparent; background: none; height: 40px; padding: 0 16px; border-radius: 999px; font-family: var(--display); font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background 0.15s, color 0.15s, box-shadow 0.2s var(--spring), transform 0.2s var(--spring); }
.tab:hover { background: #fff; border-color: var(--navy); color: var(--navy); }
.tab.on { background: var(--sun); color: var(--navy); border-color: var(--navy); box-shadow: var(--pop); transform: translate(-1px, -1px); }

/* board body */
.board-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; padding: 36px 0 96px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--hair-2); border-radius: 20px; padding: 24px; margin-bottom: 24px; box-shadow: var(--pop-lg); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head h3 { margin: 0; font-size: 1.3125rem; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.kpis > div { --acc: var(--sun); position: relative; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--acc) 30%, #fff); border: 1px solid var(--hair-2); }
.kpis > div:nth-child(2) { --acc: var(--mint); }
.kpis > div:nth-child(3) { --acc: var(--peach); }
.kpis > div:nth-child(4) { --acc: var(--ice); }
.kpis dt { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 4px; }
.kpis dd { margin: 0; font-family: var(--display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.make-yours { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.make-yours button { display: flex; gap: 14px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--hair-2); border-radius: 14px; padding: 14px; transition: background 0.15s, transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.make-yours button:hover { background: var(--sun-2); transform: translate(-2px, -2px); box-shadow: var(--pop); }
.make-yours button:hover .ico-box { animation: wiggle 0.5s ease-in-out; }
.make-yours .ico-box { width: 42px; height: 42px; }
.make-yours button:nth-child(4n + 2) .ico-box { background: var(--mint); }
.make-yours button:nth-child(4n + 3) .ico-box { background: var(--peach); }
.make-yours button:nth-child(4n) .ico-box { background: var(--ice); }
.make-yours b { display: block; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1rem; }
.make-yours small { display: block; color: var(--ink-3); font-size: 0.8125rem; margin-top: 2px; }
.city-tl { display: grid; }
.city-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.city-row:first-child { border-top: 0; padding-top: 0; }
.city-row:last-child { padding-bottom: 0; }
.city-thumb { width: 72px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair-2); transform: rotate(-2deg); background: var(--sun-2); }
.city-row:nth-child(even) .city-thumb { transform: rotate(2deg); }
.city-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--sun-2); }
.city-row h4 { margin: 0 0 2px; font-family: var(--display); font-size: 1.0625rem; }
.city-row h4 .muted { font-family: var(--font); font-weight: 500; font-size: 0.875rem; }
.city-hl { color: var(--ink-2); margin-top: 4px; }
.city-days { text-align: right; font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.city-days span { display: block; font-family: var(--font); font-weight: 600; color: var(--ink-3); font-size: 0.8125rem; }
.progress { height: 14px; border-radius: 999px; background: var(--sand); border: 1px solid var(--hair-2); overflow: hidden; margin: 0 0 12px; }
.progress > i, .tc-progress i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--lagoon) 0 8px, #19b9b9 8px 16px); background-size: 22.6px 22.6px; border-radius: inherit; transform-origin: left; transition: transform 1.2s 0.3s var(--ease); animation: stripes 1s linear infinite; }
.rv .progress > i, .rv .tc-progress i, .rv .bar > i { transform: scaleX(0); }
.rv.in .progress > i, .rv.in .tc-progress i, .rv.in .bar > i { transform: none; }
@keyframes stripes { to { background-position: 22.6px 0; } }

.day { display: grid; grid-template-columns: 60px 1fr; gap: 20px; }
.day-rail { display: flex; flex-direction: column; align-items: center; }
.day-num { width: 56px; height: 56px; border-radius: 50%; background: var(--sun); color: var(--navy); border: 1px solid var(--hair-2); box-shadow: var(--pop); display: grid; place-content: center; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; transition: transform 0.5s var(--spring); }
.day:nth-child(4n + 2) .day-num { background: var(--mint); }
.day:nth-child(4n + 3) .day-num { background: var(--peach); }
.day:nth-child(4n) .day-num { background: var(--ice); }
.day.rv .day-num { transform: scale(0.4) rotate(-30deg); transition-delay: 0.15s; }
.day.rv.in .day-num { transform: none; }
.day-num small { display: block; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy); opacity: 0.75; }
.day-line { width: 3px; flex: 1; margin: 10px 0; background: repeating-linear-gradient(180deg, var(--coral) 0 6px, transparent 6px 13px); opacity: 0.75; }
.day-card { background: #fff; border: 1px solid var(--hair-2); border-radius: 20px; padding: 22px; margin-bottom: 24px; box-shadow: var(--pop-lg); }
.day-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; }
.day-top h3 { margin: 0; font-size: 1.375rem; }
.day-sub { color: var(--ink-3); font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.transfer { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r); background: #e3f6f4; border: 1.5px dashed var(--lagoon); color: var(--ink-2); font-size: 0.875rem; }
.transfer .icon { margin-top: 3px; color: var(--deep); }
.acts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.act { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); align-items: center; }
.acts .act:first-child { border-top: 0; padding-top: 0; }
.act h4 { margin: 0 0 4px; font-size: 1rem; }
.act .sub { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); }
.act .sub a { display: inline-flex; align-items: center; gap: 4px; color: var(--deep); font-weight: 600; }
.act .sub a:hover { color: var(--coral); }
.act .sub .icon { width: 14px; height: 14px; }
.act-tip { margin-top: 6px; }
.act-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.act.has-img, .alt.has-img { grid-template-columns: 84px 1fr auto; }
.act-img { width: 84px; height: 64px; border-radius: 10px; object-fit: contain; object-position: center; display: block; background: var(--sun-2); border: 1px solid var(--hair-2); transition: transform 0.3s var(--spring); }
.act:hover .act-img { transform: rotate(-3deg) scale(1.05); }
.tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--sun-2); font-size: 0.875rem; color: var(--ink-2); }
.tip .icon { margin-top: 3px; color: var(--mango); stroke-width: 2.3; }
.tip p { margin: 0; }
.tip b { color: var(--ink); font-weight: 700; }
.note { margin-top: 12px; font-size: 0.875rem; color: var(--ink-3); }
.day-actions { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 0.875rem; }
.day-actions .link-btn { display: inline-flex; align-items: center; gap: 4px; }

.stay-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.stay-thumb { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--hair-2); box-shadow: var(--pop-sm); }
.stay-head h3 { margin: 0 0 2px; font-size: 1.3125rem; }
.stay-head h3 .muted { font-family: var(--font); font-weight: 500; font-size: 0.9375rem; }
.stay-head p { margin: 0; }
.stay-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.stay { position: relative; border: 1px solid var(--hair-2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #fff; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s; }
.stay:hover { transform: translate(-2px, -2px); box-shadow: var(--pop); }
.stay.picked { background: var(--sun-2); box-shadow: var(--pop); }
.stay.picked::after { content: "Picked"; position: absolute; top: -12px; right: 14px; padding: 3px 10px; border-radius: 999px; background: var(--coral); color: #fff; border: 1px solid var(--hair-2); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(4deg); }
.stay-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.stay h4 { margin: 4px 0 0; font-family: var(--display); font-size: 1.0625rem; }
.stay p { margin: 0; }
.stay-price { margin-top: auto; padding-top: 8px; color: var(--ink); font-size: 0.9375rem; }
.stay-price b { font-family: var(--display); font-weight: 800; }
.stay .links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.8125rem; font-weight: 700; }
.stay .btn { margin-top: 6px; }
.stay-note { margin: 16px 0 0; }
.sub-h { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; }
.sub-h .icon { color: var(--coral); stroke-width: 2.3; }
.food-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.food { --acc: var(--peach); position: relative; border: 1px solid var(--hair-2); border-radius: 14px; padding: 12px 14px 12px 22px; background: #fff; overflow: hidden; transition: transform 0.2s var(--spring); }
.food::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--acc); border-right: 1px solid var(--hair-2); }
.food:nth-child(4n + 2) { --acc: var(--sun); }
.food:nth-child(4n + 3) { --acc: var(--mint); }
.food:nth-child(4n) { --acc: var(--ice); }
.food:hover { transform: rotate(-1deg) translateY(-2px); }
.food b { display: block; font-weight: 700; color: var(--ink); font-size: 0.9375rem; }
.food span { font-size: 0.8125rem; color: var(--ink-3); }

.book-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; }
.book-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.book-item:first-child { border-top: 0; }
.book-item.done .bl b { text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; color: var(--ink-3); font-weight: 600; }
.bl b { font-weight: 700; color: var(--ink); }
.check { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--hair-2); background: #fff; display: grid; place-items: center; color: var(--navy); padding: 0; transition: background 0.15s, transform 0.25s var(--spring); }
.check:hover { background: var(--sun-2); transform: rotate(-6deg); }
.check .icon { width: 15px; height: 15px; stroke-width: 3; opacity: 0; transform: scale(0.4); transition: opacity 0.15s, transform 0.3s var(--spring); }
.book-item.done .check { background: var(--sun); }
.book-item.done .check .icon { opacity: 1; transform: none; }
.book-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.8125rem; font-weight: 700; justify-content: flex-end; }
.book-links { align-items: center; }
.book-note { margin: -4px 0 4px; }
.book-act .check:disabled { opacity: 0.55; cursor: default; }
.book-act .check:disabled:hover { background: #fff; transform: none; }
.bk-goto { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--deep); white-space: nowrap; }
.bk-skip-x { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px -6px -4px -2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; transition: background 0.15s, color 0.15s; }
.bk-skip-x .icon { width: 14px; height: 14px; }
.bk-skip-x:hover, .bk-skip-x:focus-visible { background: var(--sand); color: var(--ink); }
.book-item.is-skipped .bl b { color: var(--ink-3); font-weight: 600; }
.book-item.is-skipped .check { color: var(--ink-3); background: var(--sand); }
.book-item.is-skipped .check:hover { transform: none; }
.book-item.is-skipped .check .icon { opacity: 1; transform: none; }
.fl-search { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: -4px; padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--sand); }
.fl-field { display: grid; gap: 2px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.fl-field select, .fl-field input { min-height: 36px; padding: 4px 10px; border: 1px solid var(--hair-2); border-radius: 8px; background: #fff; font: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); width: auto; }
.fl-to { padding-bottom: 7px; font-size: 0.9375rem; color: var(--ink-2); }
.fl-to b { color: var(--ink); font-family: var(--display); }
.fl-meta { padding-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.fl-sites { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }
.fl-sites-h { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.fl-site { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; font-size: 0.8125rem; font-weight: 800; }
.fl-site > a { padding: 5px 12px; color: var(--navy); text-decoration: none; border-radius: 999px; }
.fl-site > a:hover { background: var(--sun-2); }
.fl-site-legs { padding-left: 12px; }
.fl-site-legs b { color: var(--ink); }
.fl-site-legs a { padding: 5px 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fl-site-legs a + a { margin-left: -8px; }
.fl-hint { flex-basis: 100%; display: flex; gap: 6px; align-items: center; margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--coral); }
.budget-row { display: grid; grid-template-columns: 170px 1fr 100px; gap: 16px; align-items: center; margin-bottom: 14px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.budget-row > span:last-child { text-align: right; color: var(--ink); font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { height: 14px; border-radius: 999px; background: var(--sand); border: 1px solid var(--hair-2); overflow: hidden; }
.bar > i { --acc: var(--coral); display: block; height: 100%; background: var(--acc); border-radius: inherit; transform-origin: left; transition: transform 1s 0.2s var(--ease); }
.budget-row:nth-child(6n + 2) .bar > i { --acc: var(--sky); transition-delay: 0.3s; }
.budget-row:nth-child(6n + 3) .bar > i { --acc: var(--sun); transition-delay: 0.4s; }
.budget-row:nth-child(6n + 4) .bar > i { --acc: var(--lagoon); transition-delay: 0.5s; }
.budget-row:nth-child(6n + 5) .bar > i { --acc: var(--pink); transition-delay: 0.6s; }
.budget-row:nth-child(6n) .bar > i { --acc: var(--mango); transition-delay: 0.7s; }
.budget-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 10px; font-weight: 600; }
.budget-total b { font-family: var(--display); font-size: 1.875rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); padding: 0 10px; background: var(--sun-2); border-radius: 10px; }
.notes { padding-left: 18px; margin: 8px 0 0; }
.notes li { margin-bottom: 4px; }
.notes li::marker, .ess-grid li::marker, .plain-list li::marker { color: var(--coral); }
.ess-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
.ess-grid h4 { margin-bottom: 8px; font-family: var(--display); font-size: 1.0625rem; }
.ess-grid ul, .plain-list { margin: 0; padding-left: 18px; font-size: 0.9375rem; }
.ess-grid li, .plain-list li { margin-bottom: 6px; }

/* AI side panel */
.side { position: sticky; top: 88px; }
.ai { background: #fff; border: 1px solid var(--hair-2); border-radius: 22px; box-shadow: var(--pop-lg); display: flex; flex-direction: column; max-height: calc(100vh - 112px); overflow: hidden; }
.ai-head { display: flex; gap: 12px; align-items: flex-start; padding: 18px 18px 14px; background: var(--sea); border-bottom: 1px solid var(--hair-2); }
.ai-head .ico-box { width: 40px; height: 40px; border-radius: 50%; background: var(--sun); }
.ai-head h3 { margin: 0; font-size: 1.125rem; }
.ai-head p { margin: 0; }
.ai-log { padding: 16px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.msg { max-width: 90%; padding: 10px 13px; border-radius: 16px; font-size: 0.875rem; font-weight: 500; line-height: 1.5; white-space: pre-wrap; }
.msg:last-child { animation: dropIn 0.35s var(--ease); }
.msg.user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--sea); color: var(--navy); border-bottom-left-radius: 4px; }
.ai-suggest { padding: 0 18px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-suggest button { border: 1px solid var(--hair-2); background: #fff; border-radius: 999px; height: 32px; padding: 0 12px; font-size: 0.8125rem; font-weight: 600; color: var(--navy); transition: background 0.15s, transform 0.2s var(--spring); }
.ai-suggest button:hover { background: var(--sun); transform: translateY(-2px) rotate(-1.5deg); }
.ai-form { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--hair-2); background: var(--paper); }
.ai-form input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--hair-2); border-radius: var(--r); padding: 0 12px; outline: none; font-size: 0.875rem; background: #fff; }
.ai-form input:focus { box-shadow: var(--pop); }
.ai-fab { display: none; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--deep); animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* modal & toast */
.modal-bg { position: fixed; inset: 0; background: rgba(19, 34, 58, 0.55); z-index: 80; display: grid; place-items: center; padding: 16px; animation: fade 0.2s ease; }
.modal { background: #fff; border: 1px solid var(--hair-2); border-radius: 22px; width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 24px; box-shadow: var(--pop-lg); animation: modalIn 0.4s var(--spring); }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(0.94) rotate(-1deg); } }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -24px -24px 18px; padding: 18px 24px; background: var(--sun); border-bottom: 1px solid var(--hair-2); border-radius: 20px 20px 0 0; }
.modal-head h3 { margin: 0; font-size: 1.375rem; }
.x { border: 1px solid var(--hair-2); background: #fff; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); padding: 0; transition: background 0.15s, color 0.15s, transform 0.25s var(--spring); }
.x:hover { background: var(--coral); color: #fff; transform: rotate(90deg); }
.alt-list { display: grid; gap: 10px; }
.alt { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--hair-2); border-radius: 14px; padding: 10px; transition: background 0.15s; }
.alt:hover { background: var(--sun-2); }
.alt b { color: var(--ink); font-weight: 700; font-size: 0.9375rem; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 24px) scale(0.9); background: var(--navy); color: #fff; padding: 12px 18px 12px 14px; border-radius: 14px; font-size: 0.9375rem; font-weight: 600; box-shadow: var(--pop); display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.2s, transform 0.35s var(--spring); z-index: 90; pointer-events: none; }
#toast::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.3); }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes fade { from { opacity: 0; } }

/* destinations index & city page */
.city-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 24px; }
.city-card { --acc: var(--sun); position: relative; display: flex; flex-direction: column; padding: 8px 8px 16px; color: var(--ink); background: #fff; border-radius: 18px; box-shadow: var(--sh-2); transform: rotate(var(--tilt, -0.6deg)); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.city-card:nth-child(even) { --tilt: 0.7deg; --acc: var(--mint); }
.city-card:nth-child(3n) { --tilt: -0.3deg; --acc: var(--peach); }
.city-card.rv.in { transform: rotate(var(--tilt, -0.6deg)); }
.city-card:hover, .city-card.rv.in:hover { text-decoration: none; transform: rotate(0) translateY(-8px); box-shadow: 0 26px 40px -20px rgba(19, 34, 58, 0.6); }
.city-card-media { aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: var(--sun-2); }
.city-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease), filter 0.3s; }
.city-card:hover .city-card-media img { transform: scale(1.07); filter: saturate(1.2); }
.city-card h3, .city-card p, .city-card-stats { padding: 0 8px; }
.city-card h3 { margin: 0 0 4px; font-size: 1.375rem; font-weight: 800; }
.city-card p { margin: 0 0 10px; color: var(--ink-3); font-size: 0.9375rem; }
.city-card-stats { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair); margin-inline: 8px; padding-inline: 0; font-size: 0.8125rem; font-weight: 700; color: var(--ink-3); }
.city-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.city-body .stay-opts { grid-template-columns: 1fr; }
.city-body .food-list { grid-template-columns: 1fr 1fr; }

.credit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.credit { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; border: 1px solid var(--hair); border-radius: 14px; padding: 10px; font-size: 0.875rem; word-break: break-word; background: #fff; }
.credit img { width: 88px; height: 60px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--hair-2); }

/* states */
.loading { padding: 120px 0; text-align: center; color: var(--ink-3); font-size: 1.125rem; font-family: var(--hand); font-weight: 600; font-size: 1.5rem; }
.spinner { position: relative; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; background: var(--sun); border: 1px solid var(--hair-2); }
.spinner::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: repeating-conic-gradient(var(--mango) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, transparent 29px, #000 30px, #000 35px, transparent 36px); mask: radial-gradient(circle, transparent 29px, #000 30px, #000 35px, transparent 36px); animation: spin 2.4s linear infinite; }
.empty-state { text-align: center; padding: 48px 24px; border: 1px solid var(--hair); border-radius: 20px; background: var(--sand); color: var(--ink-3); }
.empty-state .ico-box { margin: 0 auto 14px; border-radius: 50%; animation: bob 5s ease-in-out infinite; }
.empty-state p { margin: 0; font-weight: 600; }

/* accounts */
.auth-slot { display: inline-flex; align-items: center; }
.me-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px 0 4px;
  border: 1px solid rgba(19, 34, 58, 0.16);
  border-radius: 999px;
  background: var(--sun);
  color: var(--navy);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.me-chip:hover { text-decoration: none; background: var(--sun-2); box-shadow: var(--pop-sm); }
.me-chip span { white-space: nowrap; }
.hd-signin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(18, 140, 74, 0.25);
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 0.8125rem;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.hd-signin svg { width: 16px; height: 16px; flex: none; }
.hd-signin:hover { filter: brightness(0.97); }
.me-kicker {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sun); color: var(--navy); font-family: var(--display); font-weight: 800; font-size: 0.8125rem; object-fit: cover; flex: none; border: 1px solid var(--hair-2); }
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; border-width: 2px; box-shadow: var(--pop); }
.btn-wa { background: #fff; color: var(--navy); width: 100%; max-width: 320px; }
.btn-wa:hover { background: #dcf8e6; }
.btn-wa svg { color: #1faa53; }
.auth { display: grid; gap: 16px; }
.auth > p:first-child { margin: 0; }
.auth-opts { display: grid; gap: 12px; justify-items: center; padding: 4px 0; }
.auth-opts[hidden], [data-admin-link][hidden] { display: none; }
.gsi-slot { width: 100%; max-width: 320px; min-height: 44px; display: flex; justify-content: center; }
.auth-or { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 320px; color: var(--ink-3); font-family: var(--hand); font-size: 1.25rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.auth-fine { margin: 0; text-align: center; }
.wa-step { display: grid; gap: 14px; justify-items: center; text-align: center; }
.wa-how { margin: 0; padding-left: 20px; text-align: left; justify-self: stretch; color: var(--ink-2); font-size: 0.9375rem; }
.wa-how li { margin: 4px 0; }
.wa-how li::marker { color: var(--coral); font-weight: 800; }
.wa-code { font: 800 1.875rem/1 var(--display); letter-spacing: 0.12em; padding: 14px 22px; border: 1px dashed var(--hair-2); border-radius: 14px; background: var(--sun-2); color: var(--ink); user-select: all; }
.wa-step p { margin: 0; }
.wa-scan { display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: center; justify-self: stretch; text-align: left; }
.wa-qr { width: 168px; height: 168px; padding: 8px; border: 1px solid var(--hair-2); border-radius: 14px; background: #fff; box-shadow: var(--pop); transform: rotate(-1.5deg); }
.wa-qr svg { display: block; width: 100%; height: 100%; }
.wa-scan .wa-how { padding-left: 18px; }
.wa-tap { display: none; }
.btn .wa-desk { display: inline; }
@media (hover: none) and (pointer: coarse) {
  .wa-scan { display: none; }
  .wa-tap { display: block; }
  .btn .wa-tap { display: inline; }
  .btn .wa-desk { display: none; }
}
@media (max-width: 420px) { .wa-scan { grid-template-columns: 1fr; justify-items: center; } }
.wa-number { justify-self: stretch; display: grid; gap: 6px; padding-top: 8px; text-align: left; }
.wa-number.is-alt { border-top: 0; }
.wa-number label { font-weight: 700; font-size: 0.8125rem; color: var(--ink-2); }
.wa-number-row { display: flex; gap: 8px; }
.wa-number-row input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--hair-2); border-radius: 12px; font: inherit; font-size: 1rem; background: #fff; }
.wa-number-row .btn { height: 44px; flex: none; gap: 6px; padding-inline: 12px; }
.wa-number .err { color: var(--danger); }
.wa-sent { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ok-50); color: var(--ink); font-size: 0.9375rem; }
.wa-sent svg { flex: none; margin-top: 2px; color: #128c4a; }
.connect.is-minimal { gap: 12px; }
.connect.is-minimal .connect-lead { margin: 0; font-size: 0.875rem; line-height: 1.4; }
.connect.is-minimal .connect-step { min-height: 0; display: grid; gap: 10px; justify-items: stretch; }
.connect.is-minimal .connect-remind { margin-top: 4px; }
.connect.is-minimal .wa-primary {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 800;
  box-shadow: 0 10px 24px -12px rgba(18, 140, 74, 0.55);
}
.connect.is-minimal .wa-primary.is-dim { opacity: 0.55; }
.connect.is-minimal .wa-primary-hint {
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.connect.is-minimal .wa-alt { width: 100%; text-align: center; }
.connect.is-minimal .wa-alt > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-3);
}
.connect.is-minimal .wa-alt > summary::-webkit-details-marker { display: none; }
.connect.is-minimal .wa-alt[open] { text-align: left; }
.connect.is-minimal .wa-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.connect.is-minimal .wa-wait[hidden] { display: none; }
.wa-home { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--hair-2); border-radius: var(--r-lg); background: #e7f9ee; box-shadow: var(--pop); }
.wa-home-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; }
.wa-home-ico svg { width: 26px; height: 26px; }
.wa-home-copy { flex: 1; display: grid; gap: 2px; }
.wa-home-copy b { font-family: var(--display); font-size: 1.125rem; }
.wa-home-copy span { color: var(--ink-2); font-size: 0.9375rem; }
.wa-home .btn { flex: none; }
@media (max-width: 640px) {
  .wa-home { flex-wrap: wrap; padding: 16px; }
  .wa-home-ico { width: 40px; height: 40px; }
  .wa-home-copy { flex-basis: calc(100% - 56px); }
  .wa-home .btn { width: 100%; justify-content: center; }
}
.hcmp-wa { width: 100%; justify-content: center; margin-top: 12px; }
.wa-wait { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 0.875rem; font-weight: 600; }
.mine-form .field-row { gap: 12px; }
.consent { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px 12px; margin: 4px 0 20px; display: grid; gap: 10px; background: var(--paper); }
.consent legend { font-family: var(--display); font-weight: 700; font-size: 0.9375rem; color: var(--ink); padding: 0 6px; }
.consent p { margin: 0; }
.opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 0.9375rem; color: var(--ink-2); }
.opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--coral); flex: none; }
.opt b { font-weight: 700; color: var(--ink); }
.opt small { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.me-id { display: flex; align-items: center; gap: 18px; }
.me-id h1 { margin-bottom: 4px; }
.my-trips { margin-bottom: 56px; }
.trip-card .tc-link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.trip-card .tc-link:hover { text-decoration: none; }
.tc-progress { height: 10px; border-radius: 99px; background: var(--sand); border: 1px solid var(--hair-2); overflow: hidden; margin: 6px 6px 8px; }
.tc-remove { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-2); background: #fff; color: var(--navy); display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity 0.15s, background 0.15s, transform 0.25s var(--spring); z-index: 2; }
.tc-remove:hover { color: #fff; background: var(--coral); transform: rotate(90deg); }
.trip-card:hover .tc-remove, .tc-remove:focus-visible { opacity: 1; }
.empty-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 48px; padding: 20px 22px; border: 1px solid var(--hair); border-radius: 18px; background: var(--sand); }
.empty-mini p { margin: 0; font-weight: 600; }
.me-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.me-grid .panel { margin: 0; }
.me-grid h3 { margin-top: 0; }
.me-grid h3.mt { margin-top: 28px; }
.notify-list { display: grid; gap: 14px; margin-top: 12px; }
.methods { display: grid; gap: 4px; margin-top: 8px; }
.method { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 700; color: var(--ink); border-top: 1px solid var(--hair); padding-top: 4px; }
.method .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; font-size: 0.875rem; overflow-wrap: anywhere; text-align: right; }
.gsi-mini { min-width: 200px; display: flex; justify-content: flex-end; }
.me-actions { margin-top: 24px; justify-content: space-between; }
.link-btn.danger { color: var(--danger); }
.warn-note { background: var(--warn-50); border: 1.5px dashed var(--mango); border-radius: var(--r-sm); padding: 8px 10px; }
@media (hover: none) { .tc-remove { opacity: 1; } }

/* motion */
#app .rv { transition-property: opacity, transform; transition-duration: 0.7s; transition-timing-function: var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.tab-in { animation: dropIn 0.35s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .mt-row.rv .mt-cell { opacity: 1; transform: none; }
  .day.rv .day-num { transform: none; }
  .page-head h1::after { clip-path: none; }
  .vh-path .plane { display: none; }
}

/* responsive */
@media (max-width: 1100px) {
  .dests { grid-template-columns: repeat(4, 1fr); }
  .vh-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
}
@media (max-width: 980px) {
  .vh-grid { grid-template-columns: 1fr; padding: 56px 0 96px; gap: 56px; }
  .vh::before { background: radial-gradient(circle at 90% 0%, rgba(255, 201, 60, 0.5), rgba(255, 201, 60, 0) 40%), linear-gradient(180deg, rgba(19, 34, 58, 0.6) 0%, rgba(19, 34, 58, 0.55) 60%, rgba(19, 34, 58, 0.8) 100%); }
  .vh-planner { max-width: 560px; }
  .board-grid, .city-body { grid-template-columns: 1fr; }
  .region-cards, .region-cards.three, .region-cards.five { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .q { grid-column: 1 / -1; }
  .side { position: static; }
  .side.collapsed .ai { display: none; }
  .ai { max-height: none; }
  .ai-fab { display: inline-flex; position: fixed; right: 16px; bottom: 16px; z-index: 60; box-shadow: var(--pop); }
  .ess-grid { grid-template-columns: 1fr; }
  .me-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page { padding: 28px 0 64px; }
  .page-head { margin-bottom: 20px; }
  .vh-grid { padding-top: 28px; gap: 28px; }
  .vh h1 { font-size: clamp(1.85rem, 9vw, 2.4rem); }
  /* Stats strip competes with the one job (plan) — hide on phone. */
  .vh-proof { display: none; }
  .vh-planner { padding: 0 16px 16px; transform: none; animation-name: dropIn; }
  .vh-planner h2 { margin: 0 -16px 6px; padding: 16px 16px 12px; font-size: 1.15rem; }
  .vh-note { display: none; }
  .ticker { display: none; }
  .vh + .ticker + .sec,
  .vh + .sec { padding-top: 40px; }
  .sec { padding: 40px 0; }
  .sec-head h2 { font-size: clamp(1.4rem, 6vw, 1.75rem); }
  .kpis { display: none; }
  .ai-fab { bottom: 18px; right: 12px; }
  body:has(.deal-hook) .ai-fab,
  body:has(.bk-ribbon) .ai-fab { display: none; }
  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .tcard { padding: 0 0 10px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px -18px rgba(19, 34, 58, 0.45); border: 0; }
  .tcard-media { aspect-ratio: 5 / 4; border-radius: 0; margin-bottom: 10px; background: #d9ebe7; }
  .tcard-meta, .tcard h3, .tcard-price { padding: 0 10px; }
  .tcard-meta { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .tcard h3 { font-size: 0.875rem; line-height: 1.25; margin: 0 0 6px; -webkit-line-clamp: 2; }
  .tcard-badge, .tcard-route, .tcard-match, .tcard-go { display: none; }
  .tcard-price { border-top: 0; margin: 0; padding-top: 0; font-size: 0.75rem; color: var(--ink-3); }
  .tcard-price b { font-size: 0.9375rem; }
  .tcard-price span { color: var(--ink-3); font-weight: 500; }
  .page-results .page-head { margin-bottom: 18px; gap: 8px; }
  .page-results .page-head h1 { font-size: 1.375rem; margin-bottom: 4px; }
  .page-results .page-head p { font-size: 0.875rem; }
  .results-sum { color: var(--ink-3); }
  .results-edit { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 700; }
  .results-foot { margin-top: 28px; font-size: 0.875rem; }
  .dests { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .region-cards, .region-cards.three, .region-cards.five { grid-template-columns: 1fr 1fr; gap: 12px; }
  .region-card > div { padding: 12px 14px 14px; }
  .cta-panel { padding: 32px 24px; }
  .balloon { display: none; }
  /* Keep "My Trips" / "Sign in" labels visible — avatar-only chip was too easy to miss. */
  .me-chip,
  .hd-signin {
    height: 36px;
    max-width: min(42vw, 140px);
    padding: 0 10px 0 3px;
    gap: 6px;
    font-size: 0.75rem;
  }
  .hd-signin { padding: 0 12px; }
  .me-chip span,
  .hd-signin span {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mosaic { grid-template-columns: 1fr; aspect-ratio: 16 / 10; margin-bottom: 22px; padding: 0; }
  .mosaic .m-side { display: none; }
  .board-actions { width: 100%; }
  .board-actions .btn-primary { flex: 1; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .make-yours { grid-template-columns: 1fr; }
  .city-row { grid-template-columns: 56px 1fr; }
  .city-thumb { width: 56px; height: 48px; }
  .city-days { grid-column: 2; text-align: left; }
  .city-days span { display: inline; margin-left: 6px; }
  .day { grid-template-columns: 1fr; }
  .day-rail { flex-direction: row; gap: 10px; }
  .day-num { width: auto; height: 32px; padding: 0 12px; display: inline-flex; gap: 4px; align-items: center; font-size: 0.9375rem; border-radius: 999px; }
  .day-num small { font-size: 0.75rem; }
  .day-line { display: none; }
  .day-more .day-rail { display: none; }
  .day-card { padding: 16px; margin-top: 8px; }
  .act, .act.has-img { grid-template-columns: 64px 1fr; }
  .act-img { width: 64px; height: 52px; }
  .act-actions { grid-column: 2; justify-content: flex-start; }
  .alt.has-img { grid-template-columns: 56px 1fr; }
  .alt.has-img .act-img { width: 56px; height: 44px; }
  .alt.has-img > button { grid-column: 2; justify-self: start; }
  .budget-row { grid-template-columns: 110px 1fr 84px; gap: 10px; font-size: 0.875rem; }
  .book-item { grid-template-columns: auto 1fr; }
  .book-links { grid-column: 2; justify-content: flex-start; }
  .book-links:empty { display: none; }
  .book-list .book-item:has(.bk-skip-x) { position: relative; padding-right: 30px; }
  .bk-skip-x { position: absolute; top: 12px; right: -4px; margin: 0; }
  .panel { padding: 18px; box-shadow: var(--pop); }
  .city-months { grid-template-columns: 1fr; }
  .city-month { grid-template-columns: 72px 1fr; }
  .city-month img { width: 72px; height: 72px; }
  .route-line { gap: 8px; }
  .route-stop + .route-stop { margin-left: 0; }
  .route-stop + .route-stop::before { display: none; }
  .crumbs > span:last-child, .crumbs > span:nth-last-child(2) { display: none; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .status-page .scribble { position: static; margin-bottom: 18px; }
  .crumbs a, .sec-head .link-arrow, .month-card .link-arrow { padding: 6px 0; }
  .month-table { --mt-label: 92px; }
  .month-table.full { --mt-label: 116px; }
  .mt-row, .month-table.full .mt-row { min-width: 480px; gap: 4px; }
  .mt-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 0.8125rem; line-height: 1.2; }
  .mt-cell { height: 28px; border-radius: 8px; }
  .board-tabs .tabs { padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 380px) {
  .tcards { grid-template-columns: 1fr; }
}

/* visa and entry */
.entry-panel .entry-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ink); }
.entry-panel .entry-title .icon { color: var(--mango); flex-shrink: 0; stroke-width: 2.3; }
.entry-panel.is-free .entry-title .icon { color: var(--ok); }
.entry-panel .panel-head .link-btn { font-size: 0.875rem; }
.market-tips { background: #e3f6f4; }
.market-tips .icon { color: var(--deep); }
.market-tips ul { margin: 6px 0 0; padding-left: 18px; }
.market-tips li { margin-bottom: 4px; }
.market-tips li::marker { color: var(--lagoon); }

/* feedback strip under the tripboard */
.board-foot { padding-top: 8px; padding-bottom: 40px; text-align: center; color: var(--ink-3); font-size: 0.9375rem; }
.board-foot p { margin: 0; }

/* ---------- WhatsApp onboarding ---------- */
.btn-whatsapp { background: #25d366; color: var(--navy); box-shadow: var(--pop); }
.btn-whatsapp:hover { background: #3fe07c; color: var(--navy); transform: translate(-2px, -2px); box-shadow: var(--pop-lg); }
.btn-whatsapp svg { flex: none; }
.btn-wa-icon svg { color: #1faa53; }
.connect { display: grid; gap: 16px; }
.connect-perks { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 8px; background: var(--sun-2); border: 1px dashed var(--hair-2); border-radius: 14px; }
.connect-perks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.connect-perks .icon { flex: none; margin-top: 3px; color: #1faa53; stroke-width: 3; }
.connect-step { min-height: 120px; }
.connect-step .btn-lg { width: 100%; max-width: 360px; }
.connect-step a.btn.wa-tap { display: none; }
.wa-desk-link { font-size: 0.875rem; }
@media (hover: none) and (pointer: coarse) {
  .connect-step a.btn.wa-tap { display: inline-flex; }
  .wa-desk-link { display: none; }
}
.connect-remind { padding: 12px 14px; border: 2px solid var(--line-2); border-radius: 14px; }
.connect-remind small { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.connect-fine { margin: 0; text-align: center; }
.connect-done { display: grid; gap: 6px; justify-items: center; padding: 18px 0; font-family: var(--display); font-size: 1.25rem; }
.done-tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #25d366; border: 1px solid var(--hair-2); box-shadow: var(--pop); animation: popIn 0.5s var(--spring) both; }
.done-tick .icon { width: 32px; height: 32px; stroke-width: 3; color: var(--navy); }

.lock-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; margin: 0 0 24px 80px; padding: 24px; background: var(--sun-2); border: 1px solid var(--hair-2); border-radius: 20px; box-shadow: var(--pop-lg); }
.lock-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); border: 1px solid var(--hair-2); box-shadow: var(--pop-sm); animation: wiggle 2.4s 1s ease-in-out infinite; }
.lock-ico .icon { width: 24px; height: 24px; }
.lock-copy h3 { margin: 4px 0 6px; font-size: 1.375rem; }
.lock-copy p { margin: 0 0 10px; color: var(--ink-2); }
.lock-copy .scribble { font-size: 1.35rem; margin-bottom: 10px; transform-origin: left center; }
.lock-copy .muted.small { white-space: nowrap; }
.lock-copy .btn { margin-right: 10px; }
.lock-perks { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.lock-perks li { display: inline-flex; gap: 6px; align-items: center; }
.lock-perks .icon { color: #1faa53; stroke-width: 3; }
.day.is-locked { opacity: 0.6; pointer-events: none; user-select: none; }
.day.is-locked .day-num { background: var(--sand); }
.day.is-locked .day-card { box-shadow: var(--pop); }
.ghost-lines { display: grid; gap: 10px; margin-top: 14px; filter: blur(1.5px); }
.ghost-lines i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--sand), #f3ede0, var(--sand)); }
.ghost-lines i:nth-child(2) { width: 80%; }
.ghost-lines i:nth-child(3) { width: 55%; }
@media (max-width: 640px) { .lock-card { margin-left: 0; grid-template-columns: 1fr; } }

.x-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.x-card { display: flex; gap: 12px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--hair-2); border-radius: 14px; padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; transition: background 0.15s, transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.x-card:hover { background: var(--sun-2); transform: translate(-2px, -2px); box-shadow: var(--pop); }
.x-card .ico-box { width: 40px; height: 40px; }
.x-card:nth-child(4n + 2) .ico-box { background: var(--mint); }
.x-card:nth-child(4n + 3) .ico-box { background: var(--peach); }
.x-card:nth-child(4n) .ico-box { background: var(--ice); }
.x-txt { flex: 1; min-width: 0; }
.x-txt b { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); }
.x-txt small { display: block; color: var(--ink-3); font-size: 0.8125rem; margin-top: 2px; }
.x-state { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 800; color: var(--navy); }
.x-card.is-locked .x-state { padding: 3px 8px; border-radius: 999px; background: var(--sun); border: 1px solid var(--hair-2); }
.x-card.is-locked .x-txt small { filter: none; }
@media (max-width: 640px) { .x-grid { grid-template-columns: 1fr; } }

.checklist h4 { margin: 14px 0 6px; font-family: var(--display); }
.checklist h4:first-child { margin-top: 0; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist input:checked + span { text-decoration: line-through; color: var(--ink-3); }

.fare-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--navy); cursor: pointer; }
.fare-chip:hover { background: var(--sun-2); }
.fare-chip.on { background: var(--mint); }

.vote { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--hair-2); background: #fff; font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--navy); cursor: pointer; transition: transform 0.2s var(--spring); }
.vote:hover { background: var(--sun-2); }
.vote.on { border-style: solid; background: var(--sun); box-shadow: var(--pop-sm); }
.vote b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.75rem; line-height: 20px; }

.group-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; padding: 10px 14px; border-radius: var(--r); background: var(--mint); border: 1px solid var(--hair-2); font-size: 0.9375rem; }
.join-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 0; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px dashed var(--hair-2); }
.join-banner > .icon { color: var(--coral); flex: none; }
.join-banner > div { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.join-banner span { color: var(--ink-2); font-size: 0.9375rem; }
.join-banner.is-invited { border-style: solid; background: var(--sun-2); box-shadow: var(--pop-lg); animation: dropIn 0.6s var(--ease) both; }

.free-edits { margin: 0; padding: 8px 18px; font-size: 0.8125rem; color: var(--ink-3); border-top: 1px solid var(--hair); }

.share-group { width: 100%; margin-top: 16px; }

.perk-list { display: grid; gap: 12px; }
.perk { padding: 14px; border: 1px solid var(--hair-2); border-radius: 14px; }
.perk h4 { margin: 8px 0 4px; font-family: var(--display); }
.perk .row { margin-top: 10px; gap: 10px; align-items: center; }
.perk-code { padding: 4px 10px; border: 1px dashed var(--hair-2); border-radius: 8px; background: var(--sun-2); font-weight: 800; letter-spacing: 0.06em; user-select: all; }

.wa-sheet { position: fixed; left: 50%; bottom: 18px; z-index: 70; width: min(560px, calc(100% - 24px)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 14px 44px 14px 18px; background: #fff; border: 1px solid var(--hair-2); border-radius: 18px; box-shadow: var(--pop-lg); animation: sheetUp 0.45s var(--spring) both; }
.wa-sheet > div { flex: 1; display: grid; gap: 2px; }
.wa-sheet b { font-family: var(--display); font-size: 1.0625rem; }
.wa-sheet span { color: var(--ink-2); font-size: 0.875rem; }
.wa-sheet .x { position: absolute; top: 6px; right: 6px; }
@keyframes sheetUp { from { transform: translate(-50%, 120%); } to { transform: translateX(-50%); } }
@media (max-width: 520px) { .wa-sheet { flex-direction: column; align-items: stretch; text-align: left; } }
body:has(.wa-sheet) .ai-fab { display: none; }

/* Soft welcome — floats over cards, no dimmed backdrop (doesn't trap the traveller). */
.soft-auth {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  z-index: 68;
  display: grid;
  gap: 12px;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid rgba(19, 34, 58, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 40px -20px rgba(15, 40, 60, 0.45);
  animation: softAuthUp 0.45s var(--spring) both;
  pointer-events: auto;
}
@keyframes softAuthUp {
  from { transform: translateY(110%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.soft-auth .x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.soft-auth-copy { display: grid; gap: 4px; padding-right: 28px; }
.soft-auth-copy b { font-family: var(--display); font-size: 1.0625rem; color: var(--navy); }
.soft-auth-copy span { color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; }
.soft-auth-acts { display: grid; gap: 6px; }
.soft-auth-acts .btn-whatsapp { width: 100%; justify-content: center; min-height: 48px; gap: 8px; }
.soft-auth-acts .link-btn { justify-self: center; color: var(--ink-3); }
body.is-deck-mode .soft-auth { bottom: calc(16px + env(safe-area-inset-bottom, 0)); }
body:has(.soft-auth) .ai-fab { display: none; }

.ref-panel { position: relative; grid-column: 1 / -1; background: var(--sun-2); }
.ref-panel .scribble { position: absolute; right: 18px; top: -14px; }
.ref-panel h3 { margin-top: 0; }
.ref-dots { display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; }
.ref-dots span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--hair-2); background: #fff; font-weight: 800; color: var(--ink-3); }
.ref-dots span.on { border-style: solid; background: #25d366; color: var(--navy); box-shadow: var(--pop-sm); }
.ref-dots b { margin-left: 6px; font-size: 0.875rem; }
.ref-panel .row { gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .lock-ico, .wa-sheet, .join-banner.is-invited, .done-tick { animation: none; } }
.auth-opts .btn-whatsapp { width: 100%; max-width: 320px; }

/* ---------- Site pages: calm layer ---------- */
.status-page .ico-box { animation: popIn 0.6s var(--spring) both; box-shadow: none; }
.status-page::before { display: none; }
.vh::before { background: linear-gradient(95deg, rgba(19, 34, 58, 0.82) 0%, rgba(19, 34, 58, 0.5) 45%, rgba(19, 34, 58, 0.15) 100%); }
.vh-grid { padding: 72px 0 112px; }
.vh-kicker { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: none; backdrop-filter: blur(6px); }
.vh-kicker::before { background: var(--sun); animation: none; }
.vh-proof li b { color: #fff !important; }
.vh-planner { transform: none; border: 0; border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55); animation: dropIn 0.7s 0.3s var(--ease) both; }
.vh-planner::before { display: none; }
.vh-planner h2 { background: #fff; border-bottom: 1px solid var(--hair); border-radius: 18px 18px 0 0; font-size: 1.375rem; }

.tcard { box-shadow: var(--pop); border: 1px solid var(--hair); }
.tcard:hover, .tcard:nth-child(even):hover { transform: translateY(-3px); box-shadow: var(--pop-lg); }
.tcard:hover .tcard-media img { transform: scale(1.03); filter: none; }
.tcard-badge, .tcard:hover .tcard-badge { transform: none; background: rgba(255, 255, 255, 0.94); border: 0; font-weight: 700; }
.tcard-meta { color: var(--ink-3); font-weight: 600; }

.dest, .dest:nth-child(even), .dest:nth-child(3n) { --tilt: 0deg; border-radius: 14px; padding: 6px 6px 12px; border: 1px solid var(--hair); box-shadow: var(--pop); }
.dest::before { display: none; }
.dest:hover, .dest.rv.in:hover { transform: translateY(-3px); box-shadow: var(--pop-lg); }
.dest:hover img { filter: none; }
.dest img { border-radius: 10px; aspect-ratio: 1; }
.dest b { font-family: var(--display); font-size: 1rem; font-weight: 700; margin-top: 2px; }

.region-card, .month-card, .city-month { box-shadow: none; border-color: var(--hair); }
.region-card:hover, .month-card:hover { transform: none; box-shadow: var(--pop); }
.region-card img { border-bottom: 0; }
.region-best, .region-card:nth-child(n) .region-best { transform: none; background: var(--sun-2); border: 0; font-weight: 700; }
.region-best .icon { animation: none; }
.month-card::before { display: none; }
.city-month img { transform: none; border: 0; }
.mt-cell:hover { transform: none; }
.mt-legend .mt-cell { border: 0; }
.mini-months span.on { box-shadow: none; }

.cta-panel { background: #fff7dc; border: 1px solid #f3e1a6; box-shadow: none; padding: 40px; }
.cta-panel::before { display: none; }
.cta-panel .btn-primary, .cta-panel .btn-primary:hover { box-shadow: none; }

.filters { background: #fff; box-shadow: none; border-color: var(--hair); }
.search-input:focus-within { box-shadow: 0 0 0 3px var(--sun-2); border-color: var(--navy); }

.panel { border: 1px solid var(--hair); border-radius: 16px; box-shadow: none; }
.stay, .stay:hover { transform: none; box-shadow: none; }
.food:hover { transform: none; box-shadow: none; }
.city-thumb, .city-row:nth-child(even) .city-thumb, .act:hover .act-img, .check:hover { transform: none; }
.city-card, .city-card:nth-child(even), .city-card:nth-child(3n) { --tilt: 0deg; }
.city-card:hover, .city-card.rv.in:hover { transform: translateY(-3px); }
.x:hover { transform: none; }
.modal { border: 1px solid var(--hair); box-shadow: var(--pop-lg); }
.lock-ico { animation: none; }
.ai-suggest button:hover, .route-stop:hover { transform: none; }

/* ---------- Site: calm layer (no tilts, tape or hand-drawn notes) ---------- */
.vh-planner, .vh-planner.rv.in { transform: none; animation-name: dropIn; }
.vh-planner::before { display: none; }
.vh-planner h2 { background: #fff; border-bottom: 1px solid var(--hair); }
.planner-more { margin: 0 0 16px; }
.planner-more > summary { cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 700; color: var(--deep); }
.planner-more > summary::-webkit-details-marker { display: none; }
.planner-more > summary::before { content: "+ "; }
.planner-more[open] > summary::before { content: "– "; }
.planner-more[open] > summary { margin-bottom: 12px; }
.planner-more .field:last-child { margin-bottom: 0; }
.tcard, .tcard.rv.in, .city-card, .city-card.rv.in { transform: none; }
.tcard:hover, .tcard:nth-child(even):hover, .city-card:hover, .city-card.rv.in:hover { transform: translateY(-3px); }
.tcard-badge, .tcard:hover .tcard-badge, .board-tags .tag { transform: none; }
.city-month img, .city-thumb { transform: none !important; }

/* ---------- Trip board: calm layer (thin lines, no hard shadows, one yellow action) ---------- */
.board-head, .board-tabs, .board-grid, .side { --hair: rgba(19, 34, 58, 0.11); --hair-2: rgba(19, 34, 58, 0.2); --soft: 0 1px 2px rgba(19, 34, 58, 0.05), 0 12px 32px -16px rgba(19, 34, 58, 0.22); --tint: #f7f8fa; }
.board-head > .wrap, .board-tabs > .wrap, .board-grid, .board-foot { max-width: 880px; }
.board-head { background: #fff; border-bottom: 0; padding: 20px 0 4px; }
.board-head::before { display: none; }
.board-head .crumbs { margin-bottom: 14px; }
.board-head .mosaic { aspect-ratio: 16 / 9; gap: 8px; margin-bottom: 22px; padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0; transform: none; }
.board-head .mosaic img { object-fit: cover; object-position: center; background: transparent; border-radius: 12px; }
.board-head .mosaic .m-main, .board-head .mosaic .m-side { border-radius: 12px; background: transparent; overflow: hidden; }
.board-title { align-items: flex-start; gap: 16px 24px; }
.bt-main { flex: 1 1 420px; min-width: 0; }
.board-title h1 { font-size: clamp(1.75rem, 3vw, 2.4rem); margin: 0 0 8px; max-width: 28ch; }
.trip-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.trip-sum b { color: var(--ink); font-family: var(--display); }
.trip-sum .sep, .trip-route .arrow { color: var(--ink-3); opacity: 0.6; }
.trip-sum .link-btn { font-size: inherit; }
.trip-edit { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 10px !important; border: 1px solid var(--hair-2) !important; border-radius: 999px; }
.trip-edit:hover { background: var(--sun-2); text-decoration: none; }
.trip-route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 6px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.trip-route small { color: var(--ink-3); font-weight: 500; }
.board-actions { gap: 8px; align-items: center; }
.board-head .btn, .board-grid .btn, .side .btn { box-shadow: none; border-width: 1px; }
.board-head .btn:hover, .board-grid .btn:hover, .side .btn:hover { transform: none; box-shadow: none; }
.board-head .btn-secondary, .board-grid .btn-secondary, .side .btn-secondary { border-color: var(--hair-2); }
.board-head .btn-primary, .board-grid .btn-primary { border-color: var(--navy); }
.board-head .group-strip, .board-head .join-banner, .board-head .viewer-note { border-width: 1px; box-shadow: none; animation: none; }
.board-head .group-strip { background: #effaf6; border-color: var(--hair-2); }

.board-tabs { position: sticky; top: 66px; z-index: 40; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); }
.board-tabs .tabs { margin: 0; padding: 0; gap: 4px; }
.board-tabs .tab { height: 48px; padding: 0 14px; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; color: var(--ink-3); font-weight: 700; }
.board-tabs .tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; }
.board-tabs .tab:hover { background: none; color: var(--ink); }
.board-tabs .tab.on { color: var(--ink); background: none; box-shadow: none; transform: none; }
.board-tabs .tab.on::after { background: var(--navy); }

.board-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 0 120px; }
.board-grid .panel, .board-grid .day-card { border: 1px solid var(--hair); border-radius: 16px; box-shadow: none; padding: 22px; margin-bottom: 16px; }
.board-grid .panel-head { margin-bottom: 12px; }
.board-grid .panel-head h3, .stay-head h3 { font-size: 1.125rem; }
.board-grid .tag { border-width: 1px; height: 22px; padding: 0 8px; font-weight: 600; transform: none; }
.board-grid .progress, .board-grid .bar { height: 8px; border: 0; background: #eef0f3; }
.board-grid .progress > i { background: var(--lagoon); animation: none; }
.board-grid .bar > i { --acc: var(--navy) !important; opacity: 1 !important; }
.board-grid .ico-box { box-shadow: none; border-width: 1px; border-color: var(--hair-2); background: var(--tint); }
.mini-h { margin: 18px 0 8px; font-family: var(--font); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* overview */
.board-grid .city-row { border-top: 1px solid var(--hair); padding: 12px 0; }
.board-grid .city-row:first-child { border-top: 0; }
.board-grid .city-thumb { border: 0; transform: none !important; border-radius: 10px; }
.ov-budget { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.ov-budget > div { display: grid; gap: 2px; }
.ov-budget b { font: 800 1.625rem/1.1 var(--display); color: var(--ink); }
.extras-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f3fbf6; }
.extras-row .x-txt { flex: 1 1 240px; }
.board-grid .x-card { border: 1px solid var(--hair); box-shadow: none; transform: none; }
.board-grid .x-card:hover { background: var(--tint); transform: none; box-shadow: none; }
.board-grid .x-card .ico-box { background: var(--tint) !important; }
.ov-foot { margin: 8px 4px 0; line-height: 1.6; }

/* itinerary */
.board-grid .day { gap: 16px; }
.board-grid .day-num { width: 44px; height: 44px; font-size: 1rem; background: #fff !important; border: 1px solid var(--hair-2); box-shadow: none; }
.board-grid .day-line { width: 1px; background: var(--hair-2); opacity: 1; }
.more-dot { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-content: center; background: #fff; border: 1px dashed var(--hair-2); color: var(--coral); }
.board-grid .city-more { background: var(--tint); border-style: dashed; }
.city-more > summary { padding-right: 4px; }
.city-more .acts { margin-top: 4px; }
.board-grid .day-top h3 { font-size: 1.1875rem; }
.board-grid .transfer { background: var(--tint); border: 0; font-size: 0.875rem; }
.board-grid .act { border-top: 1px solid var(--hair); padding: 12px 0; gap: 14px; }
.board-grid .act-img { width: 64px; height: 52px; border: 0; transform: none !important; }
.board-grid .act.has-img { grid-template-columns: 64px 1fr auto; }
.board-grid .act-actions { gap: 2px; align-items: center; flex-wrap: nowrap; }
.act-book { padding: 6px 10px; border-radius: 8px; font-size: 0.875rem; font-weight: 700; color: var(--deep); white-space: nowrap; }
.act-book:hover { background: var(--tint); text-decoration: none; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: pointer; }
.icon-btn:hover { background: var(--tint); color: var(--ink); }
.icon-btn .icon { width: 17px; height: 17px; }
.tip-line { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.tip-line .icon { margin-top: 2px; color: var(--mango); }
.board-grid .day-actions { border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 12px; }
.board-grid .lock-card { border-width: 1px; box-shadow: none; }

/* stays */
.board-grid .stay-head { margin-bottom: 4px; }
.areas { display: grid; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.area-wrap { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.area-wrap + .area-wrap, .areas > .area + .area, .areas > .area + .area-wrap, .areas > .area-wrap + .area { border-top: 1px solid var(--hair); }
.area-wrap .area { flex: 1; }
.area { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border: 0; background: #fff; text-align: left; font: inherit; color: inherit; }
button.area { cursor: pointer; }
button.area:hover { background: var(--tint); }
.area.on { background: #f3fbf6; }
.area-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--hair-2); display: grid; place-items: center; color: #fff; }
.area.on .area-mark { background: var(--lagoon); border-color: var(--lagoon); }
.area-mark .icon { width: 13px; height: 13px; stroke-width: 3; }
.area-txt { min-width: 0; }
.area-txt b { font-family: var(--display); }
.area-txt small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.8125rem; }
.area-price { text-align: right; font-weight: 700; white-space: nowrap; font-size: 0.875rem; }
.area-price small { display: block; color: var(--ink-3); font-weight: 500; font-size: 0.75rem; }
.board-grid .vote { margin: 0; border-width: 1px; box-shadow: none; }
.hotels { margin-top: 6px; }
.hotels .loading.small { padding: 18px 0; font-size: 0.875rem; font-family: var(--font); }
.hotels-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 18px 0 4px; }
.hotels-head .mini-h { margin: 0; }
.hotel-list { list-style: none; margin: 0; padding: 0; display: grid; }
.hotel { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hair); }
.hotel:first-child { border-top: 0; }
.hotel-rank { padding-top: 2px; font-weight: 800; color: var(--ink-3); font-size: 0.875rem; }
.hotel-body h5 { margin: 0 0 2px; font-family: var(--display); font-size: 1rem; }
.hotel-body p { margin: 0; }
.hrate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 2px; font-size: 0.875rem; line-height: 1.3; }
.hrate-score { padding: 2px 8px; border-radius: 8px; background: var(--deep); color: #fff; font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrate-word { font-weight: 700; color: var(--navy); }
.hrate-count { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hcmp-hotel .hrate { font-size: 0.9375rem; margin: 6px 0 4px; }
.top-pick .hrate { margin: 0 0 0 4px; vertical-align: middle; }
.hotel-cta { display: flex; align-items: center; gap: 10px; }
.modal-hcmp { width: min(520px, 100%); }
.hcmp-hotel h4 { margin: 0 0 2px; font-family: var(--display); font-size: 1.1875rem; }
.hcmp-hotel p { margin: 0; }
.hcmp-save { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--sun-2); font-size: 0.9375rem; display: flex; align-items: center; gap: 10px; }
.hcmp-save .hcmp-logo { flex: none; }
.hcmp-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.hcmp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--hair-2); border-radius: 14px; }
.hcmp-row.best { border-color: var(--navy); background: #fffaf0; box-shadow: 0 6px 18px -12px rgba(19, 34, 58, 0.5); }
.hcmp-site { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hcmp-site-txt { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.hcmp-logo { width: 28px; height: 28px; flex: none; border-radius: 7px; display: block; }
.hcmp-logo-fallback {
  width: 28px; height: 28px; flex: none; border-radius: 7px; display: grid; place-items: center;
  background: var(--navy); color: #fff; font: 800 0.75rem/1 var(--font);
}
.hcmp-tag { padding: 2px 8px; border-radius: 999px; background: var(--sun); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.hcmp-price { display: grid; text-align: right; line-height: 1.25; }
.hcmp-price b { font-family: var(--display); font-size: 1.125rem; }
.hcmp-price small { color: var(--ink-3); font-size: 0.75rem; }
.hcmp-row .btn { white-space: nowrap; }
.hcmp-note { margin: 14px 0 0; }
.hotels-none { margin: 12px 0 0; }
.stay-note { margin: 4px 4px 0; }
.hotels-compact { grid-column: 2 / -1; width: 100%; margin-top: 8px; }
.top-pick { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--tint); font-size: 0.875rem; }
.top-pick > .icon { color: var(--ink-3); }

/* the stay on a check-in day */
.stay-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--hair-2); border-radius: 14px; background: #fff; }
.stay-row-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--ink-2); }
.stay-row-main { min-width: 0; }
.stay-row-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.stay-row-h b { font-family: var(--display); font-size: 1rem; }
.stay-row .hotels { margin-top: 6px; }
.stay-row .hotels-none { margin: 4px 0 0; }
.stay-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.stay-pick-h { min-width: 0; font-size: 0.9375rem; }
.stay-pick-h .hrate { display: flex; margin: 4px 0 0; }
.stay-pick-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.stay-price { display: grid; text-align: right; line-height: 1.2; }
.stay-price b { font-family: var(--display); font-size: 1rem; }
.stay-price small { color: var(--ink-3); font-size: 0.75rem; }
.stay-row-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--hair-2); }
.stay-row-foot .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.stay-row-booked { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; font-size: 0.9375rem; }
.stay-row-booked .icon { color: var(--lagoon); }
.stay-row.is-booked { background: #f3fbf6; border-color: #cdeedd; }
.stay-row.is-booked .stay-row-ico { background: #dff5ea; color: var(--lagoon); }
.stay-row.is-skipped { background: var(--tint); border-style: dashed; }
.stay-row.is-skipped .stay-row-h b { color: var(--ink-3); }

.act-day { font-weight: 700; color: var(--deep); }
.add-day .bk-menu-pop { min-width: 210px; }
.add-day .bk-menu-i { display: grid; gap: 1px; }
.add-day .bk-menu-i small { color: var(--ink-3); font-size: 0.75rem; }
.add-day > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.hotel.on { background: #f3fbf6; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.hotel-choose { border: 1px solid var(--hair-2); background: #fff; color: var(--ink); }
.hotel-choose:hover { background: var(--tint); }
.hotel-choose.on { background: var(--lagoon); border-color: var(--lagoon); color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.stay-mine { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: #dff5ea; color: var(--deep); font-size: 0.75rem; font-weight: 700; }
.stay-mine .icon { width: 12px; height: 12px; stroke-width: 3; }
@media (max-width: 640px) {
  .stay-row { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .stay-row-ico { display: none; }
  .stay-pick-cta { width: 100%; justify-content: space-between; }
  .stay-price { text-align: left; }
}

/* bookings */
.book-group { border-top: 1px solid var(--hair); margin-top: 12px; }
.book-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 4px; }
.book-group-h h4 { margin: 0; font-size: 0.9375rem; font-family: var(--display); }
summary.book-group-h { cursor: pointer; list-style: none; }
summary.book-group-h::-webkit-details-marker { display: none; }
summary.book-group-h h4::after { content: " ▾"; color: var(--ink-3); font-size: 0.8em; }
details[open] > summary.book-group-h h4::after { content: " ▴"; }
.board-grid .book-list { margin: 0; }
.board-grid .book-item { border-top: 1px solid var(--hair); padding: 12px 0; }
.board-grid .book-item:first-child { border-top: 0; }
.board-grid .check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--hair-2); transform: none !important; }
.board-grid .book-item.done .check { background: var(--lagoon); border-color: var(--lagoon); color: #fff; }
.board-grid .book-item.done .bl b { text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; }
.board-grid .fl-search { border-width: 1px; border-color: var(--hair); background: var(--tint); box-shadow: none; }
.board-grid .fl-field select, .board-grid .fl-field input { border-width: 1px; border-color: var(--hair-2); }
.board-grid .fl-site { border-width: 1px; border-color: var(--hair-2); box-shadow: none; }
.board-grid .fare-chip { border-width: 1px; border-color: var(--hair-2); }
.board-grid .budget-total { border-top: 1px solid var(--hair); }
.board-grid .budget-total b { background: none; padding: 0; font-size: 1.5rem; }
.fold > summary { display: grid; gap: 2px; cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h3 { margin: 0; font-size: 1.125rem; }
.fold > summary h3::after { content: " ▾"; color: var(--ink-3); font-size: 0.8em; }
.fold[open] > summary { margin-bottom: 16px; }
.fold[open] > summary h3::after { content: " ▴"; }
.entry-change { display: block; margin-top: 10px; }
.board-grid .market-tips { background: var(--tint); border: 0; }
.board-grid .food { border-width: 1px; border-color: var(--hair); box-shadow: none; transform: none; }

/* Edit with AI: a drawer at every width */
.side, .side.collapsed { position: fixed; z-index: 70; top: auto; right: 20px; bottom: 80px; width: min(400px, calc(100vw - 32px)); }
.side.collapsed { display: none; }
.side .ai { max-height: min(620px, calc(100vh - 170px)); border: 1px solid var(--hair-2); border-radius: 18px; box-shadow: var(--soft), 0 24px 48px -24px rgba(19, 34, 58, 0.35); }
.side .ai-head { background: #fff; border-bottom: 1px solid var(--hair); }
.side .ai-head .ico-box { box-shadow: none; border-width: 1px; }
.side .ai-close { flex: none; width: 32px; height: 32px; border: 1px solid var(--hair-2); }
.side .ai-close:hover { background: var(--tint); transform: none; }
.side .ai-form { border-top: 1px solid var(--hair); background: #fff; }
.side .ai-form input { border-width: 1px; border-color: var(--hair-2); }
.side .ai-form input:focus { box-shadow: 0 0 0 3px var(--sun-2); border-color: var(--navy); }
.side .ai-suggest button { border-width: 1px; border-color: var(--hair-2); }
.side .ai-suggest button:hover { transform: none; background: var(--sun-2); }
.ai-fab, .ai-fab:hover { display: inline-flex; position: fixed; right: 20px; bottom: 20px; z-index: 71; border-width: 1px; box-shadow: 0 10px 24px -10px rgba(19, 34, 58, 0.45); transform: none; }
.board-foot { padding-bottom: 96px; }

@media (max-width: 640px) {
  .board-head .mosaic { aspect-ratio: 4 / 3; }
  .board-title h1 { font-size: 1.625rem; }
  .board-actions .btn-primary { flex: 1; }
  .board-tabs .wrap { width: 100%; padding: 0 8px; }
  .board-tabs .tab { padding: 0 9px; font-size: 0.875rem; }
  .board-tabs .tab::after { left: 6px; right: 6px; }
  .board-grid .panel, .board-grid .day-card { padding: 16px; }
  .board-grid .act.has-img { grid-template-columns: 52px 1fr; }
  .board-grid .act-img { width: 52px; height: 44px; }
  .board-grid .act-actions { grid-column: 2; justify-content: flex-start; margin-left: -10px; }
  .board-grid .day-num { width: auto; height: 28px; }
  .area { grid-template-columns: 22px 1fr; }
  .area-price { grid-column: 2; text-align: left; }
  .area-price small { display: inline; margin-left: 4px; }
  .hotel { grid-template-columns: 18px minmax(0, 1fr); }
  .hotel-cta { grid-column: 2; margin-top: 4px; }
  .hcmp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "site btn" "price btn"; gap: 4px 10px; padding: 10px 12px; }
  .hcmp-site { grid-area: site; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .hcmp-site-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .hcmp-price { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; text-align: left; padding-left: 36px; }
  .hcmp-row .btn { grid-area: btn; height: 36px; padding: 0 12px; }
  .top-pick > .icon { display: none; }
  .top-pick > .grow { flex-basis: 100%; }
  .side, .side.collapsed { right: 12px; left: 12px; width: auto; bottom: 76px; }
  .ai-fab, .ai-fab:hover { right: 12px; bottom: 16px; }
}
.board-head.city-head > .wrap { max-width: var(--wrap); }

/* Booking ribbon: pinned under the tabs; asks "did you book it?" when the traveller comes back */
.bk-ribbon { border-top: 1px solid var(--hair); background: #fbfcfd; }
.bk-ribbon > .wrap { max-width: 880px; }
.bk-in { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-height: 46px; padding: 7px 0; font-size: 0.875rem; color: var(--ink-2); }
.bk-count { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; color: var(--ink-3); }
.bk-count b { color: var(--ink); font-family: var(--display); }
.bk-ring { flex: none; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--lagoon) calc(var(--p) * 1%), #e3e7ec 0); -webkit-mask: radial-gradient(circle at center, transparent 5px, #000 5.5px); mask: radial-gradient(circle at center, transparent 5px, #000 5.5px); }
.bk-msg { flex: 1 1 220px; min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
.bk-msg b { color: var(--ink); }
.bk-msg > .icon { flex: none; color: var(--ink-3); }
.bk-ok > .icon { color: var(--ok); }
.bk-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-acts .btn { box-shadow: none; border-width: 1px; }
.bk-acts .btn:hover { transform: none; box-shadow: none; }
.bk-acts .btn-secondary { border-color: var(--hair-2); }
.bk-acts .btn-primary { border-color: var(--navy); }
.bk-acts .bk-later { color: var(--ink-3); }
.bk-acts .btn .icon, .bk-acts .btn > svg { width: 14px; height: 14px; }
.bk-where { color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.bk-go { gap: 6px; }
.bk-menu { position: relative; }
.bk-menu > summary { list-style: none; }
.bk-menu > summary::-webkit-details-marker { display: none; }
.bk-menu[open] > summary { background: var(--tint); color: var(--ink); }
.bk-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; display: grid; min-width: 180px; padding: 6px; background: #fff; border: 1px solid var(--hair-2); border-radius: 12px; box-shadow: var(--pop); }
.bk-menu-i { padding: 9px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 0.875rem; text-align: left; color: var(--ink); cursor: pointer; white-space: nowrap; }
.bk-menu-i:hover, .bk-menu-i:focus-visible { background: var(--tint); }
.bk-ribbon.is-ask { background: #fff8e6; border-top-color: #f3dfa8; animation: bkIn 0.35s var(--ease) both; }
.bk-ribbon.is-ask .bk-msg > .icon { color: var(--mango); }
.bk-ribbon.is-just { background: #f1faf5; }
.bk-name { height: 30px; min-width: 0; width: 210px; padding: 0 10px; border: 1px solid var(--hair-2); border-radius: 8px; background: #fff; font: inherit; color: var(--ink); }
.bk-name:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--sun-2); }
.bk-ref { width: 170px; }
.bk-clip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border: 1px solid var(--hair-2); border-radius: 8px; background: #fff; color: var(--ink-2); cursor: pointer; }
.bk-clip:hover, .bk-clip:focus-within { border-color: var(--navy); }
.bk-clip.has { border-color: var(--navy); background: var(--sun-2); color: var(--ink); }
.bk-clip input { display: none; }
.bk-clip .icon { width: 15px; height: 15px; }
.bk-vch { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; vertical-align: baseline; }
.bk-vch .icon { width: 13px; height: 13px; }
.bk-as { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 600; }
.bk-as .icon { width: 13px; height: 13px; stroke-width: 3; }
.day-stay { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.day-stay .icon { color: var(--ok); }
.stay-booked { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #f1faf5; font-size: 0.9375rem; }
.stay-booked > .icon { color: var(--ok); stroke-width: 3; }
.stay-booked b { font-family: var(--display); }
.stay-booked.is-skipped { background: var(--sand); }
.stay-booked.is-skipped > .icon { color: var(--ink-3); }
.stay-more { margin-top: 10px; font-size: 0.875rem; }
.stay-more > summary { cursor: pointer; color: var(--deep); font-weight: 700; list-style: none; }
.stay-more > summary::-webkit-details-marker { display: none; }
.stay-more > summary::after { content: " ▾"; font-size: 0.75rem; }
.stay-more[open] > summary::after { content: " ▴"; }
.stay-map { margin-top: 14px; font-size: 0.875rem; }
.stay-map > summary { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--deep); font-weight: 700; list-style: none; }
.stay-map > summary::-webkit-details-marker { display: none; }
.stay-map > summary::after { content: "▾"; font-size: 0.75rem; }
.stay-map[open] > summary::after { content: "▴"; }
.stay-map-frame { margin-top: 10px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--tint); }
.stay-map-frame:empty { display: none; }
.stay-map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 640px) { .stay-map-frame iframe { height: 360px; } }
.bk-flash { animation: bkFlash 1.8s var(--ease); }
@keyframes bkIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes bkFlash { 0%, 35% { box-shadow: 0 0 0 3px var(--sun); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .bk-ribbon.is-ask, .bk-flash { animation: none; } }
@media (max-width: 640px) {
  .bk-ribbon > .wrap { padding: 0 12px; }
  .bk-in { gap: 6px 10px; font-size: 0.8125rem; }
  .bk-msg { flex-basis: 160px; }
  .bk-name { width: 100%; flex: 1 1 100%; }
  .bk-ref { display: none; }
  .bk-menu-pop { right: auto; left: 0; }
}
@media (max-width: 380px) { .bk-booked { display: none; } }

/* ---------- Trip board: Plan · Bookings · Group · Documents ---------- */
.tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--sun); color: var(--navy); font: 800 0.6875rem/1 var(--font); font-style: normal; vertical-align: 1px; }

/* trip at a glance */
.glance { padding: 18px 22px !important; }
.gl-route { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 20px; }
.gl-city { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; }
.gl-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--tint); }
.gl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-txt { display: grid; gap: 1px; min-width: 0; }
.gl-name { justify-self: start; padding: 0; border: 0; background: none; font: 700 0.9375rem/1.3 var(--display); color: var(--ink); text-align: left; cursor: pointer; }
button.gl-name:hover { color: var(--deep); text-decoration: underline; }
.gl-stay { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink-2); }
.gl-stay > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-stay .icon { flex: none; width: 13px; height: 13px; color: var(--ink-3); }
.gl-stay .link-btn { font-size: inherit; }
.gl-ok, .gl-stay .gl-ok { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.gl-ok .icon, .gl-stay .gl-ok .icon { color: var(--ok); stroke-width: 3; width: 12px; height: 12px; }
.gl-money { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.gl-money b { font: 800 1.375rem/1.1 var(--display); color: var(--ink); }
.gl-money > div { flex: 1 1 300px; }

/* Day jump lives in the Plan body (after the glance), not under sticky tabs */
.day-jump { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 14px; background: #fff; }
.day-jump-lbl { margin: 0 0 8px; font: 650 0.75rem/1.2 var(--font); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.day-pills { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 4px; }
.day-pills::-webkit-scrollbar { display: none; }
.day-pill {
  flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 36px; min-height: 36px; max-height: 36px; padding: 0 12px;
  border: 1px solid var(--hair-2); border-radius: 999px; background: #fff;
  font: 600 0.8125rem/1 var(--font); color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
.day-pill b { font-family: var(--display); font-size: 0.8125rem; font-weight: 700; line-height: 1; color: var(--ink); }
.day-pill span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--ink-3); }
.day-pill:hover { background: var(--tint); }
.day-pill.on { background: var(--navy); border-color: var(--navy); }
.day-pill.on b, .day-pill.on span { color: #fff; }
.day-pill.is-locked { border-style: dashed; }
.day-pill.is-locked .icon { width: 13px; height: 13px; flex: none; }
.board-grid .day { scroll-margin-top: 96px; }

/* the other nights of a stay */
.stay-band { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--tint); font-size: 0.875rem; color: var(--ink-2); }
.stay-band > .icon { flex: none; color: var(--ink-3); }
.stay-band b { color: var(--ink); }
.stay-band .link-btn { white-space: nowrap; }

/* stay sheet: a panel over the page (bottom sheet on phones) */
html:has(.sheet) { overflow: hidden; }
.sheet-bg { position: fixed; inset: 0; z-index: 74; background: rgba(19, 34, 58, 0.5); animation: fade 0.2s ease; }
.sheet { position: fixed; z-index: 75; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: min(680px, calc(100vw - 32px)); max-height: min(88vh, 860px); background: #fff; border-radius: 20px; box-shadow: 0 30px 80px -30px rgba(19, 34, 58, 0.55); overflow: hidden; --hair: rgba(19, 34, 58, 0.11); --hair-2: rgba(19, 34, 58, 0.2); --tint: #f7f8fa; }
.sheet.is-in { animation: sheetPop 0.28s var(--ease); }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hair); }
.sheet-head h3 { margin: 0 0 2px; font-family: var(--display); font-size: 1.25rem; }
.sheet-head p { margin: 0; }
.sheet-head .x { flex: none; width: 36px; height: 36px; border: 1px solid var(--hair-2); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; }
.sheet-body .mini-h:first-child { margin-top: 14px; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: #fff; }
.sheet .btn { box-shadow: none; border-width: 1px; }
.sheet .btn:hover { transform: none; box-shadow: none; }
.sheet .btn-secondary { border-color: var(--hair-2); }
.stay-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 14px 0 0; }
.stay-tools > .muted { flex: 1 1 100%; }
.stay-tools .link-btn { font-size: 0.875rem; }
@keyframes sheetPop { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); } }
@keyframes sheetUp { from { transform: translateY(100%); } }

@media (max-width: 640px) {
  .vh-lead { display: none; } /* one job: days + fare strip */
  .vh-quick-more { min-height: 44px; padding: 10px 0; }
}

/* Deal → board: one thumb-zone sticky (above bottom nav). No copy block, no second ribbon. */
.deal-hook {
  display: flex; align-items: center;
  padding: 10px 12px; background: rgba(238, 247, 245, 0.98);
  border-top: 1px solid rgba(12, 100, 87, 0.18);
  box-shadow: 0 -8px 24px -18px rgba(19, 34, 58, 0.35);
}
.deal-hook-acts { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
.deal-hook-acts.has-two { grid-template-columns: 1.2fr 1fr; }
.deal-hook-acts .btn { min-height: 48px; width: 100%; justify-content: center; font-weight: 700; }
.stay-more { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stay-more > summary { list-style: none; cursor: pointer; }
.stay-more > summary::-webkit-details-marker { display: none; }
.tab-more { opacity: 0.85; }

/* phone bottom bar: Plan + Book + More (AI/Group/Docs) */
.bnav { display: none; }
.bnav-more { position: relative; }
.bnav-more > summary { list-style: none; }
.bnav-more > summary::-webkit-details-marker { display: none; }
.bnav-more-menu {
  position: absolute; right: 4px; bottom: calc(100% + 8px); z-index: 80;
  display: grid; gap: 2px; min-width: 168px; padding: 8px;
  background: #fff; border: 1px solid rgba(19, 34, 58, 0.12); border-radius: 14px;
  box-shadow: 0 12px 28px -14px rgba(19, 34, 58, 0.45);
}
.bnav-more-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: 10px; background: none; font: 650 0.875rem/1.2 var(--font); color: var(--ink); cursor: pointer; text-align: left;
}
.bnav-more-menu button:hover { background: var(--tint, #f7f8fa); }
.bnav-more-menu .icon { width: 20px; height: 20px; }
@media (max-width: 760px) {
  body:has(.bnav) .site-hd { position: relative; }
  body:has(.bnav) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .board-tabs { top: 0; }
  .board-tabs > .wrap:first-child { display: none; }
  .bk-ribbon { border-top: 0; }
  .ai-fab, .ai-fab:hover { display: none; }
  /* One sticky conversion bar: hide affiliate bookbar when deal hook or booking ribbon is up */
  body:has(.deal-hook) .tb-bookbar,
  body:has(.bk-ribbon) .tb-bookbar { display: none !important; }
  /* Deal sticky sits above Plan/Book nav (thumb zone); leave room for both */
  body:has(.bnav):has(.deal-hook) { padding-bottom: calc(62px + 68px + env(safe-area-inset-bottom)); }
  .deal-hook {
    position: fixed; z-index: 71; left: 0; right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom));
  }
  /* Phone: ring only — % / booked count lives in title tooltip */
  .bk-ribbon:not(.is-ask):not(.is-just) .bk-count-txt { display: none; }
  .bk-ribbon .bk-in { gap: 8px; }
  .bk-ribbon:not(.is-ask) .bk-go { min-height: 44px; padding-inline: 14px; }
  /* Head: fill the photo card edge-to-edge (no grey letterbox borders) */
  .board-head .mosaic {
    display: grid;
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
  }
  .board-head .mosaic .m-side { display: none; }
  .board-head .mosaic img { object-fit: cover; background: transparent; }
  .board-title h1 { font-size: 1.25rem; }
  .board-actions .btn-primary { font-size: 0.8125rem; }
  .trip-edit-lbl { display: none; }
  /* Title + icon actions on one row — no full-width yellow CTA competing with the plan */
  .board-title { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
  .board-title .bt-main { flex: 1; min-width: 0; }
  .board-actions { width: auto; flex: none; justify-content: flex-end; gap: 6px; }
  .board-actions .btn { min-width: 44px; min-height: 44px; }
  /* Day chips: digit only (dates live on the day card) */
  .day-pill { width: 44px; height: 44px; padding: 0; justify-content: center; align-items: center; border-radius: 50%; }
  .day-pill b { font-size: 0.9375rem; }
  .day-pill.is-locked { width: auto; padding: 0 12px; border-radius: 999px; }
  /* Skip ask: Keep / Remove only — reasons in a popover menu */
  .bk-ribbon.is-compact .bk-in { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0; }
  .bk-ribbon.is-compact .bk-msg { line-height: 1.35; }
  .bk-ribbon.is-compact .bk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .bk-ribbon.is-compact .bk-acts > .btn { width: 100%; justify-content: center; min-height: 48px; }
  .bk-skip-pick { position: relative; }
  .bk-skip-pick > summary { list-style: none; width: 100%; justify-content: center; min-height: 48px; cursor: pointer; }
  .bk-skip-pick > summary::-webkit-details-marker { display: none; }
  .bk-skip-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 80;
    display: grid; gap: 2px; padding: 8px; background: #fff; border: 1px solid rgba(19, 34, 58, 0.12);
    border-radius: 14px; box-shadow: 0 12px 28px -14px rgba(19, 34, 58, 0.45);
  }
  .bk-skip-menu button {
    display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px;
    background: none; font: 650 0.875rem/1.25 var(--font); color: var(--ink); text-align: left; cursor: pointer;
  }
  .bk-skip-menu button:hover, .bk-skip-menu button:focus-visible { background: var(--tint, #f7f8fa); }
  .bnav { position: fixed; z-index: 72; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px 4px env(safe-area-inset-bottom); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(8px); border-top: 1px solid rgba(19, 34, 58, 0.12); box-shadow: 0 -8px 24px -18px rgba(19, 34, 58, 0.4); }
  .bnav-i { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 54px; padding: 4px 2px; border: 0; border-radius: 12px; background: none; font: 600 0.6875rem/1.1 var(--font); color: var(--ink-3); cursor: pointer; }
  .bnav-i .icon { width: 22px; height: 22px; }
  .bnav-i.on { color: var(--navy); }
  .bnav-i.on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--navy); }
  .bnav-i .tab-n { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; font-size: 0.625rem; }
  .bnav-ai { color: var(--deep); }
  .bnav-ai .icon { color: var(--mango); }
  .bnav-ai.on { background: var(--sun-2); }
  .side, .side.collapsed { bottom: calc(70px + env(safe-area-inset-bottom)); }
  body:has(.bnav) #toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.bnav) .tb-install { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .board-foot { padding-bottom: 24px; }

  .board-head { padding-top: 10px; padding-bottom: 8px; }
  .board-head .crumbs { display: none; }
  .board-title h1 { margin-bottom: 4px; }
  .trip-sum { font-size: 0.8125rem; }

  .glance { padding: 12px 16px !important; }
  .gl-route { grid-template-columns: 1fr; gap: 0; }
  .gl-city { padding: 6px 0; }
  .gl-city + .gl-city { border-top: 1px solid var(--hair); }
  .gl-money b { font-size: 1.25rem; }
  .gl-money .btn { width: 100%; justify-content: center; }
  .day-jump { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; }
  .day-jump-lbl { margin-bottom: 6px; }
  .day-more { margin-top: 10px; }
  .day-more > summary { list-style: none; cursor: pointer; color: var(--ink-3); }
  .day-more > summary::-webkit-details-marker { display: none; }
  .day-more[open] > summary { margin-bottom: 6px; }
  .day-more .day-actions { margin-top: 0; }

  .sheet-bg { animation: fade 0.2s ease; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .sheet.is-in { animation: sheetUp 0.3s var(--ease); }
  .sheet-head { padding: 14px 16px 12px; }
  .sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(19, 34, 58, 0.18); }
  .sheet-body { padding: 0 16px 16px; }
  .sheet-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sheet.is-in { animation: none; } }

/* Bookings: what it costs and how far along, then the checklist */
.bk-sum-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; }
.bk-sum-cost { display: grid; gap: 2px; }
.bk-sum-cost b { font: 800 1.75rem/1.1 var(--display); color: var(--ink); }
.bk-sum-prog { flex: 0 1 260px; display: grid; gap: 6px; font-size: 0.9375rem; }
.bk-sum-prog b { font-family: var(--display); }
.bk-sum-prog .progress { margin: 0; }
.bk-break { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hair); }
.bk-break > summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 0.875rem; color: var(--deep); }
.bk-break > summary::-webkit-details-marker { display: none; }
.bk-break > summary::after { content: " ▾"; font-size: 0.75rem; }
.bk-break[open] > summary::after { content: " ▴"; }
.bk-break[open] > summary { margin-bottom: 10px; }
@media (max-width: 760px) { .bk-sum-prog { flex: 1 1 100%; } .bk-sum-cost b { font-size: 1.5rem; } }
.board-grid .fl-hint { color: var(--ink-2); font-weight: 500; }
.board-grid .fl-hint .icon { color: var(--mango); flex: none; }
@media (max-width: 760px) { .bk-sum + .panel .panel-head > .muted { display: none; } }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #app .link-btn:not(.trip-edit), #app .gl-name, #app .day-route-link, #app .act .sub a { padding-block: 9px; margin-block: -9px; }
  #app .trip-edit { min-height: 36px; }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #app .check { position: relative; }
  #app .check::after, #app .bk-skip-x::after { content: ""; position: absolute; inset: -10px; }
  #app .book-links a { padding-block: 9px; margin-block: -9px; }
}
.bk-due { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.bk-due .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
.bk-due.late { color: var(--warn); }
.bk-due.late .icon { color: var(--warn); }
.stay-row .bk-due { margin-top: 10px; }
.act-due { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--sand); color: var(--ink-2); font-weight: 600; }
.act-due.late { background: var(--warn-50); color: var(--warn); }
.alt-was { margin: 0 0 12px; }
.alt-diff { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--sand); color: var(--ink-2); font-size: 0.75rem; font-weight: 700; }
.alt-diff.up { background: var(--warn-50); color: var(--warn); }
.alt-diff.down { background: var(--ok-50); color: #12663a; }
@media (max-width: 480px) { .bk-where { display: none; } .bk-msg b { white-space: nowrap; } }

/* Home hero: one-tap trip length */
.vh-quick { margin: 0 0 30px; animation: dropIn 0.8s 0.4s var(--ease) both; }
.vh-quick-q { margin: 0 0 10px; font-family: var(--display); font-size: 1.125rem; font-weight: 700; color: #fff; }
.vh-quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 460px; }
.vh-day { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 6px; border-radius: 14px; background: #fff; color: var(--navy); font-weight: 700; font-size: 1rem; text-align: center; text-decoration: none; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6); transition: background 0.15s, transform 0.15s; }
.vh-day:hover, .vh-day:focus-visible { background: var(--sun); transform: translateY(-2px); }
.vh-day:active { transform: none; }
.vh-quick-more { margin: 12px 0 0; padding: 6px 0; border: 0; background: none; color: rgba(255, 255, 255, 0.9); font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vh-quick-more:hover { color: #fff; }
#planner { scroll-margin-top: 84px; }
.vh-book {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(480px, calc(100% - 32px));
  margin: 0;
  padding: 10px 10px 10px 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
}
body.has-home-book { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
body:has(.sheet) .vh-book,
body:has(.modal-bg) .vh-book,
body:has(dialog[open]) .vh-book { visibility: hidden; pointer-events: none; }
.vh-book-copy { min-width: 0; flex: 1; }
.vh-book b {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vh-book small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.75rem; line-height: 1.3; }
.vh-book-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--sun);
  color: var(--navy);
  font-weight: 800;
  font-size: 0.9375rem;
}
@media (max-width: 760px) {
  .vh-book {
    left: 10px;
    right: 10px;
    width: auto;
    transform: none;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 640px) {
  .vh-grid { padding-top: 28px; gap: 40px; }
  .vh-kicker { margin-bottom: 16px; }
  .vh h1 { margin-bottom: 18px; }
  .vh-lead { display: none; }
  .vh-quick { margin-bottom: 24px; }
  .vh-quick-row { gap: 6px; }
}

/* —— Phone plan deck: immersive photo cards (Tinder-like browse) —— */
.plan-deck {
  --deck-h: min(calc(100dvh - 120px), 820px);
  position: relative;
  margin: 0 0 8px;
  min-height: var(--deck-h);
  height: var(--deck-h);
  touch-action: none;
  user-select: none;
}
@media (max-width: 760px) {
  #tab-body:has(.plan-deck) {
    margin-inline: -8px;
  }
  .board-grid.is-deck-grid {
    padding-bottom: 0;
    width: 100%;
    max-width: none;
  }
  /* Immersive day cards: no Plan/Book/More ribbon, no sticky tab strip */
  body.is-deck-mode {
    padding-bottom: 0 !important;
  }
  body.is-deck-mode .bnav,
  body.is-deck-mode .board-tabs,
  body.is-deck-mode .board-foot,
  body.is-deck-mode .ai-fab,
  body.is-deck-mode .tb-bookbar,
  body.is-deck-mode .deal-hook {
    display: none !important;
  }
  /* Return-ask ribbon retired — row checkboxes mark done; keep deck full-bleed. */
  body.is-deck-mode .board-tabs.deck-return,
  #deck-return.deck-return {
    display: none !important;
  }
  /* Keep trip title chrome above the cards when scroll drifts after a partner tab */
  body.is-deck-mode .site-hd {
    z-index: 55;
  }
  body.is-deck-mode .board-head.is-deck {
    position: sticky;
    top: var(--site-hd-h, 56px);
    z-index: 54;
    background: #fff;
    border-bottom: 1px solid rgba(19, 34, 58, 0.08);
  }
  /* Compact trip chrome so the photo card owns the viewport */
  body.is-deck-mode .board-head.is-deck .board-title {
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  body.is-deck-mode .board-head.is-deck .bt-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 8px 10px;
    min-width: 0;
  }
  body.is-deck-mode .board-head.is-deck h1 {
    font-size: 0.95rem;
    line-height: 1.25;
    margin: 0;
    flex: 0 1 auto;
    max-width: 42%;
    -webkit-line-clamp: 1;
  }
  body.is-deck-mode .board-head.is-deck .trip-sum {
    font-size: 0.72rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.is-deck-mode .board-actions.is-deck-acts {
    gap: 4px;
    flex: none;
  }
  .deck-continue {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0));
    z-index: 61;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 32px -16px rgba(15, 40, 60, 0.5);
  }
  .deck-continue-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--sun);
    color: var(--navy);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
  }
  .deck-continue-btn .icon { width: 16px; height: 16px; }
  .deck-continue-x {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--fog, #eef1f4);
    color: var(--navy);
    display: grid;
    place-content: center;
    cursor: pointer;
  }
  .board-head.is-deck {
    padding: 4px 0 0;
  }
  .board-head.is-deck h1 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .board-head.is-deck .trip-sum {
    margin: 2px 0 0;
    font-size: 0.75rem;
  }
  .board-head.is-deck .group-strip,
  .board-head.is-deck .join-banner {
    display: none;
  }
  .board-head.is-deck .board-actions .btn.icon-only {
    width: 36px;
    height: 36px;
  }
  .board-head.is-deck .board-actions.is-deck-acts {
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
  }
  .board-head.is-deck .board-actions .deck-head-save,
  .board-head.is-deck .board-actions .deck-head-edit {
    width: auto;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
  }
  .board-head.is-deck .board-actions .deck-head-edit.icon-only {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
  .board-head.is-deck .board-actions .deck-head-save .icon,
  .board-head.is-deck .board-actions .deck-head-edit .icon,
  .board-head.is-deck .board-actions .deck-head-save svg,
  .board-head.is-deck .board-actions .deck-head-edit svg {
    width: 15px;
    height: 15px;
    flex: none;
  }
  .board-head.is-deck .board-actions .deck-head-edit {
    border-color: rgba(19, 34, 58, 0.22);
    background: #fff;
    color: var(--navy);
  }
  .board-head.is-deck .board-actions .icon-only {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}
@media (max-width: 760px) {
  .board-actions.is-deck-acts {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .board-actions .deck-head-edit,
  .board-actions .deck-head-save {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 800;
  }
  .board-actions .deck-head-edit span,
  .board-actions .deck-head-save span {
    display: inline;
  }
}
.day-deck {
  position: relative;
  min-height: var(--deck-h);
  height: var(--deck-h);
}
.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 48px -20px rgba(15, 40, 60, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateX(10%) scale(0.96);
  transition: transform 0.32s var(--spring), opacity 0.24s var(--ease);
  will-change: transform, opacity;
}
.deck-card.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  z-index: 2;
}
.deck-card.is-dragging { transition: none; cursor: grabbing; }
.deck-card.swipe-left { transform: translateX(-120%) rotate(-12deg); opacity: 0; }
.deck-card.swipe-right { transform: translateX(120%) rotate(12deg); opacity: 0; }
.deck-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  background: linear-gradient(160deg, #1a3a4a, #0a1628);
  transform: scale(1.06);
}
.deck-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.28) 0%, transparent 30%),
    linear-gradient(0deg, rgba(10, 22, 40, 0.9) 0%, rgba(10, 22, 40, 0.45) 36%, transparent 62%);
  pointer-events: none;
  opacity: 0.55;
}
.deck-top {
  position: absolute;
  z-index: 2;
  /* Clear the 24px card radius so the Day pill never clips the corner */
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
}
.deck-top .deck-day-pill {
  flex-shrink: 0;
}
/* Entrance: photo settles first, then frosted lines rise from the bottom */
.deck-card.is-active.is-reveal .deck-photo {
  animation: deckPhotoIn 0.55s var(--ease) both;
}
.deck-card.is-active.is-reveal .deck-shade {
  animation: deckShadeIn 0.45s 0.12s var(--ease) both;
}
.deck-card.is-active.is-reveal .deck-top {
  animation: deckFadeIn 0.35s 0.18s var(--ease) both;
}
.deck-card.is-active.is-reveal .deck-kicker,
.deck-card.is-active.is-reveal .deck-overlay > h3 {
  animation: deckFadeIn 0.4s 0.28s var(--ease) both;
}
.deck-card.is-active .deck-line,
.deck-card.is-active .deck-stops-more,
.deck-card.is-active .deck-empty {
  opacity: 0;
  transform: translateY(32px);
}
.deck-card.is-active.is-reveal .deck-line,
.deck-card.is-active.is-reveal .deck-stops-more,
.deck-card.is-active.is-reveal .deck-empty {
  animation: deckLineUp 0.48s var(--spring) both;
}
.deck-card.is-active.is-reveal .deck-line:nth-child(1),
.deck-card.is-active.is-reveal .deck-stops-more:nth-child(1),
.deck-card.is-active.is-reveal .deck-empty:nth-child(1) { animation-delay: 0.4s; }
.deck-card.is-active.is-reveal .deck-line:nth-child(2),
.deck-card.is-active.is-reveal .deck-stops-more:nth-child(2) { animation-delay: 0.48s; }
.deck-card.is-active.is-reveal .deck-line:nth-child(3),
.deck-card.is-active.is-reveal .deck-stops-more:nth-child(3) { animation-delay: 0.56s; }
.deck-card.is-active.is-reveal .deck-line:nth-child(4),
.deck-card.is-active.is-reveal .deck-stops-more:nth-child(4) { animation-delay: 0.64s; }
.deck-card.is-active.is-reveal .deck-line:nth-child(5),
.deck-card.is-active.is-reveal .deck-stops-more:nth-child(5) { animation-delay: 0.72s; }
.deck-card.is-active.is-reveal .deck-line:nth-child(n + 6),
.deck-card.is-active.is-reveal .deck-stops-more:nth-child(n + 6) { animation-delay: 0.8s; }
.deck-card.is-active .deck-dots,
.deck-card.is-active .deck-actions {
  opacity: 0;
}
.deck-card.is-active.is-reveal .deck-dots,
.deck-card.is-active.is-reveal .deck-actions {
  animation: deckFadeIn 0.35s 0.88s var(--ease) both;
}
@keyframes deckPhotoIn {
  from { opacity: 0.7; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes deckShadeIn {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes deckFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes deckLineUp {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
.deck-day-pill, .deck-date {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}
.deck-overlay {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 14px;
  color: #fff;
}
.deck-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  opacity: 0;
}
.deck-overlay h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 5.5vw, 1.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
}
.deck-empty {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.deck-stops {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 58%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* Type-differentiated rows: Flight / Stay / Transfer / Do (TripIt scan pattern) */
.deck-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}
/* Opaque row: optional checkbox + main tap target (Book / Map / static). */
.deck-line.is-action {
  display: block;
  padding: 0;
}
.deck-line.has-mark {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 4px 6px 4px 4px;
}
.deck-line.is-action.has-swap {
  padding: 4px 6px 4px 4px;
}
.deck-line.has-mark.has-swap {
  grid-template-columns: 34px minmax(0, 1fr);
}
/* Book pill + swap as one compact pair on the right */
.deck-line-cluster {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.deck-line-cluster .deck-line-btn {
  flex: 1;
  min-width: 0;
  padding-right: 6px;
}
.deck-line-cluster .deck-line-cta {
  margin-right: 0;
  border-radius: 999px 0 0 999px;
  padding-right: 8px;
}
.deck-line-cluster .deck-swap {
  flex: none;
  width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 0 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 1px 0 0 rgba(19, 34, 58, 0.1);
}
.deck-line-cluster .deck-swap .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.deck-line-cluster .deck-swap:active {
  background: #f0f2f4;
}
/* No Book pill — keep swap as a round chip */
.deck-line-cluster:not(:has(.deck-line-cta)) .deck-swap {
  border-radius: 999px;
  margin-right: 10px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.92);
}
/* Fallback if swap ever renders outside a cluster */
.deck-swap {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.deck-swap .icon { width: 15px; height: 15px; }
.deck-swap:active { background: #fff; }
.deck-check {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: none;
}
.deck-check .icon {
  width: 15px;
  height: 15px;
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s, transform 0.2s ease;
}
.deck-check.is-on {
  background: rgba(127, 227, 214, 0.95);
  border-color: transparent;
  color: var(--navy);
}
.deck-check.is-on .icon {
  opacity: 1;
  transform: none;
}
.deck-line-btn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.deck-line-btn.is-static { cursor: default; }
.deck-line-btn:not(.is-static):active { background: rgba(255, 255, 255, 0.12); }
.deck-line.has-mark .deck-line-btn { padding-left: 6px; }
.deck-line-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: var(--sun);
}
.deck-line-ico .icon { width: 15px; height: 15px; }
.deck-line-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.deck-line-kind {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.deck-line-body b {
  font-size: 0.875rem;
  font-weight: 750;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-line-body em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-line-cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  min-height: 28px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.deck-line-cta .icon {
  width: 12px;
  height: 12px;
}
.deck-line-cta.is-done {
  background: rgba(127, 227, 214, 0.95);
  color: var(--navy);
  padding-inline: 10px;
}
.deck-line.is-done {
  opacity: 0.92;
  border-color: rgba(127, 227, 214, 0.45);
}
.deck-line.is-done .deck-line-ico {
  background: rgba(127, 227, 214, 0.45);
  color: #fff;
}
.deck-line-flight {
  background: rgba(255, 201, 60, 0.22);
  border-color: rgba(255, 201, 60, 0.4);
}
.deck-line-flight .deck-line-ico { background: rgba(255, 201, 60, 0.35); color: #fff; }
.deck-line-stay {
  background: rgba(127, 227, 214, 0.2);
  border-color: rgba(127, 227, 214, 0.38);
}
.deck-line-stay .deck-line-ico { background: rgba(127, 227, 214, 0.35); color: #fff; }
.deck-line-transfer .deck-line-ico { color: #fff; }
.deck-line-act .deck-line-ico { color: #fff; }
.deck-stops-more {
  margin: 0;
  padding: 0;
}
.deck-more-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.deck-more-btn:active { background: rgba(255, 255, 255, 0.1); }
.deck-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.deck-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.deck-dots i.on {
  width: 16px;
  border-radius: 999px;
  background: var(--sun);
}
.deck-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.deck-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-content: center;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--spring);
  flex: none;
}
.deck-fab .icon { width: 22px; height: 22px; }
.deck-fab:active { transform: scale(0.94); }
.deck-fab:disabled { opacity: 0.35; pointer-events: none; }
.deck-fab-no { color: var(--coral); }
.deck-fab-yes {
  width: 56px;
  height: 56px;
  color: var(--lagoon);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
/* Primary conversion on every day card — compact so it doesn't dominate the card */
.deck-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 1 auto;
  max-width: 148px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: var(--navy);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 201, 60, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s var(--spring);
}
.deck-save .icon {
  width: 15px;
  height: 15px;
  flex: none;
}
.deck-save:active { transform: scale(0.96); }
.deck-save.is-wa {
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(18, 140, 74, 0.5), 0 0 0 2px rgba(37, 211, 102, 0.25);
}
.deck-save.is-wa svg { width: 15px; height: 15px; flex: none; }
.deck-save.is-saved {
  background: rgba(255, 255, 255, 0.92);
  color: var(--lagoon);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.sheet-day .sheet-body .acts { margin-top: 8px; }
.sheet-day .day-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
@media (prefers-reduced-motion: reduce) {
  .deck-card, .deck-card.swipe-left, .deck-card.swipe-right { transition: none; }
  .deck-card .deck-photo,
  .deck-card .deck-shade,
  .deck-card .deck-top,
  .deck-card .deck-kicker,
  .deck-card .deck-overlay > h3,
  .deck-card .deck-line,
  .deck-card .deck-stops-more,
  .deck-card .deck-empty,
  .deck-card .deck-dots,
  .deck-card .deck-actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
@media (min-width: 761px) {
  .plan-deck { display: none; }

  /* Dest home: day chips + fare strip lead; planner is a quiet secondary card */
  .vh-lead { max-width: 40ch; margin-bottom: 22px; font-size: 1.0625rem; opacity: 0.92; }
  .vh-quick { margin-bottom: 18px; }
  .vh-quick-row { max-width: 520px; gap: 10px; }
  .vh-day { min-height: 56px; font-size: 1.0625rem; }
  .vh-proof { margin-top: 22px; gap: 10px 28px; opacity: 0.9; }
  .vh-proof b { font-size: 1.5rem; }
  .vh-planner { align-self: start; margin-top: 12px; }
  .vh-note { display: none; }
  .vh-quick-more { display: inline-block; }

  /* Calm itinerary cards (same job as phone): photo → days → title → price → open */
  .tcard.tcard-min {
    padding: 0 0 14px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--hair); box-shadow: 0 12px 28px -18px rgba(19, 34, 58, 0.35);
  }
  .tcard.tcard-min .tcard-media { aspect-ratio: 5 / 4; border-radius: 0; margin-bottom: 12px; }
  .tcard.tcard-min .tcard-meta,
  .tcard.tcard-min h3,
  .tcard.tcard-min .tcard-price { padding: 0 14px; }
  .tcard.tcard-min .tcard-meta {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
  }
  .tcard.tcard-min h3 { font-size: 1.0625rem; line-height: 1.3; margin: 0 0 8px; }
  .tcard.tcard-min .tcard-price {
    border-top: 0; margin: 0; padding-top: 0; font-size: 0.8125rem; color: var(--ink-3);
  }
  .tcard.tcard-min .tcard-price b { font-size: 1.125rem; }
  .tcard.tcard-min .tcard-go {
    display: block; margin: 10px 14px 0; padding-top: 10px;
    opacity: 0.85; transition: opacity 0.15s, color 0.15s;
  }
  .tcard.tcard-min:hover .tcard-go,
  .tcard.tcard-min:focus-visible .tcard-go { opacity: 1; color: var(--navy); }

  /* Plan results: compact head like phone */
  .page-results .page-head { margin-bottom: 24px; gap: 10px; align-items: flex-end; }
  .page-results .page-head h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
  .page-results .page-head h1::after { width: 88px; margin-top: 8px; }
  .page-results .page-head p { margin-top: 8px; font-size: 1rem; max-width: none; }
  .results-sum { color: var(--ink-3); }
  .results-edit {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
    font-weight: 700; vertical-align: baseline;
  }
  .results-foot { margin-top: 36px; }

  /* Tripboard: less head chrome, clearer day jump, sticky book bar owns conversion */
  .board-head .crumbs { margin-bottom: 10px; }
  .board-head .mosaic {
    aspect-ratio: 16 / 9; gap: 8px; margin-bottom: 16px;
  }
  .board-title { align-items: flex-start; gap: 12px; }
  .board-actions { flex: none; gap: 8px; }
  .board-actions .btn { min-width: 44px; min-height: 44px; }
  .day-jump { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--tint, #f7f8fa); }
  .day-jump-lbl { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; color: var(--ink-3); }
  .day-pill {
    min-height: 44px; padding: 8px 14px; border-radius: 12px;
    border: 1.5px solid var(--hair-2); gap: 6px;
  }
  .day-pill b { font-size: 0.875rem; }
  .glance .link-btn { font-weight: 750; color: var(--deep); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* Mid desktop: keep mosaic, slightly shorter so title stays in view */
  .board-head .mosaic { aspect-ratio: 2 / 1; }
}

/* Audit: keep booking titles, prices and fare disclosures readable on narrow screens. */
@media (max-width: 760px) {
  .board-head:not(.is-deck) .board-title { display: flex; flex-direction: column; align-items: stretch; flex-wrap: wrap; }
  .board-head:not(.is-deck) .board-title .bt-main { width: 100%; min-width: 0; flex: none; }
  .board-head:not(.is-deck) .board-title h1 { max-width: none; font-size: 1.5rem; line-height: 1.2; }
  .board-head:not(.is-deck) .board-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .board-head:not(.is-deck) .tb-fare { width: 100%; max-width: none; }
}

/* Booking-first discovery and comparison, shared across destination packs. */
.vh-browse { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 20px 0; }
.vh-browse .btn { min-height: 48px; }
.vh-flight-tools { margin-top: 20px; max-width: 600px; color: #fff; }
.vh-flight-tools > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; }
.vh-flight-tools > summary::before { content: '+'; font-size: 1.3rem; }
.vh-flight-tools[open] > summary::before { content: '−'; }
.tcard-route { margin: 0 18px 10px; color: #405951; font-size: .85rem; line-height: 1.45; }
.tcard-style { margin: 8px 18px; color: #466358; font-size: .78rem; }
.tcard-min .tcard-go { display: flex; align-items: center; justify-content: space-between; margin: 14px 18px 18px; padding: 12px 14px; background: #e5f3eb; color: #145442; border-radius: 10px; font-size: .85rem; min-height: 44px; }
.modal-hcmp .hcmp-row { border: 1px solid #d9e4dc; }
.modal-hcmp .hcmp-row .btn { min-height: 44px; }
.modal-head .x { min-width: 44px; min-height: 44px; }
.modal:focus { outline: none; }
.modal :focus-visible { outline: 3px solid #0c8067; outline-offset: 3px; }
@media(max-width:760px) {
  .vh .vh-grid { padding: 28px 0 34px; gap: 20px; }
  .vh-browse { gap: 10px; margin: 18px 0 12px; }
  .vh-browse .btn { width: 100%; justify-content: center; }
  .vh-flight-tools { margin-top: 8px; font-size: .86rem; }
  .vh-proof { display: none; }
  .vh .vh-planner { display: none; margin-top: 20px; }
  .vh .vh-planner.is-open, .vh .vh-planner:target { display: block; }
  .board-head.is-deck .board-title { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: start; }
  .board-head.is-deck h1 { display: block; white-space: normal; font-size: .98rem; line-height: 1.3; overflow: visible; -webkit-line-clamp: unset; }
  .board-head.is-deck .trip-sum { display: flex; flex-wrap: wrap; font-size: .74rem; gap: 4px 7px; white-space: normal; overflow: visible; }
  .board-head.is-deck .trip-sum .trip-estimate { display: block; flex-basis: 100%; }
  .board-head.is-deck .board-actions .btn.icon-only, .board-head.is-deck .board-actions .deck-head-edit.icon-only { min-width: 44px; width: 44px; min-height: 44px; height: 44px; }
  .board-head.is-deck .board-actions { flex-direction: column; }
  .deck-overlay { padding: 12px; max-height: calc(100% - 40px); }
  .deck-stops { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; margin-top: 10px; }
  .deck-line.is-action { background: #fffef9; color: #163d35; border: 1px solid #d8e1d9; backdrop-filter: none; }
  .deck-line.has-mark.has-swap { grid-template-columns: 44px minmax(0,1fr); gap: 2px; padding: 5px; }
  .deck-line .deck-line-btn { color: #163d35; padding: 8px 4px; }
  .deck-line .deck-line-ico { display: none; }
  .deck-line .deck-line-kind { color: #53685f; font-size: .65rem; }
  .deck-line .deck-line-body { min-width: 0; }
  .deck-line .deck-line-body b { color: #173c34; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .83rem; line-height: 1.3; }
  .deck-line .deck-line-body em { color: #53685f; font-size: .72rem; }
  .deck-line .deck-check { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-color: #bccac1; color: #23634e; background: #f4f7f1; }
  .deck-line .deck-line-cta { color: #173c34; background: #ffda65; font-size: .68rem; border-radius: 9px; padding: 9px 8px; margin-left: 5px; }
  .deck-line-cluster .deck-swap { width: 44px; height: 44px; min-height: 44px; margin: 0; border-radius: 9px; box-shadow: none; background: #eef3ed; color: #23634e; }
  .deck-actions { flex-shrink: 0; }
  .deck-save { min-height: 44px; }
  .deck-more-btn { min-height: 44px; }
  .modal-hcmp .hcmp-hotel h4 { font-size: 1.15rem; }
  .modal-hcmp .hcmp-note { line-height: 1.5; }
}
@media(prefers-reduced-motion:reduce) { .deck-card.is-active * { animation: none !important; transition: none !important; opacity: 1; } }

.vh h1, .vh-quick, .vh-planner { animation: none; opacity: 1; transform: none; }
.vh-book-go { min-height: 44px; display: inline-flex; align-items: center; }
@media(max-width:760px) {
  body.is-deck-mode .board-head.is-deck .bt-main { display: block; min-width: 0; }
  body.is-deck-mode .board-head.is-deck h1 { max-width: none; display: block; white-space: normal; -webkit-line-clamp: unset; }
  body.is-deck-mode .board-head.is-deck .trip-sum { display: flex; flex-wrap: wrap; white-space: normal; overflow: visible; gap: 4px 7px; margin-top: 5px; }
  .deck-line .deck-line-btn { grid-template-columns: minmax(0,1fr) auto; gap: 4px; }
}

/* Reduce competing copy without reducing type size or obscuring booking actions. */
.ticker { display: none; }
.vh + .ticker + .sec { padding-top: 48px; }
.vh-lead { max-width: 36ch; }
.vh-proof { display: none; }
.tcard-min .tcard-media::after { content: none; }
.tcard-min h3 { margin-bottom: 12px; }
.sec-head { gap: 16px; }
@media (max-width: 760px) {
  .vh + .ticker + .sec { padding-top: 28px; }
  .vh-lead { font-size: 1rem; line-height: 1.5; }
  .board-head .crumbs > span:last-child { display: none; }
  .board-head .crumbs > span:nth-last-child(2) { display: none; }
}
.compact-details > summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; color: var(--ink-3); font-size: .875rem; }
.compact-details > summary:focus-visible { outline: 3px solid var(--mint, #168678); outline-offset: 3px; }
.tcard-min .tcard-go::after { content: none; }
.tcard-min h3 { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; }