/* ============================================================
   marina-select-choice — Gray Fill light mode
   Phase 1: gray-fill + all states (hover/focus/active/filled/disabled/error/read-only)
   Phase 2: white-fill, minimal, compact padding, body-sm, dark mode
   ============================================================ */

.marina-select-choice {
  display: block;
  width: 100%;
}

.marina-select-choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs2);
  font-family: var(--cds-typography-font-family-body-regular-base);
}

/* ── Field wrapper — border/background lives here ──────────── */

.marina-select-choice__field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cds-color-neutral-200);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-500);
  border-radius: 0;
  transition: border-color var(--cds-motion-duration-fast)
      var(--cds-motion-easing-out),
    box-shadow var(--cds-motion-duration-fast) var(--cds-motion-easing-out),
    outline-color var(--cds-motion-duration-fast) var(--cds-motion-easing-out);
}

/* ── Select field ──────────────────────────────────────────── */

.marina-select-choice__select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  /* default padding — override with .marina-select-choice--padding-compact in Phase 2 */
  padding: var(--spacing-sm2) var(--spacing-md1);
  padding-right: var(--spacing-xl1); /* space for caret overlay */
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  /* placeholder/unfilled text uses neutral-500; filled text is set below */
  color: var(--cds-color-neutral-500);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;

  /* Remove native browser arrow — Safari partial override noted */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Constrain selected value text to container width */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Remove native IE/Edge arrow */
.marina-select-choice__select::-ms-expand {
  display: none;
}

/* ── Caret overlay ──────────────────────────────────────────── */
/* pointer-events: none so clicks fall through to the <select> */

.marina-select-choice__caret {
  position: absolute;
  right: var(--spacing-md1);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cds-color-neutral-black);
  fill: currentColor;
  width: var(--spacing-md1);
  height: var(--spacing-md1);
  flex-shrink: 0;
}

/* ── Spinner overlay (async options loading) ──────────────────── */
/* Matches caret positioning — 16×16px, right-aligned, vertically centered */

.marina-select-choice__spinner {
  position: absolute;
  right: var(--spacing-md1);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: var(--spacing-md1);
  height: var(--spacing-md1);
  flex-shrink: 0;
}

/* ── Hover — Gray Fill ──────────────────────────────────────── */
/* box-shadow adds visual weight without layout shift (no border-width change) */
/* :not(.--filled) prevents double-stroke on an already-filled field */

.marina-select-choice--variant-gray-fill:not(.marina-select-choice--filled):not(
    .marina-select-choice--error
  )
  .marina-select-choice__field-wrapper:has(
    select:hover:not(:disabled):not(:focus)
  ) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}
.marina-select-choice--variant-gray-fill.marina-select-choice--filled:not(
    .marina-select-choice--error
  )
  .marina-select-choice__field-wrapper:has(
    select:hover:not(:disabled):not(:focus)
  ) {
  border-bottom-color: var(--cds-theme-accent);
}

/* ── Focus / Active — all variants ─────────────────────────── */
/* outline avoids layout shift; outline-offset: 0 keeps it flush */

.marina-select-choice__field-wrapper:focus-within {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* ── Filled state ───────────────────────────────────────────── */
/* spec: gray-fill filled → neutral-black 2px bottom stroke */
/* specificity: 3-class — always higher than 2-class variant base */

.marina-select-choice--variant-gray-fill.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

/* filled select text: show selected value in neutral-black */
.marina-select-choice--filled .marina-select-choice__select {
  color: var(--cds-color-neutral-black);
}

/* ── Error state ────────────────────────────────────────────── */
/* Gray Fill + White Fill: full-border (all 4 sides) error stroke */
.marina-select-choice--variant-gray-fill.marina-select-choice--error
  .marina-select-choice__field-wrapper,
.marina-select-choice--variant-white-fill.marina-select-choice--error
  .marina-select-choice__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* error: select text + caret use error-shade */
.marina-select-choice--error .marina-select-choice__select {
  color: var(--cds-color-utility-error-shade);
}

.marina-select-choice--error .marina-select-choice__caret {
  color: var(--cds-color-utility-error-shade);
}

/* error filled — full border error stroke stays even when filled */
.marina-select-choice--variant-gray-fill.marina-select-choice--error.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* error + focus: hide full error border; focus ring signals active field */
.marina-select-choice--variant-gray-fill.marina-select-choice--error
  .marina-select-choice__field-wrapper:focus-within {
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-500);
}

/* ── Disabled state ─────────────────────────────────────────── */

.marina-select-choice--disabled .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-300);
}

.marina-select-choice--disabled .marina-select-choice__select {
  color: var(--cds-color-neutral-300);
  cursor: not-allowed;
  pointer-events: none;
}

.marina-select-choice--disabled .marina-select-choice__caret {
  color: var(--cds-color-neutral-300);
}

/* ── Read-only state ────────────────────────────────────────── */

.marina-select-choice--read-only .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-300);
}

.marina-select-choice--read-only .marina-select-choice__select {
  color: var(--cds-color-neutral-500);
  cursor: default;
  pointer-events: none;
}

.marina-select-choice--read-only .marina-select-choice__caret {
  color: var(--cds-color-neutral-300);
}

/* ── Supporting text ────────────────────────────────────────── */

.marina-select-choice__feedback {
  display: block;
}

/* Strip the alert box — field stroke signals the error state.
   Icon scaled to 16px; text uses body-sm at error-shade color. */
.marina-select-choice__feedback .marina-inline-alert {
  border-color: transparent;
  background-color: transparent;
  padding: 0;
  align-items: center;
}

.marina-select-choice__feedback .marina-inline-alert__icon {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
}

.marina-select-choice__feedback .marina-inline-alert__summary {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-utility-error-shade);
}

.marina-select-choice__help-text {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-neutral-500);
}

/* ============================================================
   Phase 2 — White Fill variant (light mode)
   ============================================================ */

.marina-select-choice--variant-white-fill .marina-select-choice__field-wrapper {
  background: var(--cds-color-neutral-white);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-500);
}

/* Hover — White Fill */
/* specificity: 3-class — always higher than 2-class variant base */
.marina-select-choice--variant-white-fill:not(
    .marina-select-choice--filled
  ):not(.marina-select-choice--error)
  .marina-select-choice__field-wrapper:has(
    select:hover:not(:disabled):not(:focus)
  ) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}
.marina-select-choice--variant-white-fill.marina-select-choice--filled:not(
    .marina-select-choice--error
  )
  .marina-select-choice__field-wrapper:has(
    select:hover:not(:disabled):not(:focus)
  ) {
  border-bottom-color: var(--cds-theme-accent);
}

/* Filled — White Fill */
/* specificity: 3-class — always higher than 2-class variant base */
.marina-select-choice--variant-white-fill.marina-select-choice--filled:not(
    .marina-select-choice--error
  )
  .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

/* Error + Filled — White Fill: full border stays — 1px */
.marina-select-choice--variant-white-fill.marina-select-choice--error.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* Error + Focus — White Fill: hide full error border; focus ring alone signals active field */
.marina-select-choice--variant-white-fill.marina-select-choice--error
  .marina-select-choice__field-wrapper:focus-within {
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-500);
}

/* ============================================================
   Phase 2 — Minimal variant (border stroke only, light mode)
   spec: no fill; dark gray stroke on light bg; color theme not applied
   ============================================================ */

.marina-select-choice--variant-minimal .marina-select-choice__field-wrapper {
  background: transparent;
  border: var(--cds-border-sm) solid var(--cds-color-neutral-500);
  border-radius: 0;
}

/* Hover — Minimal: no hover effect (spec: stroke-only variant has no hover state) */

/* Filled — Minimal: stroke becomes neutral-black */
/* specificity: 3-class */
.marina-select-choice--variant-minimal.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border-color: var(--cds-color-neutral-black);
}

/* Error — Minimal: all-sides error stroke */
/* specificity: 3-class */
.marina-select-choice--variant-minimal.marina-select-choice--error
  .marina-select-choice__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* Error + Filled — Minimal */
/* specificity: 4-class */
.marina-select-choice--variant-minimal.marina-select-choice--error.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* Error + Focus — Minimal: red border stays alongside focus ring */
/* specificity: 4-class */
.marina-select-choice--variant-minimal.marina-select-choice--error
  .marina-select-choice__field-wrapper:focus-within {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* Disabled — Minimal: gets a gray fill + neutral-300 stroke */
/* specificity: 3-class — overrides variant base (2-class) */
.marina-select-choice--variant-minimal.marina-select-choice--disabled
  .marina-select-choice__field-wrapper {
  border-color: var(--cds-color-neutral-300);
  background: var(--cds-color-neutral-200);
}

/* Read-only — Minimal: same visual as disabled */
/* specificity: 3-class */
.marina-select-choice--variant-minimal.marina-select-choice--read-only
  .marina-select-choice__field-wrapper {
  border-color: var(--cds-color-neutral-300);
  background: var(--cds-color-neutral-200);
}

/* ============================================================
   Phase 2 — Compact padding
   spec: --spacing-sm1 (8px) top/bottom instead of --spacing-sm2 (12px)
   ============================================================ */

.marina-select-choice--padding-compact .marina-select-choice__select {
  padding: var(--spacing-sm1) var(--spacing-md1);
  padding-right: var(--spacing-xl1); /* keep space for caret overlay */
  min-height: 0; /* match marina-text-input compact — removes 44px touch-target floor */
}

/* ============================================================
   Phase 2 — Body-sm text size
   ============================================================ */

.marina-select-choice--text-sm .marina-select-choice__label,
.marina-select-choice--text-sm .marina-select-choice__select {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
}

/* ============================================================
   Phase 2 — Dark mode: Gray Fill ([data-mode="dark"])
   spec: fill=neutral-500, stroke=neutral-200 1px, text/caret=neutral-white
   ============================================================ */

[data-mode='dark']
  .marina-select-choice--variant-gray-fill
  .marina-select-choice__field-wrapper {
  background: var(--cds-color-neutral-500);
  border-bottom-color: var(--cds-color-neutral-200);
}

[data-mode='dark']
  .marina-select-choice--variant-gray-fill
  .marina-select-choice__select {
  color: var(--cds-color-neutral-white);
}

[data-mode='dark']
  .marina-select-choice--variant-gray-fill
  .marina-select-choice__caret {
  color: var(--cds-color-neutral-white);
}

[data-mode='dark']
  .marina-select-choice--variant-gray-fill
  .marina-select-choice__label,
[data-mode='dark']
  .marina-select-choice--variant-gray-fill
  .marina-select-choice__help-text {
  color: var(--cds-color-neutral-white);
}

/* Dark — Gray Fill Filled: stroke=neutral-white 2px */
/* specificity: 3-class context selector + 2-class = wins over base */
[data-mode='dark']
  .marina-select-choice--variant-gray-fill.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-white);
  border-bottom-width: var(--cds-border-sm);
}

/* Dark — Gray Fill Active: double stroke (outer wcag-focus + inner neutral-white) */
[data-mode='dark']
  .marina-select-choice--variant-gray-fill
  .marina-select-choice__field-wrapper:focus-within {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  box-shadow: inset 0 0 0 var(--cds-border-sm) var(--cds-color-neutral-white);
}

/* Dark — Gray Fill Error: full-border error-shade — 1px */
[data-mode='dark']
  .marina-select-choice--variant-gray-fill.marina-select-choice--error
  .marina-select-choice__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

/* Dark — Gray Fill Disabled: stroke=neutral-400, text=neutral-400 */
[data-mode='dark']
  .marina-select-choice--variant-gray-fill.marina-select-choice--disabled
  .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-400);
}

[data-mode='dark']
  .marina-select-choice--variant-gray-fill.marina-select-choice--disabled
  .marina-select-choice__select,
[data-mode='dark']
  .marina-select-choice--variant-gray-fill.marina-select-choice--disabled
  .marina-select-choice__caret {
  color: var(--cds-color-neutral-400);
}

/* ============================================================
   Phase 2 — Dark mode: Black Fill ([data-mode="dark"])
   spec: fill=neutral-black, stroke=neutral-300 1px
   text/icon tokens follow gray fill dark mode
   ============================================================ */

[data-mode='dark']
  .marina-select-choice--variant-white-fill
  .marina-select-choice__field-wrapper {
  background: var(--cds-color-neutral-black);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-300);
}

[data-mode='dark']
  .marina-select-choice--variant-white-fill
  .marina-select-choice__select {
  color: var(--cds-color-neutral-white);
}

[data-mode='dark']
  .marina-select-choice--variant-white-fill
  .marina-select-choice__caret,
[data-mode='dark']
  .marina-select-choice--variant-white-fill
  .marina-select-choice__label,
[data-mode='dark']
  .marina-select-choice--variant-white-fill
  .marina-select-choice__help-text {
  color: var(--cds-color-neutral-white);
}

/* Dark — Black Fill Filled: neutral-white 2px bottom */
[data-mode='dark']
  .marina-select-choice--variant-white-fill.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-white);
  border-bottom-width: var(--cds-border-sm);
}

/* Dark — Black Fill Error Filled: error-shade 2px */
[data-mode='dark']
  .marina-select-choice--variant-white-fill.marina-select-choice--error.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-utility-error-shade);
  border-bottom-width: var(--cds-border-sm);
}

/* Dark — Black Fill Active: same double stroke as gray fill dark */
[data-mode='dark']
  .marina-select-choice--variant-white-fill
  .marina-select-choice__field-wrapper:focus-within {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  box-shadow: inset 0 0 0 var(--cds-border-sm) var(--cds-color-neutral-white);
}

/* ============================================================
   Phase 2 — Dark mode: Minimal ([data-mode="dark"])
   spec: same as black fill — fill=neutral-black, stroke=neutral-300 1px
   text/icon tokens follow gray fill dark mode
   ============================================================ */

[data-mode='dark']
  .marina-select-choice--variant-minimal
  .marina-select-choice__field-wrapper {
  background: var(--cds-color-neutral-black);
  border-color: var(--cds-color-neutral-300);
}

[data-mode='dark']
  .marina-select-choice--variant-minimal
  .marina-select-choice__select {
  color: var(--cds-color-neutral-white);
}

[data-mode='dark']
  .marina-select-choice--variant-minimal
  .marina-select-choice__caret,
[data-mode='dark']
  .marina-select-choice--variant-minimal
  .marina-select-choice__help-text {
  color: var(--cds-color-neutral-white);
}

/* Dark — Minimal Filled: neutral-white 2px bottom */
[data-mode='dark']
  .marina-select-choice--variant-minimal.marina-select-choice--filled
  .marina-select-choice__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-white);
  border-bottom-width: var(--cds-border-sm);
}

/* Dark — Minimal Error: error-shade border */
[data-mode='dark']
  .marina-select-choice--variant-minimal.marina-select-choice--error
  .marina-select-choice__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}

/* Dark — Minimal Active: double stroke */
[data-mode='dark']
  .marina-select-choice--variant-minimal
  .marina-select-choice__field-wrapper:focus-within {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  box-shadow: inset 0 0 0 var(--cds-border-sm) var(--cds-color-neutral-white);
}

/* Dark — Minimal Disabled: neutral-300 border, neutral-400 text */
[data-mode='dark']
  .marina-select-choice--variant-minimal.marina-select-choice--disabled
  .marina-select-choice__field-wrapper {
  border-color: var(--cds-color-neutral-400);
}

[data-mode='dark']
  .marina-select-choice--variant-minimal.marina-select-choice--disabled
  .marina-select-choice__select,
[data-mode='dark']
  .marina-select-choice--variant-minimal.marina-select-choice--disabled
  .marina-select-choice__caret {
  color: var(--cds-color-neutral-400);
}

/* TODO: Gray Fill Dark Background mode (component on dark page) — separate ticket */

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marina-select-choice,
  .marina-select-choice * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}