/* Workspace selects keep native labels, keyboard navigation and change events. */
@supports (appearance: base-select) {
  .app-shell select,
  .app-shell select::picker(select) {
    appearance: base-select;
  }

  .app-shell select {
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color var(--duration-fast), background-color var(--duration-fast);
  }

  .app-shell select:not(:disabled):hover {
    border-color: var(--color-border);
    background-color: var(--color-surface);
  }

  .app-shell select:open,
  .app-shell select:not(:disabled):open:hover {
    border-color: var(--color-border);
    border-bottom-color: transparent;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    background-color: var(--color-surface);
  }

  .app-shell select:focus:not(:focus-visible) { outline: none; }
  .app-shell select:focus-visible {
    outline: 2px solid var(--color-muted);
    outline-offset: 3px;
  }

  .app-shell select:disabled { cursor: default; }

  .app-shell select::picker-icon {
    content: "";
    width: 7px;
    height: 7px;
    margin: -4px 2px 0 auto;
    flex: none;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--color-muted);
    transform: rotate(45deg);
    transition: transform var(--duration-fast);
  }

  .app-shell select:open::picker-icon { transform: translateY(3px) rotate(225deg); }

  .app-shell select::picker(select) {
    /* Keep the picker below its control, sharing the same continuous outline. */
    position-area: bottom;
    position-try-fallbacks: none;
    inset: auto;
    width: anchor-size(width);
    box-sizing: border-box;
    margin: 0;
    padding: 5px;
    border: var(--border-subtle);
    border-top: 0;
    border-radius: 0 0 var(--radius-control) var(--radius-control);
    background: var(--color-surface);
    box-shadow: none;
    color: var(--color-navy);
    font: inherit;
    max-height: min(320px, 100%);
    overflow-y: auto;
    opacity: 0;
    transition: opacity var(--duration-fast), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
  }

  .app-shell select:open::picker(select) { opacity: 1; }

  @starting-style {
    .app-shell select:open::picker(select) { opacity: 0; }
  }

  .app-shell select option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    padding: 9px 11px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-navy);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--duration-fast);
  }

  .app-shell select option + option {
    margin-top: var(--space-1);
  }

  .app-shell select option:checked {
    background: var(--color-border);
    font-weight: 600;
  }

  .app-shell select option:hover,
  .app-shell select option:focus {
    background: var(--color-border);
    outline: none;
  }

  .app-shell select option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--color-primary);
    font-size: 13px;
  }

  .app-shell select option:disabled { color: var(--color-muted); cursor: default; }

  @media (prefers-reduced-motion: reduce) {
    .app-shell select,
    .app-shell select::picker-icon,
    .app-shell select::picker(select),
    .app-shell select option { transition: none; }
  }
}