/* OSkill single-value selects. Native semantics and popup lifecycle remain browser-owned.
   Lucide shapes: icons.mjs / icons-source.json / Lucide-LICENSE.txt. */
select.ds-select:not([multiple]):where(:not([size]),[size="1"]) {
  --select-surface: var(--ds-surface,var(--surface,#fff));
  --select-ink: var(--ds-ink,var(--ink,#211a35));
  --select-line: var(--ds-control-line,var(--control-line,#8d859a));
  --select-brand: var(--ds-brand,var(--brand,#6a3cff));
  --select-soft: var(--ds-soft,var(--soft,#f0ebff));
  appearance: none;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 48px;
  block-size: auto;
  border: 1px solid var(--select-line);
  border-radius: var(--ds-radius-sm,12px);
  padding-block: 11px;
  padding-inline: 14px 46px;
  background-color: var(--select-surface);
  background-image: url('./select-chevron.svg');
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: right 14px center;
  color: var(--select-ink);
  font-family: inherit;
  font-size: max(1rem,calc(16px * var(--scale,var(--text-scale,1))));
  font-weight: 500;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms ease,box-shadow 140ms ease,background-color 140ms ease;
}
select.ds-select:not([multiple]):where(:not([size]),[size="1"]):dir(rtl) {background-position:left 14px center}
select.ds-select:not([multiple]):where(:not([size]),[size="1"]):hover:not(:disabled) {border-color:var(--select-brand)}
select.ds-select:not([multiple]):where(:not([size]),[size="1"]):focus-visible {
  border-color:var(--select-brand);
  outline:2px solid var(--select-brand);
  outline-offset:3px;
}
select.ds-select:not([multiple]):where(:not([size]),[size="1"]):disabled {
  cursor:not-allowed;
  background-color:var(--ds-canvas,var(--canvas,#faf9f5));
  opacity:.62;
}
select.ds-select:not([multiple]):where(:not([size]),[size="1"])[aria-invalid="true"] {border-color:var(--ds-error,#b44040)}

/* Supporting browsers use their native top-layer, anchored picker. No duplicated values,
   JS focus trap or synthetic form events; unsupported browsers retain their own picker. */
@supports (appearance: base-select) and selector(select::picker(select)) {
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]),
  select.ds-select:not([multiple]):where(:not([size]),[size="1"])::picker(select) {appearance:base-select}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) {
    background-image:none;
    padding-inline:14px;
    align-items:center;
    gap:12px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]):open {
    border-color:var(--select-brand);
    box-shadow:0 2px 8px color-mix(in srgb,var(--select-brand) 8%,transparent);
  }
  select.ds-select:not([multiple]):where(:not([size]),[size="1"])::picker-icon {
    content:"";
    flex:0 0 18px;
    inline-size:18px;
    block-size:18px;
    margin-inline-start:auto;
    background-color:currentColor;
    color:var(--ds-muted,var(--select-ink));
    mask:url('./select-chevron.svg') center / contain no-repeat;
    transition:rotate 140ms ease;
  }
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]):open::picker-icon {rotate:180deg;color:var(--select-brand)}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"])::picker(select) {
    box-sizing:border-box;
    min-inline-size:anchor-size(inline);
    max-inline-size:calc(100vw - 24px);
    max-block-size:min(360px,60dvh);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding:6px;
    margin-block:8px;
    border:1px solid var(--ds-line,var(--select-line));
    border-radius:16px;
    background:var(--select-surface);
    color:var(--select-ink);
    box-shadow:0 4px 12px #211a3508,0 16px 40px #211a3514;
    font:inherit;
  }
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) option {
    min-block-size:48px;
    box-sizing:border-box;
    padding:10px 12px;
    margin:0;
    border:0;
    border-radius:10px;
    gap:12px;
    align-items:center;
    background:transparent;
    color:inherit;
    font-family:var(--ds-font-ui,inherit);
    font-size:inherit;
    line-height:var(--ds-control-leading,1.5);
    font-weight:400;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:start;
    cursor:pointer;
  }
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) option:checked {background:color-mix(in srgb,var(--select-brand) 7%,var(--select-surface));color:var(--ds-brand-ink,var(--select-ink));font-weight:500}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) option:hover:not(:disabled) {background:color-mix(in srgb,var(--select-brand) 5%,var(--select-surface))}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) option:focus-visible {outline:2px solid var(--select-brand);outline-offset:-2px;background:var(--select-soft)}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) option:disabled {opacity:.55;cursor:not-allowed}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) option::checkmark {
    content:"";
    order:1;
    margin-inline-start:auto;
    flex:0 0 18px;
    inline-size:18px;
    block-size:18px;
    background-color:currentColor;
    mask:url('./select-check.svg') center / contain no-repeat;
  }
  /* A short header trigger should not squeeze a multilingual list. Option rows
     follow the owning UI direction; lang still owns the label's script/font. */
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"])::picker(select) {
    min-inline-size:min(15rem,calc(100vw - 24px));
    inline-size:max(anchor-size(inline),15rem);
  }
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) option {
    direction:inherit;
    text-align:start;
    padding-inline:14px;
  }
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) optgroup {font-weight:600;padding-block:6px}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) optgroup::legend {padding:8px 12px;font-size:.875em;color:var(--ds-muted,var(--muted,#746d83))}
}
@media (prefers-reduced-motion:reduce) {
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) {transition:none}
  @supports (appearance: base-select) and selector(select::picker(select)) {
    select.ds-select:not([multiple]):where(:not([size]),[size="1"])::picker-icon {transition:none}
  }
}
/* Quiet Header: one native control, with compact chrome and readable language rows.
   Language controls opt in; native form identity stays intact. */
select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) {
  min-block-size:44px;
  padding-block:8px;
  padding-inline:38px 30px;
  border-color:var(--ds-line,var(--select-line));
  background-image:url('./select-globe.svg'),url('./select-chevron.svg');
  background-size:17px 17px,14px 14px;
  background-position:left 12px center,right 10px center;
  font-size:max(.875rem,calc(14px * var(--scale,var(--text-scale,1))));
  line-height:var(--ds-control-leading,1.5);
}
select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]):dir(rtl) {background-position:right 12px center,left 10px center}
@supports (appearance:base-select) and selector(select::picker(select)) {
  select.ds-select[data-select-kind="language"]:has(> .ds-language-button):not([multiple]):where(:not([size]),[size="1"]) {
    background-image:none;
    padding-inline:12px;
    gap:8px;
  }
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) > .ds-language-button {display:contents}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) > .ds-language-button > .ds-icon {inline-size:17px;block-size:17px;flex:0 0 17px;color:var(--ds-muted)}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) selectedcontent {min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) selectedcontent .ds-language-option {display:block}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) selectedcontent .ds-language-native {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;font-weight:500}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) selectedcontent .ds-language-secondary {display:none}
  select.ds-select[data-select-kind="language"]:has(> .ds-language-button):not([multiple]):where(:not([size]),[size="1"])::picker-icon {inline-size:14px;block-size:14px;flex-basis:14px}
  select.ds-select[data-select-kind="language"]:has(> .ds-language-button):not([multiple]):where(:not([size]),[size="1"])::picker(select) {
    inline-size:max(anchor-size(inline),17rem);
    min-inline-size:min(17rem,calc(100vw - 24px));
    max-block-size:min(370px,65dvh);
  }
  select.ds-select[data-select-kind="language"]:has(> .ds-language-button):not([multiple]):where(:not([size]),[size="1"]) optgroup {padding:0;font-weight:400}
  select.ds-select[data-select-kind="language"]:has(> .ds-language-button):not([multiple]):where(:not([size]),[size="1"]) optgroup::legend {padding:10px 14px 12px;border-block-end:1px solid var(--ds-line);margin-block-end:4px;font-size:.75rem;font-weight:500;color:var(--ds-muted)}
  select.ds-select[data-select-kind="language"]:has(> .ds-language-button):not([multiple]):where(:not([size]),[size="1"]) option {min-block-size:56px;padding:9px 14px;gap:14px}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) .ds-language-option {display:flex;flex-direction:column;gap:1px;flex:1;min-inline-size:0}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) .ds-language-native {font-size:max(.9375rem,calc(15px * var(--scale,var(--text-scale,1))));font-weight:500;line-height:var(--ds-control-leading,1.5)}
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) .ds-language-secondary {font-family:Inter,system-ui,sans-serif;font-size:max(.75rem,calc(12px * var(--scale,var(--text-scale,1))));font-weight:400;color:var(--ds-muted);line-height:1.5}
  select.ds-select[data-select-kind="language"]:has(> .ds-language-button):not([multiple]):where(:not([size]),[size="1"]) option::checkmark {inline-size:16px;block-size:16px;flex-basis:16px;color:var(--ds-brand)}
}
@media (forced-colors:active) {
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]) {appearance:auto;background-image:none;border-color:ButtonText;color:ButtonText;box-shadow:none}
  select.ds-select:not([multiple]):where(:not([size]),[size="1"]):focus-visible {outline-color:Highlight}
  @supports (appearance: base-select) and selector(select::picker(select)) {
    select.ds-select:not([multiple]):where(:not([size]),[size="1"])::picker(select) {appearance:auto}
  }
  select.ds-select[data-select-kind="language"]:not([multiple]):where(:not([size]),[size="1"]) {appearance:auto;background-image:none;border-color:ButtonText;color:ButtonText;box-shadow:none}
}