/* Selects and pickers in Arc's manner (piece 8, group C; review §4.4, D9).
 *
 * 1. The portal select (arc_select.js): the native <select> stays in the
 *    form, visually hidden; .oc-select is the trigger (a field-shaped
 *    button: 32px, 28px dense, 8px radius, a chevron that turns on the
 *    spring; a press answers with colour because it anchors a popup) and
 *    .oc-select-menu the list (12px radius, floating shadow, 28px rows with
 *    8px concentric corners under one gliding highlight).
 * 2. Combobox: SearchSelect (.oc-ss, the org and team pickers on Admin)
 *    and the ticker pickers (Markets search, research ticker field,
 *    Watchlist add) take the same field and menu; their scripts are
 *    unchanged.
 * 3. Multi-select: Admin › Users team memberships read as Arc chips with
 *    an inline role select, a remove button and an "Add team" chip.
 */

/* ---- 1. The trigger ----------------------------------------------------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) select.oc-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arc-space-2);
  box-sizing: border-box;
  max-width: 100%;
  height: var(--arc-control-md);
  min-height: var(--arc-control-md);
  padding: 0 var(--arc-space-2) 0 var(--arc-space-3);
  border: 1px solid var(--arc-border-strong) !important;
  border-radius: var(--arc-radius-button) !important;
  background: var(--arc-surface) !important;
  color: var(--arc-foreground) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight);
  letter-spacing: var(--arc-tracking);
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: none !important;
  transition:
    border-color var(--arc-dur-fast) var(--arc-ease),
    background-color var(--arc-dur-fast) var(--arc-ease),
    box-shadow var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select.is-block { display: flex; width: 100%; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select:hover:not(:disabled, .is-open) {
    border-color: color-mix(in srgb, var(--arc-foreground) 34%, transparent) !important;
    background: color-mix(in srgb, var(--arc-surface) 100%, var(--arc-hover)) !important;
  }
}
/* An anchor of a popup answers a press with colour, never scale. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select:active:not(:disabled),
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select.is-open {
  border-color: color-mix(in srgb, var(--arc-foreground) 34%, transparent) !important;
  background: var(--arc-surface-muted) !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select:focus-visible {
  outline: none !important;
  border-color: var(--arc-accent) !important;
  box-shadow: none !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select[aria-invalid="true"] { border-color: var(--arc-danger) !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select:disabled {
  background: var(--arc-surface-muted) !important;
  color: var(--arc-text-secondary) !important;
  opacity: .6;
  cursor: not-allowed;
}

/* Dense containers (table cells, toolbars, filter strips): 28px. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(td, th, .ac-toolbar, .an-sessions__toolbar, .ar-toolbar, .cal-type-filters, .chat-toolbar, .ck-ohlc--toolbar, .dash-tl-toolbar, .filter-strip__bar, .finder-toolbar, .im-composer-toolbar, .mdl-toolbar, .md-toolbar, .mem-toolbar, .pp-toolbar, .pub-toolbar, .pw-activity-toolbar, .pw-cand-toolbar, .pw-claims-toolbar, .pw-notes-toolbar, .pw-th-toolbar, .pw-uni-toolbar, .research-filter-strip, .research-toolbar, .rl-toolbar, .scout-peer-toolbar, .sess-toolbar, .sx-toolbar, .thread-composer__md-toolbar, .thread-composer__toolbar, .tk-toolbar, .toolbar, .oc-dense, .au-chip, .au-addteam-form) button.oc-select {
  height: var(--arc-control-sm);
  min-height: var(--arc-control-sm);
  padding: 0 calc(var(--arc-space-1) + 2px) 0 calc(var(--arc-space-2) + 2px);
}
@media (pointer: coarse) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select {
    height: var(--arc-control-touch);
    min-height: var(--arc-control-touch);
    font-size: max(16px, var(--arc-text-lg));
  }
}

/* The value: every label stacked invisibly (the sizer) so the width never
   jumps; the shown value and a leaving one share the same cell. */
.oc-select__value {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
/* A trigger that sizes itself is as wide as its longest label (like the
   native select), so a shrink-to-fit table never collapses it. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select:not(.is-block) .oc-select__value { grid-template-columns: minmax(min-content, 1fr); }
.oc-select__sizer {
  display: grid;
  grid-area: 1 / 1;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
.oc-select__sizer > span { grid-area: 1 / 1; white-space: nowrap; }
.oc-select__text {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-select__text.is-placeholder { color: var(--arc-text-muted); }
.oc-select__text.is-in {
  animation: oc-select-value-in var(--arc-dur) var(--arc-ease-enter) both;
}
.oc-select__text.is-out {
  animation: oc-select-value-out var(--arc-dur-exit) var(--arc-ease-exit) both;
}
@keyframes oc-select-value-in {
  from { opacity: 0; transform: translateY(calc(var(--oc-dir, 1) * 70%)); filter: blur(2px); }
}
@keyframes oc-select-value-out {
  to { opacity: 0; transform: translateY(calc(var(--oc-dir, 1) * -60%)); filter: blur(2px); }
}
.oc-select__chev {
  flex: 0 0 auto;
  color: var(--arc-text-muted);
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) button.oc-select.is-open .oc-select__chev {
  transform: rotate(180deg);
  color: var(--arc-foreground);
}

/* ---- 1. The menu -------------------------------------------------------- */
.oc-select-menu {
  position: fixed;
  z-index: 10050;
  box-sizing: border-box;
  max-width: min(24rem, calc(100vw - 20px));
  padding: var(--arc-space-1);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  background: var(--arc-surface-raised);
  color: var(--arc-foreground);
  box-shadow: var(--arc-shadow-floating);
  font-family: inherit;
  font-size: var(--arc-text-sm);
  letter-spacing: var(--arc-tracking);
  transform-origin: top center;
  animation: oc-select-menu-in var(--arc-dur) var(--arc-ease-enter) both;
}
.oc-select-menu.is-up { transform-origin: bottom center; --oc-menu-y: 4px; }
.oc-select-menu.is-closing {
  pointer-events: none;
  animation: oc-select-menu-out var(--arc-dur-exit) var(--arc-ease-exit) both;
}
@keyframes oc-select-menu-in {
  from { opacity: 0; transform: translateY(var(--oc-menu-y, -4px)) scale(.97); }
}
@keyframes oc-select-menu-out {
  to { opacity: 0; transform: translateY(calc(var(--oc-menu-y, -4px) / 2)) scale(.98); }
}
.oc-select-menu__list {
  position: relative;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  scrollbar-width: thin;
}
.oc-select-menu__glide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 0;
  border-radius: calc(var(--arc-radius-card) - var(--arc-space-1));
  background: var(--arc-selected);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
}
.oc-select-menu__glide.is-on { opacity: 1; }
.oc-select-menu__glide.is-moving {
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    height var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur-fast) var(--arc-ease);
}
.oc-select-menu__opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--arc-space-2);
  min-height: var(--arc-row);
  padding: 0 var(--arc-space-8) 0 calc(var(--arc-space-2) + 2px);
  border-radius: calc(var(--arc-radius-card) - var(--arc-space-1));
  color: var(--arc-text-secondary);
  cursor: default;
  user-select: none;
  white-space: nowrap;
  transition: color var(--arc-dur-instant) var(--arc-ease);
}
.oc-select-menu__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oc-select-menu__opt.is-active,
.oc-select-menu__opt[aria-selected="true"] { color: var(--arc-foreground); }
.oc-select-menu__opt[aria-selected="true"] { font-weight: var(--arc-weight-strong); }
.oc-select-menu__opt.is-placeholder { color: var(--arc-text-muted); }
.oc-select-menu__opt[aria-disabled="true"] { opacity: .45; }
.oc-select-menu__check {
  position: absolute;
  right: var(--arc-space-2);
  color: var(--arc-accent);
  animation: oc-select-check-in var(--arc-dur) var(--arc-ease-enter) 40ms both;
}
@keyframes oc-select-check-in { from { opacity: 0; transform: scale(.6); } }
.oc-select-menu__group {
  position: relative;
  z-index: 1;
  padding: var(--arc-space-2) calc(var(--arc-space-2) + 2px) var(--arc-space-1);
  color: var(--arc-text-muted);
  font-size: var(--arc-text-xs);
}
@media (pointer: coarse) {
  .oc-select-menu__opt { min-height: var(--arc-control-touch); font-size: max(16px, var(--arc-text-lg)); }
}

/* ---- 2. Combobox: SearchSelect ------------------------------------------ */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss:not(:is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  box-sizing: border-box;
  height: var(--arc-control-md);
  min-height: var(--arc-control-md);
  border: 1px solid var(--arc-border-strong) !important;
  border-radius: var(--arc-radius-button) !important;
  background: var(--arc-surface) !important;
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
  box-shadow: none !important;
  transition:
    border-color var(--arc-dur-fast) var(--arc-ease),
    box-shadow var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(td, th, .ac-toolbar, .an-sessions__toolbar, .ar-toolbar, .cal-type-filters, .chat-toolbar, .ck-ohlc--toolbar, .dash-tl-toolbar, .filter-strip__bar, .finder-toolbar, .im-composer-toolbar, .mdl-toolbar, .md-toolbar, .mem-toolbar, .pp-toolbar, .pub-toolbar, .pw-activity-toolbar, .pw-cand-toolbar, .pw-claims-toolbar, .pw-notes-toolbar, .pw-th-toolbar, .pw-uni-toolbar, .research-filter-strip, .research-toolbar, .rl-toolbar, .scout-peer-toolbar, .sess-toolbar, .sx-toolbar, .thread-composer__md-toolbar, .thread-composer__toolbar, .tk-toolbar, .toolbar, .oc-dense, .au-addteam-form) .oc-ss:not(:is(.page-pmos, .pmos, .pmos-doc, .pmos-sheet, .pmos-panel, .pmos-chip, .pmos-thesis, .pmos-sub, .pmos-meta, .pmos-foot, .pmos-flash, .pmos-eyebrow, .pmos-brick) *) {
  height: var(--arc-control-sm);
  min-height: var(--arc-control-sm);
}
@media (hover: hover) and (pointer: fine) {
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss:hover:not(:focus-within, .open) {
    border-color: color-mix(in srgb, var(--arc-foreground) 34%, transparent) !important;
  }
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss:is(:focus-within, .open) {
  border-color: var(--arc-accent) !important;
  box-shadow: none !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss .oc-ss-input {
  height: 100%;
  padding: 0 var(--arc-space-1) 0 calc(var(--arc-space-2) + 2px);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--arc-foreground);
  font-size: var(--arc-text-sm);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss .oc-ss-input::placeholder { color: var(--arc-text-muted); opacity: 1; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss .oc-ss-clear {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: var(--arc-radius-chip);
  color: var(--arc-text-muted);
  transition: background-color var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss .oc-ss-clear:hover { background: var(--arc-hover); color: var(--arc-foreground); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss .oc-ss-chev {
  color: var(--arc-text-muted);
  transition: transform var(--arc-dur-morph) var(--arc-spring);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss.open .oc-ss-chev { transform: rotate(180deg); }

/* ---- 2. Picker menus: SearchSelect popup and the ticker pickers -------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-ss-popup, .mkt-search-results, #ticker-ac-dropdown, #wl-add-results) {
  box-sizing: border-box;
  padding: var(--arc-space-1);
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-radius-card) !important;
  background: var(--arc-surface-raised) !important;
  color: var(--arc-foreground);
  box-shadow: var(--arc-shadow-floating) !important;
  font-size: var(--arc-text-sm);
  overscroll-behavior: contain;
  backdrop-filter: none;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-ss-popup, .mkt-search-results, #ticker-ac-dropdown, #wl-add-results):not([hidden]) {
  animation: oc-select-menu-in var(--arc-dur) var(--arc-ease-enter) both;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-ss-popup .oc-ss-opt, .mkt-search-results .res, #ticker-ac-dropdown .ticker-ac-item, #wl-add-results .wl-add-res) {
  box-sizing: border-box;
  min-height: var(--arc-row);
  padding-block: var(--arc-space-1);
  padding-inline: calc(var(--arc-space-2) + 2px);
  border: 0 !important;
  border-radius: calc(var(--arc-radius-card) - var(--arc-space-1)) !important;
  background: transparent;
  color: var(--arc-text-secondary);
  align-items: center;
  transition: background-color var(--arc-dur-instant) var(--arc-ease), color var(--arc-dur-instant) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-ss-popup .oc-ss-opt:is(:hover, .hover), .mkt-search-results .res:is(:hover, .active), #ticker-ac-dropdown .ticker-ac-item:is(:hover, .is-active), #wl-add-results .wl-add-res:is(:hover, .is-active, :focus-visible)) {
  background: var(--arc-selected) !important;
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss-popup .oc-ss-opt.selected {
  background: var(--arc-accent-subtle) !important;
  color: var(--arc-foreground);
  font-weight: var(--arc-weight-strong);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss-popup .oc-ss-opt mark {
  background: var(--arc-accent-subtle);
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-ss-popup .oc-ss-sub, .oc-ss-popup .oc-ss-empty, .oc-ss-popup .oc-ss-more) {
  color: var(--arc-text-muted);
  font-style: normal;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss-popup .oc-ss-more { border-top: 1px solid var(--arc-border-subtle); }

/* ---- 3. Multi-select chips: Admin › Users team memberships --------------- */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chips { gap: var(--arc-space-1); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip {
  gap: var(--arc-space-1);
  min-height: var(--arc-control-sm);
  padding: 0 2px 0 var(--arc-space-2);
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-radius-chip) !important;
  background: var(--arc-surface-muted) !important;
  font-size: var(--arc-text-xs);
  line-height: 1.3;
  animation: oc-chip-in var(--arc-dur) var(--arc-ease-enter) both;
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
}
@keyframes oc-chip-in { from { opacity: 0; transform: scale(.94); } }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip .ch-name { color: var(--arc-foreground); font-weight: var(--arc-weight-strong); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip .ch-org { color: var(--arc-text-muted); font-size: var(--arc-text-2xs); }
/* The role select inside a chip sits flat on the chip. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip button.oc-select {
  height: 22px;
  min-height: 22px;
  padding: 0 2px 0 var(--arc-space-1);
  border-color: transparent !important;
  background: transparent !important;
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-xs);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip button.oc-select:hover { background: var(--arc-hover) !important; border-color: transparent !important; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip button.oc-select .oc-select__chev { width: 12px; height: 12px; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip :is(.ch-x, button.ch-x) {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--arc-radius-chip) - 2px);
  background: transparent;
  color: var(--arc-text-muted);
  font: inherit;
  font-size: var(--arc-text-md);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip :is(.ch-x, button.ch-x):hover { background: var(--arc-danger-subtle); color: var(--arc-danger); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip :is(.ch-x, button.ch-x):focus-visible { outline: 2px solid var(--arc-focus); outline-offset: 0; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-chip.busy { opacity: .5; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-addteam .au-addteam-btn {
  white-space: nowrap;
  min-height: var(--arc-control-sm);
  padding: 0 var(--arc-space-2);
  border: 1px dashed var(--arc-border-strong) !important;
  border-radius: var(--arc-radius-chip) !important;
  background: transparent !important;
  color: var(--arc-text-secondary) !important;
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight-strong);
  transition: border-color var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease), background-color var(--arc-dur-fast) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-addteam .au-addteam-btn:hover {
  border-color: var(--arc-accent) !important;
  background: var(--arc-hover) !important;
  color: var(--arc-foreground) !important;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-addteam-form {
  display: inline-flex;
  align-items: center;
  gap: var(--arc-space-1);
  animation: oc-chip-in var(--arc-dur) var(--arc-ease-enter) both;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-addteam.collapsed .au-addteam-form { display: none; }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .au-addteam-form .oc-ss { min-width: 150px; }

@media (prefers-reduced-motion: reduce) {
  .oc-select-menu, .oc-select-menu.is-closing,
  .oc-select__text.is-in, .oc-select__text.is-out,
  .oc-select-menu__check,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.oc-ss-popup, .mkt-search-results, #ticker-ac-dropdown, #wl-add-results):not([hidden]),
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.au-chip, .au-addteam-form) {
    animation: none;
  }
  .oc-select__chev, .oc-select-menu__glide, .oc-select-menu__glide.is-moving,
  html body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-ss .oc-ss-chev {
    transition: none;
  }
}