/* World Beyond Home planner setup step: where (one or more cities), trip length and dates, and who is coming.
   Loaded last so it settles the older layered setup styles. Tokens: public/worldlings-tokens.css. */
body .setup{--su-ink:var(--wl-ink,#0e1a2b);--su-muted:var(--wl-muted,#625c53);--su-line:var(--wl-line,#ddd2c0);--su-paper:var(--wl-paper,#fffdf9);--su-bone:var(--wl-ivory,#f6f1e9);--su-gold:var(--wl-lantern,#c8a46a);--su-gold-ink:var(--wl-teal-ink,#7d5e2a);--su-gold-soft:var(--wl-lantern-soft,#f6eedd)}
body .setup .ft-setup-form{min-width:0}
body .setup .step h2{font-family:var(--wl-serif);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.1;letter-spacing:0;color:var(--su-ink);margin:0 0 12px}

/* Chosen city card */
body .setup #whereBox .picked{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--su-paper);border:1px solid var(--su-line);border-radius:14px;padding:14px 16px}
body .setup #whereBox .picked strong{font-family:var(--wl-serif)!important;font-weight:400!important;font-size:clamp(26px,2.6vw,32px);line-height:1.05;color:var(--su-ink)}
body .setup #whereBox .picked .hint{font:500 14px/1.4 var(--wl-sans);color:var(--su-muted);margin-top:2px}
body .setup #whereBox .picked .btn,body .setup .add-city select,body .setup .setup-when select,body .setup .setup-when input{min-height:44px}

/* Cities in this trip, with days per city */
body .setup .route-cities{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
body .setup .route-city{display:grid;grid-template-columns:32px minmax(0,1fr) auto 44px;align-items:center;gap:10px;padding:8px 8px 8px 12px;background:var(--su-paper);border:1px solid var(--su-line);border-radius:14px}
body .setup .route-city .num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--wl-dusk,#0e1a2b);color:var(--wl-on-dark,#fff8ea);font:700 14px/1 var(--wl-sans)}
body .setup .route-city-name{display:flex;flex-direction:column;min-width:0}
body .setup .route-city-name strong{font:600 17px/1.25 var(--wl-sans);color:var(--su-ink)}
body .setup .route-city-name small{font:500 13px/1.35 var(--wl-sans);color:var(--su-muted)}
body .setup .route-city .npc-step{display:inline-flex;align-items:center;border:1px solid var(--su-line);border-radius:999px;background:#fff}
body .setup .route-city .npc-step button{width:44px;height:44px;border:0;background:none;font:600 20px/1 var(--wl-sans);color:var(--su-ink);cursor:pointer;border-radius:999px}
body .setup .route-city .npc-step button:disabled{opacity:.35;cursor:default}
body .setup .route-city .npc-step output{min-width:5.6em;text-align:center;font:600 14px/1 var(--wl-sans);color:var(--su-ink)}
body .setup .route-city-remove{width:44px;height:44px;border:0;border-radius:999px;background:none;color:var(--su-muted);font:400 24px/1 var(--wl-sans);cursor:pointer}
body .setup .route-city-remove:hover{background:var(--su-bone);color:var(--su-ink)}
body .setup .route-cities-note{margin:8px 2px 0;font:400 13px/1.45 var(--wl-sans);color:var(--su-muted)}

/* Add another city */
body .setup .add-city{margin-top:12px;padding:14px 16px 16px;border:1px dashed var(--su-gold);border-radius:14px;background:var(--su-gold-soft)}
body .setup .add-city h3{margin:0;font-size:23px!important;line-height:1.15!important;color:var(--su-ink)}
body .setup .add-city-lede{margin:2px 0 10px;font:400 14px/1.4 var(--wl-sans);color:var(--su-muted)}
body .setup .add-city-ideas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
body .setup .add-city-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 8px;border:1px solid var(--su-line);border-radius:999px;background:#fff;color:var(--su-ink);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
body .setup .add-city-chip:hover{border-color:var(--su-gold);box-shadow:0 4px 14px #0e1a2b14}
body .setup .add-city-chip .plus{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--su-gold);color:var(--wl-dusk,#0e1a2b);font:600 20px/1 var(--wl-sans)}
body .setup .add-city-chip strong{display:block;font:600 15px/1.2 var(--wl-sans)}
body .setup .add-city-chip small{display:block;font:400 12px/1.3 var(--wl-sans);color:var(--su-muted)}
body .setup .add-city-any{display:flex;flex-direction:column;gap:6px;font:500 14px/1.3 var(--wl-sans);color:var(--su-ink)}
body .setup .add-city-any select{width:100%;max-width:360px}

/* Trip length and dates */
body .setup .setup-when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:14px}
body .setup .setup-when[hidden]{display:none}
body .setup .setup-when .field{display:flex;flex-direction:column;gap:6px;margin:0;font:600 14px/1.3 var(--wl-sans);color:var(--su-ink);text-align:left}
body .setup .setup-when .field[style*="display: none"]+.field{grid-column:1/-1}
body .setup .setup-when .opt{font-weight:400;color:var(--su-muted)}
body .setup .setup-when select,body .setup .setup-when input{width:100%;min-width:0;margin:0;font:500 16px/1.2 var(--wl-sans);border:1px solid var(--su-line);border-radius:12px;background:#fff;padding:10px 12px;color:var(--su-ink)}
body .setup .setup-trip-length{justify-content:flex-start;align-items:stretch}

/* Who's coming */
body .setup .setup-who-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:6px}
body .setup .setup-who-head h2{margin:0}
body .setup .party-summary{margin:0;font:600 14px/1.4 var(--wl-sans);color:var(--su-gold-ink)}
body .setup .party{background:none!important;border:0!important;padding:0!important}
body .setup .party-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--su-line)}
body .setup .party-row>span:first-child{display:flex;flex-direction:column}
body .setup .party-row strong{font:600 16px/1.3 var(--wl-sans);color:var(--su-ink)}
body .setup .party-note{font:400 13px/1.35 var(--wl-sans);color:var(--su-muted)}
body .setup .party-kids-row{border-bottom:0}
body .setup .stepper{border:1px solid var(--su-line);background:#fff}
body .setup .kids-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:0;margin:0 0 4px}
body .setup .kid-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px 0 4px;border:1px solid var(--su-line);border-radius:999px;background:#fff;cursor:pointer}
body .setup .kid-pill .tok{border:0;background:none;padding:0 4px 0 10px;font:600 15px/1 var(--wl-sans);color:var(--su-ink);min-height:0;box-shadow:none}
body .setup .kid-pill .x{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--su-bone);color:var(--su-muted);font:400 18px/1 var(--wl-sans)}
body .setup .kid-pill:hover .x{background:var(--su-ink);color:#fff}
body .setup .add-kid select{min-height:44px;padding:8px 36px 8px 14px;border:1px dashed var(--su-gold);border-radius:999px;background-color:var(--su-gold-soft);font:600 15px/1.2 var(--wl-sans);color:var(--su-ink);cursor:pointer;width:auto}

@media (max-width:560px){
 body .setup .setup-when{grid-template-columns:1fr}
 body .setup .route-city{grid-template-columns:28px minmax(0,1fr) 44px;grid-template-areas:"num name remove" "step step step";row-gap:6px}
 body .setup .route-city .num{grid-area:num;width:28px;height:28px}
 body .setup .route-city-name{grid-area:name}
 body .setup .route-city-remove{grid-area:remove}
 body .setup .route-city .npc-step{grid-area:step;justify-self:start}
 body .setup .add-city-chip{flex:1 1 calc(50% - 8px);min-width:0}
 body .setup .add-city-any select{max-width:none}
 body .setup #whereBox .picked strong{font-size:26px}
}

/* City picker (before a city is chosen): one search, then browse. */
body .setup #whereBox .search{position:relative}
body .setup #whereBox .search-icon{position:absolute;left:16px;top:18px;color:var(--su-muted);pointer-events:none;z-index:1;line-height:0}
body .setup #whereBox #cityIn{width:100%;min-height:56px;padding:14px 16px 14px 48px;border:1px solid var(--su-line-strong,#c9bba3);border-radius:16px;background:#fff;font:500 17px/1.3 var(--wl-sans);color:var(--su-ink);box-shadow:0 1px 2px #0e1a2b0d}
body .setup #whereBox #cityIn::placeholder{color:#8a8378}
body .setup #whereBox #cityIn:focus{outline:none;border-color:var(--su-gold);box-shadow:0 0 0 4px #c8a46a33}
body .setup #whereBox .where-hint{margin:8px 2px 0;font:400 13px/1.45 var(--wl-sans);color:var(--su-muted)}
body .setup #whereBox .where-label{margin:18px 0 8px;font:600 12px/1.2 var(--wl-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--su-gold-ink)}
body .setup #whereBox .where-browse .dest-tiles{margin-top:0}
body .setup #whereBox.is-searching .where-browse,body .setup #whereBox.is-searching .where-hint{display:none}
/* Autocomplete results */
body .setup #whereBox .results{list-style:none;margin:8px 0 0;padding:6px;border:1px solid var(--su-line);border-radius:16px;background:#fff;box-shadow:0 12px 32px #0e1a2b14}
body .setup #whereBox .results li{margin:0}
body .setup #whereBox .results [data-c]{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;padding:10px 14px;border:0;border-radius:12px;background:none;text-align:left;font:600 16px/1.25 var(--wl-sans);color:var(--su-ink);cursor:pointer}
body .setup #whereBox .results [data-c] small{font:400 13px/1.3 var(--wl-sans);color:var(--su-muted)}
body .setup #whereBox .results [data-c]:hover,body .setup #whereBox .results [data-c].hi{background:var(--su-gold-soft)}
/* Multi-city ideas */
body .setup #whereBox .route-ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body .setup #whereBox .route-idea{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;margin:0;padding:12px 14px;border:1px solid var(--su-line);border-radius:14px;background:#fff;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
body .setup #whereBox .route-idea:hover{border-color:var(--su-gold);box-shadow:0 6px 18px #0e1a2b12}
body .setup #whereBox .route-idea strong{font:600 15px/1.25 var(--wl-sans);color:var(--su-ink)}
body .setup #whereBox .route-idea small{font:400 12px/1.3 var(--wl-sans);color:var(--su-muted)}
/* A typed or chosen route */
body .setup #flexibleTripGuidance .route-summary{margin:10px 0 12px!important;font:600 17px/1.4 var(--wl-sans)!important;color:var(--su-ink)}
body .setup #flexibleTripGuidance .route-plan-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0 0 12px;border-radius:14px;font:600 16px/1.2 var(--wl-sans)}
body .setup #flexibleTripGuidance .route-edit{margin:10px 0 0;border-top:1px solid var(--su-line);padding-top:10px}
body .setup #flexibleTripGuidance .route-edit>summary,body .setup #flexibleTripGuidance details>summary{min-height:44px;display:flex;align-items:center;gap:6px;cursor:pointer;font:600 14px/1.3 var(--wl-sans);color:var(--su-gold-ink)}
body .setup #flexibleTripGuidance [data-route-row] .btn,body .setup #flexibleTripGuidance [data-route-row] input{min-height:44px;min-width:44px}
body .setup #flexibleTripGuidance [data-country-city],body .setup #flexibleTripGuidance button.btn-line{min-height:44px}
@media (max-width:700px){
 body .setup #whereBox .route-ideas{grid-template-columns:1fr 1fr}
}
body .setup #flexibleTripGuidance details>summary{list-style:none}
body .setup #flexibleTripGuidance details>summary::-webkit-details-marker{display:none}
body .setup #flexibleTripGuidance details>summary::before{content:"";flex:none;width:8px;height:8px;margin:0 4px 0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
body .setup #flexibleTripGuidance details[open]>summary::before{transform:rotate(45deg)}
body .setup #flexibleTripGuidance .country-routes{display:grid;gap:8px;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--su-line)}
body .setup #flexibleTripGuidance .country-routes>strong{font:600 15px/1.3 var(--wl-sans);color:var(--su-ink)}
body .setup #flexibleTripGuidance .country-route{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:60px;padding:12px 16px;border:1px solid var(--su-gold);border-radius:14px;background:#fff;text-align:left;cursor:pointer}
body .setup #flexibleTripGuidance .country-route:hover{box-shadow:0 6px 18px #0e1a2b14}
body .setup #flexibleTripGuidance .country-route-title{font:600 16px/1.25 var(--wl-sans);color:var(--su-ink)}
body .setup #flexibleTripGuidance .country-route small{font:400 13px/1.35 var(--wl-sans);color:var(--su-muted)}

/* Round 3: calmer, clearer setup */
/* The page title scrolls away instead of floating over the form. */
body.ft-cinema-refined .setup .ft-setup-intro{position:static!important;top:auto!important}
/* Numbered steps: 1 Where, 2 Who. */
body .setup .ft-setup-form{counter-reset:su-step}
body .setup .ft-setup-form>.step>h2,body .setup .ft-setup-form>.step>.setup-who-head>h2{display:flex;align-items:center;gap:10px}
body .setup .ft-setup-form>.step>h2::before,body .setup .ft-setup-form>.step>.setup-who-head>h2::before{counter-increment:su-step;content:counter(su-step);flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--wl-dusk,#0e1a2b);color:var(--wl-on-dark,#fff8ea);font:600 14px/1 var(--wl-sans)!important}
/* One clear action: no grey panel, and an inactive button that reads as "not yet", not as broken. */
body .setup .ft-setup-form .go{background:none!important;border:0!important;box-shadow:none!important;padding:8px 0 0!important;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
body .setup .ft-setup-form .go #go{width:100%;min-height:56px;border-radius:14px;font:600 17px/1.2 var(--wl-sans)}
body .setup .ft-setup-form .go #go:disabled{background:var(--su-bone)!important;color:#8a8378!important;border:1px dashed var(--su-line-strong,#c9bba3)!important;box-shadow:none!important;opacity:1;cursor:default}
body .setup .ft-setup-form .go .hint{margin:0;font:400 13px/1.4 var(--wl-sans);color:var(--su-muted)}
body .setup .ft-setup-form .go .sample-link{display:inline-flex;align-items:center;min-height:44px;font:600 14px/1.2 var(--wl-sans)}
/* Optional details: a plain disclosure, no empty box. */
body .setup .setup-options{margin-top:12px;padding:0!important;background:none!important;border:0!important;border-top:1px solid var(--su-line)!important;border-radius:0!important;box-shadow:none!important}
body .setup .setup-options>summary{min-height:52px;display:flex;align-items:center;gap:8px;padding:0 2px;font:600 15px/1.3 var(--wl-sans);color:var(--su-ink);cursor:pointer;list-style:none}
body .setup .setup-options>summary::-webkit-details-marker{display:none}
body .setup .setup-options>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--su-gold-ink);border-bottom:2px solid var(--su-gold-ink);transform:rotate(45deg);transition:transform .15s}
body .setup .setup-options[open]>summary::after{transform:rotate(-135deg)}
body .setup .setup-options-body{padding:0 0 8px}
body .setup .setup-options-body>.note{margin:0 0 12px;font:400 14px/1.45 var(--wl-sans);color:var(--su-muted)}
body .setup .setup-options .step{padding:16px 0!important;margin:0!important;border:0!important;border-top:1px solid var(--su-line)!important;background:none!important;box-shadow:none!important}
/* Interests as compact chips that wrap, two to a row on phones. */
body .setup .love-chips{display:flex;flex-wrap:wrap;gap:8px}
body .setup .love-chip{min-height:44px;padding:8px 14px;font:500 14px/1.2 var(--wl-sans)}
body .setup .love-chip[aria-pressed="true"]{background:var(--wl-dusk,#0e1a2b);border-color:var(--wl-dusk,#0e1a2b);color:var(--wl-on-dark,#fff8ea)}
/* Add another city: lighter. */
body .setup .add-city{border-style:solid;border-color:var(--su-line);background:var(--su-paper)}
body .setup .add-city h3{font-size:20px!important}
body .setup .add-city-chip small{white-space:nowrap}
@media (max-width:700px){
 body .setup .love-chips{display:grid;grid-template-columns:1fr 1fr}
 body .setup .love-chip{justify-content:flex-start;width:100%;padding:8px 10px;font-size:13.5px}
 /* On phones the photo sat under the whole form as dead scroll. */
 body .setup .ft-setup-grid>.ft-dream-frame{display:none}
 body .setup .add-city-ideas{display:grid;grid-template-columns:1fr 1fr}
 body .setup .add-city-chip{width:100%;padding-right:10px}
}
body .setup .love-chip{min-width:0;max-width:100%;white-space:normal;text-align:left;box-sizing:border-box}
body .setup .love-chips{min-width:0;max-width:100%}
body .setup .setup-options details:not(.setup-options){margin:4px 0 0;padding:0!important;border:0!important;border-top:1px solid var(--su-line)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
body .setup .setup-options details:not(.setup-options)>summary{min-height:52px;display:flex;align-items:center;gap:8px;font:600 15px/1.3 var(--wl-sans);color:var(--su-ink);cursor:pointer}
body .setup .setup-options details:not(.setup-options){border-top:0!important}
body .setup .setup-options details:not(.setup-options)>summary{list-style:none}
body .setup .setup-options details:not(.setup-options)>summary::-webkit-details-marker{display:none}
body .setup .setup-options details:not(.setup-options)>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--su-gold-ink);border-bottom:2px solid var(--su-gold-ink);transform:rotate(45deg)}
body .setup .setup-options details:not(.setup-options)[open]>summary::after{transform:rotate(-135deg)}
body .setup .setup-options label:has(>input[type="checkbox"]),body .setup .setup-options label:has(>input[type="radio"]){display:flex;align-items:center;gap:10px;min-height:44px}
body .setup .setup-options input[type="checkbox"],body .setup .setup-options input[type="radio"]{width:22px;height:22px;flex:none}
body .setup .setup-options select{min-height:44px}

/* Plan header on phones: the trip name, actions and "Saved on this device" wrap instead of running off-screen. */
@media (max-width:560px){
 body .top-in #tripSum{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important;row-gap:6px!important}
 body .top-in #tripSum>#tWhere{flex:1 1 100%!important;max-width:100%!important;justify-content:flex-start;text-align:left}
 body .top-in #tripSum>span:last-child{white-space:normal;line-height:1.2}
}