/* Kole UI Mobile · Input 样式 — 对齐移动端规格 §27
   输入框：高度不小于 44px（--kole-m-touch-target），字号 16px（iOS 聚焦不自动放大）；
   有值且 clearable 时右侧出现清除按钮（视觉 16px、热区补到 44px）；
   错误态 is-error 与 aria-invalid 双写，错误文案在框外下方。 */

.kole-m-field {
  box-sizing: border-box;
  width: 100%;
}

.kole-m-input {
  /* 组件级变量：业务侧可在容器上覆盖（如做紧凑表单） */
  --kole-m-input-height: var(--kole-m-touch-target);  /* 默认高度（≥ 44px 触控最小边长） */
  --kole-m-input-duration: 150ms;                     /* 边框与聚焦外发光的过渡时长 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--kole-space-8);
  width: 100%;
  min-height: var(--kole-m-input-height);
  padding: 0 var(--kole-space-12);
  border: 1px solid var(--kole-color-border);
  border-radius: var(--kole-radius-base);
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-family: inherit;
  font-size: var(--kole-m-font-size-body);
  transition: border-color var(--kole-m-input-duration) var(--kole-ease-standard),
              box-shadow var(--kole-m-input-duration) var(--kole-ease-standard);
}

/* 变体 size=large：一行只放一个字段时用（高度 52px） */
.kole-m-input--large { --kole-m-input-height: 52px; }

/* 状态 focus：聚焦反馈只改边框与外发光，不改高度（避免页面跳动） */
.kole-m-input:focus-within {
  border-color: var(--kole-color-brand);
  box-shadow: 0 0 0 2px var(--kole-color-focus-ring);
}

/* 状态 error：边框变错误色；聚焦时保留错误色，不再叠品牌色 */
.kole-m-input.is-error { border-color: var(--kole-color-error); }
.kole-m-input.is-error:focus-within { border-color: var(--kole-color-error); }

/* 状态 disabled：整框置灰，输入区不可聚焦 */
.kole-m-input.is-disabled {
  background: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
  cursor: not-allowed;
}

/* 整行热区：把「前缀 + 输入区」包在 label 里，点左侧任意位置即聚焦；
   label 里**不能**放 labelable 元素（button 就是），所以清除按钮必须在 label 外 —— 
   否则点击清除会同时激活 label，既触发两次语义又是不合法嵌套。 */
.kole-m-input__hit {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--kole-space-8);
  cursor: text;
}

.kole-m-input__prefix,
.kole-m-input__suffix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-input__control {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--kole-m-input-height);
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--kole-m-font-size-body);
  line-height: 1.4;
}

.kole-m-input__control::placeholder { color: var(--kole-color-text-placeholder); }

.kole-m-input__control:disabled { cursor: not-allowed; color: var(--kole-color-text-disabled); }

/* 禁用态：整行不再是文本光标 */
.kole-m-input.is-disabled .kole-m-input__hit { cursor: not-allowed; }

/* 状态 is-filled：有值时清除按钮才出现（无值时不占位） */
.kole-m-input__clear {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--kole-m-touch-target);
  height: var(--kole-m-touch-target);
  margin-right: calc(var(--kole-space-12) * -1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--kole-color-text-placeholder);
  font-size: var(--kole-m-font-size-label);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.kole-m-input.is-filled .kole-m-input__clear { display: inline-flex; }

.kole-m-input__clear:active { color: var(--kole-color-text-secondary); }

.kole-m-input__clear:focus-visible {
  outline: 2px solid var(--kole-color-focus-ring);
  outline-offset: -2px;
}

.kole-m-input__error {
  display: block;
  margin-top: var(--kole-space-8);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.4;
  color: var(--kole-color-error);
}