/* ============================================================
   Helikona — App switcher
   The header eyebrow (CLIENT / MARKETING / BOOK / LEARN beside the
   logo) doubling as the control that moves between the apps.
   Pairs with ui/AppSwitcher.tsx; every class that component
   renders is defined here and nowhere else, so it looks the same
   whether or not the host runs Tailwind.

   Depends on tokens.css — import that first.

   Shipped unlayered, like buttons.css. Under Tailwind, wrap the
   import in `layer(components)` or `.hk-app-switcher-*` outranks
   every utility class site-wide:

     @import "@helikona/brand/app-switcher.css" layer(components);

   Every app's header bar is --deep-jungle in both themes, so
   nothing here flips with the theme and no light variant exists.
   The whites are alpha over that one ground, and are measured
   against it on the design system page.
   ============================================================ */

.hk-app-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ── The eyebrow ───────────────────────────────────────────────────
   One type ramp for both shapes the control takes — the plain link
   when there is one app, the button when there are more — so the
   switch from one to the other moves nothing. Mirrors the .eyebrow
   rule every app already carries. */
.hk-app-switcher-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  a.hk-app-switcher-eyebrow:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* The button strips its chrome and takes a pill on hover. Its padding
   is pulled back by an equal negative margin so the text sits exactly
   where the plain link's does — the eyebrow does not move when a
   second app appears. */
.hk-app-switcher-trigger {
  margin: 0 -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) {
  .hk-app-switcher-trigger:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
}
/* Open reads as hover held: the control the menu hangs from stays lit
   while the menu is up. */
.hk-app-switcher-trigger[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* ── The panel ─────────────────────────────────────────────────────
   Same field, border, corner and shadow as the account and support
   menus, anchored left instead of right because this one sits at the
   left of the bar. 12px corners rather than --radius-card (7px):
   the two menus it must match are drawn at 12px, and three menus in
   one bar have to read as one thing. */
.hk-app-switcher-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 30;
  width: 256px;
  overflow: hidden;
  background: var(--deep-jungle);
  border: 1px solid rgba(93, 196, 138, 0.18);
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* Reset the eyebrow's ramp for everything inside — the panel is
     sentence case at body size. */
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}
/* `hidden` must win over the positioned box above whatever the host's
   reset does with the attribute. */
.hk-app-switcher-panel[hidden] {
  display: none;
}

/* "Switch app" — the group label, in the shape of the "Admin" label in
   the account menu but at the eyebrow's own 55% white rather than that
   label's 40%: 40% measures 3.29:1 on this ground and 55% measures 4.83:1,
   which is the difference between failing and passing 4.5:1. The account
   menu's label should come up to match, not this one go down. */
.hk-app-switcher-heading {
  margin: 0;
  padding: 12px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Rows ──────────────────────────────────────────────────────────── */
.hk-app-switcher-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: background 0.18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) {
  .hk-app-switcher-row:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}
/* The current app: tinted, ticked, and marked `aria-current` — the
   tint alone would be colour-only state. */
.hk-app-switcher-row[aria-current="page"] {
  background: rgba(255, 255, 255, 0.06);
}
.hk-app-switcher-row-glyph,
.hk-app-switcher-row-tick {
  flex: none;
  margin-top: 2px;
  display: inline-flex;
}
.hk-app-switcher-row-tick {
  color: var(--leaf-light);
}
.hk-app-switcher-row-text {
  flex: 1;
  min-width: 0;
}
.hk-app-switcher-row-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.hk-app-switcher-row-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.55);
}

/* The account-menu variant (`AppSwitcherRows`): label beside the glyph
   on one line, no description, in whatever dark menu the host puts it. */
.hk-app-switcher-rows {
  font-family: var(--font-body);
}
.hk-app-switcher-row-compact {
  align-items: center;
  gap: 10px;
}
.hk-app-switcher-row-compact .hk-app-switcher-row-glyph {
  margin-top: 0;
}

/* ── Keyboard focus ────────────────────────────────────────────────
   The 2px ring at a 2px offset every control in buttons.css takes —
   but in --leaf-light, not --focus-ring. --focus-ring flips with the
   theme so it reads against the page; the bar this control sits on
   never flips, and in light mode --focus-ring is --jungle-mid, which
   would be green on deeper green. --leaf-light is the green drawn to
   sit on --deep-jungle, and measures 5.65:1 there.

   Rows draw theirs inset instead: the panel clips to its corners, and
   a ring outside the row would be cut off at both edges. */
.hk-app-switcher-eyebrow:focus-visible {
  outline: 2px solid var(--leaf-light);
  outline-offset: 2px;
}
.hk-app-switcher-row:focus-visible {
  outline: 2px solid var(--leaf-light);
  outline-offset: -2px;
}

/* ── Responsive ────────────────────────────────────────────────────
   Hidden below `sm`, as every app's eyebrow already is. The host
   repeats the other apps in its account menu at this width, with
   `AppSwitcherRows`, which this rule deliberately leaves alone. */
@media (max-width: 639px) {
  .hk-app-switcher {
    display: none;
  }
}