/* why: trigger reads as the bar's name link; chrome tokens so site and portal match, dark too.
   trap: byte-identical copy in the theme; phones show an icon in the person icon's slot.
   ref: bar is full at 360, so the chip cannot add a fourth control there. */
.mf-advchip-host { display: inline-flex; align-items: center; }
.mf-advchip { position: relative; display: inline-flex; align-items: center; font: 400 var(--t-14, .875rem)/1.5 var(--sans, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif); color: var(--ink-2, #414857); }
.mf-advchip__btn {
  display: inline-flex; align-items: center; gap: 2px; height: 32px; margin: 0; padding: 0 2px;
  font: inherit; color: inherit; background: none; border: 0; border-radius: var(--r-control, 4px); cursor: pointer; white-space: nowrap;
}
.mf-advchip__btn:hover, .mf-advchip.is-open .mf-advchip__btn { color: var(--ink, #161e2f); }
.mf-advchip__btn:hover .mf-advchip__txt { text-decoration: underline; text-underline-offset: 3px; }
.mf-advchip__btn:focus-visible, .mf-advchip__link:focus-visible { outline: 2px solid var(--accent-ink, #1d48c0); outline-offset: 2px; }
.mf-advchip__lbl { color: var(--ink-3, #5e6370); }
.mf-advchip__btn:hover .mf-advchip__lbl, .mf-advchip.is-open .mf-advchip__lbl { color: inherit; }
.mf-advchip__caret { display: block; flex: none; width: 16px; height: 16px; transition: transform .12s; }
.mf-advchip.is-open .mf-advchip__caret { transform: rotate(180deg); }
.mf-advchip__ic { display: none; }

.mf-advchip__pop {
  position: absolute; right: 0; top: calc(100% + var(--mf-advchip-drop, 8px)); z-index: 60; box-sizing: border-box; width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 96px); overflow-y: auto; padding: 4px 16px; text-align: left; white-space: normal;
  background: var(--bg, #fff); color: var(--ink, #161e2f); border: 1px solid var(--line-strong, #b2b7c2); border-radius: var(--r-container, 6px);
  box-shadow: 0 6px 20px rgba(15, 20, 30, .14);
}
.mf-advchip__pop[hidden] { display: none; }
.mf-advchip__card { padding: 14px 0; }
.mf-advchip__card + .mf-advchip__card { border-top: 1px solid var(--line, #d8dce6); }
.mf-advchip__name { margin: 0; font: 600 17px/1.25 var(--sans, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif); letter-spacing: 0; color: var(--ink, #161e2f); }
.mf-advchip__title { margin: 2px 0 0; font-size: 14px; color: var(--ink-3, #5e6370); }
.mf-advchip__spec { margin: 8px 0 0; font-size: 14px; font-weight: 500; }
.mf-advchip__blurb { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.mf-advchip__row { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 6px 0 0; font-size: 15px; }
.mf-advchip__row + .mf-advchip__row { margin-top: 0; }
.mf-advchip__k { flex: 0 0 52px; font-size: 14px; color: var(--ink-3, #5e6370); }
.mf-advchip__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-ink, #1d48c0); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .mf-advchip { position: static; }
  .mf-advchip__txt, .mf-advchip__caret { display: none; }
  .mf-advchip__btn { width: 36px; height: 36px; padding: 0; justify-content: center; color: var(--ink, #161e2f); }
  .mf-advchip__btn:hover, .mf-advchip.is-open .mf-advchip__btn { background: var(--tint, #eff2f9); }
  .mf-advchip__ic { display: block; width: 20px; height: 20px; }
  .member-pick:has(.mf-advchip-host) > .member-ic { display: none; }
  .mf-advchip__pop {
    position: fixed; left: 0; right: 0; top: var(--mf-advchip-top, 64px); width: auto; max-width: none;
    max-height: calc(100vh - var(--mf-advchip-top, 64px)); max-height: calc(100dvh - var(--mf-advchip-top, 64px));
    padding: 4px 16px 8px; border-width: 0 0 1px; border-radius: 0;
  }
}