/* css/luna-picks.css — Luna's picks on the globe (js/globe.js HHGlobe.picks).
   Light brand only: sky, white glass, gold, slate. Logical properties for RTL. */

/* the globe caption steps aside while her picks are shown */
.globe-wrap.hhp-on .globe-cap{visibility:hidden}

/* ── price chip above the best pin (lives on the globe's label layer) ── */
.hhp-price{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;z-index:500;
  display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 7px;border-radius:999px;
  font:700 11px/1 var(--sans,Inter,system-ui,sans-serif);letter-spacing:.01em;color:var(--gold-text,#7a4f0e);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,248,228,.95));border:1px solid rgba(232,194,106,.85);
  box-shadow:0 1px 1px rgba(58,86,130,.10),0 6px 16px rgba(58,86,130,.20),0 0 0 3px rgba(246,213,115,.18);
  transition:opacity .25s ease;will-change:transform,opacity}
.hhp-price .hhp-star{color:var(--gold-core,#b8852e);font-size:9px}

/* ── caption: the active home, light glass; the pins as numbered gold dots beneath ── */
/* the sphere lifts so the caption sits under it, overlapping only its lower rim */
#toolsSec .globe-wrap.hhp-on #globe,.globe-wrap.hhp-on #globe{bottom:42px}
@media (max-width:720px){
  #toolsSec .globe-wrap.hhp-on{height:372px}
  #toolsSec .globe-wrap.hhp-on #globe,.globe-wrap.hhp-on #globe{bottom:96px}
}
.hhp-cap{position:absolute;inset-inline:4px;inset-block-end:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main x" "list list";align-items:center;column-gap:2px;
  padding:3px 3px 5px;border-radius:16px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:0 1px 1px rgba(58,86,130,.08),0 10px 26px rgba(58,86,130,.18),inset 0 0 0 1px rgba(232,194,106,.22);
  animation:hhpIn .45s var(--ease-out,cubic-bezier(.2,.8,.2,1)) both}
.hhp-cap-main{grid-area:main;min-width:0;display:flex;align-items:center;gap:8px;padding:5px 8px 3px;border:0;border-radius:13px;background:none;
  cursor:pointer;text-align:start;color:var(--ink,#0b1026);font:inherit}
.hhp-cap-main:hover{background:rgba(255,248,228,.75)}
.hhp-cap-main:focus-visible,.hhp-x:focus-visible,.hhp-item:focus-visible{outline:2px solid var(--gold-core,#b8852e);outline-offset:1px}
.hhp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hhp-t{font-family:var(--serif,Georgia,serif);font-weight:700;font-size:15px;line-height:1.05;color:var(--ink,#0b1026);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhp-sub{display:flex;gap:6px;align-items:center;font-size:11px;line-height:1.2;color:var(--muted,#56627e);white-space:nowrap;overflow:hidden;min-width:0}
.hhp-city{overflow:hidden;text-overflow:ellipsis;min-width:0}
.hhp-pr{flex:none;color:var(--gold-text,#7a4f0e);font-weight:700;font-variant-numeric:tabular-nums}
.hhp-city:not(:empty)+.hhp-pr:not(:empty)::before{content:"·";color:var(--muted,#56627e);font-weight:400;margin-inline-end:6px}
.hhp-best{flex:none;font:700 8.5px/1 var(--sans,system-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text,#7a4f0e);
  padding:3px 6px;border-radius:999px;background:linear-gradient(180deg,#fff3c8,var(--gold-hi,#f6d573));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(232,194,106,.55)}   /* #7a4f0e on #f6d573 at worst: 4.97:1 (AA) */
.hhp-best[hidden]{display:none}
.hhp-go{flex:none;color:var(--gold-core,#b8852e);font-weight:700;transition:transform .2s}
.hhp-cap-main:hover .hhp-go{transform:translateX(2px)}
[dir=rtl] .hhp-go{transform:scaleX(-1)}[dir=rtl] .hhp-cap-main:hover .hhp-go{transform:scaleX(-1) translateX(2px)}
.hhp-x{grid-area:x;align-self:start;width:30px;height:30px;border:0;border-radius:11px;background:none;cursor:pointer;color:var(--muted,#56627e);font-size:18px;line-height:1}
.hhp-x:hover{background:rgba(232,194,106,.22);color:var(--gold-text,#7a4f0e)}
.hhp-cap.hhp-swap .hhp-txt{animation:hhpSwap .4s ease both}

.hhp-listwrap{grid-area:list;display:flex;align-items:center;gap:8px;min-width:0;padding-inline:8px 4px;border-block-start:1px solid rgba(58,86,130,.08);padding-block-start:4px;margin-block-start:2px}
.hhp-rank{flex:none;font:600 10px/1 var(--sans,system-ui);color:var(--muted,#56627e);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hhp-list{list-style:none;margin:0;padding:2px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;min-width:0;flex:1}
.hhp-li:first-child{margin-inline-start:auto}
.hhp-list::-webkit-scrollbar{display:none}
.hhp-li{flex:none;display:flex}
.hhp-item{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.hhp-n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 10px/1 var(--sans,system-ui);font-variant-numeric:tabular-nums;
  color:var(--gold-text,#7a4f0e);background:#fff;box-shadow:inset 0 0 0 1px rgba(184,133,46,.45),0 1px 2px rgba(58,86,130,.12);transition:transform .2s,background .2s,box-shadow .2s}
.hhp-item:hover .hhp-n{background:#fffdf4;box-shadow:inset 0 0 0 1px rgba(184,133,46,.8),0 2px 6px rgba(232,194,106,.35)}
.hhp-item[aria-current=true] .hhp-n{transform:scale(1.14);background:radial-gradient(circle at 35% 30%,#fffdf4,#f6d573 55%,#e8c26a);
  box-shadow:inset 0 0 0 1px rgba(184,133,46,.7),0 0 0 3px rgba(246,213,115,.3),0 3px 8px rgba(232,194,106,.45)}
.hhp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@keyframes hhpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hhpSwap{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}

/* coarse pointers: 44px targets */
@media (pointer:coarse){
  .hhp-item{width:44px;height:44px}
  .hhp-n{width:26px;height:26px;font-size:11.5px}
  .hhp-list{gap:0}
  .hhp-x{width:44px;height:44px}
  .hhp-cap-main{min-height:44px}
}
/* narrow panels: the badge gives way to the title */
@media (max-width:420px){ .hhp-t{font-size:17px} .hhp-sub{font-size:12px} }

/* reduced motion + quiet tiers: fades only */
@media (prefers-reduced-motion:reduce){
  .hhp-cap,.hhp-listwrap{animation:hhpFade .3s ease both}
  .hhp-cap.hhp-swap .hhp-txt{animation:hhpFade .3s ease both}
  .hhp-list{scroll-behavior:auto}
  .hhp-n{transition:none}
  .hhp-go,.hhp-cap-main:hover .hhp-go{transition:none;transform:none}
}
html[data-quality=static] .hhp-cap,html[data-quality=static] .hhp-listwrap,html[data-quality=static] .hhp-cap.hhp-swap .hhp-txt,
html[data-quality=low] .hhp-cap,html[data-quality=low] .hhp-listwrap{animation:hhpFade .3s ease both}
html[data-quality=static] .hhp-list{scroll-behavior:auto}
@keyframes hhpFade{from{opacity:0}to{opacity:1}}

/* ── the link "yes" would press, when she offered several (app.js markPrimary) ── */
.msg .links button.lk-primary{background:linear-gradient(180deg,#fff3c8,var(--gold-hi,#f6d573));color:var(--gold-text,#7a4f0e);
  box-shadow:inset 0 0 0 1px rgba(184,133,46,.55),0 2px 8px rgba(184,133,46,.22)}
.msg .links button.lk-primary::before{content:"✓";content:"✓" / "";margin-inline-end:4px;font-weight:800}

/* ── narrow screens: one chip back to the conversation after "Show on the map" (app.js backChip) ── */
/* centred: left/translate is direction-neutral */
.hh-back-luna{position:fixed;z-index:60;left:50%;inset-block-end:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(232,194,106,.85);cursor:pointer;
  font:700 14px/1 var(--sans,Inter,system-ui,sans-serif);color:var(--gold-text,#7a4f0e);
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:0 1px 1px rgba(58,86,130,.10),0 10px 26px rgba(58,86,130,.22);animation:hhBackIn .35s ease both}
@keyframes hhBackIn{from{opacity:0}to{opacity:1}}
.hh-back-luna:focus-visible{outline:3px solid var(--gold-core,#b8852e);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hh-back-luna{animation:none}}
html[data-quality=static] .hh-back-luna,html[data-quality=low] .hh-back-luna{animation:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}