/* ECO component CSS: input. Shared by the docs page (eco-design-system/components/input.html) and every prototype/product page.
   Skill: eco-input. Link it, do not copy it: <link rel="stylesheet" href="/components/css/input.css">
   [data-state="…"] selectors only serve the docs pages' forced-state demos; they are inert elsewhere. Tokens only. */
    /* ── Field: label, input box, message ── */
    .form-field { display: flex; flex-direction: column; gap: var(--dimension-spacing-space-4); }
    .form-label {
      font-family: 'Breuer Condensed', sans-serif; font-feature-settings: 'ss02' 1, 'ss03' 1;
      font-size: 12px; font-weight: 600; line-height: 12px; letter-spacing: 0.48px; /* label-sm (mobile) */
      text-transform: uppercase; color: var(--color-text-primary);
    }

    /* Wrapper: carries the focus ring (2px, 3px outside the box) */
    .input-wrap { position: relative; }
    .input-wrap::after {
      content: ''; position: absolute; inset: -3px; pointer-events: none; opacity: 0;
      border: 2px solid var(--color-border-focus);
      transition: opacity var(--duration-fast-3) var(--ease-standard);
    }
    body.keyboard-nav .input-wrap:focus-within::after,
    .input-wrap[data-state="focus"]::after { opacity: 1; }

    /* Input box: border, fill, height. Left icon, input and right icons sit inside it. */
    .input-box {
      display: flex; align-items: center; gap: var(--dimension-spacing-space-8);
      box-sizing: border-box; height: 40px; padding: 0 var(--dimension-spacing-space-4) 0 var(--dimension-spacing-space-8); /* Large, mobile */
      border: 1px solid var(--color-border-input-default);
      background: var(--color-surface-raised-primary);
    }
    .input-box--sm, .input-box--xs { height: 32px; padding-right: 6px; } /* 6px: literal, no token */

    .form-input {
      flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent;
      font-family: 'Breuer Condensed', sans-serif; font-feature-settings: 'ss02' 1, 'ss03' 1, 'ss06' 1;
      font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: 0.32px; /* body-md (mobile) */
      color: var(--color-text-primary);
    }
    .input-box--sm .form-input, .input-box--xs .form-input { font-size: 14px; line-height: 20px; letter-spacing: 0.36px; } /* body-sm */
    .form-input::placeholder { color: var(--color-text-tertiary); }

    /* States */
    .input-box:is(:hover, [data-state="hover"]) { border-color: var(--color-border-hover); }
    .input-box:is(:focus-within, [data-state="active"]) { border-color: var(--color-border-selected); }  /* Active: the field is being used (focus). A value alone does not select it. */
    .input-box--error   { border-color: var(--color-border-danger-default); }
    .input-box--success { border-color: var(--color-border-success-default); }
    .input-box:has(.form-input:disabled) {
      background: var(--color-surface-raised-secondary); border-color: var(--color-border-disabled); cursor: not-allowed;
    }
    .form-input:disabled { color: var(--color-text-disabled); cursor: not-allowed; }
    .form-input:disabled::placeholder { color: var(--color-text-disabled); }
    .input-box--error:focus-within { border-color: var(--color-border-danger-default); }
    .input-box--success:focus-within { border-color: var(--color-border-success-default); }

    /* Icons (Material Symbols Outlined, weight 300) */
    .input-icon {
      flex-shrink: 0; width: 20px; height: 20px; font-family: 'Material Symbols Outlined'; font-size: 20px; line-height: 1;
      font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
      font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; color: var(--color-icon-primary); user-select: none;
    }
    .input-icon--lg { width: 24px; height: 24px; font-size: 24px; }      /* left icon, Large */
    .input-icon--fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
    .input-box:has(.form-input:disabled) .input-icon { color: var(--color-text-disabled); }

    /* Right-hand icons: clear | divider | actions */
    .input-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--dimension-spacing-space-4); margin-left: 10px; } /* 10px: literal */
    .input-box--sm .input-actions, .input-box--xs .input-actions { margin-left: var(--dimension-spacing-space-16); }
    /* Each icon is a Button (Blank, icon only, 6px padding = 32px) in Large, and an Icon Button (the 20px icon itself) in Small / XSmall */
    .input-actions__btn { display: flex; padding: 0; border: 0; background: transparent; color: var(--color-text-action-primary); cursor: pointer; }
    .input-actions__btn .input-icon { color: inherit; }
    .input-actions__btn:hover { color: var(--color-text-action-primary-hover); }                       /* Icon Button hover: the icon turns grey */
    .input-box:not(.input-box--sm):not(.input-box--xs) .input-actions__btn { padding: 6px; }          /* Button: 6px is a literal, no token */
    .input-box:not(.input-box--sm):not(.input-box--xs) .input-actions__btn:hover { background: var(--color-surface-opacity-black-05); color: var(--color-text-action-primary); } /* Button hover: fill */
    .input-actions__btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 0; }
    .input-actions__divider { width: 1px; height: 16px; background: var(--color-border-tertiary); }
    .input-box:not(:has(.form-input:not(:placeholder-shown))) :is(.input-actions__clear, .input-actions__divider) { display: none; } /* clear only with a value */
    .input-box:has(.form-input:disabled) .input-actions__btn { cursor: not-allowed; color: var(--color-text-disabled); background: transparent; }

    /* Message */
    .form-helper {
      display: flex; align-items: center; gap: var(--dimension-spacing-space-4);
      font-family: 'Breuer Condensed', sans-serif; font-feature-settings: 'ss02' 1, 'ss03' 1, 'ss06' 1;
      font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.36px; color: var(--color-text-tertiary); /* body-sm */
    }
    .form-helper .input-icon { color: inherit; }
    .form-helper--error { color: var(--color-text-danger-default); }
    .form-helper--success { color: var(--color-text-success-default); }
    .form-helper--disabled { color: var(--color-text-disabled); }

    /* Desktop (769px and up): Large 48px, Small 40px, XSmall 32px */
    @media (min-width: 769px) {
      .form-label { font-size: 16px; line-height: 16px; letter-spacing: 0.48px; }      /* label-md */
      .form-label--sm { font-size: 14px; line-height: 14px; letter-spacing: 0.56px; }  /* label-sm */
      .input-box { height: 48px; padding: 0 var(--dimension-spacing-space-8) 0 var(--dimension-spacing-space-12); }
      .input-box--sm { height: 40px; padding: 0 var(--dimension-spacing-space-4) 0 var(--dimension-spacing-space-8); }
      .input-box--xs { height: 32px; padding: 0 6px 0 var(--dimension-spacing-space-8); }
      .input-actions, .input-box--sm .input-actions { margin-left: var(--dimension-spacing-space-4); }
      .input-box--xs .input-actions { margin-left: var(--dimension-spacing-space-16); }
      .input-box--sm .input-actions__btn { padding: 6px; }                                /* Small is a Button on desktop */
      .input-box--sm .input-actions__btn:hover { background: var(--color-surface-opacity-black-05); color: var(--color-text-action-primary); }
      .form-input { font-size: 17px; line-height: 24px; }                                 /* body-md */
      .input-box--sm .form-input, .input-box--xs .form-input { font-size: 14px; line-height: 20px; }
    }