/* utilities.css — 単機能のユーティリティ
   ページ固有CSSを作らないための最小限の道具。増やしすぎない。 */

/* 比較表・計算結果の数値。桁を揃えることは装飾ではなく機能である
   （TYPOGRAPHY.md §1） */
.num {
  font-variant-numeric: var(--font-numeric-table-num);
}

/* 視覚的に隠すが読み上げには残す。display:none を使わない
   （ACCESSIBILITY.md §11） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

.small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.muted {
  color: var(--color-text-muted);
}

.secondary {
  color: var(--color-text-secondary);
}

/* 記事冒頭のリード文。結論の要約を置く（COMPONENTS.md §4） */
.lead {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.mono {
  font-family: var(--font-mono);
}

.nowrap {
  white-space: nowrap;
}

.stack-0 {
  margin-bottom: 0;
}

.stack-4 {
  margin-bottom: var(--space-4);
}

.stack-5 {
  margin-bottom: var(--space-5);
}