/* Kole UI Mobile · Grid 样式 — 对齐移动端规格 §14
   宫格：等分列排布；可点格子用原生 button（整块热区 + 键盘可达）；
   按下反馈用 :active（触屏无悬停）；格线用 border + 负外边距抵消。 */

.kole-m-grid {
  --kole-m-grid-columns: 4;
  --kole-m-grid-icon-size: 32px;
  display: grid;
  grid-template-columns: repeat(var(--kole-m-grid-columns), 1fr);
  background: var(--kole-color-card-bg);
}

/* 变体 columns：每行格数 */
.kole-m-grid--2 { --kole-m-grid-columns: 2; }
.kole-m-grid--3 { --kole-m-grid-columns: 3; }
.kole-m-grid--4 { --kole-m-grid-columns: 4; }

.kole-m-grid__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kole-space-8);
  min-height: var(--kole-m-touch-target);
  padding: var(--kole-space-16) var(--kole-space-8);
  border: 0;
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-family: var(--kole-font-family);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

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

/* 状态 active：按下反馈（触屏不用 :hover） */
.kole-m-grid__item:active { background: var(--kole-color-table-header-bg); }

.kole-m-grid__icon {
  font-size: var(--kole-m-grid-icon-size);
  line-height: 1;
  color: var(--kole-color-brand);
}

.kole-m-grid__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 纯展示格子（不可点） */
.kole-m-grid__item--static {
  cursor: default;
}

.kole-m-grid__item--static:active { background: var(--kole-color-card-bg); }

/* 变体 square=true：格子撑成正方形 */
.kole-m-grid--square .kole-m-grid__item { aspect-ratio: 1 / 1; }

/* 状态 disabled：置灰且不可点 */
.kole-m-grid__item:disabled,
.kole-m-grid__item.is-disabled {
  color: var(--kole-color-text-disabled);
  cursor: not-allowed;
}

.kole-m-grid__item:disabled .kole-m-grid__icon { color: var(--kole-color-text-disabled); }
.kole-m-grid__item:disabled:active { background: var(--kole-color-card-bg); }

/* 变体 border=true：格线（用 outline 避免相邻边框叠加变粗） */
.kole-m-grid--border .kole-m-grid__item {
  outline: 1px solid var(--kole-color-border);
  outline-offset: -1px;
}