/* ─── SelectField — site CSS (BEM) ──────────────────────────────────────────
   Consumers: site/preview/select-field.html
   Naming:    .ds-sf-*  = LabelOut   |  .ds-sfi-* = LabelIn
   Tokens:    site/tokens.css (--ds-input-*, --ds-field-in-*, --ds-*)
   States:    data-size / data-filled / data-error / data-disabled / data-readonly
   No HEX, no hardcoded sizes.
   ──────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   LABEL-OUT  (.ds-sf-*)
   ══════════════════════════════════════════════════════════════════════════ */

.ds-sf {
  display:        flex;
  flex-direction: column;
  width:          100%;
  font-family:    var(--ds-font);
}

.ds-sf[data-size='sm'] {
  --_h: var(--ds-input-sm-h); --_px: var(--ds-input-sm-px); --_r: var(--ds-input-sm-r);
  --_fs: var(--ds-input-sm-fs); --_lh: var(--ds-input-sm-lh); --_icon: var(--ds-input-sm-icon);
  --_cs: var(--ds-icon-stroke-sm); --_label-fs: var(--ds-input-sm-label-fs);
  --_helper-fs: var(--ds-input-sm-helper-fs); --_label-gap: var(--ds-field-gap-y-sm, 4px);
  --_gap: var(--ds-input-sm-gap);
}
.ds-sf[data-size='md'],
.ds-sf:not([data-size]) {
  --_h: var(--ds-input-md-h); --_px: var(--ds-input-md-px); --_r: var(--ds-input-md-r);
  --_fs: var(--ds-input-md-fs); --_lh: var(--ds-input-md-lh); --_icon: var(--ds-input-md-icon);
  --_cs: var(--ds-icon-stroke-md); --_label-fs: var(--ds-input-md-label-fs);
  --_helper-fs: var(--ds-input-md-helper-fs); --_label-gap: var(--ds-field-gap-y-md, 6px);
  --_gap: var(--ds-input-md-gap);
}
.ds-sf[data-size='lg'] {
  --_h: var(--ds-input-lg-h); --_px: var(--ds-input-lg-px); --_r: var(--ds-input-lg-r);
  --_fs: var(--ds-input-lg-fs); --_lh: var(--ds-input-lg-lh); --_icon: var(--ds-input-lg-icon);
  --_cs: var(--ds-icon-stroke-lg); --_label-fs: var(--ds-input-lg-label-fs);
  --_helper-fs: var(--ds-input-lg-helper-fs); --_label-gap: var(--ds-field-gap-y-lg, 6px);
  --_gap: var(--ds-input-lg-gap);
}
.ds-sf[data-size='xl'] {
  --_h: var(--ds-input-xl-h); --_px: var(--ds-input-xl-px); --_r: var(--ds-input-xl-r);
  --_fs: var(--ds-input-xl-fs); --_lh: var(--ds-input-xl-lh); --_icon: var(--ds-input-xl-icon);
  --_cs: var(--ds-input-xl-icon-stroke); --_label-fs: var(--ds-input-xl-label-fs, var(--ds-input-lg-label-fs));
  --_helper-fs: var(--ds-input-xl-helper-fs, var(--ds-input-lg-helper-fs));
  --_label-gap: var(--ds-field-gap-y-xl, 8px); --_gap: var(--ds-input-xl-gap);
}

.ds-sf__label {
  font-weight:   500;
  font-size:     var(--_label-fs);
  line-height:   1.4;
  color:         var(--ds-text-secondary);
  margin-bottom: var(--_label-gap, 4px);
}

.ds-sf__required { color: var(--ds-neg-default); margin-right: 4px; }

.ds-sf__row { display: flex; align-items: flex-start; }
.ds-sf__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ds-sf__help-out {
  display:      flex; align-items: center;
  height:       var(--_h); flex-shrink: 0;
  padding-left: 8px; color: var(--ds-icon-tertiary);
}

.ds-sf__control {
  position: relative; display: flex; align-items: center;
  gap: var(--_gap); height: var(--_h); padding: 0 var(--_px);
  border: 1px solid var(--ds-nba-border); border-radius: var(--_r);
  background: var(--ds-surface-0); cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ds-sf__control:hover                  { border-color: var(--ds-stroke-neutral-hover); }
.ds-sf__control:focus-within           { border-color: var(--ds-stroke-high); box-shadow: inset 0 0 0 1px var(--ds-stroke-high); }
.ds-sf[data-disabled] .ds-sf__control:focus-within,
.ds-sf[data-readonly] .ds-sf__control:focus-within { border-color: inherit; box-shadow: none; }
.ds-sf__control[data-filled]:not(:focus-within) { border-color: var(--ds-stroke-high); }

.ds-sf__select {
  flex: 1 1 auto; min-width: 0;
  appearance: none; -webkit-appearance: none;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: var(--_fs); line-height: var(--_lh);
  color: var(--ds-text-tertiary); padding: 0; cursor: pointer;
}
.ds-sf__control[data-filled] .ds-sf__select { color: var(--ds-text-primary); }
.ds-sf__select option { color: var(--ds-text-primary); }

.ds-sf__chevron {
  display: flex; align-items: center; flex-shrink: 0;
  width: var(--_icon); height: var(--_icon);
  color: var(--ds-icon-tertiary); pointer-events: none;
}
.ds-sf__chevron svg { width: 100%; height: 100%; stroke-width: var(--_cs, var(--ds-icon-stroke-md)); }

.ds-sf__caption-row { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--_label-gap, 4px); }
.ds-sf__caption-icon { display: inline-flex; align-items: center; flex-shrink: 0; width: 16px; height: 16px; }
.ds-sf__caption { font-size: var(--ds-field-caption-fs, 12px); line-height: 1.4; color: var(--ds-text-tertiary); flex: 1; }

.ds-sf[data-error] .ds-sf__control                { border-color: var(--ds-neg-default); }
.ds-sf[data-error] .ds-sf__control:focus-within   { border-color: var(--ds-neg-default); box-shadow: inset 0 0 0 1px var(--ds-neg-default); }
.ds-sf[data-error] .ds-sf__caption,
.ds-sf[data-error] .ds-sf__caption-row            { color: var(--ds-neg-default); }

.ds-sf[data-disabled]                             { pointer-events: none; }
.ds-sf[data-disabled] .ds-sf__control             { border-color: var(--ds-nba-border-disabled); background: var(--ds-nba-15); }
.ds-sf[data-disabled] .ds-sf__select,
.ds-sf[data-disabled] .ds-sf__label,
.ds-sf[data-disabled] .ds-sf__caption,
.ds-sf[data-disabled] .ds-sf__chevron             { color: var(--ds-disabled-text); }

.ds-sf[data-readonly] .ds-sf__control             { background: var(--ds-surface-muted); cursor: default; }
.ds-sf[data-readonly] .ds-sf__select              { cursor: default; pointer-events: none; }

[data-theme='dark'] .ds-sf__control:hover:not(:focus-within) { border-color: var(--ds-stroke-neutral-hover); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-sf__control:hover:not(:focus-within) { border-color: var(--ds-stroke-neutral-hover); }
}
[data-theme='dark'] .ds-sf[data-error] .ds-sf__caption { color: var(--ds-neg-500); }
.theme-invert .ds-sf[data-error] .ds-sf__caption { color: var(--ds-neg-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-sf[data-error] .ds-sf__caption { color: var(--ds-neg-500); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LABEL-IN  (.ds-sfi-*)
   ══════════════════════════════════════════════════════════════════════════ */

.ds-sfi { display: flex; flex-direction: column; width: 100%; font-family: var(--ds-font); }
.ds-sfi[data-size='sm']  { --_ih: var(--ds-field-in-sm-h); }
.ds-sfi[data-size='md'],
.ds-sfi:not([data-size]) { --_ih: var(--ds-field-in-md-h); }
.ds-sfi[data-size='lg']  { --_ih: var(--ds-field-in-lg-h); }

.ds-sfi__row { display: flex; align-items: flex-start; }
.ds-sfi__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ds-sfi__help-out { display: flex; align-items: center; height: var(--_ih, 48px); flex-shrink: 0; padding-left: 8px; color: var(--ds-icon-tertiary); }

.ds-sfi__wrapper {
  position: relative; display: flex; align-items: center;
  background: var(--ds-surface-0); border: none;
  box-shadow: inset 0 0 0 1px var(--ds-nba-border);
  transition: box-shadow 150ms ease, padding-top 150ms ease, padding-bottom 150ms ease;
  cursor: pointer; overflow: hidden;
}
.ds-sfi__wrapper[data-size='sm'],
.ds-sfi__wrapper[data-size='md'],
.ds-sfi__wrapper:not([data-size]) {
  min-height: var(--ds-field-in-sm-h); padding: var(--ds-field-in-sm-py) var(--ds-field-in-sm-px);
  border-radius: var(--ds-field-in-sm-r);
}
.ds-sfi__wrapper[data-size='lg'] {
  min-height: var(--ds-field-in-lg-h); padding: var(--ds-field-in-lg-py) var(--ds-field-in-lg-px);
  border-radius: var(--ds-field-in-lg-r);
}

.ds-sfi__wrapper:hover:not([data-disabled]):not([data-readonly]) { box-shadow: inset 0 0 0 1px var(--ds-stroke-neutral-hover); }
.ds-sfi__wrapper:focus-within:not([data-disabled]):not([data-readonly]) { box-shadow: inset 0 0 0 2px var(--ds-stroke-high); }
.ds-sfi__wrapper[data-error]              { box-shadow: inset 0 0 0 1px var(--ds-neg-default); }
.ds-sfi__wrapper[data-error]:focus-within { box-shadow: inset 0 0 0 2px var(--ds-neg-default); }
.ds-sfi__wrapper[data-disabled] { background: var(--ds-nba-15); box-shadow: inset 0 0 0 1px var(--ds-nba-border-disabled); cursor: default; pointer-events: none; }
.ds-sfi__wrapper[data-readonly] { background: var(--ds-surface-muted); box-shadow: inset 0 0 0 1px var(--ds-nba-border-disabled); cursor: default; }

/* Floated padding */
.ds-sfi__wrapper:focus-within:not([data-size]),
.ds-sfi__wrapper[data-filled]:not([data-size]),
.ds-sfi__wrapper[data-size='sm']:focus-within,
.ds-sfi__wrapper[data-size='sm'][data-filled],
.ds-sfi__wrapper[data-size='md']:focus-within,
.ds-sfi__wrapper[data-size='md'][data-filled] { padding-top: var(--ds-field-in-sm-py-filled); padding-bottom: var(--ds-field-in-sm-py-filled); }
.ds-sfi__wrapper[data-size='lg']:focus-within,
.ds-sfi__wrapper[data-size='lg'][data-filled] { padding-top: var(--ds-field-in-lg-py-filled); padding-bottom: var(--ds-field-in-lg-py-filled); }

[data-theme='dark'] .ds-sfi__wrapper:hover:not([data-disabled]):not([data-readonly]) { box-shadow: inset 0 0 0 1px var(--ds-stroke-neutral-hover); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-sfi__wrapper:hover:not([data-disabled]):not([data-readonly]) { box-shadow: inset 0 0 0 1px var(--ds-stroke-neutral-hover); }
}

.ds-sfi__inner { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; }

.ds-sfi__label {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  color: var(--ds-text-tertiary); pointer-events: none;
  transition: transform 150ms ease, font-size 150ms ease, line-height 150ms ease, top 150ms ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  font-size: var(--ds-field-in-sm-label-fs); line-height: var(--ds-field-in-sm-label-lh);
}
.ds-sfi__wrapper[data-size='lg'] .ds-sfi__label { font-size: var(--ds-field-in-lg-label-fs); line-height: var(--ds-field-in-lg-label-lh); }

.ds-sfi__wrapper:focus-within .ds-sfi__label,
.ds-sfi__wrapper[data-filled] .ds-sfi__label { top: 0; transform: translateY(0); font-size: var(--ds-field-in-sm-label-float-fs); line-height: var(--ds-field-in-sm-label-float-lh); }
.ds-sfi__wrapper[data-size='lg']:focus-within .ds-sfi__label,
.ds-sfi__wrapper[data-size='lg'][data-filled] .ds-sfi__label { font-size: var(--ds-field-in-lg-label-float-fs); line-height: var(--ds-field-in-lg-label-float-lh); }

.ds-sfi__wrapper[data-error] .ds-sfi__label    { color: var(--ds-neg-default); }
.ds-sfi__wrapper[data-disabled] .ds-sfi__label,
.ds-sfi__wrapper[data-readonly] .ds-sfi__label  { color: var(--ds-disabled-text); }

.ds-sfi__select {
  appearance: none; -webkit-appearance: none;
  border: none; outline: none; background: transparent;
  color: var(--ds-text-primary); width: 100%; padding: 0; cursor: pointer; font-family: inherit;
  font-size: var(--ds-field-in-sm-fs); line-height: var(--ds-field-in-sm-lh);
}
.ds-sfi__wrapper[data-size='lg'] .ds-sfi__select { font-size: var(--ds-field-in-lg-fs); line-height: var(--ds-field-in-lg-lh); }

.ds-sfi__wrapper:not(:focus-within):not([data-filled]) .ds-sfi__select { color: transparent; }

.ds-sfi__wrapper:focus-within:not([data-size]) .ds-sfi__select,
.ds-sfi__wrapper[data-filled]:not([data-size]) .ds-sfi__select,
.ds-sfi__wrapper[data-size='sm']:focus-within .ds-sfi__select,
.ds-sfi__wrapper[data-size='sm'][data-filled] .ds-sfi__select,
.ds-sfi__wrapper[data-size='md']:focus-within .ds-sfi__select,
.ds-sfi__wrapper[data-size='md'][data-filled] .ds-sfi__select { padding-top: calc(var(--ds-field-in-sm-label-float-lh) + var(--ds-field-in-sm-gap)); }
.ds-sfi__wrapper[data-size='lg']:focus-within .ds-sfi__select,
.ds-sfi__wrapper[data-size='lg'][data-filled] .ds-sfi__select { padding-top: calc(var(--ds-field-in-lg-label-float-lh) + var(--ds-field-in-lg-gap)); }

.ds-sfi__wrapper[data-disabled] .ds-sfi__select,
.ds-sfi__wrapper[data-readonly] .ds-sfi__select { color: var(--ds-disabled-text); cursor: default; pointer-events: none; }
.ds-sfi__select option { color: var(--ds-text-primary); }

.ds-sfi__chevron {
  display: flex; align-items: center; flex-shrink: 0;
  width: var(--ds-input-lg-icon); height: var(--ds-input-lg-icon);
  color: var(--ds-icon-tertiary); pointer-events: none;
  margin-left: var(--ds-field-in-sm-px);
}
.ds-sfi__wrapper[data-size='lg'] .ds-sfi__chevron { margin-left: var(--ds-field-in-lg-px); }
.ds-sfi__chevron svg { width: 100%; height: 100%; stroke-width: var(--ds-icon-stroke-lg); }
.ds-sfi__wrapper[data-error] .ds-sfi__chevron    { color: var(--ds-neg-default); }
.ds-sfi__wrapper[data-disabled] .ds-sfi__chevron,
.ds-sfi__wrapper[data-readonly] .ds-sfi__chevron  { color: var(--ds-disabled-text); }

.ds-sfi__caption-row { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--ds-field-gap-y-md, 6px); }
.ds-sfi[data-size='sm'] .ds-sfi__caption-row { margin-top: var(--ds-field-gap-y-sm, 4px); }
.ds-sfi[data-size='lg'] .ds-sfi__caption-row { margin-top: var(--ds-field-gap-y-lg, 6px); }
.ds-sfi__caption-icon { display: inline-flex; align-items: center; flex-shrink: 0; width: 16px; height: 16px; }
.ds-sfi__caption { font-size: var(--ds-field-caption-fs, 12px); line-height: 1.4; color: var(--ds-text-tertiary); flex: 1; }

.ds-sfi__wrapper[data-error] ~ .ds-sfi__caption-row .ds-sfi__caption { color: var(--ds-neg-default); }
.ds-sfi__wrapper[data-disabled] ~ .ds-sfi__caption-row .ds-sfi__caption,
.ds-sfi__wrapper[data-readonly] ~ .ds-sfi__caption-row .ds-sfi__caption { color: var(--ds-disabled-text); }

[data-theme='dark'] .ds-sfi__wrapper[data-error] .ds-sfi__label   { color: var(--ds-neg-500); }
[data-theme='dark'] .ds-sfi__wrapper[data-error] .ds-sfi__chevron { color: var(--ds-neg-500); }
[data-theme='dark'] .ds-sfi__wrapper[data-error] ~ .ds-sfi__caption-row .ds-sfi__caption { color: var(--ds-neg-500); }
.theme-invert .ds-sfi__wrapper[data-error] .ds-sfi__label   { color: var(--ds-neg-500); }
.theme-invert .ds-sfi__wrapper[data-error] .ds-sfi__chevron { color: var(--ds-neg-500); }
.theme-invert .ds-sfi__wrapper[data-error] ~ .ds-sfi__caption-row .ds-sfi__caption { color: var(--ds-neg-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-sfi__wrapper[data-error] .ds-sfi__label   { color: var(--ds-neg-500); }
  :root:not([data-theme='light']) .ds-sfi__wrapper[data-error] .ds-sfi__chevron { color: var(--ds-neg-500); }
  :root:not([data-theme='light']) .ds-sfi__wrapper[data-error] ~ .ds-sfi__caption-row .ds-sfi__caption { color: var(--ds-neg-500); }
}