/* css/palette.css — ⌘K command palette + the header's Search all button that opens it (brand kit, light only) */

/* ── header: Search all (#paletteBtn), inside the search pill before the gold Search ──
   icon + label always; the key hint (⌘K / Ctrl K) only where a keyboard has it (js/palette.js);
   Where the bar is one row (1181-1799 px) the hint gives way so the field keeps its room (the tooltip
   and the coach tip still name the keys). On a phone the button leaves the crowded pill for the empty
   corner beside the brand, label and all. */
.sa-btn{
  flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px 0 11px; margin-inline-end:5px;
  border-radius:999px; border:1px solid rgba(184,133,46,.32); cursor:pointer;
  font:600 12.5px/1 var(--sans); color:var(--ink); white-space:nowrap;
  background:linear-gradient(180deg,#fff,#f5f8fd);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(58,86,130,.10), 0 3px 8px -4px rgba(58,86,130,.24);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
@media (min-width:1800px), (max-width:1180px), (max-height:640px){ .sa-btn:not(.sa-touch){padding-inline-end:7px} }
@media (min-width:1181px) and (max-width:1799px) and (min-height:641px){
  .sa-btn .sa-hint{display:none}
  .search input{min-width:120px}   /* app.css 150px: Search all takes 67px more than the old ⌘K chip */
}
.sa-ic{width:15px; height:15px; flex:none; fill:none; stroke:var(--gold-core); stroke-width:2; stroke-linecap:round}
.sa-hint{
  font:600 10.5px/1 var(--sans); color:var(--muted); letter-spacing:.02em; white-space:nowrap;
  background:#fff; border:1px solid var(--hair); border-bottom-width:2px; border-radius:6px; padding:3px 5px;
}
.sa-hint[hidden]{display:none}
.sa-btn:hover{border-color:var(--gold); background:linear-gradient(180deg,#fffdf6,#faf2de); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(58,86,130,.10), 0 8px 18px -8px rgba(184,133,46,.45)}
.sa-btn:hover .sa-hint{color:var(--gold-text); border-color:var(--gold)}
.sa-btn:active{transform:scale(.97)}
.sa-btn:focus-visible{outline:2px solid var(--gold-core); outline-offset:2px; border-radius:999px; box-shadow:0 0 0 5px rgba(246,213,115,.35)}
@media (pointer:coarse){ .sa-btn{position:relative} .sa-btn::before{content:""; position:absolute; inset:-7px -4px} }
@media (max-width:560px){
  /* .top (.glass, relative) is the containing block: the form gives up depth.css's `.glass > *` relative here
     (that only lifts it over the mouse-light ::after, which a phone never shows) */
  .top > .search{position:static}
  .top .sa-btn{position:absolute; z-index:2; top:8px; inset-inline-end:12px; margin:0; padding:0 13px 0 11px}
  .sa-btn .sa-hint{display:none}
  .sa-btn::before{inset:-5px -4px}   /* clear of the currency picker's slop below */
}
@media (prefers-reduced-motion:reduce){ .sa-btn{transition:none} .sa-btn:hover{transform:none} }

.hhp-veil{
  --hhp-ink:#0b1026; --hhp-muted:#56627e; --hhp-gold:#e8c26a; --hhp-gold-d:#b8852e; --hhp-gold-t:#7a4f0e;
  --hhp-sky:#e8f0fa; --hhp-line:rgba(58,86,130,.12);
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:max(9vh,56px) 16px 16px;
  background:rgba(58,86,130,.28);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .15s ease;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--hhp-ink);
}
.hhp-veil[hidden]{display:none}
.hhp-veil:not(.hhp-on){pointer-events:none}
.hhp-veil.hhp-on{opacity:1}

.hhp{
  position:relative; width:min(680px,92vw); max-height:70vh;
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:21px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(58,86,130,.08),
    0 2px 4px rgba(58,86,130,.10),
    0 24px 64px -12px rgba(58,86,130,.35);
  transform:scale(.96) translateY(-4px); transform-origin:50% 0;
  transition:transform .15s cubic-bezier(.2,.8,.2,1);
}
.hhp-on .hhp{transform:none}

/* scope: the header's "Heaven Homes | Worldwide" switch, mirrored */
.hhp-scope{display:flex; align-items:center; gap:10px; padding:15px 21px 0; flex:none}
.hhp-mode{display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:rgba(58,86,130,.07);
  box-shadow:inset 0 1px 2px rgba(58,86,130,.10), 0 1px 0 rgba(255,255,255,.9)}
.hhp-mode button{
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px 6px 10px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; font:600 12px/1 Inter,system-ui,sans-serif; color:var(--hhp-muted); white-space:nowrap;
  transition:background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.hhp-mode button svg{width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hhp-mode button:hover{color:var(--hhp-ink)}
.hhp-mode button[aria-pressed="true"]{background:#fff; color:var(--hhp-ink); box-shadow:0 1px 4px rgba(58,86,130,.25)}
.hhp-mode button[aria-pressed="true"] svg{color:var(--hhp-gold-d)}
.hhp-mode button:focus-visible{outline:2px solid var(--hhp-gold-d); outline-offset:1px}
.hhp-hint{
  display:flex; align-items:center; gap:13px; margin:6px 0 2px; padding:8px 13px; border-radius:13px;
  background:linear-gradient(90deg,rgba(232,194,106,.16),rgba(232,194,106,.03)); color:var(--hhp-gold-t);
  font:500 13px/1.3 Inter,system-ui,sans-serif;
}
.hhp-hint .hhp-ic{color:var(--hhp-gold-t)}
.hhp-esc{cursor:pointer}
.hhp-esc:hover{color:var(--hhp-gold-t); border-color:rgba(184,133,46,.4)}
.hhp::before{ /* gold top hairline */
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
  background:linear-gradient(90deg,rgba(242,215,140,0),#f2d78c 14%,#d3ab54 50%,#b8933f 86%,rgba(184,147,63,0));
}

/* search bar */
.hhp-bar{display:flex; align-items:center; gap:13px; padding:17px 21px 15px; border-bottom:1px solid var(--hhp-line); flex:none}
.hhp-lens{width:21px; height:21px; flex:none; color:var(--hhp-gold-d)}
.hhp-world .hhp-lens{color:var(--hhp-gold-t)}
.hhp-lens svg,.hhp-ic svg,.hhp-thumb svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.hhp-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:500 18px/1.3 Inter,system-ui,sans-serif; color:var(--hhp-ink); letter-spacing:-.01em;
}
.hhp-input::placeholder{color:#8a94ab; font-weight:400}

/* keycaps */
.hhp-k{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  font:600 10.5px/1 Inter,system-ui,sans-serif; color:var(--hhp-muted);
  background:linear-gradient(#fff,#f6f8fc); border:1px solid rgba(58,86,130,.16); border-bottom-width:2px;
  border-radius:6px; box-shadow:0 1px 1.5px rgba(58,86,130,.10);
}

/* list */
.hhp-list{overflow-y:auto; overscroll-behavior:contain; padding:5px 8px 8px; flex:1 1 auto; scroll-padding:8px}
/* css/luna-picks.css (loaded later) styles the globe's picks strip with the same .hhp-list / .hhp-txt names:
   its display:flex laid the palette's result groups out side by side, cut off at the right. Scoped back here. */
.hhp .hhp-list{display:block; gap:0; margin:0; min-width:0; overflow-x:hidden; scrollbar-width:auto; scroll-behavior:auto}
.hhp .hhp-txt{gap:2px}
.hhp .hhp-list::-webkit-scrollbar{display:block; width:8px}
.hhp-list::-webkit-scrollbar-thumb{background:rgba(58,86,130,.16); border-radius:8px; border:2px solid transparent; background-clip:content-box}
.hhp-group+.hhp-group{margin-top:3px; border-top:1px solid rgba(58,86,130,.07)}
.hhp-h{
  padding:10px 13px 4px;
  font:600 15px/1.1 "Cormorant Garamond",Georgia,serif; letter-spacing:.02em; color:var(--hhp-gold-t);
}
.hhp-opt{
  position:relative; display:flex; align-items:center; gap:13px;
  min-height:46px; padding:6px 13px; border-radius:13px; cursor:pointer;
  transition:background-color .08s ease;
}
.hhp-opt[aria-selected="true"]{background:rgba(232,194,106,.18)}
.hhp-opt[aria-selected="true"]::before{
  content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:3px; border-radius:3px;
  background:linear-gradient(#f2d78c,#d3ab54 50%,#b8933f);
}
.hhp-ic{
  width:32px; height:32px; flex:none; padding:7px; border-radius:10px; color:#3a5682;
  background:linear-gradient(#fff,var(--hhp-sky)); box-shadow:inset 0 0 0 1px rgba(58,86,130,.10), 0 1px 2px rgba(58,86,130,.08);
}
.hhp-opt[aria-selected="true"] .hhp-ic{color:var(--hhp-gold-t); background:linear-gradient(#fffdf4,#faf2de); box-shadow:inset 0 0 0 1px rgba(184,133,46,.25)}
.hhp-ic-luna{color:var(--hhp-gold-t) !important; background:radial-gradient(circle at 35% 30%,#fffdf4,#f6d573 55%,#e8c26a) !important; box-shadow:0 0 0 1px rgba(184,133,46,.3), 0 2px 8px -2px rgba(232,194,106,.8) !important}
.hhp-thumb{
  position:relative; width:44px; height:32px; flex:none; border-radius:8px; overflow:hidden; color:#8aa6c8;
  background:linear-gradient(135deg,#e8f0fa,#c8dcec); box-shadow:inset 0 0 0 1px rgba(58,86,130,.10);
}
.hhp-thumb svg{position:absolute; inset:7px 13px; width:18px; height:18px}
.hhp-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.hhp-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.hhp-l{font:500 14px/1.25 Inter,system-ui,sans-serif; color:var(--hhp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hhp-s{font:400 12px/1.25 Inter,system-ui,sans-serif; color:var(--hhp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hhp-ask{font-weight:600; color:var(--hhp-gold-t)}
.hhp mark{
  background:none; color:inherit; font-weight:650;
  text-decoration:underline; text-decoration-color:#d3ab54; text-decoration-thickness:2px; text-underline-offset:3px;
}
.hhp-meta{flex:none; font:500 11px/1 Inter,system-ui,sans-serif; color:#8a94ab}
.hhp-badge{flex:none; font:600 10px/1 Inter,system-ui,sans-serif; letter-spacing:.06em; color:var(--hhp-muted); padding:4px 6px; border-radius:6px; background:var(--hhp-sky)}
.hhp-enter{
  flex:none; display:none; width:22px; height:20px; align-items:center; justify-content:center;
  font:600 11px/1 Inter,sans-serif; color:var(--hhp-gold-t);
  background:#fff; border:1px solid rgba(184,133,46,.3); border-bottom-width:2px; border-radius:6px;
}
.hhp-opt[aria-selected="true"] .hhp-enter{display:inline-flex}
.hhp-opt[aria-selected="true"] .hhp-meta{display:none}
.hhp-empty{padding:34px 21px; text-align:center; color:var(--hhp-muted); font-size:13px}

/* footer */
.hhp-foot{
  flex:none; display:flex; align-items:center; gap:16px; padding:10px 21px;
  border-top:1px solid var(--hhp-line); background:linear-gradient(rgba(232,240,250,.35),rgba(232,240,250,.6));
  font:500 11.5px/1 Inter,system-ui,sans-serif; color:var(--hhp-muted);
}
.hhp-foot span{display:inline-flex; align-items:center; gap:4px}
.hhp-foot .hhp-brand{margin-inline-start:auto}
.hhp-touch .hhp-foot{display:none} /* no keys on a touch-only screen */
.hhp-live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

@media (max-width:520px){
  .hhp-veil{padding-top:16px}
  .hhp-scope{padding:13px 14px 0}
  .hhp-bar{padding:13px 16px 12px}
  .hhp-foot span:not(.hhp-brand):nth-child(n+2){display:none}
  .hhp-meta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hhp-veil,.hhp{transition:none}
  .hhp{transform:none}
}