/* pp-wow.css — the Wow Update component system.
   Nightliner geometry, both themes via var(--pb-*), motion inside the frame.
   Literal values permitted here: accent fill #2DD4BF, on-accent #0E1420,
   on-photo inks, photo scrims. Everything else is a token. */

/* ─────────────────────────── base ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* The UA rule for [hidden] is only `display:none` at author-origin specificity,
   so ANY class that sets display beats it — which is how the map's globe stayed
   painted on top of the flat map after you switched back, and how destinations
   kept showing its continent link on "All". `hidden` is a promise the element is
   gone; make it one that a class can't quietly break. */
[hidden]{display:none !important}
body{
  margin:0;background:var(--pb-bg);color:var(--pb-text);
  font-family:var(--pb-font);font-size:var(--pb-fs-body);line-height:var(--pb-lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--pb-accent-ink);text-decoration:none;transition:opacity var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease)}
a:hover{opacity:.85}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(45,212,191,.3)}
:focus-visible{outline:2px solid var(--pb-accent);outline-offset:2px;border-radius:4px}
.pp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─────────────────────────── layout ─────────────────────────── */
.pp-page{display:flex;flex-direction:column;min-height:100vh}
.pp-main{flex:1 0 auto;min-width:0}
.pp-col{max-width:var(--pp-col);margin:0 auto;padding-left:var(--pp-gutter);padding-right:var(--pp-gutter);width:100%}
.pp-sec{padding-top:var(--pp-section);padding-bottom:var(--pp-section)}
.pp-sec-tight{padding-top:32px;padding-bottom:32px}
.pp-hr{height:1px;background:var(--pb-border);border:0;margin:0;transform-origin:left center}
.pp-grid{display:grid;gap:18px}
.pp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pp-row{display:flex;align-items:center;gap:12px}
.pp-row-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pp-stack{display:flex;flex-direction:column;gap:12px}
.pp-spacer{flex:1 1 0;min-width:8px}

/* ─────────────────────────── type ─────────────────────────── */
.pp-kicker{font-size:var(--pb-fs-kicker);font-weight:600;letter-spacing:var(--pb-ls-kicker);text-transform:uppercase;color:var(--pb-muted);display:block}
.pp-h1{font-size:var(--pb-fs-h1);font-weight:700;letter-spacing:var(--pb-ls-tighter);line-height:var(--pb-lh-heading);margin:0}
.pp-h2{font-size:var(--pb-fs-h2);font-weight:700;letter-spacing:var(--pb-ls-tighter);line-height:1.14;margin:0}
.pp-h3{font-size:var(--pb-fs-h3);font-weight:700;letter-spacing:var(--pb-ls-tight);line-height:1.2;margin:0}
.pp-lead{font-size:var(--pb-fs-lead);color:var(--pb-text-2);line-height:1.62;margin:0}
.pp-body{font-size:var(--pb-fs-body);color:var(--pb-text-2);margin:0}
.pp-meta{font-size:var(--pb-fs-meta);color:var(--pb-muted);margin:0}
.pp-cap{font-size:var(--pb-fs-caption);color:var(--pb-faint);margin:0}
.pp-num{font-size:var(--pb-fs-stat);font-weight:700;letter-spacing:var(--pb-ls-tighter);line-height:1;font-variant-numeric:tabular-nums}
.pp-num-xl{font-size:var(--pb-fs-stat-xl);font-weight:700;letter-spacing:var(--pb-ls-tighter);line-height:1;font-variant-numeric:tabular-nums}
.pp-num-hero{font-size:var(--pb-fs-stat-hero);font-weight:700;letter-spacing:var(--pb-ls-tighter);line-height:1;font-variant-numeric:tabular-nums}
.pp-accent{color:var(--pb-accent-ink)}
.pp-muted{color:var(--pb-muted)}
.pp-faint{color:var(--pb-faint)}
.pp-clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-clamp3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ─────────────────────────── surfaces ─────────────────────────── */
.pp-card{
  background:var(--pb-surface);border:1px solid var(--pb-border);border-radius:var(--pb-r-card-lg);
  box-shadow:var(--pp-card-glow);position:relative;overflow:hidden;
  transition:border-color var(--pp-t-ui) var(--pp-ease),box-shadow var(--pp-t-ui) var(--pp-ease);
}
.pp-card-pad{padding:var(--pb-pad-card)}
.pp-card:hover{box-shadow:var(--pp-card-glow-hover)}
.pp-inset{background:var(--pb-inset);border:1px solid var(--pb-border);border-radius:var(--pb-r-nested)}
.pp-glass{
  background:var(--pp-glass);border:1px solid var(--pp-glass-border);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
  border-radius:var(--pb-r-card-lg);
}
.pp-hero-wash{background:radial-gradient(120% 90% at 50% 0%, var(--pb-hero-wash) 0%, var(--pb-bg) 62%)}

/* ─────────────────────────── buttons ─────────────────────────── */
.pp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 22px;border-radius:var(--pb-r-pill);
  font-size:var(--pb-fs-body);font-weight:600;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:opacity var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease),border-color var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease);
}
.pp-btn-sm{height:34px;padding:0 15px;font-size:var(--pb-fs-body-s)}
.pp-btn-lg{height:48px;padding:0 28px;font-size:var(--pb-fs-row)}
.pp-btn-primary{background:#2DD4BF;color:#0E1420}
.pp-btn-primary:hover{opacity:.92;color:#0E1420}
.pp-btn-secondary{border-color:var(--pb-border-strong);color:var(--pb-text);background:transparent}
.pp-btn-secondary:hover{border-color:var(--pb-accent-border);color:var(--pb-text);background:var(--pb-accent-tint)}
.pp-btn-ghost{color:var(--pb-text-2)}
.pp-btn-ghost:hover{color:var(--pb-text);background:var(--pb-accent-tint)}
.pp-btn[disabled],.pp-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.pp-btn-block{width:100%}

/* text CTA (tertiary) */
.pp-link{color:var(--pb-accent-ink);font-weight:600;font-size:var(--pb-fs-body-s);display:inline-flex;align-items:center;gap:5px}
.pp-link:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.pp-link-quiet{color:var(--pb-muted);font-size:var(--pb-fs-meta);display:inline-flex;align-items:center;gap:5px}
.pp-link-quiet:hover{color:var(--pb-accent-ink);opacity:1}

/* ─────────────────────────── chips ─────────────────────────── */
.pp-chip{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  border-radius:var(--pb-r-pill);border:1px solid var(--pb-border-strong);
  background:transparent;color:var(--pb-text-2);font-size:var(--pb-fs-meta);font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:background var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease),border-color var(--pp-t-ui) var(--pp-ease);
}
.pp-chip:hover{border-color:var(--pb-accent-border);color:var(--pb-text)}
.pp-chip[aria-pressed="true"],.pp-chip.is-on{background:#2DD4BF;color:#0E1420;border-color:#2DD4BF;font-weight:700}
.pp-chip[aria-pressed="true"]:hover,.pp-chip.is-on:hover{color:#0E1420}
.pp-chip-tick{animation:ppTick 120ms var(--pp-spring)}
.pp-chip-sm{height:26px;padding:0 10px;font-size:var(--pb-fs-caption)}
.pp-chip-static{cursor:default}
.pp-chip-static:hover{border-color:var(--pb-border-strong);color:var(--pb-text-2)}
.pp-tag{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--pb-r-chip);
  font-size:var(--pb-fs-caption);font-weight:600;
  background:var(--pb-accent-tint);color:var(--pb-accent-ink);border:1px solid var(--pb-accent-border);
}
.pp-tag-neutral{background:var(--pb-inset);color:var(--pb-muted);border-color:var(--pb-border)}
.pp-sample{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--pb-r-pill);
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--pb-inset);color:var(--pb-muted);border:1px solid var(--pb-border-strong);
}
.pp-sample-onphoto{background:rgba(8,12,20,.66);color:#C7D2E2;border-color:rgba(242,246,251,.25)}
/* rarity — ink tokens for TEXT, literal fills allowed for dots */
.pp-rar{font-size:var(--pb-fs-caption);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pp-rar-common{color:var(--pb-muted)}
.pp-rar-uncommon{color:var(--pb-accent-ink)}
.pp-rar-rare{color:var(--pb-rare-ink)}
.pp-rar-legendary{color:var(--pb-legend-ink)}

/* ─────────────────────────── nav ─────────────────────────── */
.pp-nav{
  position:sticky;top:0;z-index:60;height:var(--pp-nav-h);
  display:flex;align-items:center;gap:14px;
  padding:0 var(--pp-gutter);
  background:transparent;border-bottom:1px solid transparent;
  transition:height var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease),border-color var(--pp-t-ui) var(--pp-ease),backdrop-filter var(--pp-t-ui) var(--pp-ease);
}
.pp-nav.is-solid{
  height:var(--pp-nav-h-solid);background:var(--pp-glass-strong);border-bottom-color:var(--pb-border);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
}
.pp-nav--opaque{background:var(--pb-bg);border-bottom-color:var(--pb-border)}
.pp-nav-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#2DD4BF;opacity:.85;transition:width 80ms linear}
.pp-nav-items{display:flex;align-items:center;gap:4px;position:relative}
.pp-nav-item{
  display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:var(--pb-r-nav);
  font-size:var(--pb-fs-body);font-weight:500;color:var(--pb-text-2);white-space:nowrap;
  transition:color var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease);
}
.pp-nav-item:hover{color:var(--pb-text);background:var(--pb-accent-tint);opacity:1}
.pp-nav-item.is-active{color:var(--pb-text);background:var(--pb-accent-tint-strong);font-weight:600}
.pp-nav-item--warm{color:var(--pb-accent-ink)}
.pp-nav-underline{position:absolute;bottom:-9px;height:2px;background:#2DD4BF;border-radius:2px;transition:transform 180ms var(--pp-ease),width 180ms var(--pp-ease);pointer-events:none;opacity:0}
.pp-nav-underline.is-on{opacity:1}
.pp-searchpill{
  display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 8px 0 13px;
  border-radius:var(--pb-r-pill);border:1px solid var(--pb-border-strong);background:var(--pb-inset);
  color:var(--pb-muted);font-size:var(--pb-fs-meta);cursor:pointer;max-width:300px;flex:0 1 300px;min-width:34px;
  transition:border-color var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease)
}
.pp-sp-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pp-searchpill:hover{border-color:var(--pb-accent-border);color:var(--pb-text-2)}
.pp-kbd{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 5px;
  border-radius:6px;border:1px solid var(--pb-border-strong);background:var(--pb-surface);
  font-size:10.5px;font-weight:600;color:var(--pb-faint);font-variant-numeric:tabular-nums;
}
.pp-theme-toggle{
  width:34px;height:34px;border-radius:var(--pb-r-pill);border:1px solid var(--pb-border-strong);
  display:inline-flex;align-items:center;justify-content:center;color:var(--pb-text-2);flex:none;
  transition:border-color var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease)
}
.pp-theme-toggle:hover{border-color:var(--pb-accent-border);color:var(--pb-accent-ink)}
.pp-theme-toggle svg{transition:transform 300ms var(--pp-ease)}
.pp-theme-toggle:active svg{transform:rotate(180deg)}
.pp-logo{display:inline-flex;align-items:center;gap:9px;color:var(--pb-text);flex:none}
.pp-logo:hover{opacity:1}
.pp-logo-mark{display:block}
.pp-logo-word{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pp-nav .pp-btn{flex:none}
.pp-cta-tight{display:none}
.pp-navburger{display:none;width:34px;height:34px;border-radius:var(--pb-r-nav);border:1px solid var(--pb-border-strong);align-items:center;justify-content:center;color:var(--pb-text-2)}
/* Open, the burger is also the way back out: the three bars fold into an X and
   the button takes the accent, so the sheet never has to be dismissed by
   guessing. The global reduced-motion rule turns the fold into a straight swap. */
.pp-navburger.is-open{border-color:var(--pb-accent-border);background:var(--pb-accent-tint);color:var(--pb-accent-ink)}
.pp-burger-ln{transform-box:view-box;transform-origin:10px 10px;transition:transform 220ms var(--pp-ease),opacity 120ms var(--pp-ease)}
.pp-navburger.is-open .pp-burger-ln--top{transform:rotate(45deg) translateY(4px)}
.pp-navburger.is-open .pp-burger-ln--mid{opacity:0}
.pp-navburger.is-open .pp-burger-ln--bot{transform:rotate(-45deg) translateY(-4px)}

/* searchpill is centered between logo and menu — it sheds width first */
@media (max-width:1280px){
  .pp-nav .pp-searchpill{max-width:200px}
  .pp-nav .pp-searchpill .pp-kbd{display:none}
}
@media (max-width:1120px){
  .pp-nav .pp-searchpill .pp-sp-text{display:none}
  .pp-nav .pp-searchpill{max-width:none;width:34px;padding:0;justify-content:center}
}
/* The quiet Sign in link is the second door; between 900 and 1120px there is no
   room for both it and the CTA, and the CTA is the one people came for. The
   burger sheet still carries Sign in at every width. */
@media (max-width:1120px){.pp-nav-signin{display:none}}

/* shared map chrome — the floating country card + glass tool buttons.
   The card is the "Postcard" layout: photo, name, the two toggles, the summary,
   the facts line, the guide on its own line, then the quiet commerce row. */
.pp-mapcard{position:absolute;z-index:8;width:348px;padding:0;
  /* auto, not hidden: on a short window the card is taller than the space above
     the fold, and a clipped card hides its own Learn more button */
  overflow:auto;max-height:calc(100dvh - var(--pp-nav-h) - 28px);
  background:var(--pb-surface);box-shadow:var(--pp-card-glow)}
.pp-mapcard .pp-photo{aspect-ratio:16/9}
.pp-mapcard-x{position:absolute;right:10px;top:10px;z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(14,20,32,.55);color:#F2F6FB;display:flex;align-items:center;justify-content:center;font-size:14px}
.pp-mapcard-x:hover{background:rgba(14,20,32,.75)}
.pp-mapcard-rar{position:absolute;left:12px;top:12px;z-index:2;letter-spacing:.14em}
.pp-mapcard-body{padding:14px 16px 16px}
.pp-mapcard-head{display:flex;align-items:center;gap:9px}
.pp-mapcard-head .pp-flag{font-size:19px}
.pp-mapcard-name{font-size:22px;font-weight:700;letter-spacing:var(--pb-ls-tighter);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-mapcard-head .pp-cap{margin-left:auto;flex:none}
.pp-mapcard-acts{display:flex;gap:8px;margin-top:10px}
.pp-mapcard-acts .pp-chip{height:36px;flex:1;justify-content:center}
.pp-mapcard-blurb{font-size:13.5px;line-height:1.6;margin-top:12px}
.pp-mapcard-facts{margin-top:10px}
.pp-mapcard-facts[hidden]{display:none}
.pp-mapcard-more{height:40px;width:100%;margin-top:14px;font-size:13.5px}
.pp-mapcard-row{margin-top:12px;padding-top:10px;border-top:1px solid var(--pb-border);gap:8px}
/* the sheet: below 640px a 348px card would cover the map it came from */
.pp-mapcard--sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:60;
  border-radius:var(--pb-r-sheet) var(--pb-r-sheet) 0 0;border-bottom:0;
  max-height:88dvh;overflow:auto;box-shadow:0 -18px 60px rgba(14,20,32,.28)}
.pp-mapcard--sheet .pp-mapcard-body{padding:16px 18px calc(22px + env(safe-area-inset-bottom))}
.pp-mapcard--sheet .pp-mapcard-name{font-size:24px}
.pp-mapcard--sheet .pp-mapcard-acts .pp-chip{height:46px;font-size:14px}
.pp-mapcard--sheet .pp-mapcard-more{height:48px;font-size:14.5px}
.pp-mapcard--sheet .pp-mapcard-rar{top:18px;left:14px}
.pp-mapcard--sheet .pp-mapcard-x{top:16px}
.pp-mapcard-grip{position:absolute;left:50%;top:9px;transform:translateX(-50%);z-index:3;
  width:38px;height:4px;border-radius:999px;background:rgba(242,246,251,.55)}
.pp-maptool{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--pb-text-2)}
.pp-maptool:hover{color:var(--pb-accent-ink)}
.pp-maptool.is-on{background:var(--pb-accent-tint-strong);color:var(--pb-accent-ink)}
@media (max-width:860px){
  /* logo+tagline on one line, the form beneath — rather than three things fighting */
  .pp-footer-brandrow .pp-spacer{display:none}
  .pp-footer-brandrow{gap:12px}
  .pp-signup{max-width:none;width:100%}
  .pp-postcard{width:100%}
  .pp-postcard-form{flex:1;min-width:0}
  .pp-postcard-form .pp-input{width:auto;flex:1;min-width:0}
}
@media (max-width:560px){
  /* the sentence and the field stop competing for one line — the field is the
     point, so it gets the full width and the sentence sits above it */
  .pp-postcard{flex-direction:column;align-items:stretch;gap:9px}
  .pp-postcard-say{white-space:normal}
  .pp-postcard-form{width:100%}
}
@media (max-width:900px){.pp-mapcard:not(.pp-mapcard--sheet){width:min(348px,calc(100vw - 24px))}}

/* intel choropleth lenses — authored per theme, not derived: a mid-tone light land
   sits inside the accent's own luminance range and collapses any color-mix ramp */
.pp-mp-lens-a{fill:var(--pb-accent)}
.pp-mp-lens-b{fill:var(--pb-lens-b)}
.pp-mp-lens-c{fill:var(--pb-lens-c)}
.pp-mp-lens-d{fill:var(--pb-lens-d)}
.pp-mp-lens-none{fill:var(--pb-map-base)}
/* The legend and the map frame used to live in essentials.html's inline <style>.
   Six pages draw this choropleth now, so they live here.
   Note the two selectors below: `fill` paints the SVG country, `background` paints
   the legend swatch and the table dot — the same class has to do both. */
.es-mapwrap{position:relative;border-radius:var(--pb-r-card-lg);overflow:hidden;background:var(--pb-map-ocean);border:1px solid var(--pb-border)}
.es-mapwrap svg{display:block;width:100%}
.es-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:var(--pb-fs-caption);color:var(--pb-muted)}
.es-legend span{display:inline-flex;align-items:center;gap:7px}
.es-legend i{width:11px;height:11px;border-radius:3px;flex:none}
.es-legend i.pp-mp-lens-a,.pp-ct-dot.pp-mp-lens-a{background:var(--pb-accent)}
.es-legend i.pp-mp-lens-b,.pp-ct-dot.pp-mp-lens-b{background:var(--pb-lens-b)}
.es-legend i.pp-mp-lens-c,.pp-ct-dot.pp-mp-lens-c{background:var(--pb-lens-c)}
.es-legend i.pp-mp-lens-d,.pp-ct-dot.pp-mp-lens-d{background:var(--pb-lens-d)}
.es-legend i.pp-mp-lens-none,.pp-ct-dot.pp-mp-lens-none{background:var(--pb-map-base)}

/* mega-menu */
.pp-mega-wrap{position:relative}
.pp-mega{
  position:absolute;top:calc(100% + 10px);left:-16px;width:620px;z-index:70;
  padding:22px;border-radius:var(--pb-r-xl);
  background:var(--pp-glass-strong);border:1px solid var(--pp-glass-border);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
  box-shadow:var(--pp-card-glow);
  display:none;grid-template-columns:1fr 1fr;gap:26px;
}
.pp-mega.is-open{display:grid;animation:ppMegaIn 220ms var(--pp-ease) both}
/* right-of-nav panels anchor right; .is-flip is the runtime safety net */
.pp-mega--right{left:auto;right:-16px}
.pp-mega--sm{width:460px}
.pp-mega.is-flip{left:auto;right:-16px}
.pp-mega-foot{grid-column:1 / -1;border-top:1px solid var(--pb-border);padding-top:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-mega-glyph{width:30px;height:30px;flex:none;border-radius:9px;background:var(--pb-accent-tint);color:var(--pb-accent-ink);display:inline-flex;align-items:center;justify-content:center}
.pp-mega-glyph svg{width:16px;height:16px}
.pp-menu--nav{right:auto;left:0}
.pp-menu--nav.is-flip{left:auto;right:0}
.pp-mega-item{display:flex;align-items:center;gap:11px;padding:8px;border-radius:var(--pb-r-nested);color:var(--pb-text-2);font-size:var(--pb-fs-body)}
.pp-mega-item:hover{background:var(--pb-accent-tint);color:var(--pb-text);opacity:1}
.pp-mega-thumb{width:46px;height:26px;border-radius:6px;background:var(--pb-inset);border:1px solid var(--pb-border);flex:none;overflow:hidden}
.pp-scrim-layer{position:fixed;inset:0;z-index:55;background:rgba(8,12,20,.4);opacity:0;pointer-events:none;transition:opacity var(--pp-t-ui) var(--pp-ease)}
.pp-scrim-layer.is-on{opacity:1;pointer-events:auto}

/* avatar menu */
.pp-avatar{position:relative;width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.pp-avatar-ring{position:absolute;inset:0}
.pp-avatar-in{
  width:26px;height:26px;border-radius:50%;background:var(--pb-accent-tint-strong);
  color:var(--pb-accent-ink);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}
.pp-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:236px;z-index:70;padding:7px;
  border-radius:var(--pb-r-card);background:var(--pp-glass-strong);border:1px solid var(--pp-glass-border);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
  box-shadow:var(--pp-card-glow);display:none;
  /* a hero with overflow:hidden will slice a tall popover — cap it and let it
     scroll inside itself instead */
  max-height:min(62vh,460px);overflow:auto;overscroll-behavior:contain;
}
.pp-menu.is-open{display:block;animation:ppMegaIn 180ms var(--pp-ease) both}
.pp-menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:var(--pb-r-nav);color:var(--pb-text-2);font-size:var(--pb-fs-body);width:100%}
.pp-menu-item:hover{background:var(--pb-accent-tint);color:var(--pb-text);opacity:1}
.pp-menu-hr{height:1px;background:var(--pb-border);margin:6px 4px}
/* the identity row at the top of an account menu — the face, the name and the
   rank the ring is already drawing. A menu that opens off an avatar should say
   whose avatar it was. */
.pp-menu-who{display:flex;align-items:center;gap:10px;padding:9px 11px 8px}
.pp-menu-who-face{width:32px;height:32px;flex:none;font-size:13px}
.pp-menu-who-say{display:flex;flex-direction:column;gap:1px;min-width:0}
.pp-menu-who-name{font-weight:700;color:var(--pb-text);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* menus that carry glyphs (the Book dropdown) */
.pp-menu--icons .pp-menu-item{justify-content:flex-start;gap:10px}
.pp-menu--icons .pp-menu-item .pp-accent{margin-left:auto}
.pp-menu-glyph{width:26px;height:26px;flex:none;border-radius:8px;background:var(--pb-accent-tint);color:var(--pb-accent-ink);display:inline-flex;align-items:center;justify-content:center}
.pp-menu-glyph svg{width:15px;height:15px}

/* ─────────────────────────── share sheet ────────────────────── */
.pp-share-back{position:fixed;inset:0;z-index:140;background:rgba(8,12,20,.8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:22px}
.pp-share{width:min(440px,100%);max-height:calc(100dvh - 44px);overflow:auto;
  background:var(--pp-glass-strong);border:1px solid var(--pp-glass-border);
  border-radius:var(--pb-r-xl);box-shadow:var(--pp-card-glow);
  padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px}
.pp-share-head{display:flex;align-items:center;gap:12px}
.pp-share-head .pp-h3{margin-right:auto}
.pp-share-head .pp-mapcard-x{position:static}
.pp-share-style{display:flex;gap:6px}
.pp-share-stage{width:100%;border-radius:14px;overflow:hidden}
.pp-share-canvas{display:block;width:100%;height:auto}
.pp-share-views{display:flex;gap:6px;flex-wrap:wrap}
.pp-share-view{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:7px 11px;border-radius:var(--pb-r-chip);border:1px solid var(--pb-border-strong);
  color:var(--pb-text-2);font-size:var(--pb-fs-meta);font-weight:600;
  transition:border-color var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease)}
.pp-share-view:hover{border-color:var(--pb-accent-border);opacity:1}
.pp-share-view[aria-selected="true"]{background:var(--pb-accent-tint-strong);border-color:var(--pb-accent-border);color:var(--pb-text)}
.pp-share-view:disabled{opacity:.55;cursor:not-allowed}
.pp-share-acts{display:flex;gap:8px;flex-wrap:wrap}
.pp-share-note{text-align:center}
@media (max-width:640px){
  .pp-share-back{align-items:flex-end;padding:0}
  .pp-share{width:100%;max-height:92dvh;border-radius:var(--pb-r-sheet) var(--pb-r-sheet) 0 0;border-bottom:0}
}

/* ─────────────────────────── footer ─────────────────────────── */
.pp-footer{border-top:1px solid var(--pb-border);background:var(--pb-bg);position:relative;overflow:hidden}
.pp-footer-brandrow{display:flex;align-items:flex-start;gap:16px;row-gap:22px;flex-wrap:wrap}
/* the mark, the promise and the two store badges are one thing; the signup is
   the other. Two columns, not a row of four unrelated items. */
.pp-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pp-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.pp-footer-col{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.pp-footer-col a,.pp-footer-col button{color:var(--pb-muted);text-align:left}
.pp-footer-col a:hover,.pp-footer-col button:hover{color:var(--pb-accent-ink);opacity:1}
.pp-footer-policies{display:flex;gap:18px;flex-wrap:wrap}
.pp-footer-policies a{color:var(--pb-muted)}
.pp-footer-policies a:hover{color:var(--pb-accent-ink);opacity:1}
.pp-footer-band{position:absolute;inset:auto 0 0 0;height:180px;opacity:.06;pointer-events:none}
.pp-footer-rule{height:1px;border:0;margin:0;background:var(--pb-border)}
/* Both badges point at download.html — there is no store listing to link to yet,
   and a badge that 404s on the App Store is worse than one that explains itself. */
.pp-storebadges{display:flex;gap:10px;flex-wrap:wrap}
.pp-badge{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 15px;
  border-radius:var(--pb-r-card);border:1px solid var(--pb-border-strong);
  background:var(--pb-surface);color:var(--pb-text);box-shadow:var(--pp-card-glow);
  transition:border-color var(--pp-t-ui) var(--pp-ease)}
.pp-badge:hover{border-color:var(--pb-accent-border);opacity:1}
.pp-badge span{display:flex;flex-direction:column;line-height:1.15;font-size:13px;font-weight:700;letter-spacing:-.01em}
.pp-badge small{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pb-muted)}
.pp-footer-legal{border-top:1px solid var(--pb-border);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* The capture is a visible form now, not a link that reveals one — a signup you
   have to find first is a signup nobody makes. The heading and the line above it
   say what arrives, because "join our newsletter" describes the act and not the
   thing you'd be joining. */
.pp-signup{display:flex;flex-direction:column;gap:9px;max-width:42ch}
.pp-signup-head{font-size:var(--pb-fs-body);font-weight:700;letter-spacing:var(--pb-ls-tight);line-height:1.3;margin:0}
.pp-signup-say{font-size:var(--pb-fs-body-s);color:var(--pb-text-2);line-height:1.55;margin:0}
.pp-postcard{display:flex;align-items:center;gap:12px;min-height:36px;flex-wrap:wrap}
.pp-postcard-say{font-size:var(--pb-fs-body-s);color:var(--pb-text-2);white-space:nowrap}
.pp-postcard-form{display:flex;gap:8px}
.pp-postcard-form[hidden]{display:none}
.pp-postcard-form .pp-input{height:36px;width:220px}
.pp-postcard [data-capture-done]:not([hidden]){display:inline-flex;align-items:center;gap:8px}

.pp-input{
  height:42px;padding:0 14px;border-radius:var(--pb-r-pill);
  border:1px solid var(--pb-border-strong);background:var(--pb-inset);color:var(--pb-text);
  font-size:var(--pb-fs-body);min-width:0;
  transition:border-color var(--pp-t-ui) var(--pp-ease),box-shadow var(--pp-t-ui) var(--pp-ease);
}
.pp-input::placeholder{color:var(--pb-faint)}
.pp-input:focus{outline:none;border-color:var(--pb-accent-border);box-shadow:0 0 0 3px var(--pb-accent-tint)}
.pp-input-lg{height:48px}

/* ─────────────────────────── photo frames (Ken Burns lives here) ── */
.pp-photo{position:relative;overflow:hidden;background:var(--pb-inset);display:block}
.pp-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 5s var(--pp-ease),opacity 400ms var(--pp-ease)}
.pp-photo .pp-ph-blur{position:absolute;inset:0;transition:opacity 500ms var(--pp-ease)}
.pp-photo img.is-loaded + .pp-ph-blur{opacity:0}
.pp-kb:hover img,.pp-kb.is-on img{transform:scale(1.06)}
.pp-photo-scrim{position:absolute;inset:0;background:var(--pp-scrim);pointer-events:none}
.pp-credit{
  position:absolute;right:8px;bottom:8px;z-index:2;
  font-size:10px;color:#C7D2E2;background:rgba(8,12,20,.55);border-radius:var(--pb-r-pill);padding:3px 9px;
  opacity:0;transition:opacity var(--pp-t-ui) var(--pp-ease);
}
.pp-photo:hover .pp-credit{opacity:1}
.pp-credit:hover{color:#F2F6FB;opacity:1}
.pp-mono{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%, var(--pb-hero-wash2) 0%, var(--pb-hero-wash) 100%);
  color:var(--pb-text-2);font-size:28px;font-weight:700;letter-spacing:-.02em;
}

/* ── photo heroes ───────────────────────────────────────────────
   A hero whose text sits ON the photograph — country, city, article,
   collection, roundup, experience. photoFrame's scrim is bottom-weighted
   (nothing at the top, .28 at 42%, .82 at the floor), which is exactly right
   on a desktop where the words live in the bottom quarter of a wide frame.

   On a phone the same block is as tall as the picture. The breadcrumb lands on
   bare sky, the headline and the standfirst sit in the part of the gradient
   that is barely there, and over a bright photograph — a Norwegian cloud, a
   Kyoto morning — white-on-white is the result. This lays a second wash over
   the photo that is strongest where the base scrim is weakest, so the ramp
   from top to bottom is even instead of bottom-heavy.

   The wash is deliberately gentler on wide screens: there the photograph is
   doing real work and the text is already clear of it. */
.pp-herophoto{position:relative}
.pp-herophoto > .pp-photo{z-index:0}
.pp-herophoto::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,12,20,.66) 0%, rgba(8,12,20,.46) 26%,
    rgba(8,12,20,.24) 56%, rgba(8,12,20,.06) 100%);
}
/* The text layer sits above both washes and carries the on-photo ink as its
   INHERITED colour. Each hero used to set the colour element by element, so
   anything nobody had thought to name — the flag, which falls back to the two
   letters "NO" wherever the platform has no flag glyph — kept the page's dark
   body ink and vanished into the photograph. */
.pp-herophoto-in{position:relative;z-index:2;width:100%;color:#E8EFF7}
/* Air above the first line. These heroes are flex/flex-end boxes, so when the
   content outgrows the frame the box grows to fit it exactly and the top line
   ends up flush against the nav — which is what "it touches the edge" was. */
.pp-herophoto-in{padding-top:clamp(28px,7vw,52px)}

/* Chips on a photograph. .pp-tag paints an accent TINT with accent INK — built
   for a light page surface, where it reads as a quiet green pill. Over a dark
   wash the tint all but disappears and the ink (a #0F766E in the light theme)
   goes with it. The rarity inks have the same problem and can't be solved by
   brightening: at 12px uppercase nothing but near-white clears 4.5:1 on a
   photograph, and a teal or a violet never will. So on a photo they get a
   controlled pill of their own, and the tier colour survives on top of it. */
.pp-herophoto-in .pp-tag{
  background:rgba(8,12,20,.58);border-color:rgba(242,246,251,.28);color:#F2F6FB;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.pp-herophoto-in .pp-tag-neutral{background:rgba(8,12,20,.58);border-color:rgba(242,246,251,.20);color:#E8EFF7}
.pp-herophoto-in .pp-rar{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--pb-r-chip);
  background:rgba(8,12,20,.62);border:1px solid rgba(242,246,251,.20);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.pp-herophoto-in .pp-rar-common{color:#E8EFF7}
.pp-herophoto-in .pp-rar-uncommon{color:#2DD4BF}
.pp-herophoto-in .pp-rar-rare{color:#A99BFF}
.pp-herophoto-in .pp-rar-legendary{color:#F5C044}

@media (max-width:900px){
  /* the block fills the frame here, so the wash has to hold all the way up —
     kept as light as the contrast checks allow, so the photograph still reads */
  .pp-herophoto::after{
    background:linear-gradient(180deg,
      rgba(8,12,20,.62) 0%, rgba(8,12,20,.54) 34%,
      rgba(8,12,20,.52) 64%, rgba(8,12,20,.60) 100%);
  }
  /* a photo hero has to be allowed to grow: a fixed height plus overflow:hidden
     is one long place name away from cropping its own headline */
  .pp-herophoto{height:auto !important;min-height:var(--pp-herophoto-min,360px)}
}

.pp-budget{display:flex;flex-direction:column;gap:14px}

/* ─────────────────────── itinerary timeline ─────────────────────
   A spine, a dot per day, a kind-glyph per stop, and a photograph of the thing
   itself where we hold one. Three surfaces draw an itinerary — the homepage
   draft, the trip builder's review step and the saved trip — and they now draw
   the same one. Add .has-photo to a row to open the thumbnail column. */
.pp-tl{position:relative}
.pp-tl::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px;background:var(--pb-border)}
.pp-tl-day{padding-top:14px}
.pp-tl-daymark{display:flex;align-items:center;gap:12px;position:relative}
.pp-tl-daydot{width:36px;height:36px;border-radius:50%;flex:none;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  background:var(--pb-surface);border:1px solid var(--pb-border-strong);color:var(--pb-text)}
.pp-tl-daylab{font-weight:700;color:var(--pb-accent-ink);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.pp-tl-daycity{font-size:12px;color:var(--pb-muted)}
.pp-tl-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:9px 0;align-items:start}
.pp-tl-item.has-photo{grid-template-columns:36px 56px minmax(0,1fr)}
.pp-tl-dot{width:28px;height:28px;margin-left:4px;border-radius:50%;flex:none;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;background:var(--pb-inset);
  border:1px solid color-mix(in srgb, currentColor 45%, transparent)}
.pp-tl-thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;position:relative;
  border:1px solid var(--pb-border);background:var(--pb-inset)}
.pp-tl-thumb .pp-photo{position:absolute;inset:0;border-radius:0}
.pp-tl-body{min-width:0}
.pp-tl-title{font-weight:600;color:var(--pb-text)}
.pp-tl-sub{font-size:12px;color:var(--pb-muted);margin-top:2px}
.pp-tl-acts{display:flex;gap:14px;margin-top:6px;align-items:center;flex-wrap:wrap}
.pp-tl-pane{margin:8px 0 2px 48px;padding:12px;border:1px solid var(--pb-border);
  border-radius:var(--pb-r-card);background:var(--pb-surface);box-shadow:var(--pp-card-glow)}
.pp-tl-alt{display:block;width:100%;text-align:left;padding:7px 0;color:var(--pb-text-2);font-size:13px}
.pp-tl-alt:hover{color:var(--pb-accent-ink)}
.pp-tl-alt em{font-style:normal;color:var(--pb-muted);font-size:12px}
.pp-tl-open .pp-tl-daydot{background:transparent;border-style:dashed;font-size:10px;letter-spacing:0}
@media (max-width:640px){
  .pp-tl::before{left:14px}
  .pp-tl-daydot{width:30px;height:30px}
  .pp-tl-item{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .pp-tl-item.has-photo{grid-template-columns:30px 44px minmax(0,1fr)}
  .pp-tl-thumb{width:44px;height:44px}
  .pp-tl-dot{width:24px;height:24px;margin-left:3px}
  .pp-tl-pane{margin-left:40px}
}

/* ─────────────────────── icon tile — pick several ───────────────
   The visual multi-select: a glyph over a label, pressed state on the chip's
   own tint. Homepage quiz and trip builder ask the same question, so they draw
   the same tile. Columns via --pp-pick-cols. */
.pp-picks{display:grid;grid-template-columns:repeat(var(--pp-pick-cols,5),minmax(0,1fr));gap:10px}
.pp-pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 6px;cursor:pointer;
  border:1px solid var(--pb-border);border-radius:var(--pb-r-card);background:var(--pb-inset);
  color:var(--pb-text-2);font-size:12.5px;font-weight:600;text-align:center;
  transition:border-color var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease),transform var(--pp-t-ui) var(--pp-ease)}
.pp-pick:hover{border-color:var(--pb-accent-border);color:var(--pb-text)}
.pp-pick[aria-pressed="true"]{border-color:var(--pb-accent-border);background:var(--pb-accent-tint);color:var(--pb-accent-ink)}
/* the glyph carries the pressed state too — a tinted plate that fills in.
   Opt-in: a tile only gets one where it wraps its glyph in this. */
.pp-pick-ic{width:42px;height:42px;flex:none;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--pb-accent-tint);color:var(--pb-accent-ink);
  transition:background var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease)}
.pp-pick[aria-pressed="true"] .pp-pick-ic{background:var(--pb-accent);color:var(--pb-on-accent)}
/* a label with one line of consequence under it — "Packed" does not, on its
   own, say what it will do to the plan */
.pp-pick-lines{display:flex;flex-direction:column;gap:3px;min-width:0}
.pp-pick-say{font-size:10.5px;font-weight:500;line-height:1.4;color:var(--pb-faint)}
/* tiles that carry a sentence need more than the 6px a one-word tile gets */
.pp-picks--rows .pp-pick{padding:15px 12px}
.pp-pick[aria-pressed="true"] .pp-pick-say{color:var(--pb-accent-ink);opacity:.9}
.pp-pick-tick{position:absolute;right:7px;top:7px;width:19px;height:19px;border-radius:50%;
  background:var(--pb-accent);color:var(--pb-on-accent);display:none;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;line-height:1}
.pp-pick[aria-pressed="true"] .pp-pick-tick{display:flex;animation:ppPop 280ms var(--pp-spring) both}
@media (max-width:640px){
  .pp-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* a three-up of explained choices has nowhere to go at 360px — the same tiles
     become full-width rows, which is the thumb-friendlier shape anyway */
  .pp-picks--rows{grid-template-columns:minmax(0,1fr);gap:8px}
  .pp-picks--rows .pp-pick{flex-direction:row;align-items:center;text-align:left;gap:13px;padding:13px 14px}
  .pp-picks--rows .pp-pick-tick{position:static;margin-left:auto}
}

/* ── the Book call-to-action card ─────────────────────────────
   Dark in both themes. It is the one card on a guide page that wants a click,
   and it was reading as another paragraph. Flat — a ground colour, not a glow. */
.pp-bookcta{background:#101827;border-color:rgba(255,255,255,.12);color:#EAF0F8}
.pp-bookcta .pp-h3{color:#F4F8FD}
.pp-bookcta .pp-kicker{color:#8FA3BC}
.pp-bookcta .pp-cap,.pp-bookcta .pp-body{color:#B9C6D8}
.pp-bookcta .pp-chip{border-color:rgba(255,255,255,.18);color:#D7E2F0;background:rgba(255,255,255,.05)}
.pp-bookcta .pp-chip:hover{border-color:var(--pb-accent);color:#fff;opacity:1}

/* ─────────────────────── photo tile — a picture you pick ────────
   One component behind the surfaces that had each grown their own copy: the
   booking flow's city grid, the homepage's stay-style cards, and the trip
   builder's country and budget tiles. Columns come from --pp-ptile-cols so a
   host can ask for three or four without a new class. */
.pp-ptiles{display:grid;grid-template-columns:repeat(var(--pp-ptile-cols,4),minmax(0,1fr));gap:12px}
.pp-ptile{position:relative;display:block;border-radius:var(--pb-r-nested);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--pb-border);text-align:left;cursor:pointer;
  transition:border-color 180ms var(--pp-ease),box-shadow 180ms var(--pp-ease)}
.pp-ptile .pp-photo{position:absolute;inset:0;border-radius:0}
/* photoFrame's own scrim is tuned for a dark photograph; a bright one needs
   this foot or the caption disappears into the sky */
.pp-ptile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(8,12,20,.88) 0%, rgba(8,12,20,.5) 45%, transparent 100%)}
.pp-ptile:hover{border-color:var(--pb-accent-border)}
/* inset ring, so selecting one does not nudge the grid */
.pp-ptile.is-on{border-color:var(--pb-accent-ink);box-shadow:inset 0 0 0 2px var(--pb-accent-ink)}
.pp-ptile--tall{aspect-ratio:auto;height:208px;border-radius:16px}
/* "reading before booking" — wide and short, so four of them read as a foot
   note to the results rather than competing with the listings above */
.pp-ptile--read{aspect-ratio:auto;height:116px;border-radius:14px}
.pp-ptile--read .pp-ptile-name{font-size:13px;line-height:1.25}
.pp-ptile--read .pp-ptile-sub{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 4px}
.pp-reads{--pp-ptile-cols:4;margin-top:12px}
@media (max-width:900px){.pp-reads{--pp-ptile-cols:2}}
@media (max-width:420px){.pp-reads{--pp-ptile-cols:1}.pp-ptile--read{height:96px}}
.pp-ptile-cap{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;display:block;pointer-events:none}
.pp-ptile-name{display:block;font-size:13.5px;font-weight:700;color:#F4F8FD;line-height:1.2;
  text-shadow:0 1px 6px rgba(8,12,20,.8)}
.pp-ptile-sub{display:block;font-size:10.5px;line-height:1.4;color:#D6E2F0;margin-top:2px;
  text-shadow:0 1px 6px rgba(8,12,20,.85)}
.pp-ptile--tall .pp-ptile-name{font-size:17px}
.pp-ptile--tall .pp-ptile-sub{font-size:11.5px;line-height:1.45;margin-top:3px}
.pp-ptile-tick{position:absolute;right:10px;top:10px;z-index:3;width:26px;height:26px;border-radius:50%;
  background:var(--pb-accent);color:#0E1420;display:none;align-items:center;justify-content:center;
  font-weight:700;font-size:13px}
.pp-ptile.is-on .pp-ptile-tick{display:flex}
@media (max-width:620px){.pp-ptiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ─────────────────────── destination card ─────────────────────── */
/* flex column + a foot pushed to the bottom, so a row of cards lines its
   "Guide →" links up even though honest cards carry different amounts of
   content — a country with no best-month data simply has no band. */
.pp-dcard{
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--pb-r-card-lg);overflow:hidden;position:relative;
  border:1px solid var(--pb-border);background:var(--pb-surface);box-shadow:var(--pp-card-glow);color:var(--pb-text);
  transition:border-color var(--pp-t-ui) var(--pp-ease),box-shadow var(--pp-t-ui) var(--pp-ease);
}
.pp-dcard:hover{border-color:var(--pb-accent-border);box-shadow:var(--pp-card-glow-hover);opacity:1}
.pp-dcard .pp-photo{aspect-ratio:16/10}
.pp-dcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.pp-dcard-body > .pp-row-wrap:last-child{margin-top:auto}
.pp-dcard-say{font-size:var(--pb-fs-body-s);color:var(--pb-text-2);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* one row, and it stays one row: the primary flexes, the rest hold their size */
.pp-dcard-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:nowrap}
.pp-dcard-foot .pp-btn{white-space:nowrap;min-width:0}
.pp-dcard-foot .pp-btn-primary{flex:1}
.pp-dcard-foot .pp-cap{margin-left:auto;white-space:nowrap}
.pp-dcard-title{font-size:var(--pb-fs-row);font-weight:700;letter-spacing:var(--pb-ls-tight);display:flex;align-items:center;gap:8px}
.pp-dcard-acts{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:12px;
  transform:translateY(102%);transition:transform 220ms var(--pp-ease);
  background:linear-gradient(180deg,rgba(8,12,20,0),rgba(8,12,20,.86));
}
.pp-dcard:hover .pp-dcard-acts,.pp-dcard:focus-within .pp-dcard-acts{transform:translateY(0)}
.pp-act{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:var(--pb-r-pill);
  background:rgba(14,20,32,.72);border:1px solid rgba(242,246,251,.24);color:#F2F6FB;
  font-size:var(--pb-fs-caption);font-weight:600;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background var(--pp-t-ui) var(--pp-ease),border-color var(--pp-t-ui) var(--pp-ease);
}
.pp-act:hover{background:rgba(45,212,191,.9);color:#0E1420;border-color:#2DD4BF;opacity:1}
.pp-act.is-on{background:#2DD4BF;color:#0E1420;border-color:#2DD4BF}

/* ── the pin control ──────────────────────────────────────────
   The destination card hides its actions until you hover, which is fine for a
   card whose whole surface is a link. A save has to be reachable on a phone, so
   this one rides the photograph and stays visible — the same pill, top-right,
   on a stay, an experience and a city alike. */
.pp-pinact{position:absolute;right:10px;top:10px;z-index:3}
.pp-act svg,.pp-pinchip svg,.pp-pinicon svg{display:block;flex:none}
.pp-pinchip{gap:7px}
.pp-pinchip.is-on{background:var(--pb-accent-tint-strong);border-color:var(--pb-accent-border);color:var(--pb-accent-ink)}
.pp-pinicon{width:30px;height:30px;padding:0;justify-content:center;flex:none}
.pp-flag{font-size:15px;line-height:1;filter:saturate(1.05)}

/* ─────────────────────── partner cards (05 §2) ─────────────────── */
.pp-pcard{
  display:flex;flex-direction:column;position:relative;border-radius:var(--pb-r-card-lg);overflow:hidden;
  border:1px solid var(--pb-border);background:var(--pb-surface);box-shadow:var(--pp-card-glow);
  transition:border-color var(--pp-t-ui) var(--pp-ease),box-shadow var(--pp-t-ui) var(--pp-ease);
}
.pp-pcard:hover{border-color:var(--pb-accent-border);box-shadow:var(--pp-card-glow-hover)}
.pp-pcard .pp-photo{aspect-ratio:16/10}
.pp-pcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.pp-pcard-name{font-size:var(--pb-fs-row);font-weight:700;letter-spacing:var(--pb-ls-tight);color:var(--pb-text);line-height:1.25}
.pp-pcard-metaline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--pb-fs-meta);color:var(--pb-muted)}
.pp-rating{display:flex;align-items:baseline;gap:7px;font-size:var(--pb-fs-body);color:var(--pb-text-2)}
.pp-rating b{font-size:var(--pb-fs-row);font-weight:700;color:var(--pb-text);font-variant-numeric:tabular-nums}
.pp-from{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pp-from b{font-size:var(--pb-fs-lead);font-weight:700;color:var(--pb-text);letter-spacing:var(--pb-ls-tight)}
.pp-sourced{
  display:flex;align-items:center;gap:6px;font-size:var(--pb-fs-caption);color:var(--pb-faint);
  padding-top:9px;border-top:1px solid var(--pb-border);
}
.pp-pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.pp-out::after{content:"";display:inline-block;width:0}
.pp-disclosure{
  display:flex;align-items:center;gap:9px;font-size:var(--pb-fs-meta);color:var(--pb-muted);
  padding:11px 15px;border-radius:var(--pb-r-nested);border:1px solid var(--pb-border);background:var(--pb-inset);
}
.pp-prow{
  display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;
  padding:14px;border-radius:var(--pb-r-card);border:1px solid var(--pb-border);background:var(--pb-surface);
  box-shadow:var(--pp-card-glow);
  transition:border-color var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease);
}
.pp-prow:hover{border-color:var(--pb-accent-border)}
.pp-prow .pp-photo{aspect-ratio:4/3;border-radius:var(--pb-r-nested)}

/* ─────────────────────── booking search bar ─────────────────── */
.pp-bsearch{
  display:flex;align-items:stretch;border-radius:var(--pb-r-pill);
  border:1px solid var(--pb-border-strong);background:var(--pb-surface);
  box-shadow:var(--pp-card-glow);overflow:visible;position:relative;max-width:880px;
}
.pp-bseg{
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:11px 20px;position:relative;
  border-right:1px solid var(--pb-border);flex:1 1 0;min-width:0;text-align:left;cursor:pointer;
  transition:background var(--pp-t-ui) var(--pp-ease);
}
.pp-bseg:first-child{padding-left:24px;border-top-left-radius:var(--pb-r-pill);border-bottom-left-radius:var(--pb-r-pill)}
.pp-bseg:hover{background:var(--pb-accent-tint)}
.pp-bseg-label{font-size:var(--pb-fs-kicker);font-weight:600;letter-spacing:var(--pb-ls-kicker);text-transform:uppercase;color:var(--pb-muted)}
.pp-bseg-val{font-size:var(--pb-fs-body);font-weight:600;color:var(--pb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bseg-val.is-empty{color:var(--pb-faint);font-weight:500}
.pp-bseg input{border:0;background:transparent;padding:0;width:100%;font-size:var(--pb-fs-body);font-weight:600;color:var(--pb-text)}
.pp-bseg input:focus{outline:none}
.pp-bseg input::placeholder{color:var(--pb-faint);font-weight:500}
.pp-bsearch-go{margin:6px;flex:none;align-self:center}
/* ── the bar sizes to its container, not the window ──────────────
   Dropped into a sidebar it used to keep the wide five-across layout and
   collide its own labels. The rules match the 900px viewport fallback, so a
   browser without container queries still gets the stack on a phone. */
.pp-bsearch-host{container-type:inline-size}
@container (max-width:620px){
  .pp-bsearch{flex-wrap:wrap;border-radius:var(--pb-r-xl)}
  .pp-bseg{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--pb-border)}
  .pp-bseg:first-child{border-radius:var(--pb-r-xl) var(--pb-r-xl) 0 0;padding-left:20px}
  .pp-bsearch-go{flex:1 1 100%;margin:10px}
}
/* the destination picker is a grid of places, not a list of words */
.pp-bcities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.pp-bcity .pp-ptile-sub{font-size:10px}
.pp-bcity{aspect-ratio:16/10;border-radius:12px}
.pp-bcity.is-cur{border-color:var(--pb-accent-ink);box-shadow:inset 0 0 0 2px var(--pb-accent-ink)}
@media (max-width:560px){.pp-bcities{grid-template-columns:minmax(0,1fr)}}
.pp-pop{
  position:absolute;top:calc(100% + 12px);left:0;z-index:80;min-width:300px;padding:14px;
  border-radius:var(--pb-r-card-lg);background:var(--pp-glass-strong);border:1px solid var(--pp-glass-border);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
  box-shadow:var(--pp-card-glow);display:none;
  /* a hero with overflow:hidden will slice a tall popover — cap it and let it
     scroll inside itself instead */
  max-height:min(62vh,460px);overflow:auto;overscroll-behavior:contain;
}
.pp-pop.is-open{display:block;animation:ppMegaIn 200ms var(--pp-ease) both}
.pp-sugg{display:flex;align-items:center;gap:11px;padding:8px;border-radius:var(--pb-r-nested);width:100%;text-align:left;color:var(--pb-text-2)}
.pp-sugg:hover,.pp-sugg.is-cur{background:var(--pb-accent-tint);color:var(--pb-text)}
.pp-sugg-thumb{width:44px;height:34px;border-radius:8px;overflow:hidden;flex:none;background:var(--pb-inset)}
/* calendar */
.pp-cal{display:grid;grid-template-columns:repeat(7,32px);gap:2px}
.pp-cal-h{font-size:10px;color:var(--pb-faint);text-align:center;padding:4px 0}
.pp-cal-d{
  height:32px;border-radius:8px;font-size:var(--pb-fs-meta);color:var(--pb-text-2);
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
  transition:background var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease);
}
.pp-cal-d:hover:not([disabled]){background:var(--pb-accent-tint);color:var(--pb-text)}
.pp-cal-d[disabled]{color:var(--pb-faint);opacity:.45;cursor:default}
.pp-cal-d.is-edge{background:#2DD4BF;color:#0E1420;font-weight:700}
.pp-cal-d.is-mid{background:var(--pb-accent-tint-strong);color:var(--pb-text);border-radius:0}
.pp-step{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 2px}
.pp-stepbtn{  width:30px;height:30px;border-radius:50%;border:1px solid var(--pb-border-strong);color:var(--pb-text-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
}
.pp-stepbtn:hover:not([disabled]){border-color:var(--pb-accent-border);color:var(--pb-accent-ink)}
.pp-stepbtn[disabled]{opacity:.4;cursor:not-allowed}

/* calendar v2 — fluid grid, twin months, continuous range band */
.pp-cal2{display:flex;gap:24px}
.pp-cal2 .pp-cal{grid-template-columns:repeat(7,minmax(30px,1fr));gap:0;flex:1}
.pp-cal2 .pp-cal-d{width:auto;border-radius:0}
.pp-cal2 .pp-cal-d.is-edge{border-radius:9px}
.pp-cal2 .pp-cal-d.is-preview{background:var(--pb-accent-tint)}
.pp-cal-foot{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--pb-border)}
.pp-cal-nights{font-weight:700;font-size:12.5px;color:var(--pb-accent-ink)}
/* Stacked, not truncated. Hiding the second month left its heading behind with
   nothing under it, and a range that crosses a month boundary — most of them —
   had to page forward to be picked. The popover scrolls; let it. */
@media (max-width:719px){.pp-cal2{flex-direction:column;gap:18px}}
/* popover edge-flip */
.pp-pop.is-right{left:auto;right:0}
.pp-pop.is-up{top:auto;bottom:calc(100% + 12px)}
/* the two wide popovers size themselves, but never past the window — a fixed
   430px panel on a 390px phone was running off the right edge */
.pp-pop--dest{min-width:min(430px,calc(100vw - var(--pp-gutter) * 2))}
.pp-pop--kinds{min-width:min(380px,calc(100vw - var(--pp-gutter) * 2))}

/* ── the booking popovers become sheets on a phone ──────────────
   An absolutely-positioned panel anchored under a segment is the wrong shape
   on a phone: it is wider than the screen, and for the destination field the
   soft keyboard covers whatever opens *below* it. Below 640px pp-search.js
   portals each popover to <body> and adds .is-sheet — the destination one
   full-height, with the field lifted into its own header above the keyboard. */
.pp-sheet-back{
  position:fixed;inset:0;z-index:118;background:rgba(8,12,20,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity 200ms var(--pp-ease);
}
.pp-sheet-back.is-on{opacity:1}
body.pp-sheet-lock{overflow:hidden}
.pp-sheet-head{display:none}
@media (max-width:640px){
  /* the sheet is portalled to <body>, so the host must stop being a
     containing block for it — the stacked bar comes from the 900px rules */
  .pp-bsearch-host{container-type:normal}
  /* The 16px rule for every field lives at the FOOT of this stylesheet — see
     "the iOS zoom rule" there. It has to come after .pp-select and .pp-input,
     which are declared six hundred lines below this block: a media query adds no
     specificity, so source order decides, and a rule written here loses to any
     unconditional one written later. That is exactly how .pp-select stayed at
     12.5px on a phone while this block claimed to have fixed it. */
  .pp-bseg{padding:13px 18px}
  .pp-bseg-val{font-size:15px}

  .pp-pop.is-sheet{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:120;
    min-width:0;max-width:none;max-height:min(78vh,78dvh);
    padding:0 var(--pp-gutter) calc(20px + env(safe-area-inset-bottom));
    border-radius:var(--pb-r-card-lg) var(--pb-r-card-lg) 0 0;
    border-left:0;border-right:0;border-bottom:0;
    background:var(--pb-surface);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 -20px 60px rgba(8,12,20,.3);
  }
  .pp-pop.is-sheet.is-open{animation:ppSheetUp 300ms var(--pp-ease) both}
  /* the destination sheet takes the screen: the field has to clear the keyboard */
  .pp-pop.is-sheet-full{
    top:0;max-height:none;border-radius:0;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .pp-pop.is-sheet-full .pp-sheet-grip{display:none}

  .pp-sheet-head{
    display:block;position:sticky;top:0;z-index:2;background:var(--pb-surface);
    margin:0 calc(var(--pp-gutter) * -1);padding:8px var(--pp-gutter) 0;
    padding-top:calc(8px + env(safe-area-inset-top));
    border-bottom:1px solid var(--pb-border);
  }
  .pp-sheet-grip{display:block;width:38px;height:4px;border-radius:2px;background:var(--pb-border-strong);margin:0 auto 10px}
  .pp-sheet-row{display:flex;align-items:center;gap:11px;padding-bottom:11px}
  .pp-sheet-title{font-weight:700;font-size:16px;flex:1;min-width:0;color:var(--pb-text)}
  .pp-sheet-head input{
    flex:1;min-width:0;height:46px;border:1px solid var(--pb-border-strong);
    border-radius:var(--pb-r-pill);padding:0 16px;background:var(--pb-inset);
    font-size:16px;font-weight:600;color:var(--pb-text);
  }
  .pp-sheet-head input:focus{outline:none;border-color:var(--pb-accent-border);box-shadow:0 0 0 3px var(--pb-accent-tint)}
  .pp-sheet-x{
    width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--pb-border-strong);
    display:inline-flex;align-items:center;justify-content:center;color:var(--pb-muted);font-size:15px;
  }
  /* thumb-sized targets inside the sheets */
  .pp-cal2 .pp-cal-d{height:42px;font-size:14px}
  .pp-cal-d.is-edge{border-radius:11px}
  .pp-stepbtn{width:40px;height:40px;font-size:19px}
  .pp-step{padding:12px 2px}
  .pp-bcity{aspect-ratio:16/9}
}
/* compact bar for docked contexts */
.pp-bsearch--compact .pp-bseg-label{display:none}
.pp-bsearch--compact .pp-bseg{padding-top:8px;padding-bottom:8px}
.pp-bsearch--compact .pp-bsearch-go{height:36px;padding:0 16px}
/* results view toggle */
.pp-viewtoggle{display:inline-flex;border:1px solid var(--pb-border-strong);border-radius:var(--pb-r-pill);overflow:hidden}
.pp-viewtoggle button{padding:6px 13px;font-size:12px;font-weight:600;color:var(--pb-muted);display:inline-flex;align-items:center;gap:6px}
.pp-viewtoggle button[aria-pressed="true"]{background:var(--pb-accent-tint-strong);color:var(--pb-accent-ink)}

/* ─────────────────────── command palette ─────────────────── */
.pp-pal-back{
  position:fixed;inset:0;z-index:100;background:rgba(8,12,20,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;
}
.pp-pal-back.is-open{display:flex;animation:ppFade 160ms var(--pp-ease) both}
.pp-pal{
  width:min(680px,100%);max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--pb-r-xl);background:var(--pp-glass-strong);border:1px solid var(--pp-glass-border);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
  /* was a hardcoded dark drop shadow — wrong over a light page */
  box-shadow:var(--pp-overlay-shadow);animation:ppSpringIn 200ms var(--pp-ease) both;
}
.pp-pal-in{display:flex;align-items:center;gap:12px;padding:20px 20px;border-bottom:1px solid var(--pb-border)}
.pp-pal-in input{flex:1;border:0;background:transparent;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--pb-text)}
.pp-pal-in input:focus{outline:none}
.pp-pal-in input::placeholder{color:var(--pb-faint)}
.pp-pal-body{overflow-y:auto;padding:8px}
.pp-pal-group{padding:12px 10px 5px;font-size:var(--pb-fs-kicker);font-weight:600;letter-spacing:var(--pb-ls-kicker);text-transform:uppercase;color:var(--pb-faint)}
.pp-pal-row{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--pb-r-nested);
  color:var(--pb-text-2);font-size:var(--pb-fs-body);width:100%;text-align:left;
}
.pp-pal-row.is-cur{background:var(--pb-accent-tint-strong);color:var(--pb-text)}
.pp-pal-row mark{background:transparent;color:var(--pb-accent-ink);font-weight:700}
/* ── horizontal scroller with an edge that admits it ────────────
   A rail with hidden scrollbars that clips a card in half reads as broken, not
   scrollable. The mask fades whichever edge still has content behind it —
   pp-motion's scrollx() sets data-more as you scroll, so the fade disappears at
   the ends instead of dimming content that has nowhere left to go. */
[data-scrollx]{
  --sx-l:0px; --sx-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--sx-l),#000 calc(100% - var(--sx-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--sx-l),#000 calc(100% - var(--sx-r)),transparent 100%);
}
[data-scrollx][data-more~="start"]{--sx-l:40px}
[data-scrollx][data-more~="end"]{--sx-r:40px}
@media (prefers-reduced-motion:reduce){[data-scrollx]{transition:none}}

/* ── stepped-flow progress rail ─────────────────────────────────
   Dots joined by a filling link. Used by the landing trip quiz, the landing DNA
   quiz and the Book start flow — it lives here rather than in one page's <style>
   because three surfaces now share it. */
/* segmented control — one choice from a short, fixed set. Selection is carried by
   aria-pressed so the state is real to assistive tech, not just painted. */
.pp-seg{display:inline-flex;border:1px solid var(--pb-border-strong);border-radius:var(--pb-r-pill);overflow:hidden;flex-wrap:wrap}
.pp-seg button{padding:9px 18px;font-size:var(--pb-fs-body-s);color:var(--pb-text-2);white-space:nowrap;
  transition:background var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease)}
.pp-seg button:hover{background:var(--pb-accent-tint);color:var(--pb-text)}
.pp-seg button[aria-pressed="true"]{background:#2DD4BF;color:#0E1420;font-weight:700}
.pp-seg button[aria-pressed="true"]:hover{background:#2DD4BF;color:#0E1420}

.pp-steps{display:flex;align-items:center;max-width:420px}
.pp-step-dot{width:9px;height:9px;border-radius:50%;background:var(--pb-border-strong);flex:none;transition:all 300ms var(--pp-ease)}
.pp-step-dot.is-done,.pp-step-dot.is-now{background:#2DD4BF;box-shadow:0 0 10px rgba(45,212,191,.7)}
.pp-step-link{height:1px;flex:1;background:var(--pb-border-strong);position:relative;overflow:hidden}
.pp-step-link i{position:absolute;inset:0;background:#2DD4BF;transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--pp-ease)}
.pp-step-link.is-done i{transform:scaleX(1)}

/* ── the palette's visual half ──────────────────────────────────
   Photos cost a network round-trip each, so they are rationed: the rail (4) and
   the single top match (1). Result rows stay text + flag however fast you type. */
/* six ways in, before anyone types a word */
.pp-pal-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:2px 10px 6px}
.pp-pal-cat{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--pb-r-card);
  border:1px solid var(--pb-border);background:var(--pb-surface);color:var(--pb-text);
  font-size:var(--pb-fs-body-s);font-weight:600;
  transition:border-color var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease)}
.pp-pal-cat svg{color:var(--pb-accent-ink);flex:none}
.pp-pal-cat:hover,.pp-pal-cat.is-cur{border-color:var(--pb-accent-border);background:var(--pb-accent-tint)}
@media (max-width:560px){.pp-pal-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pp-pal-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:10px;
  padding:4px 10px 6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.pp-pal-rail::-webkit-scrollbar{display:none}
.pp-pal-tile{position:relative;display:block;border-radius:var(--pb-r-nested);overflow:hidden;
  aspect-ratio:4/3;scroll-snap-align:start;border:1px solid var(--pb-border);
  transition:box-shadow 180ms var(--pp-ease),border-color 180ms var(--pp-ease)}
.pp-pal-tile .pp-photo{position:absolute;inset:0;border-radius:0}
/* the selection ring is drawn inside the box: a transform or a width change here
   lifts one tile out of the row and the whole rail reads as misaligned */
.pp-pal-tile.is-cur{border-color:var(--pb-accent-ink);box-shadow:inset 0 0 0 2px var(--pb-accent-ink)}
.pp-pal-tile-cap{position:absolute;left:9px;right:9px;bottom:8px;z-index:2;pointer-events:none}
.pp-pal-tile-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#F4F8FD;
  text-shadow:0 1px 6px rgba(8,12,20,.75);line-height:1.2}
.pp-pal-tile-sub{font-size:10.5px;color:#D6E2F0;text-shadow:0 1px 6px rgba(8,12,20,.8);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the top match: one wide row that shows the place instead of naming it */
.pp-pal-hero{display:flex;align-items:stretch;gap:0;border-radius:var(--pb-r-nested);overflow:hidden;
  border:1px solid var(--pb-border);margin:2px 10px 4px;transition:border-color 180ms var(--pp-ease)}
.pp-pal-hero.is-cur{border-color:var(--pb-accent-ink);background:var(--pb-accent-tint)}
.pp-pal-hero-art{position:relative;flex:none;width:112px;min-height:74px;overflow:hidden}
.pp-pal-hero-art .pp-photo{position:absolute;inset:0;border-radius:0}
.pp-pal-hero-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:11px 14px}
.pp-pal-hero-name{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--pb-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-pal-hero-name mark{background:transparent;color:var(--pb-accent-ink);font-weight:700}
@media (max-width:560px){
  .pp-pal-rail{grid-auto-columns:minmax(128px,1fr)}
  .pp-pal-hero-art{width:88px}
}
.pp-pal-foot{display:flex;align-items:center;gap:16px;padding:9px 18px;border-top:1px solid var(--pb-border);font-size:10.5px;color:var(--pb-faint)}
.pp-state-dot{width:7px;height:7px;border-radius:50%;flex:none}
.pp-state-vis{background:#2DD4BF;box-shadow:var(--pb-glow-dot)}

/* ─────────────────────── toasts / skeleton / misc ─────────────── */
.pp-toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.pp-toast{
  display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:var(--pb-r-pill);
  background:var(--pp-glass-strong);border:1px solid var(--pp-glass-border);color:var(--pb-text);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
  box-shadow:var(--pp-card-glow);font-size:var(--pb-fs-body);pointer-events:auto;
  animation:ppToastIn 320ms var(--pp-spring) both;
}
.pp-toast.is-out{animation:ppToastOut 200ms var(--pp-ease) both}
.pp-skel{background:var(--pb-inset);border-radius:var(--pb-r-nested);position:relative;overflow:hidden}
/* A line of text that has not arrived. Height matches the line it stands in
   for, so nothing jumps when the real content lands. */
.pp-skel-line{height:13px;margin-bottom:8px;border-radius:999px}
.pp-skel-line:last-child{margin-bottom:0}
.pp-skel-short{width:52%}
.pp-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(var(--pb-accent-rgb),.07),transparent);animation:ppShimmer 1.5s linear infinite}
.pp-ring{transform:rotate(-90deg)}
.pp-ring circle{transition:stroke-dashoffset 900ms var(--pp-ease)}
.pp-bar{height:6px;border-radius:var(--pb-r-bar);background:var(--pb-border);overflow:hidden}
.pp-bar > i{display:block;height:100%;border-radius:var(--pb-r-bar);background:#2DD4BF;width:0;transition:width 500ms var(--pp-ease)}
.pp-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--pb-fs-caption);color:var(--pb-muted)}
.pp-legend span{display:inline-flex;align-items:center;gap:7px}
.pp-legend i{width:11px;height:11px;border-radius:3px;flex:none}
.pp-legend .l-vis{background:#2DD4BF;box-shadow:0 0 8px rgba(45,212,191,.7)}
.pp-legend .l-pin{background:var(--pb-map-pinned);border:0;position:relative}
.pp-legend .l-pin::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;
  margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--pb-map-pin-ink)}
.pp-legend .l-un{background:var(--pb-map-base)}
.pp-tt{
  position:fixed;z-index:90;pointer-events:none;padding:7px 11px;border-radius:var(--pb-r-pill);
  background:var(--pp-glass-strong);border:1px solid var(--pp-glass-border);
  -webkit-backdrop-filter:var(--pp-glass-blur);backdrop-filter:var(--pp-glass-blur);
  font-size:var(--pb-fs-caption);color:var(--pb-text);white-space:nowrap;
  box-shadow:var(--pp-card-glow);animation:ppTipIn 160ms var(--pp-ease) both;
}
/* ── full-bleed map edges ─────────────────────────────────────
   A map that runs to the edge of its stage gets sliced by that edge, and a
   continent cut by a straight horizontal line looks like a rendering fault.
   Two masks intersect: a vertical fade so the top and bottom dissolve, and a
   soft ellipse so the left and right corners go too. Framed maps (.pp-mapwrap,
   .es-mapwrap) do NOT get this — they have a border, so a clean edge is the
   right edge there.

   mask-composite is the modern spelling and -webkit-mask-composite the older
   one; a browser with neither applies only the first layer, which is the
   vertical fade — still the fix, just without the corner softening. */
.pp-mapfade{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 6%, #000 91%, transparent 100%),
                     radial-gradient(145% 125% at 50% 50%, #000 74%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 6%, #000 91%, transparent 100%),
             radial-gradient(145% 125% at 50% 50%, #000 74%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* a border as well as a tone: a map is an object on the page, and on a light
   theme the sea alone was never going to draw its own edge */
.pp-mapwrap{position:relative;border-radius:var(--pb-r-card-lg);overflow:hidden;
  background:var(--pb-map-ocean);border:1px solid var(--pb-border);box-shadow:var(--pp-card-glow)}
.pp-mapwrap svg{display:block;width:100%}
.pp-cursorglow{position:absolute;width:320px;height:320px;border-radius:50%;pointer-events:none;left:0;top:0;opacity:0;
  background:radial-gradient(circle,rgba(var(--pb-accent-rgb),.14) 0%,rgba(var(--pb-accent-rgb),0) 68%);
  transition:opacity 300ms var(--pp-ease);will-change:transform}
.pp-mapwrap:hover .pp-cursorglow{opacity:1}
.pp-xpfloat{position:absolute;pointer-events:none;font-size:var(--pb-fs-body);font-weight:700;color:var(--pb-accent-ink);animation:ppFloatUp 1100ms var(--pp-ease) both;z-index:5}

/* map path states (SVG) */
.pp-mp{transition:fill 260ms var(--pp-ease)}
.pp-mp-base{fill:var(--pb-map-base)}
.pp-mp-base:hover{fill:var(--pb-map-hover)}
/* A pinned country is the stamp colour receding, so the page-coloured stroke the
   emitter sets inline vanishes against it. CSS beats a presentation attribute, so
   this one rule fixes both worldMap2 and regionMap2 without touching the emitter. */
.pp-mp-pin{fill:var(--pb-map-pinned);stroke:var(--pb-map-pinned-line);stroke-width:.6}
.pp-mp-pin:hover{fill:var(--pb-accent)}

/* tabs */
.pp-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--pb-border);position:relative;overflow-x:auto;scrollbar-width:none}
.pp-tabs::-webkit-scrollbar{display:none}
.pp-tab{
  padding:11px 15px;font-size:var(--pb-fs-body);font-weight:600;color:var(--pb-muted);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--pp-t-ui) var(--pp-ease),border-color var(--pp-t-ui) var(--pp-ease);
}
.pp-tab:hover{color:var(--pb-text-2)}
.pp-tab.is-on{color:var(--pb-text);border-bottom-color:#2DD4BF}

/* rails (horizontal scrollers) */
.pp-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.pp-rail > *{scroll-snap-align:start;flex:0 0 auto;width:300px}
.pp-rail::-webkit-scrollbar{height:6px}
.pp-rail::-webkit-scrollbar-thumb{background:var(--pb-border-strong);border-radius:3px}
/* ── swipe shelves (phones) ──────────────────────────────────────
   A shelf of rich cards — stays, experiences, city and country guides —
   collapses to one card per row below 640px, so a six-card section becomes
   six screens of scrolling. .pp-swipe turns that same grid into a snapping
   rail: one card at a time, the next one peeking, and the section costs one
   card of height instead of six.

   The negative gutter margin lets it bleed to the screen edge while
   scroll-padding keeps the first card lined up with the column — the idiom
   the home page's guide shelf already uses.

   This is for SHELVES: a curated handful with a "see all" out. Exhaustive
   browse grids (every country on destinations, every guide on guides) and
   results lists deliberately stay vertical — a rail hides how much is there,
   and 52 cards is a horizontal marathon. */
@media (max-width:640px){
  .pp-grid.pp-swipe{
    display:flex;align-items:stretch;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--pp-gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--pp-gutter) * -1);
    padding-inline:var(--pp-gutter);padding-block:2px 4px;
  }
  /* Several pages drop a two-column layout to a bare `1fr` track on phones,
     and a `1fr` track carries min-width:auto — so it grows to whatever its
     contents claim they need. A rail full of cards claims a lot, which blew
     the column, and the page, wider than the screen. Size containment says
     what is already true of a rail: how wide it is has nothing to do with
     what is inside it. */
  .pp-grid.pp-swipe{contain:inline-size}
  .pp-grid.pp-swipe::-webkit-scrollbar{display:none}
  .pp-grid.pp-swipe > *{flex:0 0 var(--pp-swipe-w,78%);min-width:0;scroll-snap-align:start}
  /* one card, or an empty state standing in for the shelf: a lone card cropped
     to 78% reads as a broken layout, not as "swipe me" */
  .pp-grid.pp-swipe > :only-child{flex-basis:100%}
  /* bare photo tiles carry no body copy, so more of them fit on screen */
  .pp-grid.pp-swipe-tight{--pp-swipe-w:58%}
  /* the reveal stagger is timed for a column you scroll down into; on a rail it
     leaves the card you just swiped to blank for most of a second */
  .pp-grid.pp-swipe > [data-reveal]{transition-delay:0ms !important}
  /* nested inside a padded card there is no page gutter to bleed into */
  .pp-grid.pp-swipe-inset{margin-inline:0;padding-inline:0;scroll-padding-inline-start:0}

  /* the older hand-rolled rails get the same edge bleed and snap padding */
  .pp-rail{gap:12px;scroll-padding-inline-start:var(--pp-gutter);
    overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--pp-gutter) * -1);
    padding-inline:var(--pp-gutter);padding-block:2px 4px}
  .pp-rail::-webkit-scrollbar{display:none}
  .pp-rail > *{width:auto;flex:0 0 var(--pp-swipe-w,78%)}
}

/* ── swipe position dots (pp-swipe.js) ───────────────────────────
   The peeking next card says "there is more"; the dots say how much more and
   where you are in it. Indicator only — you move the rail by swiping it, so
   these are not controls and are hidden from assistive tech. */
.pp-swipe-dots{display:none}
@media (max-width:640px){
  .pp-swipe-dots{display:flex;justify-content:center;align-items:center;gap:2px;margin-top:12px}
  .pp-swipe-dot{display:flex;align-items:center;justify-content:center;width:16px;height:20px;flex:none}
  .pp-swipe-dot i{display:block;width:6px;height:6px;border-radius:50%;background:var(--pb-border-strong);
    transition:width 200ms var(--pp-ease),background 200ms var(--pp-ease)}
  .pp-swipe-dot.is-on i{width:14px;border-radius:3px;background:var(--pb-accent-ink)}
  /* a browse shelf of fifty-two is past counting — it gets a scroll position
     instead of a dot each, which would be a row wider than the phone */
  .pp-swipe-bar{display:block;position:relative;width:120px;height:3px;margin:12px auto 0;
    border-radius:2px;background:var(--pb-border);overflow:hidden}
  .pp-swipe-bar i{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--pb-accent-ink)}
}

/* month bars */
/* The bar heights are percentages set by barfill(), so the box they resolve
   against must have a DEFINITE height. `align-items:end` shrink-wrapped each
   column to its label, which made every percentage resolve to zero — the band
   rendered as a bare row of letters on every page that used it. Stretching the
   columns and giving the bar its own 1fr row fixes it everywhere at once. */
.pp-months{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;align-items:stretch}
/* --pp-bar-h sizes the BAR ROW, not the whole component. Sizing the component
   instead left the bar whatever was over after the month letter and the gap —
   at monthBand({height:20}) that was about two pixels. */
.pp-month{display:grid;grid-template-rows:var(--pp-bar-h,34px) auto;gap:6px;justify-items:center;min-height:0}
.pp-month i{display:block;width:100%;align-self:end;border-radius:4px 4px 2px 2px;background:var(--pb-border-strong);height:0;transition:height 500ms var(--pp-ease),background var(--pp-t-ui) var(--pp-ease)}
.pp-month.is-best i{background:#2DD4BF}
.pp-month.is-now i{outline:1.5px solid var(--pb-accent-ink);outline-offset:1px}
.pp-month span{font-size:10px;color:var(--pb-faint)}

/* ─────────────────────────── keyframes ─────────────────────────── */
@keyframes ppIn{from{opacity:0}to{opacity:1}}
@keyframes ppFade{from{opacity:0}to{opacity:1}}
@keyframes ppUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes ppPop{from{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}
@keyframes ppBump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes ppTick{from{transform:scale(.94)}to{transform:scale(1)}}
@keyframes ppStampIn{0%{transform:scale(2.3) rotate(-16deg);opacity:0}55%{transform:scale(.93) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes ppShock{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes ppShockSvg{0%{transform:scale(.35);opacity:.95}100%{transform:scale(3.2);opacity:0}}
@keyframes ppConfetti{0%{transform:translateY(0) rotate(0deg);opacity:1}85%{opacity:1}100%{transform:translateY(108vh) rotate(560deg);opacity:.7}}
@keyframes ppDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ppShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes ppBreath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes ppSheen{from{background-position:190% 0}to{background-position:-90% 0}}
@keyframes ppMegaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ppSpringIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes ppSheetIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes ppSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ppToastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ppToastOut{to{opacity:0;transform:translateY(8px)}}
@keyframes ppTipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ppFloatUp{0%{opacity:0;transform:translateY(4px)}25%{opacity:1}100%{opacity:0;transform:translateY(-32px)}}
@keyframes ppThud{0%{transform:translateY(0)}40%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes ppSpin{to{transform:rotate(360deg)}}
.ppBreath{animation:ppBreath 3s var(--pp-ease) infinite}
.ppShimmer{background:linear-gradient(90deg,transparent,rgba(var(--pb-accent-rgb),.08),transparent);animation:ppShimmer 1.5s linear infinite}
.pp-thud{animation:ppThud 90ms var(--pp-spring)}

/* ─────────────────────── reveal system (pp-motion.js) ─────────── */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--pp-t-enter) var(--pp-ease),transform var(--pp-t-enter) var(--pp-ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-20px)}
[data-reveal="right"]{transform:translateX(20px)}
[data-reveal="scale"]{transform:scale(.97)}
[data-draw]{transform:scaleX(0);transform-origin:left center;transition:transform 400ms var(--pp-ease)}
[data-draw].is-in{transform:scaleX(1)}

/* theme cross-fade overlay */
.pp-themefade{position:fixed;inset:0;z-index:200;background:var(--pb-bg);opacity:0;pointer-events:none;transition:opacity 125ms linear}
.pp-themefade.is-on{opacity:1}

/* ─────────────────────────── responsive ─────────────────────── */
@media (max-width:1180px){
  :root{--pp-gutter:32px}
  .pp-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-mega{width:min(560px,calc(100vw - 48px))}
  .pp-footer-grid{gap:24px}
}
@media (max-width:900px){
  :root{--pp-gutter:24px;--pp-section:44px}
  .pp-h1{font-size:40px}
  .pp-h2{font-size:24px}
  .pp-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-nav-items{display:none}
  .pp-navburger{display:inline-flex}
  .pp-cta-hide-sm{display:none}
  .pp-bsearch{flex-wrap:wrap;border-radius:var(--pb-r-xl)}
  .pp-bseg{flex:1 1 45%;border-right:0;border-bottom:1px solid var(--pb-border)}
  .pp-bseg:first-child{flex-basis:100%;border-radius:var(--pb-r-xl) var(--pb-r-xl) 0 0}
  .pp-bsearch-go{flex:1 1 100%;margin:10px}
  .pp-prow{grid-template-columns:80px 1fr}
  .pp-prow > :last-child{grid-column:1 / -1}
  .pp-footer-grid{grid-template-columns:1fr 1fr}
  /* the two-column layouts are single-column from here, so a full-width
     child sliding in from the side would overhang the gutter — reveal it
     vertically instead */
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(16px)}
}
@media (max-width:640px){
  :root{--pp-gutter:18px;--pp-section:36px;--pp-col:100%}
  .pp-h1{font-size:32px}
  .pp-h2{font-size:22px}
  .pp-h3{font-size:20px}
  .pp-num-hero{font-size:38px}
  .pp-num-xl{font-size:32px}
  .pp-g2,.pp-g3,.pp-g4{grid-template-columns:minmax(0,1fr)}
  .pp-footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  /* .pp-rail card width now lives with the swipe shelves above */
  .pp-pal-back{padding:6vh 12px 12px}
  /* a thumb is not a cursor: the controls a phone actually presses — the
     partner CTA on every card, the pin pill riding a photo, the sort select —
     were all sized for a pointer */
  .pp-btn-sm{height:40px;padding:0 17px}
  .pp-act{height:36px;padding:0 13px}
  /* 16px, not 13px. This pass grew the touch target to 40px and pinned the text
     at 13px with !important in the same line — and 13px is exactly what makes
     iOS Safari zoom the page when the select takes focus, and never zoom back.
     A taller control the reader ends up zoomed inside is not a fixed control.
     The !important stays only because it is fighting an inline style that used
     to sit on these selects; the size is now the one the rest of the site uses. */
  .pp-filterctl select.pp-input{height:40px !important;font-size:16px !important}
}

/* ── narrow nav: shed width in stages so nothing ever clips ──────
   .pp-btn is nowrap + overflow:hidden, so a squeezed nav button would
   swallow its own label. The nav sheds the long CTA copy first, then
   the wordmark, then the gutters — 320px is the WCAG reflow floor. */
/* Between the 900px burger breakpoint and ~1010px the full item row, the theme
   toggle and a 150px CTA all still render, and together they run past the right
   edge. The CTA sheds its long copy first here too. */
@media (min-width:901px) and (max-width:1010px){
  .pp-cta-full{display:none}
  .pp-cta-tight{display:inline}
}
@media (max-width:520px){
  .pp-cta-full{display:none}
  .pp-cta-tight{display:inline}
}
@media (max-width:440px){
  .pp-nav .pp-logo-word{display:none}
}
@media (max-width:380px){
  :root{--pp-gutter:14px}
  .pp-nav{gap:10px}
}

/* ─────────────────────── reduced motion (global kill) ────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  [data-draw]{transform:none !important}
  .pp-photo img{transform:none !important}
}
@media print{
  .pp-nav,.pp-footer,.pp-toasts,.pp-pal-back{display:none !important}
  body{background:#fff;color:#000}
}

/* ─────────────────── split results (pp-results.js) ─────────────── */
.pp-split{display:grid;grid-template-columns:55fr 45fr;gap:0;align-items:start}
.pp-split-list{padding:0 28px 56px var(--pp-gutter);min-width:0}
.pp-split-map{position:sticky;top:var(--pp-nav-h-solid);height:calc(100vh - var(--pp-nav-h-solid));padding:0 var(--pp-gutter) 0 0}
.pp-split-map > div{position:relative;height:100%;border-radius:var(--pb-r-card-lg);overflow:hidden;border:1px solid var(--pb-border);background:var(--pb-map-ocean)}
.pp-split-map svg{position:absolute;inset:0;width:100%;height:100%}
/* ── list / map / both ───────────────────────────────────────────
   Browsing by map is a first-class way to shop for a stay, so the map can
   take the whole rail; equally, a reader who wants the list should be able
   to put the map away entirely. */
.pp-split{position:relative}
.pp-split.is-maplist{grid-template-columns:minmax(0,1fr)}
.pp-split.is-maplist .pp-split-map{display:none}
.pp-split.is-mapfull{grid-template-columns:minmax(0,1fr)}
.pp-split.is-mapfull .pp-split-list{display:none}
.pp-split.is-mapfull .pp-split-map{padding-left:var(--pp-gutter)}
.pp-mapctl{position:absolute;right:12px;top:12px;z-index:5;display:flex;gap:6px}
.pp-mapctl-b{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--pb-text)}
.pp-mapctl-b:hover{color:var(--pb-accent-ink)}
/* only shown once the map is put away, and fixed so it is reachable from
   anywhere down a long list */
.pp-mapshow{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:45;gap:8px;box-shadow:0 10px 30px rgba(14,20,32,.28)}
.pp-split.is-maplist .pp-mapshow{display:inline-flex}
/* below the split breakpoint the layout already stacks, so the controls
   would be choosing between two things that are both on screen */
@media (max-width:1024px){
  .pp-mapctl,.pp-split.is-maplist .pp-mapshow{display:none}
  .pp-split.is-maplist .pp-split-map,.pp-split.is-mapfull .pp-split-list{display:block}
}
.pp-res-dot{cursor:pointer}
.pp-res-dot circle{transition:r 200ms var(--pp-ease),fill-opacity 200ms var(--pp-ease)}
.pp-res-dot.is-hot .pp-res-halo{r:22;fill-opacity:.3}
.pp-res-dot.is-hot .pp-res-core{r:7}
.pp-res-label{font-size:10.5px;font-weight:600;fill:var(--pb-text);paint-order:stroke;stroke:var(--pb-map-ocean);stroke-width:3px}
/* narrow maps number their dots rather than stacking names on top of each other */
.pp-res-num{font-size:12px;font-weight:700;fill:#0E1420;pointer-events:none}
.pp-res-dot.is-hot .pp-res-num{fill:#0E1420}
/* the card a tapped dot puts on the map, for when the list is not on screen */
/* ── real map pins ────────────────────────────────────────────
   A pill carrying the guest score, not a price — see pp-tilemap.js for why we
   cannot put a price on a pin without fifty rate calls. Sized to stay tappable:
   the 30px minimum plus the padding clears the 44px target once the touch area
   is counted, which the old 5px SVG dot never did. */
/* The doubled class is not a typo. MapLibre ships `.maplibregl-map{position:
   relative}`, its stylesheet is injected at runtime and therefore lands AFTER
   this file, and at equal specificity the later rule wins — which turned the
   absolute positioning off, dropped the container to h:0, and left a 519x0 map
   painting a 300px canvas into nothing. Measured before the fix: hostBox 519x0
   inside a parent 521x848. Two classes beat one, and beat it without reaching
   for !important, which the library would then have to fight back against.
   Height is stated outright as well, so the box survives even if the
   positioning is overridden again by some future version. */
.pp-tilemap.pp-tilemap{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.pp-tilemap .maplibregl-ctrl-attrib{font-size:10px}
.pp-tilemap canvas{outline:none}

.pp-pin{
  display:grid;place-items:center;min-width:34px;height:26px;padding:0 8px;
  border:1.5px solid var(--pb-surface);border-radius:999px;
  background:var(--pb-accent);color:#fff;
  font:700 12px/1 var(--pp-font,inherit);letter-spacing:-.01em;
  box-shadow:0 2px 6px rgba(0,0,0,.28);cursor:pointer;
  transition:transform 160ms var(--pp-ease),box-shadow 160ms var(--pp-ease),background 160ms var(--pp-ease);
  /* the pin is 26px tall but the finger is not */
  outline-offset:3px;
}
.pp-pin::after{content:"";position:absolute;inset:-9px;border-radius:999px}
.pp-pin--plain{min-width:26px;padding:0}
/* TWO variables, not one, and the split matters. --pin-grow is the resting
   size and is set inline by JS for a cluster (bigger group, bigger pin);
   --pin-scale is what hover and selection multiply it by. Collapsed into one,
   the inline style would win over the :hover rule and a cluster would simply
   never respond to a cursor. */
.pp-pin{--pin-grow:1;--pin-scale:var(--pin-grow);transform:scale(var(--pin-scale))}
.pp-pin.is-hot{--pin-scale:calc(var(--pin-grow) * 1.16);box-shadow:0 4px 12px rgba(0,0,0,.34);z-index:2}
.pp-pin.is-on{
  background:var(--pb-text);color:var(--pb-bg);--pin-scale:calc(var(--pin-grow) * 1.2);
  box-shadow:0 5px 16px rgba(0,0,0,.4);z-index:3;
}
.pp-pin:focus-visible{outline:2px solid var(--pb-accent)}

/* A group, not a property. Circular and a shade deeper so the eye reads it as
   "several" before it reads the number — and never as a score, which is the
   one thing a teal pill on this map already means. */
.pp-pin--cluster{
  min-width:38px;height:38px;padding:0;border-radius:50%;
  background:var(--pb-text);color:var(--pb-bg);
  font-size:13px;border-width:2px;
}

@media (prefers-reduced-motion:reduce){
  .pp-pin{transition:none}
}

.pp-mappeek{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:6;
  display:none;align-items:center;gap:12px;padding:12px 14px;
  border-radius:var(--pb-r-card);background:var(--pb-surface);
  border:1px solid var(--pb-border-strong);box-shadow:0 14px 40px rgba(8,12,20,.28);
}
.pp-mappeek.is-on{display:flex;animation:ppUp 220ms var(--pp-ease) both}
.pp-mappeek-x{
  width:32px;height:32px;flex:none;margin-left:auto;border-radius:50%;
  border:1px solid var(--pb-border-strong);display:inline-flex;align-items:center;
  justify-content:center;color:var(--pb-muted);font-size:13px;
}
.pp-res-area{font-size:10px;fill:var(--pb-muted);letter-spacing:.14em;text-transform:uppercase;paint-order:stroke;stroke:var(--pb-map-ocean);stroke-width:3px}
.pp-res-card{scroll-margin-top:120px;transition:border-color var(--pp-t-ui) var(--pp-ease),box-shadow var(--pp-t-ui) var(--pp-ease)}
.pp-res-card.is-hot{border-color:var(--pb-accent-border);box-shadow:var(--pp-card-glow-hover)}
.pp-filterbar{position:sticky;top:var(--pp-nav-h-solid);z-index:38;background:var(--pb-surface);padding:14px 0 12px;border-bottom:1px solid var(--pb-border-strong)}
.pp-filterbar-in{display:flex;align-items:center;gap:14px}
/* the chips take the slack; the controls never shrink */
.pp-chiprail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.pp-filterctl{display:flex;align-items:center;gap:12px;flex:none}
.pp-filternote{margin-top:8px}
.pp-mapbtn{display:none}
@media (max-width:1180px){
  .pp-split{grid-template-columns:1fr}
  .pp-split-map{position:relative;height:320px;padding:0 var(--pp-gutter);margin-bottom:24px;top:0}
  .pp-split-list{padding:0 var(--pp-gutter) 40px}
}
/* ── the results filter bar on a phone ──────────────────────────
   The chip row used to sit in the same flex line as the view toggle and the
   sort select with `flex:1;min-width:0`, so on a phone it was squeezed to
   ~65px: every chip took its own line and the caption beside them became a
   column one word wide. Below 900px the chips get their own edge-to-edge
   scrolling rail and the controls get their own line under it. */
@media (max-width:900px){
  .pp-filterbar{padding:11px 0 10px}
  .pp-filterbar-in{display:block}
  .pp-chiprail{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pp-gutter) * -1);
    padding-inline:var(--pp-gutter);padding-block:2px 4px;
    scrollbar-width:none;
  }
  .pp-chiprail::-webkit-scrollbar{display:none}
  .pp-chiprail > *{flex:none;scroll-snap-align:start}
  /* the rail runs past the edge — fade it so it reads as scrollable rather
     than as a chip someone forgot to finish */
  .pp-chiprail{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .pp-chip{height:36px}
  .pp-filterctl{margin-top:10px;justify-content:space-between;gap:10px}
  /* the honest caption is a sentence, not a chip — it never belonged in the rail */
  .pp-filternote{
    margin-top:8px;font-size:11px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .pp-viewtoggle button{padding:9px 15px}
  .pp-filterctl select{height:38px}
  /* ── list ⇄ map, the way a phone expects it ───────────────────
     A 320px map parked under a long list is scenery nobody scrolls to. On a
     phone the map is off until asked for, and then it takes the screen. */
  .pp-mapbtn{display:inline-flex}
  /* Grid ⇄ List dresses the list; with the map up there is no list to dress,
     and two buttons reading "List" side by side is a puzzle */
  .pp-filterbar.is-mapmode .pp-viewtoggle{display:none}
  .pp-split > .pp-split-map{display:none}
  .pp-split.is-mmap > .pp-split-list{display:none}
  .pp-split.is-mmap > .pp-split-map{
    display:block;position:sticky;top:calc(var(--pp-nav-h-solid) + var(--pp-filterbar-h,96px));
    height:calc(100dvh - var(--pp-nav-h-solid) - var(--pp-filterbar-h,96px) - 12px);
    margin:0;padding:0 var(--pp-gutter) 12px;
  }
}

/* ─────────────────────── country-intel pages ───────────────────────
   The five standalone lens pages (visa / driving / plugs / water / emergency).
   Their table ships in the HTML for crawlers, so these rules have to make a
   plain 52-row table readable — not decorate something JS built. */
.pp-crumbs{display:flex;align-items:center;gap:8px;font-size:var(--pb-fs-caption);color:var(--pb-muted);flex-wrap:wrap}
.pp-crumbs a{color:var(--pb-muted)}
.pp-crumbs a:hover{color:var(--pb-accent-ink)}
.pp-crumbs span[aria-current]{color:var(--pb-text-2)}

.pp-select{box-shadow:var(--pp-card-glow);
  height:34px;padding:0 30px 0 12px;border-radius:var(--pb-r-pill);
  border:1px solid var(--pb-border-strong);background:var(--pb-surface);color:var(--pb-text);
  font-size:var(--pb-fs-body-s);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--pb-muted) 50%),linear-gradient(135deg,var(--pb-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px,calc(100% - 11px) 15px;background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.pp-select:hover{border-color:var(--pb-accent-border)}

.pp-lensnav{display:flex;gap:9px;flex-wrap:wrap}

/* horizontal scroll belongs to the table, never to the page */
.pp-ctable-wrap{overflow-x:auto;border:1px solid var(--pb-border);border-radius:var(--pb-r-card-lg);background:var(--pb-surface);box-shadow:var(--pp-card-glow)}
/* An `overflow` ancestor becomes the scrollport for position:sticky, so the wrapper
   silently kills the sticky header — the row sticks to the top of the wrapper and
   leaves the screen with it. Above 900px the table already fits, so the wrapper has
   nothing to scroll and can step out of the way; below it, horizontal scroll wins
   (a header stuck over a sideways-scrolling table misleads more than it helps). */
@media (min-width:900px){.pp-ctable-wrap{overflow:visible}}
.pp-ctable{width:100%;border-collapse:collapse;font-size:var(--pb-fs-body-s);min-width:520px}
.pp-ctable th,.pp-ctable td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--pb-border);vertical-align:middle}
.pp-ctable thead th{
  position:sticky;top:var(--pp-nav-h-solid);z-index:2;background:var(--pb-inset);color:var(--pb-muted);
  font-size:var(--pb-fs-caption);font-weight:600;letter-spacing:var(--pb-ls-kicker);text-transform:uppercase;white-space:nowrap;
}
.pp-ctable tbody th{font-weight:600;color:var(--pb-text);white-space:nowrap}
.pp-ctable tbody th .pp-flag{margin-right:9px}
.pp-ctable tbody th a{color:var(--pb-text)}
.pp-ctable tbody th a:hover{color:var(--pb-accent-ink)}
.pp-ctable tbody tr:last-child th,.pp-ctable tbody tr:last-child td{border-bottom:0}
.pp-ctable tbody tr:hover{background:var(--pb-accent-tint)}
.pp-ctable tbody tr.is-hit{background:var(--pb-accent-tint-strong);transition:background 400ms var(--pp-ease)}
.pp-ctable td{color:var(--pb-text-2);white-space:nowrap}
/* Six columns of "Visa-free · 90 days" cannot hold nowrap inside the column
   below ~1460px: the table stopped honouring width:100% and pushed the PAGE
   sideways instead. A value that wraps costs less than a page that scrolls. */
@media (max-width:1460px){.pp-ctable--wide td{white-space:normal}}
.pp-ctable td.pp-ct-note{color:var(--pb-muted);font-size:var(--pb-fs-caption);white-space:normal;min-width:200px}
/* dimmed, not hidden: the other passports stay readable and stay in the HTML */
.pp-ctable td.is-dim{opacity:.4}
.pp-ct-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:9px;vertical-align:baseline;flex:none}
/* continent subheads — a landing place every dozen rows, and five more real
   headings in the served HTML. They carry no data-k, so the crawlable row
   count is still exactly the number of countries. */
.pp-ctable tbody tr.pp-ct-group th{
  background:var(--pb-inset);color:var(--pb-muted);font-size:var(--pb-fs-caption);
  font-weight:700;letter-spacing:var(--pb-ls-kicker);text-transform:uppercase;
  padding-top:14px;padding-bottom:9px;border-bottom:1px solid var(--pb-border-strong);
}
.pp-ctable tbody tr.pp-ct-group:hover{background:transparent}
.pp-ct-groupn{color:var(--pb-faint);font-weight:600;letter-spacing:0;margin-left:6px}

/* A real link graph in the served HTML, since the nav and footer are fetched
   partials and most hubs build their content in JS. Visible to readers too — a
   directory shown only to crawlers would be cloaking. */
/* the directory is the last band before the footer — it needs air above it or
   it reads as a continuation of whatever section it follows */
.pp-sitestrip{padding-top:86px;padding-bottom:48px;border-top:1px solid var(--pb-border)}
@media (max-width:760px){.pp-sitestrip{padding-top:58px}}
.pp-ss-head{margin-top:10px}
.pp-ss-lead{margin-top:10px;max-width:56ch}
.pp-ss-group{margin-top:26px}
/* One ink per group, resolved from the four authored kind-ink tokens. The tile
   tint is that ink at 12%, so a group's mark and its wash always agree. */
.pp-ss-group[data-tone="intel"]{--ss-ink:var(--pb-kind-air-ink)}
.pp-ss-group[data-tone="plan"]{--ss-ink:var(--pb-accent-ink)}
.pp-ss-group[data-tone="book"]{--ss-ink:var(--pb-kind-do-ink)}
.pp-ss-group[data-tone="tools"]{--ss-ink:var(--pb-kind-ground-ink)}
.pp-ss-label{display:flex;align-items:center;gap:9px;font-size:var(--pb-fs-caption);font-weight:600;
  color:var(--ss-ink,var(--pb-muted));letter-spacing:var(--pb-ls-kicker);text-transform:uppercase;margin-bottom:11px}
.pp-ss-label::before{content:"";width:16px;height:2px;border-radius:2px;background:currentColor;flex:none}
/* align-items:start is what keeps a hovered card from dragging its neighbours
   about: without it every card stretches to the tallest in the row, so opening
   one re-centres the titles of the others. Each card sizes to its own content
   and the one being hovered grows downward alone. */
.pp-ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;align-items:start}
.pp-ss-card{
  display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto 0fr;gap:0 12px;
  padding:13px 15px;border-radius:var(--pb-r-card);border:1px solid var(--pb-border);
  background:var(--pb-surface);color:var(--pb-text);box-shadow:var(--pp-card-glow);
  transition:border-color var(--pp-t-ui) var(--pp-ease),grid-template-rows 220ms var(--pp-ease);
}
.pp-ss-ic{
  grid-row:1;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--ss-ink,var(--pb-accent-ink)) 12%, transparent);
  color:var(--ss-ink,var(--pb-accent-ink));flex:none;
}
.pp-ss-t{grid-row:1;align-self:center;font-size:var(--pb-fs-body-s);font-weight:600;line-height:1.3}
/* The description is always in the HTML — the row it sits in opens from 0fr to
   1fr. min-height:0 is what lets a grid row actually collapse to nothing. */
.pp-ss-d{
  grid-row:2;grid-column:2;overflow:hidden;min-height:0;
  font-size:var(--pb-fs-caption);color:var(--pb-muted);line-height:1.5;
  opacity:0;transition:opacity 180ms var(--pp-ease);
}
.pp-ss-card:hover,.pp-ss-card:focus-visible{
  border-color:color-mix(in srgb, var(--ss-ink,var(--pb-accent-ink)) 40%, transparent);
  grid-template-rows:auto 1fr}
.pp-ss-card:hover .pp-ss-d,.pp-ss-card:focus-visible .pp-ss-d{opacity:1;padding-top:7px}
/* No hover to reveal with — show every description outright rather than hiding
   content from touch readers that a desktop reader gets. */
@media (hover:none){
  .pp-ss-card{grid-template-rows:auto 1fr}
  .pp-ss-d{opacity:1;padding-top:7px}
}
@media (prefers-reduced-motion:reduce){
  .pp-ss-card{transition:border-color var(--pp-t-ui) var(--pp-ease)}
}
@media (max-width:520px){.pp-ss-grid{grid-template-columns:minmax(0,1fr)}}

/* ── the iOS zoom rule ────────────────────────────────────────────
   iOS Safari zooms the whole page when a field under 16px takes focus, and it
   does not zoom back out. --pb-fs-body is 13.5px and --pb-fs-body-s smaller
   still, so every field styled at body size drags the page up a level on tap
   and strands the reader there.

   THIS BLOCK IS LAST IN THE FILE ON PURPOSE. A media query adds no specificity,
   so source order decides — and .pp-input, .pp-select and the component fields
   are declared throughout the six hundred lines above. The same rule written up
   beside the booking bar lost to every one of them, which is how .pp-select
   stayed at 12.5px on a phone while a comment two hundred lines up said the bug
   was fixed.

   Only fields a phone TYPES into: a slider, a checkbox, a radio or a colour
   swatch does not trigger the zoom and is left at its designed size. */
@media (max-width:640px){
  .pp-input, .pp-select, select, textarea,
  .pp-bseg input, .gd-field input, .ds-field input, .cu-base select,
  input[type="text"], input[type="email"], input[type="search"],
  input[type="number"], input[type="tel"], input[type="url"],
  input[type="password"], input[type="date"], input[type="time"],
  input:not([type]){
    font-size:16px;
  }
  /* a 34px pill is too short for 16px text to sit in */
  .pp-select, .pp-input{min-height:40px}
}

/* An in-page action that reads as a link inside a sentence. It is a <button>,
   because it does not navigate — an <a href="#"> here is a dead CTA by this
   project's own rule, and a screen reader announces it as a link to nowhere. */
.pp-link-inline{
  background:none;border:0;padding:0;font:inherit;color:var(--pb-accent-ink);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.pp-link-inline:hover{text-decoration-thickness:2px}
.pp-link-inline:focus-visible{outline:2px solid var(--pb-accent);outline-offset:2px;border-radius:3px}

/* Things to do has no map: Viator sends no coordinate for a product (see the
   note above plottable() in pp-results.js), so the pane could only ever say so
   — under a header that promised dots. One column is the honest layout. */
.pp-split--listonly{grid-template-columns:minmax(0,1fr)}
.pp-split--listonly > .pp-split-map{display:none}

/* ── the results filter button, its sheet, and the applied row ───────────
   Appended at the foot on purpose: these override the .pp-filterbar block
   above, and in a stylesheet with no cascade layers source order is the only
   lever that reliably wins a tie. Same reason the iOS 16px field rule lives
   down here. */

/* .pp-pop anchors to the nearest positioned ancestor, and .pp-filterctl is a
   flex row with no position of its own. The button gets a wrapper rather than
   position:relative on the button itself — a positioned button makes the
   popover a child of its own anchor and inherits whatever overflow it grows. */
.pp-popanchor{position:relative;flex:none}
.pp-filterbtn{gap:8px}
.pp-filterbtn[aria-expanded="true"]{border-color:var(--pb-accent-border);color:var(--pb-accent-ink)}
.pp-filterbtn-ic{display:inline-flex;align-items:center}
.pp-filterbtn-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:var(--pb-r-pill);background:var(--pb-accent);color:var(--pb-accent-on);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
}
.pp-sortfield{display:inline-flex;align-items:center;gap:8px;min-width:0;flex:none}
.pp-pop--filters{min-width:min(360px,calc(100vw - var(--pp-gutter) * 2))}
.pp-popgroup + .pp-popgroup{margin-top:15px;padding-top:14px;border-top:1px solid var(--pb-border)}
.pp-popgroup-h{
  display:block;margin-bottom:9px;font-size:var(--pb-fs-kicker);font-weight:600;
  letter-spacing:var(--pb-ls-kicker);text-transform:uppercase;color:var(--pb-muted);
}
.pp-popgroup-chips{display:flex;flex-wrap:wrap;gap:8px}
/* The commit row is sticky INSIDE the panel: the neighbourhood group is as long
   as the city has neighbourhoods, and the count on that button is the thing you
   are reading while you tap. Negative margins match the panel's own padding. */
.pp-popfoot{
  position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:12px;
  margin:15px -14px -14px;padding:12px 14px;
  border-top:1px solid var(--pb-border);background:var(--pb-surface);
}
.pp-appliedrow{display:flex;align-items:center;gap:12px;margin-top:10px}
.pp-clearall{flex:none;font-size:12px;white-space:nowrap}

@media (max-width:900px){
  /* one row, and the applied rail only when something is applied */
  .pp-filterctl{margin-top:0;gap:8px;flex-wrap:nowrap;justify-content:flex-start}
  .pp-filterctl > *{min-width:0}
  /* "Sort" costs about 34px on a 390px screen and the select's own value
     already says which order it is in. The label stays in the DOM as the
     accessible name; aria-label on the select repeats it. */
  .pp-sortfield-lab{display:none}
  .pp-filterctl select{height:40px;padding-right:26px}
  .pp-viewtoggle button{padding:10px 13px}
  .pp-filterbtn{height:40px}
  /* the caption is a statement about the filter set, so on a phone it goes
     where the filter set is rather than costing two sticky lines */
  .pp-filternote{display:none}
}
@media (max-width:640px){
  .pp-pop.is-sheet .pp-popfoot{
    margin:15px calc(var(--pp-gutter) * -1) calc(-20px - env(safe-area-inset-bottom));
    padding:12px var(--pp-gutter) calc(12px + env(safe-area-inset-bottom));
  }
  .pp-pop.is-sheet .pp-chip{height:38px}
}

/* A scope switch, not a filter: it changes what we ask the partner for. Full
   width on a phone, because two options at 50% each are two unmissable targets
   where the same two as chips in a scrolling rail were two chips. */
.pp-shelfseg{flex:none}
@media (max-width:900px){
  .pp-shelfseg{display:flex;width:100%;margin-bottom:9px}
  .pp-shelfseg button{flex:1;justify-content:center;padding:10px 0;font-size:13px}
}

/* ── the sticky control row, sized so nothing gets crushed ───────────────
   Measured at 390px: the row was not overflowing, it was SQUEEZING. Every child
   carried min-width:0, so flexbox honoured the sort field's 173px and shrank the
   List/Grid toggle to 19px and the Map button to 41px — the toggle rendered as a
   single clipped "L". A control that has been compressed past its own label is
   worse than one that wrapped: it looks broken rather than tight.

   So the small controls are flex:none at their natural size, and the sort field
   is the only thing allowed to give. It has a <select>, which can ellipsize its
   own value; a segmented toggle cannot. */
.pp-filterctl .pp-popanchor,
.pp-filterctl .pp-viewtoggle,
.pp-filterctl .pp-mapbtn{flex:none}
.pp-filterctl .pp-sortfield{flex:1 1 auto;min-width:0}
.pp-filterctl .pp-sortfield select{width:100%;min-width:0;text-overflow:ellipsis}

@media (max-width:900px){
  /* The words "List" and "Grid" cost about 80px between them and the icons say
     the same thing. font-size:0 rather than display:none on the text, so the
     label is still the button's accessible name. */
  .pp-viewtoggle button{font-size:0;padding:10px 13px;position:relative}
  .pp-viewtoggle button::before{font-size:14px;line-height:1;display:block}
  #hrViewList::before,#trViewList::before{content:"\2630"}   /* ☰ rows */
  #hrViewGrid::before,#trViewGrid::before{content:"\25A6"}   /* ▦ grid */
}

@media (max-width:900px){
  /* The funnel and its count say "filters" without spending 52px on the word,
     and that width is what the sort field needs to show "Neighbourhood" rather
     than "Neighbo…". The label stays in the DOM as the accessible name, and
     aria-label on the button already spells out how many are applied. */
  .pp-filterbtn-lab{display:none}
  .pp-filterbtn{padding-inline:12px}
}

/* "Show more" under a results list. Centred and generous, because it is the
   only way to reach the other 900 hotels in a city and a reader has to see it
   without hunting. Hidden by default: the list decides when there is more. */
/* ── the city browser ────────────────────────────────────────────
   A continent row, a search, and a grid that starts small. Sits above the
   grid it filters, so the controls are the first thing read rather than the
   seven-hundredth card. */
.pp-citybrowse{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.pp-citybrowse-q{width:100%;max-width:420px;padding:11px 14px;border-radius:999px;
  font:inherit;border:1px solid var(--pb-border-strong);
  background:var(--pb-surface);color:var(--pb-text)}
.pp-citybrowse-q:focus-visible{outline:2px solid var(--pb-accent);outline-offset:1px}

.pp-morewrap{display:flex;justify-content:center;margin-top:24px}
.pp-morewrap[hidden]{display:none}
.pp-morewrap .pp-btn{min-width:min(320px,100%)}