/* HotelShift platform product-switcher — shared cross-app chrome.
   Canonical in hotelshift-os/shared/; vendored into each app via sync.sh
   (same model as the version-check: vendor a copy, no runtime coupling).

   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. */

/* ---- the switcher control (lives at the right of the brand bar) ---- */
.hs-switch {
  position: relative;
  margin-left: auto;                 /* push to the far right of the flex bar */
  font-family: var(--font-display, 'Nunito Sans', 'Inter', system-ui, sans-serif);
}
.hs-switch[open] { z-index: 60; }

.hs-switch__trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  list-style: none; cursor: pointer; user-select: none;
  padding: .32rem .6rem; border-radius: 7px;
  font-size: .85rem; font-weight: 600; line-height: 1;
  color: #e7edf6;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}
.hs-switch__trigger::-webkit-details-marker { display: none; }   /* hide native ▸ */
.hs-switch__trigger:hover { background: rgba(255, 255, 255, .16); }
.hs-switch__grid { display: block; }
.hs-switch__chev { transition: transform .15s ease; opacity: .85; }
.hs-switch[open] .hs-switch__chev { transform: rotate(180deg); }

/* ---- the dropdown menu ---- */
.hs-switch__menu {
  position: absolute; right: 0; top: calc(100% + .45rem);
  min-width: 270px; padding: .35rem;
  background: #fff; color: #0f2d5a;
  border: 1px solid rgba(15, 45, 90, .12);
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 25, 42, .22);
}
.hs-switch__hdr {
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #6b7a90; padding: .5rem .6rem .3rem;
}
.hs-switch__item {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .5rem .6rem; border-radius: 8px;
  text-decoration: none; color: #16263f;
}
.hs-switch__item:hover { background: #f1f5fb; }
.hs-switch__stage {
  flex: 0 0 4.6rem; padding-top: .12rem;
  /* micro-labels stay ≥10px at a 16px root — mobile-audit floor (shared/MOBILE.md) */
  font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8a97a8;
}
.hs-switch__name { font-weight: 600; font-size: .9rem; }
.hs-switch__badge {
  margin-left: auto; align-self: center;
  font-size: .63rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .42rem; border-radius: 999px; white-space: nowrap;
}
.hs-switch__badge--current { color: var(--accent, #0f2d5a); background: rgba(15, 45, 90, .10); }
.hs-switch__badge--live    { color: #0a7d3c; background: #e3f5ea; }   /* matches the hub "Live" */
.hs-switch__badge--soon,
.hs-switch__badge--roadmap { color: #8a97a8; background: #eef1f5; }
.hs-switch__item.is-current { background: #eef3fb; }
.hs-switch__item.is-current .hs-switch__name { color: #16263f; }      /* current item never dimmed */
.hs-switch__item.is-soon,
.hs-switch__item.is-roadmap { cursor: default; pointer-events: none; }
.hs-switch__item.is-soon:not(.is-current) .hs-switch__name,
.hs-switch__item.is-roadmap:not(.is-current) .hs-switch__name { color: #9aa6b6; }

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

/* ---- standalone bar: rendered only for apps with no existing .hs-platnav ---- */
.hs-platnav--auto {
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 1.25rem;
  background: var(--navy-900, #0f192a);
  border-bottom: 2px solid var(--gold, #f0c845);
}
.hs-platnav--auto .hs-platnav__wordmark {
  font-family: var(--font-display, 'Nunito Sans', 'Inter', sans-serif);
  font-weight: 800; font-size: 1.05rem; color: #fff; text-decoration: none;
}
.hs-platnav--auto .hs-platnav__wordmark .hs-shift { color: var(--gold, #f0c845); }
.hs-platnav--auto .hs-platnav__product {
  font-family: var(--font-display, 'Nunito Sans', 'Inter', sans-serif);
  font-weight: 600; font-size: .95rem; color: #c8d3e4;
  padding-left: .65rem; border-left: 1px solid rgba(255, 255, 255, .22);
}

@media (max-width: 520px) {
  .hs-switch__label { display: none; }   /* trigger collapses to grid + chevron */
}