/* リセット・タイポグラフィ・リンク・フォーカス・ユーティリティ(docs/design/ui/001-design-system.md セクション3.2・3.3) */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-12)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 { font-size: var(--text-xl); line-height: 1.3; }
h2 { font-size: var(--text-lg); line-height: 1.4; }
h3 { font-size: var(--text-base); line-height: 1.4; color: var(--text-muted); }
p { margin: 0 0 var(--space-3); }
strong, b, th { font-weight: 600; }
small { font-size: var(--text-xs); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
code { font-size: 0.92em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
/* 本文中のリンクは、色だけに頼らず常に下線を出す */
main p a, main li a, main .case-managed-note a, main .scope-note a { text-decoration: underline; }

/* フォーカスは消さない */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 金額・件数・日付(右寄せ・等幅の数字) */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.amount-income { color: var(--income); }
.amount-expense { color: var(--expense); }

.th-plain { font-weight: 400; }
.text-faint { color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- 横あふれの型の一括予防(docs/design/ui/001-design-system.md セクション5「段階4の設計」) ---
   fieldsetは既定のmin-width(中身の最小幅)で縮まず、selectは最長の選択肢の幅になる。長い英数字は折り返されない。
   最後の網(overflow-x: clip)は入れない(内容が切れて、見えないまま残る)。あふれは、横あふれのテストで見つける。 */
fieldset { min-width: 0; }
:where(input, select, textarea) { max-width: 100%; }
select { text-overflow: ellipsis; }
:where(td, .entry-cell) select { max-width: 24rem; }
:where(p, li, h1, h2, h3, summary, .flash, .scope-note, .case-managed-note, code) { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* 長い文字が入る列のセル(表全体にanywhereを当てると、数値の列が1文字まで縮む。長い文字の列にだけ付ける) */
.cell-wrap { min-width: 12rem; overflow-wrap: anywhere; }