/* ═══════════════════════════════════════════════════════════════════
   THE PEARL EDITION — SHORTLIST PEEK

   The carry bar has two halves and they mean different things. Gold
   commits — it goes to Plan Your Trip. The dark half is the only place
   on the site where someone can check what they've collected without
   leaving the page they're reading. So it opens, it doesn't navigate.

   Phone: a sheet from the bottom edge. Desktop: a popover above the
   bar. One panel, one behaviour, two shapes.

   Opens on click only. Not hover — the bar sits over content on every
   page and a hover-open would fire while someone is reaching past it
   for a card underneath.

   Everything is .pk- namespaced and reads only from tokens.css. It
   never restyles .trip-bar, so the bar stays the bar.
═══════════════════════════════════════════════════════════════════ */

.pk-root{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  font-family:var(--sans); font-weight:300; color:var(--cream);
}
.pk-root[hidden]{ display:none; }

/* The bar stays lit above the scrim — it's the thing that was clicked,
   and on a phone it's also what the sheet is measured against. */
body.pk-open .trip-dock{ z-index:501; }

.pk-scrim{
  position:absolute; inset:0; background:rgba(26,22,18,.62);
  opacity:0; transition:opacity .38s ease; pointer-events:none;
}
.pk-root.is-open .pk-scrim{ opacity:1; pointer-events:auto; }

/* ── panel ─────────────────────────────────────────────────────── */
.pk-panel{
  position:absolute; display:flex; flex-direction:column;
  background:var(--ink); pointer-events:auto;
  box-shadow:0 18px 60px rgba(26,22,18,.5);
}
/* The panel takes focus on open so screen readers land inside it, but it
   is a container, not a control — tokens' global gold ring would draw a
   box around the whole sheet. */
.pk-panel:focus{ outline:none; }
.pk-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-shrink:0;
}
.pk-title{
  margin:0; font-family:var(--sans); font-size:10.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cream);
}
.pk-meta{ font-size:10.5px; color:var(--paper-mid); white-space:nowrap; }
.pk-close{
  background:none; border:0; padding:4px 2px; margin:-4px -2px;
  font:300 19px/1 var(--sans); color:var(--gold-dim); cursor:pointer;
  transition:color .25s ease;
}
.pk-close:hover{ color:var(--gold); }

.pk-scroll{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.pk-scroll::-webkit-scrollbar{ width:0; }

/* ── the list ──────────────────────────────────────────────────── */
.pk-grp{ padding:15px 0; }
.pk-grp:first-child{ padding-top:0; }
.pk-dest{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.pk-dest b{
  font-family:var(--sans); font-size:9.5px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.pk-nights{ font-size:10px; color:var(--paper-mid); white-space:nowrap; }

.pk-row{ display:flex; align-items:baseline; gap:12px; margin-top:10px; }
.pk-t{ font-size:13px; font-weight:300; line-height:1.45; color:var(--paper); }
.pk-m{
  margin-left:auto; flex:0 0 auto; font-size:9.5px; font-weight:300;
  letter-spacing:.08em; text-transform:uppercase; color:var(--paper-mid);
  white-space:nowrap;
}
.pk-row.is-empty .pk-t{ color:var(--paper-mid); font-style:normal; }

/* Same wording the plan page uses, so the two never drift: "about 3h to Ella". */
.pk-leg{
  display:flex; align-items:center; gap:10px;
  padding:4px 0 15px; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-dim); white-space:nowrap;
}
.pk-leg:before, .pk-leg:after{
  content:""; height:1px; background:var(--gold-soft); flex:1 1 auto;
}

.pk-empty{
  margin:0; padding:2px 0; font-size:12.5px; line-height:1.8;
  color:var(--paper-mid);
}

/* ── PHONE: sheet ──────────────────────────────────────────────── */
@media (max-width:767px){
  .pk-panel{
    left:0; right:0; bottom:0; max-height:62vh;
    border-radius:var(--r-soft) var(--r-soft) 0 0;
    border-top:1px solid var(--gold-soft);
    padding:14px 22px var(--pk-clear,96px);
    transform:translateY(102%);
    transition:transform .5s cubic-bezier(.16,1,.3,1);
    touch-action:pan-y;
  }
  .pk-root.is-open .pk-panel{ transform:translateY(0); }
  /* While a finger is on it the sheet tracks the finger exactly, so the
     transition has to be off or every frame fights the easing. */
  .pk-panel.is-dragging{ transition:none; }
  .pk-handle{
    width:32px; height:2px; margin:0 auto 15px; flex-shrink:0;
    background:var(--gold-dim); opacity:.55; border-radius:2px;
  }
  /* The grab area is the whole top strip, not the 2px line — a thumb
     reaching for a hairline misses. */
  .pk-grab{
    position:absolute; left:0; right:0; top:0; height:52px;
    z-index:1; pointer-events:none;
  }
  .pk-head{ padding-bottom:13px; }
  .pk-close{ display:none; }   /* the scrim, a swipe, and the bar all close it */
}

/* ── DESKTOP: popover above the bar ────────────────────────────── */
@media (min-width:768px){
  .pk-handle{ display:none; }
  .pk-panel{
    left:var(--pk-x,50%); bottom:var(--pk-y,96px); width:var(--pk-w,520px);
    max-height:52vh; padding:22px 26px;
    border:1px solid var(--gold-soft); border-radius:var(--r-soft);
    transform:translate(-50%,14px); opacity:0;
    transition:opacity .34s ease, transform .45s cubic-bezier(.16,1,.3,1);
  }
  .pk-root.is-open .pk-panel{ transform:translate(-50%,0); opacity:1; }
  .pk-panel:after{
    content:""; position:absolute; left:50%; bottom:-6px;
    width:11px; height:11px; background:var(--ink);
    border-right:1px solid var(--gold-soft);
    border-bottom:1px solid var(--gold-soft);
    transform:translateX(-50%) rotate(45deg);
  }
  .pk-head{ padding-bottom:16px; }
}

/* ── the trigger: the dark half of the bar ─────────────────────── */
/* renderBar() writes .trip-bar-t as a button now. Strip only the UA
   chrome — never the font. `font:inherit` here would beat tokens'
   .trip-bar-t on specificity and reset the size to the inherited 16px,
   which is how the bar text ended up twice its intended size. Leave
   font-family, size, weight and letter-spacing to tokens.css. */
button.trip-bar-t{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  color:inherit; text-align:left;
  -webkit-appearance:none; appearance:none;
}

.pk-chev{
  flex:0 0 auto; width:7px; height:7px; align-self:center; margin-left:9px;
  border-left:1px solid var(--gold); border-top:1px solid var(--gold);
  transform:rotate(45deg); opacity:.75;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),
             margin-bottom .4s cubic-bezier(.2,.8,.2,1);
}
[aria-expanded="true"] .pk-chev{ transform:rotate(-135deg); margin-bottom:-4px; }

@media (max-width:600px){ .pk-chev{ margin-left:7px; } }

@media (prefers-reduced-motion:reduce){
  .pk-scrim, .pk-panel, .pk-chev{ transition-duration:.01ms !important; }
}