/* HotelShift Connect — jump chip + menu styles.
 * Canonical in hotelshift-os/shared/; vendored into each app via sync.sh.
 *
 * Self-contained: every brand value has a literal fallback, so it renders
 * correctly in an app that hasn't adopted the design tokens yet AND picks up
 * the app's tokens where they exist. No build step, no dependencies. */

/* Shift power-mode: while Shift is held, every annotated place lights up so
 * the user can x-ray navigate. Uses `outline` (not `border`) so no layout shift. */
body.hs-shift-active [data-hs-place] {
  outline: 2px dashed rgba(240, 200, 69, .75);          /* var(--gold) tint */
  outline-offset: 2px;
  border-radius: 3px;
  transition: outline-color .12s ease;
}
body.hs-shift-active [data-hs-place]:hover {
  outline-color: var(--gold, #f0c845);
  outline-style: solid;
}

/* --- the chip (persistent, inline, right of the address) ------------------ */
.hs-jump__chip {
  position: static;                                     /* flows inline after the address */
  display: inline-flex; align-items: center; justify-content: center; gap: .28rem;
  vertical-align: middle;
  margin-left: .45rem;
  box-sizing: border-box;
  min-height: 26px;                                     /* ≥24px tap target (mobile DoD §3.8) */
  padding: .28rem .5rem;
  font-family: var(--font-display, 'Nunito Sans', 'Inter', system-ui, sans-serif);
  font-size: .7rem; font-weight: 700; line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #0f2d5a;
  background: rgba(240, 200, 69, .20);                  /* subdued gold at rest — calm on dense rows */
  border: 1px solid rgba(240, 200, 69, .5);
  border-radius: 999px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.hs-jump__chip:hover, .hs-jump__chip:focus-visible {
  background: var(--gold, #f0c845);                     /* full gold on hover/focus */
  border-color: var(--gold, #f0c845);
  box-shadow: 0 3px 10px rgba(15, 25, 42, .18);
  outline: 0;
}
.hs-jump__chip svg { display: block; flex: 0 0 auto; }
.hs-jump__chip-label { line-height: 1; }
/* Icon-only on phones to save row width (still ≥24px via padding); the
   aria-label keeps it accessible when the text is hidden. */
@media (max-width: 520px) { .hs-jump__chip-label { display: none; } }

@keyframes hs-jump-chip-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- the menu ------------------------------------------------------------- */
.hs-jump__menu {
  position: absolute;
  z-index: 2147483001;
  min-width: 260px; max-width: 340px;
  padding: .35rem;
  background: #fff; color: #16263f;
  border: 1px solid rgba(15, 45, 90, .12);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 25, 42, .22);
  font-family: var(--font-display, 'Nunito Sans', 'Inter', system-ui, sans-serif);
  animation: hs-jump-chip-in .14s ease-out;
}
.hs-jump__hdr {
  font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #6b7a90; padding: .45rem .6rem .15rem;
}
.hs-jump__ref {
  font-size: .78rem; font-weight: 600;
  color: #0f2d5a; padding: 0 .6rem .45rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-jump__item {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .5rem .6rem; border-radius: 8px;
  text-decoration: none; color: #16263f;
  font-family: inherit;
}
.hs-jump__item:hover { background: #f1f5fb; }
.hs-jump__stage {
  flex: 0 0 4.6rem; padding-top: .12rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8a97a8;
}
.hs-jump__name { font-weight: 600; font-size: .88rem; flex: 1 1 auto; }
.hs-jump__arrow { color: var(--accent, #0f2d5a); opacity: .55; font-size: .85rem; align-self: center; }

.hs-jump__sep { height: 1px; margin: .35rem .3rem; background: rgba(15, 45, 90, .10); }
.hs-jump__hub {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .6rem; border-radius: 8px; text-decoration: none;
  font-weight: 700; font-size: .78rem; color: var(--accent, #0f2d5a);
}
.hs-jump__hub:hover { background: #f1f5fb; }