/* Instructed Intelligence — suite switcher styling.
 *
 * Pairs with switcher.js. Every value is a var(--token) from tokens.css, so it themes
 * with the host app and needs no Tailwind, no build step and no per-app palette.
 *
 * Depends on .mark (ii-mark.css), .card, .chip and .eyebrow from components.css.
 *
 * GENERATED INTO EACH APP by brand/sync-brand-to-app.py — edit it here, not there.
 */

.ii-switcher { position: relative; }

.ii-switcher-trigger {
  display: flex; align-items: center; gap: .625rem;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: .375rem .625rem; margin-left: -.625rem; cursor: pointer;
  font: inherit; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  transition: background .15s, border-color .15s;
}
.ii-switcher-trigger:hover,
.ii-switcher-trigger[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line); }
.ii-switcher-name { color: var(--ink); }
.ii-switcher-caret { color: var(--faint); font-size: .625rem; }

/* Fixed and body-attached — see the note in switcher.js about sticky headers creating
   stacking contexts the menu cannot escape. Position is set from the trigger's rect. */
.ii-switcher-menu {
  position: fixed; z-index: 2147483000;
  width: 20rem; max-height: 70vh; overflow-y: auto;
  padding: .5rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-lift), var(--edge);
}
.ii-switcher-menu[hidden] { display: none; }
.ii-switcher-head { padding: .375rem .625rem .5rem; }

.ii-switcher-item {
  display: block; padding: .5rem .625rem; border-radius: 7px;
  text-decoration: none; color: inherit;
}
a.ii-switcher-item:hover { background: var(--surface-2); text-decoration: none; }
.ii-switcher-pname {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: var(--ink);
}
.ii-switcher-pblurb {
  display: block; font-size: .75rem; color: var(--faint); margin-top: .0625rem;
}
.ii-switcher-item .chip { font-size: .625rem; padding: .0625rem .375rem; color: var(--faint); }

/* The surface you are already on, and products with nowhere to go yet. Both are shown
   rather than hidden — an absent row makes the suite look smaller than it is. */
.ii-switcher-item.is-self { background: var(--primary-tint); }
.ii-switcher-item.is-self .ii-switcher-pname { color: var(--primary); }
.ii-switcher-item.is-dim { opacity: .5; cursor: default; }

.ii-switcher :where(a, button):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}