/* ─── MultiSelect — site CSS (BEM) ───────────────────────────────────────────
   Consumers: site/preview/multiselect.html
   Naming:    .ds-ms-*  = LabelOut   |  .ds-msi-* = LabelIn
   Tokens:    site/tokens.css (--ds-input-*, --ds-field-in-*, --ds-nba-*, --ds-*)
   States:    data-filled / data-error / data-disabled / data-readonly (on wrapper)
   Size:      MD only (40px LabelOut / 48px LabelIn — per Figma spec 726:6672/6705)
   No HEX, no hardcoded sizes.
   ──────────────────────────────────────────────────────────────────────────── */

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

.ds-ms {
  display: flex; flex-direction: column;
  width: 100%; font-family: var(--ds-font);
  /* MD size tokens — only size in Figma spec 726:6672 */
  --_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);
  --_label-gap: var(--ds-field-gap-y-md, 6px);
}

.ds-ms__label {
  font-weight: 500; font-size: var(--_label-fs); line-height: 1.4;
  color: var(--ds-text-secondary); margin-bottom: var(--_label-gap);
}
.ds-ms__required { color: var(--ds-neg-default); margin-right: 4px; }

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

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

/* ── Field control ── */
.ds-ms__control {
  position: relative; display: flex; align-items: center;
  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; overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ds-ms__control:hover                           { border-color: var(--ds-stroke-neutral-hover); }
.ds-ms__control:focus-within                    { border-color: var(--ds-stroke-high); box-shadow: inset 0 0 0 1px var(--ds-stroke-high); }
/* filled border only when not in error state — avoids specificity conflict */
.ds-ms:not([data-error]) .ds-ms__control[data-filled]:not(:focus-within) { border-color: var(--ds-stroke-high); }
.ds-ms[data-error]       .ds-ms__control { border-color: var(--ds-neg-default); }
.ds-ms[data-error]    .ds-ms__control:focus-within { border-color: var(--ds-neg-default); box-shadow: inset 0 0 0 1px var(--ds-neg-default); }
.ds-ms[data-disabled] .ds-ms__control           { border-color: var(--ds-nba-border-disabled); background: var(--ds-nba-15); }
.ds-ms[data-disabled]                           { pointer-events: none; }
.ds-ms[data-readonly] .ds-ms__control           { background: var(--ds-surface-muted); cursor: default; }

/* ── Tags row (inside field, nowrap, clips overflow) ── */
.ds-ms__tags {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto; min-width: 0; overflow: hidden;
}

/* ── Individual tag chip (20px compact, 4px radius) ── */
.ds-ms__tag {
  display: inline-flex; align-items: center; gap: 2px;
  height: 24px; padding: 4px 6px; flex-shrink: 0;
  border: 1px solid var(--ds-nba-border); border-radius: 6px;
  white-space: nowrap;
}
.ds-ms__tag-text {
  font-size: 14px; font-weight: 500; line-height: 16px;
  color: var(--ds-text-primary);
}
.ds-ms__tag-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--ds-icon-primary); border-radius: 2px;
}
.ds-ms__tag-remove svg { width: 100%; height: 100%; stroke-width: var(--ds-icon-stroke-sm); }
.ds-ms__tag-remove:hover { color: var(--ds-icon-primary); }
.ds-ms__tag:hover {
  background: var(--ds-nba-20);
  border-color: var(--ds-stroke-neutral-hover);
}
:root:not([data-theme='light']) .ds-ms__tag:hover {
  background: var(--ds-nba-40);
}
.ds-ms[data-disabled] .ds-ms__tag          { border-color: var(--ds-nba-border-disabled); }
.ds-ms[data-disabled] .ds-ms__tag-text,
.ds-ms[data-disabled] .ds-ms__tag-remove   { color: var(--ds-disabled-text); }

/* ── Overflow badge "+N" (soft, nba-30 bg) ── */
.ds-ms__overflow {
  display: inline-flex; align-items: center;
  height: 20px; padding: 2px 4px; flex-shrink: 0;
  border-radius: 4px; background: var(--ds-nba-30);
  font-size: 14px; font-weight: 500; line-height: 16px;
  color: var(--ds-text-primary); white-space: nowrap;
}

/* ── Hidden input (a11y focus target, visually hidden) ── */
.ds-ms__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: none; outline: none; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── Placeholder text (shown when no tags selected) ── */
.ds-ms__placeholder {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--_fs); line-height: var(--_lh);
  color: var(--ds-text-tertiary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ds-ms__control[data-filled] .ds-ms__placeholder { color: var(--ds-text-primary); }
.ds-ms[data-disabled]        .ds-ms__placeholder { color: var(--ds-disabled-text); }

/* ── Chevron ── */
.ds-ms__chevron {
  display: flex; align-items: center; flex-shrink: 0;
  width: var(--_icon); height: var(--_icon);
  margin-left: var(--_px);
  color: var(--ds-icon-tertiary); pointer-events: none;
}
.ds-ms__chevron svg { width: 100%; height: 100%; stroke-width: var(--_cs); }
.ds-ms[data-disabled] .ds-ms__chevron,
.ds-ms[data-readonly] .ds-ms__chevron { color: var(--ds-disabled-text); }
.ds-ms[data-error]    .ds-ms__chevron { color: var(--ds-neg-default); }

/* ── Caption row ── */
.ds-ms__caption-row { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--_label-gap); }
.ds-ms__caption { font-size: var(--ds-field-caption-fs, 12px); line-height: 1.4; color: var(--ds-text-tertiary); flex: 1; }
.ds-ms[data-error]    .ds-ms__caption  { color: var(--ds-neg-default); }
.ds-ms[data-disabled] .ds-ms__caption,
.ds-ms[data-disabled] .ds-ms__label    { color: var(--ds-disabled-text); }

/* ── Chips group below field (pill shape, 40px, flex-wrap) ── */
.ds-ms__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--_label-gap); }
.ds-ms__chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 10px;
  border: 1px solid var(--ds-nba-border); border-radius: 999px;
  white-space: nowrap;
}
.ds-ms__chip-text {
  font-size: 16px; font-weight: 500; line-height: 20px;
  color: var(--ds-text-primary);
}
.ds-ms__chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--ds-icon-primary);
}
.ds-ms__chip-remove svg { width: 100%; height: 100%; stroke-width: var(--ds-icon-stroke-sm); }
.ds-ms__chip-remove:hover { color: var(--ds-icon-primary); }
.ds-ms__chip:hover {
  background: var(--ds-nba-20);
  border-color: var(--ds-stroke-neutral-hover);
}
:root:not([data-theme='light']) .ds-ms__chip:hover {
  background: var(--ds-nba-40);
}

/* ── Dark mode ── */
[data-theme='dark'] .ds-ms__control:hover { border-color: var(--ds-stroke-neutral-hover); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-ms__control:hover { border-color: var(--ds-stroke-neutral-hover); }
}
[data-theme='dark']  .ds-ms[data-error] .ds-ms__caption { color: var(--ds-neg-500); }
[data-theme='dark']  .ds-ms[data-error] .ds-ms__chevron { color: var(--ds-neg-500); }
.theme-invert        .ds-ms[data-error] .ds-ms__caption { color: var(--ds-neg-500); }
.theme-invert        .ds-ms[data-error] .ds-ms__chevron { color: var(--ds-neg-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-ms[data-error] .ds-ms__caption { color: var(--ds-neg-500); }
  :root:not([data-theme='light']) .ds-ms[data-error] .ds-ms__chevron { color: var(--ds-neg-500); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   LABEL-IN  (.ds-msi-*)
   Height budget: 6px py-filled + 16px label-float + 20px tags + 6px py-filled = 48px ✓
   ══════════════════════════════════════════════════════════════════════════ */

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

.ds-msi__row { display: flex; align-items: flex-start; }
.ds-msi__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ds-msi__help-out {
  display: flex; align-items: center;
  height: var(--ds-field-in-sm-h); flex-shrink: 0;
  padding-left: 8px; color: var(--ds-icon-tertiary);
}

.ds-msi__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);
  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);
  transition: box-shadow 150ms ease, padding-top 150ms ease, padding-bottom 150ms ease;
  cursor: pointer; overflow: hidden;
}
.ds-msi__wrapper:hover:not([data-disabled]):not([data-readonly])     { box-shadow: inset 0 0 0 1px var(--ds-stroke-neutral-hover); }
.ds-msi__wrapper:focus-within:not([data-disabled]):not([data-readonly]) { box-shadow: inset 0 0 0 2px var(--ds-stroke-high); }
.ds-msi__wrapper[data-error]                 { box-shadow: inset 0 0 0 1px var(--ds-neg-default); }
.ds-msi__wrapper[data-error]:focus-within    { box-shadow: inset 0 0 0 2px var(--ds-neg-default); }
.ds-msi__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-msi__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-msi__wrapper:focus-within,
.ds-msi__wrapper[data-filled] { padding-top: var(--ds-field-in-sm-py-filled); padding-bottom: var(--ds-field-in-sm-py-filled); }

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

/* Floating label */
.ds-msi__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-msi__wrapper:focus-within .ds-msi__label,
.ds-msi__wrapper[data-filled]  .ds-msi__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-msi__wrapper[data-error]    .ds-msi__label { color: var(--ds-neg-default); }
.ds-msi__wrapper[data-disabled] .ds-msi__label,
.ds-msi__wrapper[data-readonly] .ds-msi__label { color: var(--ds-disabled-text); }

/* Tags row below floated label */
.ds-msi__tags {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  padding-top: calc(var(--ds-field-in-sm-label-float-lh) + 2px);
  opacity: 0; pointer-events: none;
  transition: opacity 150ms ease;
}
.ds-msi__wrapper:focus-within .ds-msi__tags,
.ds-msi__wrapper[data-filled]  .ds-msi__tags { opacity: 1; pointer-events: auto; }
.ds-msi__wrapper[data-disabled][data-filled] .ds-msi__tags,
.ds-msi__wrapper[data-readonly][data-filled] .ds-msi__tags { opacity: 1; pointer-events: none; }

/* Chevron (24px for LabelIn) */
.ds-msi__chevron {
  display: flex; align-items: center; flex-shrink: 0;
  width: var(--ds-input-lg-icon); height: var(--ds-input-lg-icon);
  margin-left: var(--ds-field-in-sm-px);
  color: var(--ds-icon-tertiary); pointer-events: none;
}
.ds-msi__chevron svg { width: 100%; height: 100%; stroke-width: var(--ds-icon-stroke-lg); }
.ds-msi__wrapper[data-error]    .ds-msi__chevron { color: var(--ds-neg-default); }
.ds-msi__wrapper[data-disabled] .ds-msi__chevron,
.ds-msi__wrapper[data-readonly] .ds-msi__chevron { color: var(--ds-disabled-text); }

/* Caption */
.ds-msi__caption-row { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--ds-field-gap-y-md, 6px); }
.ds-msi__caption { font-size: var(--ds-field-caption-fs, 12px); line-height: 1.4; color: var(--ds-text-tertiary); flex: 1; }
.ds-msi__wrapper[data-error]    ~ .ds-msi__caption-row .ds-msi__caption { color: var(--ds-neg-default); }
.ds-msi__wrapper[data-disabled] ~ .ds-msi__caption-row .ds-msi__caption,
.ds-msi__wrapper[data-readonly] ~ .ds-msi__caption-row .ds-msi__caption { color: var(--ds-disabled-text); }

/* Chips group below LabelIn */
.ds-msi__chips { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: var(--ds-field-gap-y-md, 6px); }

/* ── Dark mode ── */
[data-theme='dark'] .ds-msi__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-msi__wrapper:hover:not([data-disabled]):not([data-readonly]) { box-shadow: inset 0 0 0 1px var(--ds-stroke-neutral-hover); }
}
[data-theme='dark']  .ds-msi__wrapper[data-error] .ds-msi__label   { color: var(--ds-neg-500); }
[data-theme='dark']  .ds-msi__wrapper[data-error] .ds-msi__chevron { color: var(--ds-neg-500); }
[data-theme='dark']  .ds-msi__wrapper[data-error] ~ .ds-msi__caption-row .ds-msi__caption { color: var(--ds-neg-500); }
.theme-invert        .ds-msi__wrapper[data-error] .ds-msi__label   { color: var(--ds-neg-500); }
.theme-invert        .ds-msi__wrapper[data-error] .ds-msi__chevron { color: var(--ds-neg-500); }
.theme-invert        .ds-msi__wrapper[data-error] ~ .ds-msi__caption-row .ds-msi__caption { color: var(--ds-neg-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ds-msi__wrapper[data-error] .ds-msi__label   { color: var(--ds-neg-500); }
  :root:not([data-theme='light']) .ds-msi__wrapper[data-error] .ds-msi__chevron { color: var(--ds-neg-500); }
  :root:not([data-theme='light']) .ds-msi__wrapper[data-error] ~ .ds-msi__caption-row .ds-msi__caption { color: var(--ds-neg-500); }
}