.marina-text-input {
  display: block;
  font-family: var(--cds-typography-font-family-body-regular-base);
}

.marina-text-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs2);
}

/* ── Field wrapper (Gray Fill) — border/background lives here ── */

.marina-text-input__field-wrapper {
  display: flex;
  align-items: center;
  background: var(--cds-color-neutral-200);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
  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);
}

/* ── Field (inside wrapper) ──────────────────────────────────────────── */

.marina-text-input__field {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--spacing-sm2) var(--spacing-md1);
  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);
  color: var(--cds-color-neutral-black);
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.marina-text-input__field::placeholder {
  color: var(--cds-color-neutral-500);
}

/* Hover — Gray Fill: color-themed bottom stroke; :has() targets input native state */
/* spec: hover not applied on Minimal or Error */
/* Unfilled: box-shadow adds virtual 2px weight without border-width change — no layout shift */
.marina-text-input--variant-gray-fill:not(.marina-text-input--filled):not(.marina-text-input--error) .marina-text-input__field-wrapper:has(input:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}
/* Filled: already has 2px border — change color only, no extra shadow */
.marina-text-input--variant-gray-fill.marina-text-input--filled:not(.marina-text-input--error) .marina-text-input__field-wrapper:has(input:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
}

/* ── Focus state ─────────────────────────────────────────────────────── */
/* outline on wrapper avoids layout shift — sits outside the flex container */

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

/* ── Active state (pointer held down) ────────────────────────────────── */

.marina-text-input--active .marina-text-input__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 0;
}

/* ── Filled state ────────────────────────────────────────────────────── */
/* spec: Gray Fill + White Fill filled → neutral-black 2px stroke */
.marina-text-input--variant-gray-fill.marina-text-input--filled .marina-text-input__field-wrapper,
.marina-text-input--variant-white-fill.marina-text-input--filled .marina-text-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

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

/* spec: error state placeholder color */
.marina-text-input--error .marina-text-input__field::placeholder {
  color: var(--cds-color-utility-error-shade);
}

/* ── Success state ───────────────────────────────────────────────────── */
/* spec: success feedback is communicated by the message text only; border stays neutral-black */

.marina-text-input--success .marina-text-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}

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

.marina-text-input--disabled .marina-text-input__field-wrapper {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Read Only state ─────────────────────────────────────────────────── */
/* spec: neutral-200 bg (not removed neutral-100), neutral-500 text (not removed neutral-700) */

.marina-text-input--read-only .marina-text-input__field-wrapper {
  background: var(--cds-color-neutral-200);
  border-color: transparent;
  cursor: default;
}

.marina-text-input--read-only .marina-text-input__field {
  cursor: default;
  color: var(--cds-color-neutral-500);
}

/* ── White Fill variant ──────────────────────────────────────────────── */

.marina-text-input--variant-white-fill .marina-text-input__field-wrapper {
  background: var(--cds-color-neutral-white);
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
  border-radius: 0;
}

/* Hover — White Fill */
.marina-text-input--variant-white-fill:not(.marina-text-input--filled):not(.marina-text-input--error) .marina-text-input__field-wrapper:has(input:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
  box-shadow: inset 0 -1px 0 0 var(--cds-theme-accent);
}
.marina-text-input--variant-white-fill.marina-text-input--filled:not(.marina-text-input--error) .marina-text-input__field-wrapper:has(input:hover:not(:disabled):not([readonly]):not(:focus)) {
  border-bottom-color: var(--cds-theme-accent);
}


/* White Fill success — base rule resets border-bottom-width to xs; re-apply sm here */
.marina-text-input--variant-white-fill.marina-text-input--success .marina-text-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-black);
  border-bottom-width: var(--cds-border-sm);
}


/* Error + focused: hide full error border; focus ring alone signals active field */
.marina-text-input--variant-gray-fill.marina-text-input--error.marina-text-input--focus .marina-text-input__field-wrapper,
.marina-text-input--variant-white-fill.marina-text-input--error.marina-text-input--focus .marina-text-input__field-wrapper {
  border: none;
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-400);
}

.marina-text-input--variant-minimal.marina-text-input--error.marina-text-input--focus .marina-text-input__field-wrapper {
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* ── Minimal variant ─────────────────────────────────────────────────── */

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

/* Minimal focus: color-only change — border-width stays 2px, no layout shift */
/* spec: no hover rule on Minimal */
.marina-text-input--variant-minimal.marina-text-input--focus .marina-text-input__field-wrapper,
.marina-text-input--variant-minimal .marina-text-input__field-wrapper:focus-within {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Minimal active */
.marina-text-input--variant-minimal.marina-text-input--active .marina-text-input__field-wrapper {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Minimal filled */
.marina-text-input--variant-minimal.marina-text-input--filled .marina-text-input__field-wrapper {
  border-color: var(--cds-color-neutral-black);
}

/* Minimal error */
.marina-text-input--variant-minimal.marina-text-input--error .marina-text-input__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}

/* Minimal success — border stays neutral-black (spec: no accent on minimal success stroke) */
.marina-text-input--variant-minimal.marina-text-input--success .marina-text-input__field-wrapper {
  border-color: var(--cds-color-neutral-black);
}

/* ── Prefix / Suffix ─────────────────────────────────────────────────── */
/* spec: text at --spacing-sm2 from respective edge; 16×16px icon form */

.marina-text-input__prefix,
.marina-text-input__suffix {
  padding: var(--spacing-sm2);
  color: var(--cds-color-neutral-black);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  font-family: var(--cds-typography-font-family-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.marina-text-input__prefix--icon,
.marina-text-input__suffix--icon {
  width: var(--spacing-md1);
  height: var(--spacing-md1);
  padding: var(--spacing-sm2);
  box-sizing: content-box;
}

/* ── Clear button ────────────────────────────────────────────────────── */

.marina-text-input__clear {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--cds-color-neutral-500);
  padding: 0;
  flex-shrink: 0;
}

.marina-text-input__clear:hover {
  color: var(--cds-color-neutral-black);
}

/* ── Compact padding ─────────────────────────────────────────────────── */
/* Overrides min-height: 44px (touch target floor) — compact is intentionally
   for dense desktop contexts where 44px targets are not required. */

.marina-text-input--padding-compact .marina-text-input__field {
  padding-top: var(--spacing-sm1);
  padding-bottom: var(--spacing-sm1);
  min-height: 0;
}

/* ── Body-sm text size ───────────────────────────────────────────────── */

.marina-text-input--text-sm .marina-text-input__field,
.marina-text-input--text-sm .marina-label {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

/* ── Character count ─────────────────────────────────────────────────── */

.marina-text-input__char-count {
  font-size: var(--cds-typography-font-size-body-sm-regular-base);
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
  color: var(--cds-color-neutral-black);
  text-align: end;
}

/* ── Feedback (error / success) — now rendered by marina-inline-alert ── */
/* Strip the alert box; field stroke signals state. Icon scaled to 16px to match
   form element scale. Text uses body-regular at error/success color. */
.marina-text-input__feedback .marina-inline-alert {
  border-color: transparent;
  background-color: transparent;
  padding: 0;
  align-items: center;
}

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

.marina-text-input__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);
}

.marina-text-input__feedback[type='error'] .marina-inline-alert__summary {
  color: var(--cds-color-utility-error-shade);
}

.marina-text-input__feedback[type='success'] .marina-inline-alert__summary {
  color: var(--cds-color-utility-success-shade);
}

/* ── Help text ───────────────────────────────────────────────────────── */

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

/* ── Dark mode — appended last; activates when ancestor has [data-mode="dark"] ── */
/* Completely separate from color theming (data-accent / --cds-theme-accent).     */
/* Base styles above are always light — dark only activates when attribute is set. */

/* Gray Fill dark */
:is([data-mode="dark"]) .marina-text-input--variant-gray-fill .marina-text-input__field-wrapper {
  background: var(--cds-color-neutral-500);
  border-bottom-color: var(--cds-color-neutral-200);
}

/* spec: Gray Fill dark filled → neutral-white 2px stroke */
:is([data-mode="dark"]) .marina-text-input--variant-gray-fill.marina-text-input--filled .marina-text-input__field-wrapper {
  border-bottom-color: var(--cds-color-neutral-200);
  border-bottom-width: var(--cds-border-sm);
}

/* White/Black Fill dark */
:is([data-mode="dark"]) .marina-text-input--variant-white-fill .marina-text-input__field-wrapper {
  background: var(--cds-color-neutral-black);
  border-bottom-color: var(--cds-color-neutral-300);
}

/* Minimal dark */
:is([data-mode="dark"]) .marina-text-input--variant-minimal .marina-text-input__field-wrapper {
  background: var(--cds-color-neutral-black);
  border-color: var(--cds-color-neutral-300);
}

/* spec: Minimal filled dark — border shifts to neutral-200 (lighter than neutral-300 base) */
:is([data-mode="dark"]) .marina-text-input--variant-minimal.marina-text-input--filled .marina-text-input__field-wrapper {
  border-color: var(--cds-color-neutral-200);
}

/* Dark — active/focus: focus-state border on all variants */
:is([data-mode="dark"]) .marina-text-input--focus .marina-text-input__field-wrapper,
:is([data-mode="dark"]) .marina-text-input__field-wrapper:focus-within,
:is([data-mode="dark"]) .marina-text-input--active .marina-text-input__field-wrapper {
  outline: var(--cds-border-sm) solid var(--cds-color-utility-wcag-focus-state);
}

:is([data-mode="dark"]) .marina-text-input--variant-minimal.marina-text-input--focus .marina-text-input__field-wrapper,
:is([data-mode="dark"]) .marina-text-input--variant-minimal .marina-text-input__field-wrapper:focus-within,
:is([data-mode="dark"]) .marina-text-input--variant-minimal.marina-text-input--active .marina-text-input__field-wrapper {
  outline: none;
  border-color: var(--cds-color-utility-wcag-focus-state);
}

/* Dark — error/success */
:is([data-mode="dark"]) .marina-text-input--variant-gray-fill.marina-text-input--error .marina-text-input__field-wrapper,
:is([data-mode="dark"]) .marina-text-input--variant-white-fill.marina-text-input--error .marina-text-input__field-wrapper {
  border: var(--cds-border-sm) solid var(--cds-color-utility-error-shade);
}

:is([data-mode="dark"]) .marina-text-input--variant-minimal.marina-text-input--error .marina-text-input__field-wrapper {
  border-color: var(--cds-color-utility-error-shade);
}

:is([data-mode="dark"]) .marina-text-input--success .marina-text-input__field-wrapper {
  border-bottom-color: var(--cds-color-utility-success-shade);
}

:is([data-mode="dark"]) .marina-text-input--variant-minimal.marina-text-input--success .marina-text-input__field-wrapper {
  border-color: var(--cds-color-utility-success-shade);
}

/* Dark — disabled (inherit light opacity rule — no override needed) */

/* Dark — read-only */
:is([data-mode="dark"]) .marina-text-input--read-only .marina-text-input__field-wrapper {
  background: var(--cds-color-neutral-500);
}

/* Dark — typography */
:is([data-mode="dark"]) .marina-text-input__field {
  color: var(--cds-color-neutral-white);
}

:is([data-mode="dark"]) .marina-text-input__field::placeholder {
  color: var(--cds-color-neutral-200);
}

:is([data-mode="dark"]) .marina-text-input--error .marina-text-input__field::placeholder {
  color: var(--cds-color-utility-error-shade);
}

:is([data-mode="dark"]) .marina-text-input__help-text,
:is([data-mode="dark"]) .marina-text-input__char-count {
  color: var(--cds-color-neutral-white);
}

:is([data-mode="dark"]) .marina-text-input__clear,
:is([data-mode="dark"]) .marina-text-input__prefix,
:is([data-mode="dark"]) .marina-text-input__suffix {
  color: var(--cds-theme-text);
}

/* ── Loading state ───────────────────────────────────────────────────── */

.marina-text-input--loading .marina-text-input__field {
  pointer-events: none;
}

.marina-text-input__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-right: var(--spacing-sm2);
}

/* Spinner ring picks up the accent color — matches the theme-colored hover border */
.marina-text-input__spinner .marina-inline-spinner {
  color: var(--cds-theme-accent);
}

:is([data-mode="dark"]) .marina-text-input__spinner .marina-inline-spinner {
  color: var(--cds-theme-accent);
}

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