/* Discovery screen (Search & Filter) and the optional refinement card. Tokens: style.css :root. */
.discover{padding-top:12px}
.discover-hero{position:relative;padding:8px 0 18px}
/* Headline: Nunito Black throughout; the accent words are underlined (user choice 2026-10-23). */
.discover-hero h1{margin:0;max-width:none}
.discover-hero h1 .accent-text{font-style:italic;padding-right:.04em;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.1em}
/* Arrow from the gap between the two headline lines (just right of "eyes.") down to the search box's top-right corner (desktop: right, a loop through a heart, then down).
   Lives inside the "eyes." span and is sized in em, so it follows the headline at every width (decorative). */
.doodle-anchor{position:relative}
.doodle{position:absolute;left:100%;top:1.15em;width:1.45em;height:auto;margin-left:.15em;fill:none;stroke:color-mix(in srgb,var(--accent) 80%,var(--surface));stroke-width:4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* Phones get a curved arrow with a small loop (no room for the heart); the heart version shows from 700 px. */
.doodle-heart{display:none}
.doodle-arrow{width:1.2em;margin-left:-.3em}
.discover-sub{margin:10px 0 0;font-style:italic;max-width:34ch;font-size:clamp(17px,14px + .5vw,21px);line-height:1.5;color:var(--muted)}
/* Explore illustration (WF-017, prototype D): decorative, brand tokens only, transform-only loops 4–40 s.
   Full-bleed header band: breaks out of main's gutter to the viewport edges (body clips overflow-x).
   Still under reduced motion (style.css) and paused while the tab is hidden (html.motion-paused). */
.scene{position:relative;height:52px;margin:-12px calc(50% - 50vw) 4px;overflow:hidden;background:linear-gradient(180deg,var(--surface-2) 0%,var(--accent-soft) 70%,color-mix(in srgb,var(--accent-soft) 70%,var(--accent-line)) 100%)}
.scene svg{display:block}
.scene-sea{position:absolute;inset:0;width:100%;height:100%}
/* Pieces sit in .scene-zone (full width on phones; between logo and nav on desktop, set by fitScene()), each centred on a percentage of the zone. */
.scene-zone{position:absolute;top:0;bottom:0;overflow:hidden;left:var(--zone-l,0px);right:var(--zone-r,0px)}
.scene-obj{position:absolute;top:0;height:100%;width:auto;overflow:visible;transform:translateX(-50%)}
.scene-boat-at{left:30%}.scene-sun-at{left:72%}.scene-palm-at{left:88%}
.scene-fly{position:absolute;inset:0;animation:scene-fly 14s linear infinite}
.scene-fly .scene-obj{left:0;transform:none}
.scene-sun{fill:color-mix(in srgb,var(--accent-2) 55%,var(--surface-2));stroke:color-mix(in srgb,var(--accent-2) 55%,var(--surface-2));stroke-width:3;stroke-linecap:round;transform-origin:300px 62px;animation:scene-spin 40s linear infinite}
.scene-bird{fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linecap:round;opacity:.6}
.scene-b2{animation-delay:-6s}
.scene-palm{fill:color-mix(in srgb,var(--accent) 60%,var(--accent-2));transform-origin:352px 118px;animation:scene-sway 5s ease-in-out infinite}
.scene-trunk{fill:none;stroke:var(--accent-ink);stroke-width:5;stroke-linecap:round}
.scene-boat{transform-origin:118px 108px;animation:scene-bob 4.5s ease-in-out infinite}
.scene-hull{fill:var(--accent-ink)}
.scene-sail{fill:var(--surface)}
.scene-mast{stroke:var(--accent-ink);stroke-width:2}
.scene-wave{fill:var(--accent-line);animation:scene-wave 7s ease-in-out infinite}
.scene-w2{fill:color-mix(in srgb,var(--accent-line) 55%,var(--accent-soft));animation-duration:9s;animation-delay:-3s}
@keyframes scene-spin{to{transform:rotate(360deg)}}
@keyframes scene-fly{from{transform:translateX(-24px)}to{transform:translateX(100%)}}
@keyframes scene-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes scene-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes scene-wave{0%,100%{transform:translateX(0)}50%{transform:translateX(-40px)}}
.motion-paused .scene *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.scene *{animation:none}}
/* The query text area is the centrepiece: a large card, three visible lines on mobile. */
.search-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;padding:6px 0 0;overflow:hidden;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.search-field{flex:1 1 100%;display:flex;align-items:flex-start;gap:10px;min-width:0;padding:12px 16px 0;color:var(--muted)}
.search-field .icon{margin-top:2px}
.search-field textarea{flex:1;min-width:0;min-height:calc(3 * 1.5em + 8px);padding:0 0 4px;border:0;background:transparent;outline:none;resize:none;color:var(--ink);font-size:18px;line-height:1.5;font-weight:600}
/* Typewriter overlay (WF-017): sits exactly over the empty textarea; shown only while .search-field has .tw-on. */
.query-wrap{position:relative;flex:1;display:flex;min-width:0}
.tw{position:absolute;inset:0 0 auto;display:none;padding:0 0 4px;font-size:18px;line-height:1.5;font-weight:600;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none}
.search-field.tw-on .tw{display:block}
.tw-caret{display:inline-block;width:2px;height:1.1em;margin-left:1px;vertical-align:-3px;background:var(--accent-ink);animation:tw-blink 1s steps(1) infinite}
@keyframes tw-blink{50%{opacity:0}}
.search-field textarea::placeholder{color:var(--muted);font-weight:600}
.search-field:focus-within{color:var(--accent)}
/* Find itineraries sits at the bottom left of the search card, part of the box rather than floating over the criteria below. */
.search-foot{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;padding:4px 8px 8px}
/* The "From <country> · Change" pill sits in the search card, on the right of Find itineraries (user, 2026-10-27). */
.search-foot #departureSlot{margin-left:auto}
/* Phones (user, 2026-10-27): the pill is the globe and "From" only; the country and "Change" stay in its aria-label
   and in the sheet it opens. */
@media(max-width:699px){.search-foot .departure-pill strong,.search-foot .departure-pill-change{display:none}}
.search-submit{min-height:var(--tap);padding:8px 16px;font-size:15px;box-shadow:none}
.search-row:focus-within{border-color:var(--accent-line);box-shadow:var(--shadow-card),0 0 0 3px var(--accent-soft)}
/* Mood strip (WF-017): two rows drifting in opposite directions (38 s / 46 s), edge fades, paused on hover/focus.
   Reduced motion: first row only, static, scrolls sideways. */
.mood{position:relative;margin:14px calc(-1 * var(--gutter)) 12px}
.mood-strip{position:relative;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:2px 0}
.mood-strip::before,.mood-strip::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:28px;pointer-events:none}
.mood-strip::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.mood-strip::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.mood-track{display:flex;gap:8px;width:max-content;animation:mood-drift 38s linear infinite}
.mood-track.rev{animation-direction:reverse;animation-duration:46s}
.mood-strip:hover .mood-track,.mood-strip:focus-within .mood-track,.motion-paused .mood-track{animation-play-state:paused}
@keyframes mood-drift{to{transform:translateX(-50%)}}
.mood-tile{position:relative;flex:0 0 auto;width:118px;height:84px;padding:0;overflow:hidden;border:0;border-radius:14px;background:linear-gradient(100deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite;box-shadow:0 2px 8px rgba(32,47,73,.12);cursor:pointer}
.mood-tile img{display:block;width:100%;height:100%;object-fit:cover;opacity:0}
.mood-tile.loaded{background:var(--skeleton);animation:none}
.mood-tile.loaded img{opacity:1}
.mood-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(32,47,73,.6),rgba(32,47,73,0) 60%);opacity:0}
.mood-tile.loaded::after{opacity:1}
.mood-caption{position:absolute;left:8px;right:8px;bottom:7px;z-index:1;color:var(--ink-2);font-size:12px;font-weight:800;line-height:1.2;text-align:left}
.mood-tile.loaded .mood-caption{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.mood-tile:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.mood-tile.pop{animation:mood-pop .35s ease-out}
@keyframes mood-pop{30%{transform:scale(.94)}}
.mood>.mood-credits{top:6px;left:var(--gutter);right:calc(var(--gutter) + 6px);z-index:30}
.mood>.mood-credits .photo-credits-panel{max-height:min(40vh,240px)}
.mood>.mood-credits>summary{width:28px;height:28px;margin-left:auto}
/* Desktop: same heights; the strip spans the search card's width instead of bleeding to the page edges. */
@media(min-width:900px){
 .mood{margin-inline:0}
 .mood>.mood-credits{left:6px;right:6px}
}
@media(prefers-reduced-motion:reduce){
 .mood-strip{overflow-x:auto;scrollbar-width:none}
 .mood-track{animation:none}
 .mood-track.rev,.mood-tile[data-copy]{display:none}
}
/* What's hot now (WF-034): editorial picks above the results; a user-scrolled, snapping strip on phones and tablets,
   two rows of five from 1024 px. Nothing moves by itself; only the loading shimmer animates (stopped under reduced motion). */
.hot-now{margin:4px 0 24px}
.hot-now .section-heading{position:relative}
.hot-strip{display:flex;gap:12px;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hot-strip::-webkit-scrollbar{display:none}
.hot-tile{position:relative;flex:0 0 auto;width:min(68vw,240px);aspect-ratio:4/5;min-height:44px;padding:0;overflow:hidden;border:0;border-radius:var(--radius-card);scroll-snap-align:start;background:linear-gradient(100deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite;box-shadow:0 2px 8px rgba(32,47,73,.12);color:var(--ink-2);text-align:left;cursor:pointer}
.hot-tile.loaded,.hot-tile.no-photo{background:var(--skeleton);animation:none}
.hot-tile img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0}
.hot-tile.loaded img{opacity:1}
.hot-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(32,47,73,.6),rgba(32,47,73,0) 60%);opacity:0;pointer-events:none}
.hot-tile.loaded::after{opacity:1}
.hot-caption{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;flex-direction:column;gap:2px}
.hot-name{font-family:var(--font-head);font-size:18px;font-weight:900;line-height:1.15}
.hot-country{font-size:13px;font-weight:700;color:var(--muted)}
.hot-tile.loaded .hot-name,.hot-tile.loaded .hot-country{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hot-wx{position:absolute;top:10px;right:10px;left:10px;z-index:1;display:flex;justify-content:flex-end;pointer-events:none}
.hot-wx .card-weather{margin:0;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.hot-tile:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.hot-now .hot-credits{position:relative;top:auto;left:auto;right:auto;flex:0 0 auto;align-self:center;z-index:30}
.hot-now .hot-credits>summary{width:28px;height:28px}
.hot-now .hot-credits .photo-credits-panel{position:absolute;right:0;top:100%;width:min(320px,calc(100vw - 2 * var(--gutter)));max-height:min(40vh,240px)}
.hot-now .section-heading>.count{margin-left:auto}
@media(min-width:1024px){
 .hot-strip{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:2px 0 6px;overflow:visible}
 .hot-tile{width:auto}
}
@media(prefers-reduced-motion:reduce){.hot-tile{animation:none}}
.example-row{margin-top:12px}
.example-row .chip{font-size:13px;color:var(--muted)}
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.filters-head h2{font-size:17px;margin:0}
.filter-block{margin:14px 0 0;min-width:0}
.filter-label{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:0;text-transform:none}
.filter-label .icon{color:var(--muted)}
.filter-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
.filter-caption{margin:6px 0 0}
.season-note{margin:6px 0 0}
/* Departure: the one required question, asked in a pop-up sheet after the first search; then a compact pill. */
.departure-label{display:block;margin:0 0 10px;font-family:var(--font-head);font-weight:900;font-size:17px;color:var(--ink)}
.departure-input{position:relative;display:flex;align-items:center}
.departure-input .icon{position:absolute;left:14px;color:var(--accent);pointer-events:none}
.departure-input .field{padding-left:46px;min-height:52px;font-size:17px;border-radius:var(--radius-sm)}
.departure-why{margin:10px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.country-help{margin:6px 0 0}
.country-help a{color:var(--accent-ink)}
.country-error{margin:8px 0 0}
.sheet .departure-label{font-size:16px}
.trip-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
#departureSlot{min-width:0;max-width:100%}
.trip-row{flex-wrap:nowrap}
#departureSlot:empty{display:none}
.filters-button{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-size:14px;font-weight:800}
.filters-button:hover{background:var(--surface-2)}
.filters-button[aria-expanded="true"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink)}
.filters-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--fill);color:var(--on-accent);font-size:11px;line-height:20px;text-align:center}
.filters-count[hidden],.active-filters[hidden],.filters-layer[hidden]{display:none}
.active-filters{margin-top:10px}
.active-chip{gap:4px;padding:0 10px 0 14px;background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
/* Filters drawer: full-height bottom sheet below 700 px, inline panel above. Same markup in both. */
.filters-layer{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.filters-layer>.sheet-backdrop{position:absolute;inset:0}
.filters-layer>.filters{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;margin:0;background:var(--surface);padding-top:env(safe-area-inset-top);animation:sheet-up var(--dur) var(--ease)}
.filters-head{padding:8px 8px 8px var(--gutter);border-bottom:1px solid var(--line)}
.filters-head h2{flex:1}
.filters-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px var(--gutter) 24px}
.filters-foot{padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.filters-foot .primary{width:100%}
.departure-pill{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);max-width:100%;padding:0 14px 0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:700}
.departure-pill .icon{color:var(--accent)}
.departure-pill-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.departure-pill strong{color:var(--ink)}
.departure-pill-change{color:var(--accent-ink);font-weight:800;flex-shrink:0}
.departure-pill:hover{background:var(--surface-2)}
@media(min-width:700px){
 /* The whole homepage sits in the reading column, the same 760 px as the country and destination pages (user, 2026-11-03).
    Sliders stop at the column edge here instead of bleeding into the gutter. What's hot tiles are too narrow for the
    weather words, so the pill shows icon and temperature; the words stay for screen readers and in the title. */
 .discover{display:grid;grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto;padding-top:14px}
 .discover~.main-section{max-width:760px;margin-left:auto;margin-right:auto}
 .discover~.main-section .results,.discover~.main-section .hot-strip{margin-left:0;margin-right:0;padding-left:0;padding-right:0;scroll-padding-inline:0}
 .hot-wx .card-weather{padding-right:8px}
 .hot-wx .card-weather>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .discover-hero{padding:8px 0 20px}
 .scene{margin-top:-28px}
 .doodle-heart{display:block;width:1.1em}
 .doodle-arrow{display:none}
 /* The top bar floats over the band here; fitScene() narrows .scene-zone to the gap between logo and nav, and sets --zone-l. Pieces lean left. */
 .scene[style*="--zone-l"] .scene-boat-at{left:12%}
 .scene[style*="--zone-l"] .scene-sun-at{left:55%}
 .scene[style*="--zone-l"] .scene-palm-at{left:85%}
 .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .filters-layer{position:static;display:block;margin-top:14px}
 .filters-layer>.sheet-backdrop,.filters-close,.filters-foot{display:none}
 .filters-layer>.filters{height:auto;padding:4px 20px 20px;border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);animation:none}
 .filters-head{padding:8px 0;border-bottom:0}
 .filters-body{overflow:visible;padding:0}
 .tile-row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:2px 0}
 .chip-row{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0}
 .chip-row[aria-labelledby="label-month"],.chip-row[aria-labelledby="profileMonthLabel"]{flex-wrap:nowrap;overflow-x:auto;margin:0;padding:2px 0 6px}
 .example-row{flex-wrap:nowrap;overflow-x:auto}
}
/* Optional follow-up questions: chip groups per question (single select). */
.refinement-card{position:relative;grid-column:1/-1;margin:0 0 16px;padding:16px 18px;background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.refinement-title{display:flex;align-items:center;gap:8px;min-height:var(--tap);margin:0;padding-right:40px;font-family:var(--font-head);font-weight:900;font-size:16px;color:var(--ink)}
.refinement-title .icon{color:var(--accent)}
.refinement-title:focus{outline:none}
.refinement-dismiss{position:absolute;right:6px;top:8px;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted)}
.refinement-dismiss:hover{background:var(--surface-2)}
.refinement-heading p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.refinement-fields{display:grid;gap:14px;margin-top:12px}
.refine-label{margin:0 0 8px;font-size:14px;font-weight:800;color:var(--ink)}
.refinement-inline-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.refinement-alert{margin:10px 0 0;font-size:13px;color:var(--accent-ink)}
@media(min-width:700px){.refinement-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Results and Saved: section header, status line and the trip card. */
.main-section{padding-top:28px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-heading h2{margin:0 0 2px}
.section-heading p{margin:0;font-size:13px;color:var(--muted)}
.count{font-size:12px;color:var(--muted);text-align:right;flex-shrink:0;max-width:40%}
.results-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.search-mode{display:inline-flex;align-items:center;margin:0;padding:4px 12px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:800}
.travel-context-summary{font-size:12px;color:var(--muted)}
.travel-context-summary>summary{display:flex;align-items:center;gap:4px;min-height:var(--tap);cursor:pointer;list-style:none}
.travel-context-summary>summary::-webkit-details-marker{display:none}
.travel-context-summary p{margin:4px 0 0}
.clarification-notice{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.clarification-notice span{font-size:12px;color:var(--muted)}
.ai-interpretation{margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--ink-2)}
.result-group{margin:16px 0 24px}
.result-group-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
.result-group-heading h3{margin:0;font-size:24px;line-height:1.2}
/* The "Make these matches more you" button sits on the heading line, at its right end. */
.result-group-heading .refine-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px;font-size:13px;align-self:center}
.result-group-heading .refine-toggle[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-text)}
/* Phones: the label wraps to two lines so the button stays on the Best matches line. */
/* Phones: heading, count and the button share one line (user, 2026-10-27): a 21 px heading, a two-line button. */
@media(max-width:480px){
 .result-group-heading{gap:4px 8px}
 .result-group-heading h3{font-size:21px;white-space:nowrap}
 .result-group-heading .refine-toggle{max-width:166px;padding:6px 10px;border-radius:14px;white-space:normal;text-align:left;line-height:1.2;font-size:12px}
}
.result-group-heading .group-count{padding:2px 9px;border-radius:var(--radius-pill);background:var(--surface-3);color:var(--ink-2);font-size:12px;font-weight:800;align-self:center}
.result-group-heading p{flex-basis:100%;margin:0;font-size:13px;color:var(--muted)}
.results{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.show-more-wrap{display:flex;justify-content:center;padding:20px 0 4px}
.results-footnote{margin-top:16px}
/* Card: mosaic on the left at phone width (display:contents lets the body's parts share the card grid).
   Compact: 2-line summary, one inline meta row, one row of tags, one footer row (thumbs · heart · View trip).
   The mosaic spans the most column-2 rows a card can have (title, country, stats, weather chip, What's on, sunny line,
   summary, meta, tags = 9). Rows are min-content and the card has no row-gap, so the rows a card leaves empty stay at
   0; with auto rows the mosaic's 150px minimum leaked into them and added blank space under the tags. */
.trip-card{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);grid-auto-rows:min-content;grid-auto-flow:row dense;column-gap:12px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);min-width:0}
.trip-card>.mosaic{grid-column:1;grid-row:1/span 9;align-self:stretch;aspect-ratio:auto;height:100%;min-height:150px;border-radius:12px}
.trip-card>.card-body,.trip-card .card-more{display:contents}
.trip-card>.card-body>*,.trip-card .card-more>*{grid-column:2;min-width:0}
.trip-card>.photo-empty-note,.trip-card>.card-body>.ai-reason,.trip-card .card-more>.card-bottom{grid-column:1/-1}
.card-title{margin:0;padding-top:4px;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.heart{width:var(--tap);height:var(--tap);flex-shrink:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink-2);padding:0}
.heart:hover{background:var(--surface-2)}
.heart.saved{color:var(--accent)}.heart.saved .icon{fill:currentColor}
.card-country{font-size:12px;color:var(--muted)}
/* Name left, "Country · Region" on the same line at the right (user, 2026-10-27); a long country wraps under itself. */
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px}
.card-head .card-title{flex:1 1 auto;min-width:0}
.card-head .card-country{flex:0 1 auto;text-align:right;font-weight:600}
/* Card stat strip (WF-041): flight time · flight band · month weather · tier, under the country line. Nulls are
   omitted in markup (flights-facts.js); the strip wraps between stats and adds no tap targets. Each stat's "·"
   sits in the gap before it, so the one that starts a wrapped line falls outside the strip and is hidden. */
.card-stats{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 13px;overflow:hidden;font-size:12px;line-height:1.5;color:var(--ink-2)}
.card-stats li{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 4px;min-width:0;overflow-wrap:anywhere}
.card-stats li::before{content:"·";position:absolute;left:-9px;color:var(--muted)}
.card-stats .tier{color:var(--accent-text);font-weight:800}
.trip-card .card-stats .tag{font-size:11px;padding:0 6px;line-height:18px}
.card-stats .tag{color:var(--accent-ink)}
.trip-card .tags{margin-top:6px;flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.trip-card .tag{font-size:11px;padding:2px 8px;white-space:nowrap;flex-shrink:0}
/* Your thumbs ratings for this search: one status line above the results and a line on each card they moved. */
.ratings-applied{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:13px;color:var(--ink-2)}
.ratings-applied .icon{color:var(--accent)}
.card-rated{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--ok-ink)}
.card-rated.is-bad{color:var(--muted)}
.ai-reason{margin-top:4px;font-size:13px;color:var(--ink-2)}
.ai-reason>summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;font-weight:800;color:var(--accent-ink)}
.ai-reason p{margin:0 0 4px;line-height:1.55}
.card-bottom{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
.card-open{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 12px;border:0;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:14px}
.card-open:hover{background:var(--accent-line)}
.skeleton-card{min-height:200px;display:block;background:linear-gradient(100deg,var(--skeleton) 30%,var(--skeleton-hi) 50%,var(--skeleton) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite;border:0}
@media(min-width:700px){
 .results{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .trip-card{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;padding:0;overflow:hidden}
 .trip-card>.mosaic{grid-row:auto;height:auto;min-height:0;aspect-ratio:1.6;border-radius:0}
 .trip-card>.card-body>*,.trip-card .card-more>*,.trip-card>.photo-empty-note{grid-column:1;margin-left:16px;margin-right:16px}
 .trip-card>.photo-empty-note{margin:0}
 .trip-card .card-more>.card-bottom{margin-bottom:8px}
 .card-title{padding-top:12px;font-size:18px}
}
@media(min-width:1100px){.results{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* "… Or choose vibe criteria": a full-width labelled button under the mood strip. */
.criteria-button{display:flex;width:100%;margin-top:10px;padding:0 14px 0 16px;border-style:dashed;border-color:var(--accent-line);color:var(--accent-ink);justify-content:flex-start}
.criteria-button>span:first-of-type{flex:1;text-align:left}
.criteria-button .criteria-chevron{color:var(--muted);transition:transform var(--dur) var(--ease)}
.criteria-button[aria-expanded="true"] .criteria-chevron{transform:rotate(180deg)}
.criteria-button[aria-expanded="true"]{border-style:solid}
.active-filters:not([hidden]){margin-top:8px}
/* "Go straight to": destinations whose name starts with the search text (placeMatches in recommend.js). */
.place-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.place-jump-label{width:100%;font-size:13px;font-weight:800;color:var(--ink-2)}
.place-chip{gap:6px;white-space:normal;text-align:left}
.place-chip-country{font-weight:600;color:var(--muted)}
/* Duration: presets plus any typed length; When: optional specific dates. */
.duration-custom{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;color:var(--ink-2)}
.duration-custom .field{width:88px;min-width:0;text-align:center}
.when-dates{margin-top:10px}
.when-dates summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font-weight:800;font-size:14px;color:var(--accent-ink);cursor:pointer}
.when-date-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.when-date-fields .field{min-width:0}
/* WF-067: relative cost rank — the short phrase after the tier, and the Best match / Cheapest first toggle. */
.tier-rank{color:var(--muted);font-weight:600}
/* One line under "Top destinations for you" (user, 2026-10-27/28): the Crowds pill, the count and an info button whose
   panel holds the engine, trip context, what the AI understood and the draft / prototype notes. */
.results-bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 16px}
.results-count{font-size:13px;color:var(--muted)}
/* The Explore heading carries the bar (user, 2026-11-03): heading, the one Filters pill, the count, the info button. */
.results-head{margin:0 0 14px}
.results-head h2{margin:0 4px 0 0}
.results-info{margin-left:auto}
.results-info>summary{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink-2);cursor:pointer;list-style:none}
.results-info>summary::-webkit-details-marker{display:none}
.results-info>summary:hover,.results-info[open]>summary{background:var(--surface-2);color:var(--accent-ink)}
.results-info>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.results-info-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(460px,100%);max-height:60vh;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-pop);font-size:14px}
.results-info-panel>*{margin:0 0 8px}
.results-info-panel>*:last-child{margin-bottom:0}
/* Phones: the same one line — the Crowds pill, the count and the info button. */
@media(max-width:699px){
 .results-bar{flex-wrap:nowrap;gap:6px}
 .results-info{flex:none}
 .results-info-panel{width:auto;left:0}
 /* One line on a phone: a smaller heading (a long one wraps rather than pushing the pill off), the count in the info panel. */
 .results-head h2{flex:0 1 auto;min-width:0;font-size:clamp(18px,5.2vw,22px);line-height:1.15}
 .results-head .filters-pill{flex:none}
 .results-head .results-count{display:none}
}
/* Card stat line (user, 2026-10-27): ✈ ~2h 30 · cost · live weather, one wrapping line. */
.card-stats .card-stat-flight .icon{width:14px;height:14px;color:var(--muted)}
.card-stats .card-stat-now .card-weather{margin:0}
/* Result groups as side sliders of photo tiles, like What's hot now (user, 2026-10-27), at every width. A tile shows
   the destination's best photo (the mosaic's first slot, the same pick as What's hot) with its name. The details show
   on hover (mouse), on the first tap (touch: .is-open, card-tap in app.js) or on keyboard focus inside the tile; a
   click with a mouse, or the second tap, opens the destination. The details panel is 82 % surface over a 4 px blur:
   the photo's shapes still show through while the text stays readable (user, 2026-10-27). */
.result-group .results{display:flex;gap:12px;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.result-group .results::-webkit-scrollbar{display:none}
/* Previous and next arrows (mountRowArrows in app.js). The next arrow bobs until someone has scrolled a row. */
.results-wrap{position:relative}
.row-arrow[hidden]{display:none}
.row-arrow{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border:1px solid var(--hairline);border-radius:50%;background:var(--surface);color:var(--navy-deep);box-shadow:var(--shadow-pop);transform:translateY(-50%);transition:background var(--dur) var(--ease)}
.row-arrow:hover{background:var(--cream)}
.row-arrow.is-prev{left:-14px}.row-arrow.is-next{right:-14px}
.row-arrow.is-prev .icon{transform:rotate(180deg)}
html:not(.rows-learned) .row-arrow.is-next{animation:row-arrow-bob 1.8s var(--ease) infinite}
.motion-paused .row-arrow{animation-play-state:paused}
@keyframes row-arrow-bob{0%,60%,100%{translate:0 0}30%{translate:7px 0}}
.result-group .trip-card{position:relative;display:block;flex:0 0 auto;width:min(68vw,260px);aspect-ratio:4/5;padding:0;overflow:hidden;scroll-snap-align:start;cursor:pointer}
/* Three tiles fill the row from 700 px (user, 2026-11-04); the rest stay a scroll away. */
@media(min-width:700px){.result-group .trip-card{width:calc((100% - 24px)/3)}}
.result-group .trip-card>.mosaic{position:absolute;inset:0;display:block;height:100%;min-height:0;aspect-ratio:auto;border-radius:0}
.result-group .trip-card>.mosaic>.photo-slot{width:100%;height:100%}
.result-group .trip-card>.mosaic>.photo-slot:not(:first-child){display:none}
.result-group .trip-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(32,47,73,.66),rgba(32,47,73,0) 55%);pointer-events:none}
.result-group .trip-card>.card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:6px;max-height:100%;padding:12px;overflow:hidden}
.result-group .trip-card>.card-body>*,.result-group .trip-card .card-more>*{grid-column:auto;margin:0}
.result-group .trip-card .card-head{flex-direction:column;align-items:flex-start;gap:2px}
.result-group .trip-card .card-title{padding:0;font-size:18px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.result-group .trip-card .card-head .card-country{text-align:left;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.result-group .trip-card .card-more{display:flex;flex-direction:column;gap:6px;max-height:0;overflow:hidden;opacity:0}
.result-group .trip-card .card-stats{gap:2px 12px}
.result-group .trip-card .tags{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}
.result-group .trip-card .card-bottom{margin-top:2px;gap:2px}
.result-group .trip-card .card-open{white-space:nowrap;padding:0 10px}
.result-group .trip-card .photo-credits{z-index:3}
/* The live weather pill on each tile's photo, like What's hot now (user, 2026-10-27); the details repeat it, so it
   steps aside while they show. Elsewhere (the sunny List cards) the stat line carries it. */
.tile-wx{display:none}
.result-group .trip-card>.tile-wx{position:absolute;top:10px;right:10px;z-index:3;display:flex;pointer-events:none}
.result-group .trip-card>.tile-wx .card-weather{margin:0;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.result-group .trip-card.is-open>.tile-wx,.result-group .trip-card:focus-within>.tile-wx{display:none}
.result-group .trip-card.is-open::after,.result-group .trip-card:focus-within::after{background:rgba(32,47,73,.25)}
/* The open details start below the ⓘ photo-credits button (14 px + 32 px) and sit at the bottom through the first
   child's auto margin rather than flex-end, so a panel taller than the tile scrolls from its top instead of
   overflowing upward under the button (the AI explanation line, WF-095). */
.result-group .trip-card.is-open>.card-body,.result-group .trip-card:focus-within>.card-body{top:0;padding-top:52px;background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto}
.result-group .trip-card.is-open>.card-body>:first-child,.result-group .trip-card:focus-within>.card-body>:first-child{margin-top:auto}
.result-group .trip-card.is-open .card-title,.result-group .trip-card:focus-within .card-title{color:var(--ink);text-shadow:none}
.result-group .trip-card.is-open .card-head .card-country,.result-group .trip-card:focus-within .card-head .card-country{color:var(--muted);text-shadow:none}
.result-group .trip-card.is-open .card-more,.result-group .trip-card:focus-within .card-more{max-height:none;overflow:visible;opacity:1}
@media(hover:hover) and (pointer:fine){
 .result-group .trip-card:hover>.tile-wx{display:none}
 .result-group .trip-card:hover::after{background:rgba(32,47,73,.25)}
 .result-group .trip-card:hover>.card-body{top:0;padding-top:52px;background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto}
 .result-group .trip-card:hover>.card-body>:first-child{margin-top:auto}
 .result-group .trip-card:hover .card-title{color:var(--ink);text-shadow:none}
 .result-group .trip-card:hover .card-head .card-country{color:var(--muted);text-shadow:none}
 .result-group .trip-card:hover .card-more{max-height:none;overflow:visible;opacity:1}
}
/* The search box (user, 2026-10-27): about two thirds of the content width on wide screens, left-aligned with the
   headline. 804 px = three result tiles and their gaps (3 × 260 + 2 × 12), so its right edge lines up with the third
   tile below, and ~75 characters at 18 px keeps the line comfortable. Full width below 900 px. */
@media(min-width:900px){.search-row{max-width:calc(3 * 260px + 2 * 12px)}}

/* Phones narrower than 375 px: the arrow doodle beside "eyes." ran 6 px past the screen (horizontal scroll at 360 px, R6 QA). */
@media(max-width:374px){.doodle-arrow{display:none}}