/* Hallmark · component: select · genre: modern-minimal · theme: CONE RED tokens (tokens.css)
 * states: default · hover · focus · active · open · disabled · error (aria-invalid) · selected
 * contrast: pass, all ink and fills are the measured tokens
 */
/* The one custom select (static/select.js): square trigger, chevron inset 13px from the
   right edge with the text kept clear of it, a listbox popover with a check on the chosen row.
   The campaign picker reuses .cs-list / .cs-opt for its menu. */

.cs { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.cs[hidden] { display: none; }
.cs-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; margin: 0;
}

.cs-trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s2);
  width: 100%; min-width: 0; height: var(--ctl, 36px);
  font: inherit; font-size: 14px; line-height: 1.2; text-align: left; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 0;
  /* 13px inset + 16px chevron + 9px air: no text ever runs under the chevron */
  padding: 0 38px 0 var(--s3);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cs-trigger:hover { border-color: var(--ink-3); background: var(--surface-2); }
.cs-trigger:active:not(:disabled) { transform: none; background: var(--surface-3); }
.cs-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }
/* open, the black frame already says where focus is */
.cs-open > .cs-trigger:focus-visible { outline-color: transparent; }
.cs-open > .cs-trigger, .cs-open > .dd-trigger { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cs:has(.cs-native[aria-invalid="true"]) > .cs-trigger { border-color: var(--bad-ink); }
.cs-trigger:disabled { color: var(--ink-3); background: var(--surface-3); border-color: var(--line); cursor: not-allowed; }

.cs-box { display: grid; min-width: 0; flex: 1 1 auto; }
.cs-box > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ghost { visibility: hidden; height: 0; }
.cs-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-3); }
.cs-trigger:hover .cs-icon { color: var(--ink-2); }

.cs-chev {
  position: absolute; right: 13px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  color: var(--ink-3); pointer-events: none;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cs-trigger:hover .cs-chev { color: var(--ink); }
.cs-open .cs-chev { transform: rotate(180deg); color: var(--ink); }

.cs-list {
  position: fixed; z-index: 60;
  width: max-content; max-width: min(440px, calc(100vw - 16px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--ink); border-radius: 0;
  padding: var(--s1) 0; box-shadow: var(--lift-2);
  /* opens with a fade and a 4px rise, closes back the same way; display waits out the
     fade, so the hidden attribute select.js sets stays the switch */
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), display var(--t-fast) allow-discrete;
}
.cs-list:not([hidden]) { transition-duration: var(--t-enter); }
@starting-style { .cs-list:not([hidden]) { opacity: 0; transform: translateY(4px); } }
.cs-list[hidden] { display: none; opacity: 0; transform: translateY(4px); pointer-events: none; }

.cs-opt {
  position: relative;
  display: flex; align-items: center; gap: var(--s2);
  min-height: 36px; padding: var(--s2) 40px var(--s2) var(--s3);
  font-size: 14px; line-height: 1.3; color: var(--ink);
  white-space: nowrap; cursor: pointer; user-select: none;
  border-left: 2px solid transparent;
  transition: background-color .1s ease, border-color .1s ease;
}
.cs-opt[hidden] { display: none; }
.cs-opt:hover, .cs-opt.cs-active { background: var(--surface-2); }
.cs-opt.cs-active { border-left-color: var(--accent); }
.cs-opt:active { background: var(--surface-3); }
.cs-opt[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
.cs-opt[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; background: none; }
.cs-txt { overflow: hidden; text-overflow: ellipsis; }

.cs-check {
  position: absolute; right: 13px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  color: var(--accent-ink); opacity: 0;
}
.cs-opt[aria-selected="true"] .cs-check { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cs-chev, .cs-trigger, .cs-opt { transition: none; }
}