.platform-select {
  --platform-select-height: 42px;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
}

.platform-select-native {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(-50%) !important;
}

.platform-select > .platform-select-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: var(--platform-select-height);
  padding: 9px 12px 9px 13px;
  color: #24354b;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.platform-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-select-chevron {
  justify-self: center;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #667386;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}

.platform-select.is-open > .platform-select-toggle {
  border-color: var(--ch-brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--ch-brand-blue-rgb), .13);
}

.platform-select.is-open .platform-select-chevron {
  transform: translateY(2px) rotate(225deg);
}

.platform-select > .platform-select-toggle:hover:not(:disabled) { border-color: #aeb9cb; background: #fcfdff; }
.platform-select > .platform-select-toggle:focus-visible { outline: 3px solid rgba(30, 107, 105, .28); outline-offset: 2px; }
.platform-select.is-placeholder .platform-select-value { color: #7a8493; font-weight: 500; }
.platform-select.is-disabled > .platform-select-toggle { color: #8791a1; background: #f5f7fa; cursor: not-allowed; box-shadow: none; }
.platform-select.is-invalid > .platform-select-toggle { border-color: #c43d50; box-shadow: 0 0 0 3px rgba(196, 61, 80, .12); }

.platform-select-menu {
  position: fixed;
  z-index: 2300;
  display: grid;
  gap: 3px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #17283e;
  border: 1px solid #dbe1ea;
  border-radius: 12px;
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  box-shadow: 0 18px 44px rgba(15, 28, 50, .18), 0 3px 10px rgba(15, 28, 50, .08);
}

.platform-select-menu[hidden] { display: none !important; }

.platform-select-option {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: inherit;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.platform-select-option:hover:not(:disabled),
.platform-select-option:focus-visible,
.platform-select-option.is-selected {
  color: #111d30;
  background: var(--ch-brand-soft);
  outline: none;
}

.platform-select-option:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--ch-brand-blue-rgb), .18); }
.platform-select-option:disabled { color: #a0a8b4; cursor: not-allowed; }
.platform-select-option.is-multiple {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.platform-select-check {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid #aeb8c8;
  border-radius: 5px;
  background: #fff;
}
.platform-select-option.is-multiple.is-selected .platform-select-check {
  border-color: var(--ch-brand-blue);
  background: var(--ch-brand-blue);
}
.platform-select-option.is-multiple.is-selected .platform-select-check::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}
.platform-select-option.is-add-action { margin-top: 4px; padding-top: 12px; color: var(--ch-brand-navy); border-top: 1px solid #e4e8ef; border-radius: 0 0 8px 8px; font-weight: 700; }
.platform-select-option.is-add-action:hover,
.platform-select-option.is-add-action:focus-visible { background: var(--ch-brand-canvas); }

.platform-select-group { display: grid; gap: 3px; }
.platform-select-group-label { padding: 8px 10px 3px; color: #7b8595; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }

.activity-filter .platform-select { min-width: 190px; flex: 1; }
.calendar-week-form .platform-select,
.schedule-week-picker .platform-select,
.team-week-picker .platform-select,
.workspace-admin-form .platform-select { width: 100%; }
.protocol-step-row.is-unresolved .platform-select > .platform-select-toggle { border-color: #d59a55; background: #fffaf2; }
.tool-fields .platform-select { width: 100%; min-width: 0; }
.tool-fields .platform-select > .platform-select-toggle { min-height: 45px; padding-inline: 9px; }

@media (max-width: 480px) {
  .activity-filter .platform-select { min-width: 100%; }
}

@media (hover: none), (pointer: coarse) {
  .platform-select > .platform-select-toggle,
  .platform-select-option { min-height: 44px; font-size: 16px; }
  .platform-select-menu { max-width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .platform-select > .platform-select-toggle,
  .platform-select-chevron { transition: none; }
}
