/* Eto select: a custom menu over any native <select>. The native element stays in the DOM (hidden)
   so existing change handlers keep working; the trigger and menu below are what the user sees. */
.eto-select { position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; font-family: inherit; }
.eto-sel__native { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.eto-sel__trigger {
  --s-bg: var(--bg, #fff); --s-text: var(--text, #0a0a0a); --s-muted: var(--muted, rgba(10, 10, 10, 0.7)); --s-ring: var(--ring, #c8c8ce); --s-border: var(--border, #e1e1e5);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; height: 30px; padding: 0 8px 0 10px;
  border: 1px solid var(--s-ring); border-radius: 4px; background: var(--s-bg); color: var(--s-text); font: inherit; font-size: 13px; line-height: 1; text-align: left; cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.eto-sel__trigger:hover { border-color: var(--s-text); }
/* Page design layers commonly carry a blanket reset such as
   `.page-shell button { border: 0; background: none }`. That selector is one
   class plus one type, which outranks the single-class rule above, so the
   trigger silently loses its box and reads as bare text with a chevron until
   the pointer lands on it. Restating just the box one level deeper (two
   classes) puts it back everywhere without each page having to know. These are
   longhands on purpose: a page that genuinely restyles the trigger sets
   border-color/background at the same weight but later in the cascade, so its
   colours still win — only the "no border at all" case is corrected. */
.eto-sel > .eto-sel__trigger { border-width: 1px; border-style: solid; cursor: pointer; }
.eto-sel__trigger:focus-visible { outline: none; border-color: var(--s-text); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.16); }
.eto-sel.is-open .eto-sel__trigger { border-color: var(--s-text); }
.eto-sel.is-disabled .eto-sel__trigger { opacity: 0.5; cursor: not-allowed; }
.eto-sel__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eto-sel__label.is-placeholder { color: var(--s-muted); }
.eto-sel__chevron { flex: none; width: 12px; height: 12px; color: var(--s-muted); transition: transform 120ms ease; }
.eto-sel__chevron svg { width: 12px; height: 12px; display: block; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.eto-sel.is-open .eto-sel__chevron { transform: rotate(180deg); }
.eto-sel__menu {
  position: fixed; z-index: 11000; min-width: 180px; max-height: 320px; overflow-y: auto; padding: 4px 0; margin: 0;
  border: 1px solid var(--ring, #c8c8ce); border-radius: 4px; background: var(--surface-1, #fff); color: var(--text, #0a0a0a);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.12), 0 1px 2px rgba(10, 10, 10, 0.06); font-size: 13px;
  scrollbar-width: thin; scrollbar-color: var(--ring, #c8c8ce) transparent;
  opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease, transform 120ms ease;
}
.eto-sel__menu.is-in { opacity: 1; transform: translateY(0); }
.eto-sel__menu::-webkit-scrollbar { width: 10px; }
.eto-sel__menu::-webkit-scrollbar-thumb { background: var(--ring, #c8c8ce); border: 3px solid var(--surface-1, #fff); border-radius: 6px; }
.eto-sel__search { display: block; width: calc(100% - 12px); height: 30px; margin: 2px 6px 6px; padding: 0 10px; border: 1px solid var(--border, #e1e1e5); border-radius: 4px; background: var(--bg, #fff); color: var(--text, #0a0a0a); font: inherit; font-size: 13px; }
.eto-sel__search:focus { outline: none; border-color: var(--text, #0a0a0a); }
.eto-sel__group { padding: 8px 12px 4px; font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, rgba(10, 10, 10, 0.7)); }
.eto-sel__option { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 12px 6px 30px; position: relative; cursor: pointer; color: var(--text, #0a0a0a); white-space: normal; line-height: 1.35; }
.eto-sel__option.is-active { background: var(--surface-2, #f5f5f5); }
.eto-sel__option.is-selected::before { content: ""; position: absolute; left: 11px; top: 50%; width: 10px; height: 6px; border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-65%) rotate(-45deg); }
.eto-sel__option.is-selected { font-weight: 500; }
.eto-sel__option.is-disabled { color: var(--muted, rgba(10, 10, 10, 0.7)); opacity: 0.6; cursor: not-allowed; }
.eto-sel__option.is-placeholder { color: var(--muted, rgba(10, 10, 10, 0.7)); }
.eto-sel__empty { padding: 10px 12px; color: var(--muted, rgba(10, 10, 10, 0.7)); font-size: 12.5px; }
html:not([data-theme="light"]) .eto-sel__trigger:focus-visible { box-shadow: 0 0 0 3px rgba(244, 244, 245, 0.18); }
html:not([data-theme="light"]) .eto-sel__menu { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }