/* Menus and popovers, Arc-style (piece 11, group b-navigation).
 *
 * One menu surface (Arc dropdown-menu, popover, context-menu): the raised
 * surface on a hairline, 12px corners, the floating shadow (floating layers
 * are the only place a shadow lives), 4px inset. Rows are 28px with 8px
 * corners (12 − 4, concentric), and one highlight glides under the row the
 * pointer or the keyboard is on (arc_menus.js places .oc-menu-glide). The
 * menu rises 4px from .97 on the spring; it leaves faster than it came.
 *
 * New markup uses .oc-menu / .oc-menu__item / .oc-menu__sep / .oc-popover.
 * The adapters below put the existing menus on the same surface without
 * template edits: language and theme menus (.lang-pop-menu), the user menu
 * in the sidebar footer (desktop popover only; the phone sheet keeps its
 * own), the analyst menus (.an-ctx__menu, .an-cov-more__menu, the playbook
 * menu, .anf-bio__pop), the case "More" menu (.cf-app__pop) and the Files
 * context menu (.finder-ctx). The chat pane menus and Helm belong to their
 * own piece and are not touched. Classic design keeps its menus.
 */

/* ---- Surface ---------------------------------------------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-menu, .oc-popover, .lang-pop-menu, #user-menu:not(.user-menu--sheet), .an-ctx__menu,
  .an-cov-more__menu, .an-playbook__menu, .anf-bio__pop, .cf-app__pop, .finder-ctx
) {
  background: var(--arc-surface-raised) !important;
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-radius-card) !important;
  box-shadow: var(--arc-shadow-floating) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-menu, .lang-pop-menu, #user-menu:not(.user-menu--sheet), .an-ctx__menu,
  .an-cov-more__menu, .an-playbook__menu, .cf-app__pop, .finder-ctx
) {
  padding: var(--arc-space-1) !important;
  min-width: 12rem;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-popover, .anf-bio__pop) {
  padding: var(--arc-space-3) !important;
  max-width: min(22rem, calc(100vw - 20px));
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) #user-menu:not(.user-menu--sheet) .user-menu-body {
  padding: 0 !important;
}

/* ---- Rows ------------------------------------------------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-menu__item, .lang-pop-menu .lang-pop-item, #user-menu:not(.user-menu--sheet) .user-menu-item,
  .an-ctx__menu > a, .an-ctx__menu button, .an-cov-more__menu > :is(button, label), .an-playbook__menu > :is(a, button),
  .cf-app__pop :is(button, a):not(.cf-inspect *, .cf-overview *), .finder-ctx .finder-ctx-item
) {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--arc-space-2);
  min-height: var(--arc-row) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px var(--arc-space-2) !important;
  border: 0 !important;
  border-radius: calc(var(--arc-radius-card) - 4px) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--arc-foreground) !important;
  font-size: var(--arc-text-sm) !important;
  font-weight: var(--arc-weight) !important;
  line-height: 1.3;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
  transition: color var(--arc-dur-fast) var(--arc-ease) !important;
  -webkit-tap-highlight-color: transparent;
}
/* The case More menu opens by its [hidden] attribute: never force it to show while hidden. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.an-ctx__menu, .an-cov-more__menu, .cf-app__pop:not([hidden])) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0 !important;
}
/* Without the script, rows still answer the pointer with a quiet tint. */
@media (hover: hover) and (pointer: fine) {
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :not(.oc-menu-arc) > :is(
    .oc-menu__item, .lang-pop-item, .user-menu-item, .finder-ctx-item):hover {
    background: var(--arc-hover) !important;
  }
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-menu__item, .lang-pop-item, .user-menu-item, .finder-ctx-item, .an-ctx__menu > *, .an-cov-more__menu > *,
  .cf-app__pop :is(button, a):not(.cf-inspect *, .cf-overview *), .an-playbook__menu > *):focus-visible {
  outline: 2px solid var(--arc-focus) !important;
  outline-offset: -2px;
}
/* The current choice (language, theme, pane) reads in full ink with its check. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.lang-pop-item, .cf-app__pop :is(button, a):not(.cf-inspect *, .cf-overview *)):is(.is-active, [aria-selected="true"], [aria-pressed="true"]) {
  font-weight: var(--arc-weight-strong) !important;
}
/* Icons and secondary text sit in secondary ink. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-menu__icon, .user-menu-item .menu-icon, .finder-ctx-item svg) {
  flex: none;
  color: var(--arc-text-secondary) !important;
  opacity: 1 !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-menu__hint, .user-menu-item .menu-kbd, .lang-pop-item .lp-sub, .finder-ctx-item .ctx-shortcut) {
  margin-left: auto;
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-2xs) !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .lang-pop-item .lp-sub { margin-left: 0; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .an-ctx__menu .an-playbook { margin: 0 !important; padding: 0 !important; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .an-ctx__menu button { width: 100%; justify-content: flex-start; }
/* Destructive rows say so in colour. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-menu__item--danger, #user-menu .user-menu-item.logout, .finder-ctx-item.danger, .an-cov-more__drop, .cf-app__pop .is-danger) {
  color: var(--arc-danger) !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(#user-menu .user-menu-item.logout, .finder-ctx-item.danger) :is(.menu-icon, .menu-label) {
  color: var(--arc-danger) !important;
}

/* ---- Separators ------------------------------------------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-menu__sep, #user-menu .user-menu-divider, .finder-ctx-sep, .cf-app__pop-rule) {
  height: 1px !important;
  margin: var(--arc-space-1) calc(var(--arc-space-1) * -1) !important;
  border: 0 !important;
  background: var(--arc-border-subtle) !important;
}

/* ---- The gliding highlight ------------------------------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-menu-arc.oc-menu--rel { position: relative; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-menu-glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: calc(var(--arc-radius-card) - 4px);
  background: var(--arc-selected);
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--arc-dur-fast) var(--arc-spring),
    height var(--arc-dur-fast) var(--arc-spring),
    width var(--arc-dur-fast) var(--arc-spring),
    opacity var(--arc-dur-instant) var(--arc-ease);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-menu-glide.is-on { opacity: 1; }
/* Keyboard moves jump; only the pointer glides. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-menu-glide.is-instant {
  transition: opacity var(--arc-dur-instant) var(--arc-ease);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-menu-glide.is-danger {
  background: var(--arc-danger-subtle);
}

/* ---- Enter and exit --------------------------------------------------
   Class-driven menus (OceanusPop / OcOverlay, the user menu): closed rests
   4px low at .97; open settles on the spring; closing is shorter and eases
   out. The older layers set these transitions with !important. */
/* uiarc.dev dropdown-menu: a menu starts 5px toward its trigger at .97
   (below a trigger it drops into place, above one it rises), fades in on
   the enter ease and settles on the spring; it leaves in 130ms, half the
   offset, at .985. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.lang-pop-menu, #user-menu:not(.user-menu--sheet)) {
  --arc-menu-off: -5px;
  --oc-ov-rise: -5px;
  --oc-ov-scale: .97;
  transition:
    opacity 130ms var(--arc-ease),
    transform 130ms var(--arc-ease),
    visibility 0s linear 130ms !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) #user-menu:not(.user-menu--sheet) { --arc-menu-off: 5px; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.lang-pop-menu, #user-menu:not(.user-menu--sheet)):not(.is-open):not(.open):not(.show):not(.oc-ov-open) {
  transform: translateY(var(--arc-menu-off)) scale(.97) !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.lang-pop-menu, #user-menu:not(.user-menu--sheet)):is(.is-open, .open, .show, .oc-ov-open) {
  transform: none !important;
  transition:
    opacity var(--arc-dur-fast) var(--arc-ease-enter),
    transform var(--arc-dur-smooth) var(--arc-spring),
    visibility 0s linear 0s !important;
}
/* Display-driven menus ([hidden], <details>, .show): they rise in from
   their first frame; the close is the display change itself. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .oc-menu, .oc-popover, details[open] > .an-ctx__menu, details[open] > .an-cov-more__menu,
  .an-playbook__menu:not([hidden]), .anf-bio__pop, .cf-app__pop:not([hidden]), .finder-ctx.show) {
  transition:
    opacity var(--arc-dur-fast) var(--arc-ease-enter),
    transform var(--arc-dur-smooth) var(--arc-spring) !important;
}
@starting-style {
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
    .oc-menu, .oc-popover, details[open] > .an-ctx__menu, details[open] > .an-cov-more__menu,
    .an-playbook__menu:not([hidden]), .anf-bio__pop, .cf-app__pop:not([hidden]), .finder-ctx.show) {
    opacity: 0;
    transform: translateY(-5px) scale(.97);
  }
}

/* ---- Dropdowns the pieces above do not own (2026-10-29) -----------------
   Search results and autocompletes, the watchlist ask, Messages' pops, the
   desk menus and suggestions, analyst popovers, chart_kit's menus: the same
   entrance, on the individual translate/scale properties so a popup that
   positions itself with transform keeps its place; a [hidden] close plays
   the short exit before display goes. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ind-menu, .mkt-search-results, .im-conv-menu, .wl-ask-pop, .ticker-ac-dropdown, #ticker-ac-dropdown,
  .sb-search-results, .desk-pane__menu, .im-mention-pop, .im-emoji-pop, .im-rx-pop, .desk-suggest, .un-pop-card,
  .persona-popover, .an-avatar-popover, .ck-dd-menu, .ck-ctx-menu, .ck-rail-flyout, .oc-ss-popup) {
  transition:
    opacity var(--arc-dur-fast) var(--arc-ease-enter),
    translate var(--arc-dur-smooth) var(--arc-spring),
    scale var(--arc-dur-smooth) var(--arc-spring),
    display 130ms allow-discrete,
    overlay 130ms allow-discrete;
}
@starting-style {
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ind-menu, .mkt-search-results, .im-conv-menu, .wl-ask-pop, .ticker-ac-dropdown, #ticker-ac-dropdown,
    .sb-search-results, .desk-pane__menu, .im-mention-pop, .im-emoji-pop, .im-rx-pop, .desk-suggest, .un-pop-card,
    .persona-popover, .an-avatar-popover, .ck-dd-menu, .ck-ctx-menu, .ck-rail-flyout, .oc-ss-popup) {
    opacity: 0;
    translate: 0 -5px;
    scale: .97;
  }
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ind-menu, .mkt-search-results, .im-conv-menu, .wl-ask-pop, .ticker-ac-dropdown, #ticker-ac-dropdown,
  .sb-search-results, .desk-pane__menu, .im-mention-pop, .im-emoji-pop, .im-rx-pop, .desk-suggest, .un-pop-card,
  .persona-popover, .an-avatar-popover, .ck-dd-menu, .ck-ctx-menu, .ck-rail-flyout, .oc-ss-popup)[hidden] {
  opacity: 0;
  translate: 0 -2.5px;
  scale: .985;
  transition:
    opacity 130ms var(--arc-ease),
    translate 130ms var(--arc-ease),
    scale 130ms var(--arc-ease),
    display 130ms allow-discrete,
    overlay 130ms allow-discrete;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ind-menu, .mkt-search-results, .im-conv-menu, .wl-ask-pop, .ticker-ac-dropdown, #ticker-ac-dropdown,
    .sb-search-results, .desk-pane__menu, .im-mention-pop, .im-emoji-pop, .im-rx-pop, .desk-suggest, .un-pop-card,
    .persona-popover, .an-avatar-popover, .ck-dd-menu, .ck-ctx-menu, .ck-rail-flyout, .oc-ss-popup) { transition: none; }
}

/* ---- Triggers anchor their menu: colour, not scale -------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
  .lang-pop-btn, .theme-toggle-btn, .user-menu-toggle, .cf-app__more, .an-ctx__more > summary, .an-cov-more > summary
):active {
  transform: none !important;
}

/* ---- Reduced motion: a quick fade, nothing moves ---------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(
    .oc-menu, .oc-popover, .lang-pop-menu, #user-menu, .an-ctx__menu, .an-cov-more__menu,
    .an-playbook__menu, .anf-bio__pop, .cf-app__pop, .finder-ctx) {
    transform: none !important;
  }
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-menu-glide { transition: none !important; }
}