/* Trip cards, 5 Oct 2026 owner review: one colour per card (the trip's tint
   fills the card; inner boxes are outlined, not filled), short facts, flight
   times per flight, and a hover "×" to remove a stop from the search. */
#proposals .prop{background:var(--trip-tint)}
#proposals .prop>*:not(.trip-boundary),
#proposals .prop :is(.prop-head,.trip-disclosure>summary,.trip-end,.prop-body,.collage,.credits,.trip-variants,.connection-inset,.airport-token,.trip-booking-action .cost,.stopcard,.top-attractions,.nearby-places,.price-notes,.flight-table-scroll){background:transparent!important;background-image:none!important}
#proposals .prop :is(.airport-token,.trip-variants,.trip-booking-action .cost,.stopcard,.connection-inset,.top-attractions,.nearby-places){border-color:color-mix(in srgb,var(--trip-edge) 32%,transparent)!important;box-shadow:none!important}
#proposals .prop .connection-inset{border-style:dashed;border-inline-start-style:solid}
#proposals .prop .self-transfer{background:transparent;border:1px solid currentColor}
:root[data-theme="dark"] #proposals .prop{--trip-tint:color-mix(in srgb,var(--trip-band) 24%,var(--card))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #proposals .prop{--trip-tint:color-mix(in srgb,var(--trip-band) 24%,var(--card))}}

/* Short facts under the route. */
#proposals .prop-head .trip-facts{font-family:var(--sans);font-size:14px;color:var(--ink);line-height:1.5}
.est-chip{display:inline-block;padding:0 8px;border:1px dashed currentColor;border-radius:999px;font-size:12px;color:var(--muted)}
#proposals .price-notes{grid-column:1/-1;font-size:12px;color:var(--muted)}
#proposals .price-notes>summary{cursor:pointer;font-family:var(--sans);font-size:13px;color:var(--ink-2,var(--muted));width:max-content}
#proposals .price-notes>:not(summary){display:block;margin-top:6px}

/* Flight times: per flight, layover and connection total. */
.flight-inline{display:block;margin-top:9px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--trip-edge,#075b63) 30%,transparent)}
.flight-seg{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:12.5px;line-height:1.45;color:var(--ink)}
.flight-seg-route{font-family:var(--mono);font-weight:600}
.flight-seg-time{font-variant-numeric:tabular-nums;font-weight:600}
.flight-seg-dur{color:var(--muted)}
.flight-seg-no{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.connection-inset .flight-seg+.connection-wait{padding-inline-start:12px;border-inline-start:2px dotted color-mix(in srgb,var(--trip-edge,#075b63) 40%,transparent);font-size:12px;color:var(--muted)}
.connection-total{font-weight:700;font-size:12.5px;color:var(--ink)}

/* "×" on a holiday stop: remove it from this search. */
#proposals .removable-stop{position:relative}
.stop-remove{position:absolute;top:-9px;inset-inline-end:-9px;z-index:3;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease,transform .15s ease}
.removable-stop:hover .stop-remove,.stop-remove:focus-visible{opacity:1}
.stop-remove:hover{transform:scale(1.08);border-color:var(--ink)}
@media (hover:none){.stop-remove{opacity:.85}}
.stop-remove::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);inset-inline-end:0;width:max-content;max-width:240px;padding:6px 9px;border-radius:8px;background:var(--ink);color:var(--card);font-size:12px;line-height:1.35;text-align:start;white-space:normal;opacity:0;pointer-events:none;transition:opacity .12s ease}
.stop-remove:hover::after,.stop-remove:focus-visible::after{opacity:1}
.search-excluded{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0;font-size:13px}
.excluded-chip{padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:13px;cursor:pointer}
.excluded-chip:hover{border-color:var(--ink)}

/* Slider preview while dragging (slider-preview.js). */
.slider-preview{position:absolute;z-index:20;bottom:calc(100% + 10px);left:clamp(0px,calc(var(--thumb,50%) - 170px),calc(100% - 340px));width:min(340px,100%);display:flex;flex-direction:column;gap:7px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:var(--sh-3,0 10px 30px rgba(0,0,0,.18));font-size:13px;pointer-events:none}
.slider-preview[hidden]{display:none}
.slider-preview strong{font-size:13px}
.sp-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.sp-k{width:62px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sp-chip{display:inline-flex;gap:3px;align-items:center;padding:2px 9px;border-radius:999px;font-size:12.5px;line-height:1.5}
.sp-chip small{color:var(--muted);font-size:11px}
.sp-add{background:color-mix(in srgb,#1f9d55 14%,transparent);border:1px solid color-mix(in srgb,#1f9d55 45%,transparent)}
.sp-remove{background:color-mix(in srgb,#c2410c 12%,transparent);border:1px solid color-mix(in srgb,#c2410c 40%,transparent);text-decoration:line-through;text-decoration-color:color-mix(in srgb,#c2410c 55%,transparent)}
.sp-none,.sp-total,.sp-more{color:var(--muted);font-size:12px}
.balance-control{position:relative}

/* The coloured border already ends each trip. */
#proposals .trip-end{display:none}

/* A stop that also shows its incoming connection gets room for the flight lines. */
#proposals .path .route-step:has(.connection-inset){flex-basis:270px}
#proposals .connection-inset .flight-seg{flex-wrap:wrap}

/* Resizable stops (stay-resize.js): width follows nights; drag the edge grip. */
#proposals .path .route-step{transition:flex .18s ease}
#proposals .path .stay-step .airport-token{max-width:none}
#proposals .resizable-stop{position:relative}
.stay-handle{position:absolute;top:22%;bottom:22%;inset-inline-end:-6px;z-index:2;width:12px;border-radius:6px;cursor:ew-resize;touch-action:none;
  background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--trip-edge,#075b63) 70%,transparent) 0 2px,transparent 2px 5px);
  background-size:4px 100%;background-repeat:no-repeat;background-position:center;opacity:.45;transition:opacity .15s ease,background-color .15s ease}
.resizable-stop:hover .stay-handle,.stay-handle:focus-visible{opacity:1;background-color:color-mix(in srgb,var(--trip-edge,#075b63) 14%,transparent)}
.stay-handle:focus-visible{outline:3px solid #d89916;outline-offset:2px}
.stay-handle::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);inset-inline-end:-6px;width:max-content;max-width:230px;padding:6px 9px;border-radius:8px;background:var(--ink);color:var(--card);font-size:12px;line-height:1.35;opacity:0;pointer-events:none;transition:opacity .12s ease}
.stay-handle:hover::after,.stay-handle:focus-visible::after{opacity:1}
.stay-bubble{position:absolute;top:-14px;inset-inline-end:8px;z-index:4;padding:4px 10px;border-radius:999px;background:var(--trip-band,#075b63);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.stay-bubble[hidden]{display:none}
@media (hover:none){.stay-handle{opacity:.8;width:16px;inset-inline-end:-8px}}

/* Right-click menu on a stop (stop-exclude.js). */
.stop-menu{position:absolute;z-index:60;display:flex;flex-direction:column;min-width:260px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.stop-menu button{padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14px;text-align:start;cursor:pointer}
.stop-menu button:hover,.stop-menu button:focus-visible{background:color-mix(in srgb,var(--brand,#075b63) 12%,transparent);outline:none}
.main-chip{font-weight:700}

/* Owner review 5 Oct 2026 (2): price + Book now below the drawing, equal-height
   stop boxes, a soft gradient per trip, and trip 1 no longer in the app teal. */
#proposals .prop:nth-child(3n+1){--trip-band:#9a3f1f;--trip-edge:#9a3f1f;--trip-tint:#fcefe7}
#proposals .prop{background:linear-gradient(155deg,var(--trip-tint) 0%,color-mix(in srgb,var(--trip-tint) 45%,var(--card)) 48%,color-mix(in srgb,var(--trip-band) 9%,var(--trip-tint)) 100%)}
#proposals .prop .trip-boundary{background:linear-gradient(120deg,var(--trip-band) 0%,color-mix(in srgb,var(--trip-band) 72%,#000) 100%)}
#proposals .prop-head{grid-template-columns:minmax(0,1fr)!important}
#proposals .prop-head>*{grid-column:1/-1!important;grid-row:auto!important}
#proposals .prop-head .path{order:1}
#proposals .prop-head .trip-booking-action{order:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:6px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--trip-edge) 25%,transparent)}
#proposals .prop-head .trip-booking-action .cost{flex:1 1 220px;text-align:start!important;border:0!important;padding:0!important}
#proposals .prop-head .trip-booking-action .btn{width:auto;min-width:200px;flex:0 0 auto}
#proposals .prop-head .trip-facts{order:3}
#proposals .prop-head .price-notes{order:4}
@media(max-width:620px){#proposals .prop-head .trip-booking-action .btn{width:100%}}
/* Same height for every box in a row; arrows stay centred. */
#proposals .path .route-stops{align-items:stretch}
#proposals .path .route-step{align-items:stretch}
#proposals .path .route-step>.route-arrow{align-self:center}
#proposals .path .route-step>.airport-token{height:100%;box-sizing:border-box}

/* Photo credits: required by the licences, but as unobtrusive as possible. */
#proposals .photo-credit,.photo-credit{margin:0!important;padding:0!important;line-height:1;font-size:9px}
#proposals .photo-credit>summary,.photo-credit>summary{display:inline-block;list-style:none;padding:0 3px;font-size:9px;line-height:1.2;color:var(--muted);opacity:.28;cursor:pointer;transition:opacity .15s ease}
.photo-credit>summary::-webkit-details-marker{display:none}
.photo-credit>summary::marker{content:''}
.photo-credit>summary:hover,.photo-credit>summary:focus-visible,.photo-credit[open]>summary{opacity:.75}
.photo-credit a{font-size:10.5px}

/* Destination banner behind each stop's heading (stop-banners.js). */
#proposals .prop .airport-token.has-banner{position:relative;overflow:hidden}
.stop-banner{position:absolute;inset:0 0 auto 0;height:var(--banner-h,110px);z-index:0;background-size:cover;background-position:center 45%;background-repeat:no-repeat;pointer-events:none}
.airport-token.has-banner>:not(.stop-banner){position:relative;z-index:1}
.airport-token.has-banner>:is(.airport-role,strong,.airport-meta,.airport-stay){color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.airport-token.has-banner>.airport-meta *{color:#fff!important}
.airport-token.has-banner>.airport-stay{border-color:rgba(255,255,255,.35)!important}
.stop-banner-credit{position:absolute!important;top:calc(var(--banner-h,110px) - 17px);inset-inline-end:6px;z-index:2;font-size:9px;line-height:1;color:#fff!important;opacity:.35;text-decoration:none}
.stop-banner-credit:hover,.stop-banner-credit:focus-visible{opacity:.9}