/* 自動補樣式：js/screens/me.js（_build/style.py） */
/* ==========================================================================
   js/screens/me.js：「這台裝置的能力」摘要區
   .s-me__cap-summary、.s-me__cap-chip，以及狀態類 is-verified / is-notVerified / is-unsupported
   狀態以「點的形狀＋文字」表達，不單靠顏色
   ========================================================================== */

.s-me__cap-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: 0;
  min-width: 0;
}

.s-me__cap-chip {
  --cap-tone: var(--text-3);
  --cap-bg: var(--surface-2);
  --cap-fg: var(--text-2);
  --cap-line: var(--border);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  max-width: 100%;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  border: 1px solid var(--cap-line);
  border-radius: var(--r-chip);
  background: var(--cap-bg);
  color: var(--cap-fg);
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 狀態點：形狀不同，色盲與灰階也能分辨 */
.s-me__cap-chip::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-left: var(--sp-1);
  border-radius: 50%;
  background: var(--cap-tone);
}

/* 已驗證：實心點 */
.s-me__cap-chip.is-verified {
  --cap-tone: var(--primary);
  --cap-bg: var(--primary-soft);
  --cap-fg: var(--primary);
  --cap-line: transparent;
}

/* 尚未驗證：空心虛線圈，暖色底 */
.s-me__cap-chip.is-notVerified {
  --cap-tone: var(--up);
  --cap-bg: var(--warn-soft);
  --cap-fg: var(--up);
  --cap-line: transparent;
}

.s-me__cap-chip.is-notVerified::before {
  background: transparent;
  border: 2px dashed var(--cap-tone);
}

/* 未提供：短橫線，中性灰 */
.s-me__cap-chip.is-unsupported {
  --cap-tone: var(--text-3);
  --cap-bg: var(--surface-2);
  --cap-fg: var(--text-2);
  --cap-line: var(--border);
}

.s-me__cap-chip.is-unsupported::before {
  width: 10px;
  height: 3px;
  border-radius: var(--r-chip);
}

/* 狹窄容器：三枚晶片平均分配，避免孤兒換行 */
@container view (max-width: 420px) {
  .s-me__cap-summary {
    gap: var(--sp-2);
  }

  .s-me__cap-chip {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: var(--sp-2);
  }
}

/* 平板以上：略加大間距與字級 */
@container view (min-width: 640px) {
  .s-me__cap-summary {
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
  }

  .s-me__cap-chip {
    min-height: 34px;
    padding-inline: var(--sp-3) var(--sp-4);
    font-size: var(--fs-callout);
  }
}

/* 矮螢幕（手機橫式）：緊湊 */
@media (orientation: landscape) and (max-height: 500px) {
  .s-me__cap-summary {
    margin-bottom: var(--sp-2);
  }

  .s-me__cap-chip {
    min-height: 28px;
  }
}

/* 減少動態：不使用任何動畫或過渡 */
@media (prefers-reduced-motion: reduce) {
  .s-me__cap-chip,
  .s-me__cap-chip::before {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 強制色彩模式：保留點的形狀與邊框 */
@media (forced-colors: active) {
  .s-me__cap-chip {
    border: 1px solid CanvasText;
  }

  .s-me__cap-chip::before {
    background: CanvasText;
  }

  .s-me__cap-chip.is-notVerified::before {
    background: transparent;
    border-color: CanvasText;
  }
}