/*
 * FURIOSA PRODUCTS MENU  (shared component, v2026-09-19.2)
 *
 * The "Furiosa products" switcher, first built in Backstage's sidebar, used by every Furiosa
 * product and site so they read as one family. Copy products-menu.css + products-menu.js
 * VERBATIM (like suite-tokens.css, which must load first), and paste the markup from
 * products-menu.html, marking the current product with class "on" + "You are here".
 * Only --fs-* tokens are used, so it follows the suite colours automatically.
 *
 * Layout: a trigger button (grid-of-dots icon + optional label) and a popover panel. The panel
 * opens below the trigger by default; add class "fpm--up" on .fpm when the trigger sits at the
 * bottom of a sidebar, "fpm--end" to align it to the trigger's right edge (top nav bars).
 */
.fpm { position: relative; display: inline-block; font-family: var(--fs-font-body); }
.fpm-trigger {
  display: inline-flex; align-items: center; gap: var(--fs-s2);
  min-height: 40px; padding: 0 var(--fs-s3); border-radius: var(--fs-r-pill);
  border: 1px solid transparent; background: transparent; color: inherit;
  font: 600 .92rem/1 var(--fs-font-body); cursor: pointer;
  transition: background .15s var(--fs-ease), border-color .15s var(--fs-ease);
}
.fpm-trigger:hover, .fpm-trigger[aria-expanded="true"] { background: rgba(0, 176, 198, .12); border-color: var(--fs-dark-line); }
.fpm-trigger:focus-visible { outline: 2px solid var(--fs-teal); outline-offset: 2px; }
.fpm-trigger svg { width: 18px; height: 18px; flex: none; }
.fpm-trigger .fpm-label-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fpm-panel {
  position: absolute; z-index: 1000; top: calc(100% + var(--fs-s2)); left: 0;
  width: min(360px, calc(100vw - 32px)); padding: var(--fs-s3);
  background: var(--fs-white); color: var(--fs-text);
  border: 1px solid var(--fs-line); border-radius: var(--fs-r-md); box-shadow: var(--fs-shadow-lg);
}
.fpm-panel[hidden] { display: none; }
.fpm--end .fpm-panel { left: auto; right: 0; }
.fpm--up .fpm-panel { top: auto; bottom: calc(100% + var(--fs-s2)); }
.fpm-h { margin: var(--fs-s1) var(--fs-s2) var(--fs-s2); font: 700 .78rem/1.2 var(--fs-font-body); color: var(--fs-muted); letter-spacing: .02em; }
.fpm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fs-s1); }
.fpm-i {
  display: flex; align-items: center; gap: var(--fs-s3); padding: var(--fs-s2);
  border-radius: var(--fs-r-sm); text-decoration: none; color: inherit;
  transition: background .15s var(--fs-ease);
}
a.fpm-i:hover, a.fpm-i:focus-visible { background: var(--fs-teal-light); outline: none; }
.fpm-i.on { background: var(--fs-teal-light); }
.fpm-b {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font: 800 .72rem/1 var(--fs-font-display); letter-spacing: .02em; color: #fff; background: var(--fs-navy);
}
.fpm-b--crm { background: linear-gradient(128deg, var(--fs-navy-deep) 0%, var(--fs-navy) 60%, var(--fs-navy-light) 100%); }
.fpm-b--signal { background: linear-gradient(128deg, var(--fs-navy) 0%, var(--fs-teal-ink) 55%, var(--fs-btn) 100%); }  /* every stop >= 5.21:1 with white */
.fpm-b--backstage { background: linear-gradient(128deg, var(--fs-navy) 0%, var(--fs-teal-ink) 100%); }
.fpm-b--events { background: linear-gradient(128deg, var(--fs-teal-ink) 0%, var(--fs-btn) 100%); }
.fpm-b--group { background: var(--fs-white); border: 1px solid var(--fs-line); }
.fpm-b--group svg { width: 26px; height: 26px; }
.fpm-t { min-width: 0; display: grid; gap: 2px; }
.fpm-n { font: 700 .95rem/1.2 var(--fs-font-body); color: var(--fs-text); }
.fpm-d { font: 400 .8rem/1.3 var(--fs-font-body); color: var(--fs-muted); }
.fpm-go { margin-left: auto; flex: none; font: 600 .75rem/1 var(--fs-font-body); color: var(--fs-teal-ink); white-space: nowrap; }
.fpm-i.on .fpm-go { color: var(--fs-muted); }
.fpm-sep { height: 1px; margin: var(--fs-s2) var(--fs-s2); background: var(--fs-line); }

/* Trigger on dark surfaces (navy sidebars, dark hero navs) */
.fpm--on-dark .fpm-trigger { color: var(--fs-on-dark); }
.fpm--on-dark .fpm-trigger:hover, .fpm--on-dark .fpm-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }

@media (prefers-reduced-motion: reduce) { .fpm-trigger, .fpm-i { transition: none; } }