/* Kole UI Mobile · Typography 样式 — 对齐移动端规格 §37
   文字层级：标题 / 正文 / 辅助 / 次要；字号与字色全部走令牌，本文件不写死字号。
   可省略（ellipsis）只在单行生效；可复制（copyable）右侧给一个原生 button —— 复制动作本身
   由宿主负责（本组件不读剪贴板），宿主完成后给根元素加 is-copied 作为反馈。
   静态组件：根与文字节点不带 cursor:pointer，唯一的可点元素是复制按钮（原生 button）。 */

.kole-m-typography {
  --kole-m-typography-gap: var(--kole-space-8);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--kole-m-typography-gap);
  color: var(--kole-color-text-body);
  font-family: var(--kole-font-family);
  font-size: var(--kole-m-font-size-body);
  line-height: 1.5;
}

.kole-m-typography__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* 变体 level：四个层级（标题 / 正文 / 辅助 / 次要） */
.kole-m-typography--title {
  font-size: var(--kole-m-font-size-title);
  font-weight: 600;
  line-height: 1.4;
  color: var(--kole-color-text-title);
}

.kole-m-typography--body {
  font-size: var(--kole-m-font-size-body);
  color: var(--kole-color-text-body);
}

.kole-m-typography--assist {
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
}

.kole-m-typography--secondary {
  font-size: var(--kole-m-font-size-caption);
  color: var(--kole-color-text-tertiary);
}

/* 变体 ellipsis=true：单行省略（多行省略不在本组件范围内） */
.kole-m-typography--ellipsis .kole-m-typography__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 变体 copyable=true：右侧出现复制按钮（热区 44px，负外边距吸收，不撑高行） */
.kole-m-typography--copyable .kole-m-typography__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--kole-m-touch-target);
  height: var(--kole-m-touch-target);
  margin-inline-end: calc(-1 * var(--kole-space-8));
  padding: 0;
  border: 0;
  border-radius: var(--kole-radius-base);
  background: none;
  color: var(--kole-color-brand);
  font-family: inherit;
  font-size: var(--kole-m-font-size-label);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.kole-m-typography--copyable .kole-m-typography__copy:active {
  background: var(--kole-color-brand-bg);
}

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

/* 状态 is-copied：宿主复制成功后加的反馈（色变，不改文字宽度以免布局跳动） */
.kole-m-typography.is-copied .kole-m-typography__copy {
  color: var(--kole-color-success);
}