/* / にしか無いもの。
 *
 * トークン・器・ヘッダ・カード・表は /dashboard/style.css と共有している。
 * ここに数を書かない（トークンを使う）。 */

/* 読む文章。行間を広めに取り、1 行を読める長さで折る。
 * 段落や箇条書きの間はここが決める。共通のリセットで p / ul の margin を
 * 0 にしてあるので、この規則が無いと段落どうしがくっつく */
.prose {
  max-inline-size: var(--measure);
  font-size: var(--text-s);
  line-height: 1.9;
  --flow: var(--space-s);
}
.prose > * + * { margin-block-start: var(--flow); }

/* 条文が長いページ。34em（35〜40 字）は説明文の幅で、1 万字を超える規約を
 * 流すと画面 14 個分の縦長になり、条番号を追えなくなる（実測 12,673px）。
 * 48em で 1 行 48 字前後、縦はおよそ 3 分の 2 になる。 */
.prose--legal { max-inline-size: 48em; }
.prose h2 {
  font-size: var(--text-xl);
  margin-block-start: var(--space-xl);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--line);
}
.prose h3 { font-size: var(--text-l); margin-block-start: var(--space-m); }
/* 利用規約の条見出し。数が多いので小さく詰める */
.prose h6 { font-size: var(--text-s); margin-block-start: var(--space-m); color: var(--text-strong); }
.prose li + li { margin-block-start: var(--space-3xs); }
.prose img {
  display: block; border: 1px solid var(--line); border-radius: var(--radius-s);
}

/* 統計の定義。6 つを 1 ページに並べる。1 件ずつは数行しかないので、
 * 別のページに分けると行き来のほうが手間になる。
 * ダッシュボードからは #<名前> で節へ直接来る */
.stat {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding: var(--space-m);
  border-radius: var(--radius); background: var(--surface);
  /* 節に直接来たとき、見出しが上端に貼り付かないようにする */
  scroll-margin-block-start: var(--space-m);
}
.stat > h2 { font-size: var(--text-l); font-weight: 700; }
.stat .stat-desc { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.stat p { font-size: var(--text-s); }

/* 統計の式。分数を縦に組む。地の文と混ざらないよう、白い面に載せる */
.post-math {
  align-self: start;
  margin-block: var(--space-2xs);
  padding: var(--space-2xs) var(--space-m);
  border-radius: var(--radius-s); background: var(--bg);
  font-size: var(--text-s);
}
.fraction { display: inline-block; vertical-align: middle; text-align: center; margin-inline: var(--space-3xs); }
.fraction_n { display: block; padding: 0 var(--space-2xs) var(--space-3xs); }
.fraction_d { display: block; padding: var(--space-3xs) var(--space-2xs) 0; border-block-start: 1px solid var(--text); }

/* 定義の注記。もとは「※」を並べた 1 段落だった。数が増えると読めないので
 * 箇条書きにしてある。点は打たず、字下げだけで並びを示す */
.notes {
  margin: 0; padding: 0; list-style: none;
  font-size: var(--text-xs); color: var(--text-soft);
}
.notes li { padding-inline-start: 1.2em; text-indent: -1.2em; }
.notes li::before { content: '※'; margin-inline-end: 0.4em; color: var(--text-muted); }
.notes li + li { margin-block-start: var(--space-3xs); }

/* トップだけ中央揃え。ここは読ませるページではなく、行き先を示す入口。
 * 統計情報一覧や利用規約は読む文章なので、左揃えのままにする。 */
.home main { align-items: center; text-align: center; }
.home .hero { align-items: center; }
.home .prose { text-align: center; }
/* 見出しの下の短い罫。BD4C のトップと同じ */
.home h1::after {
  content: ''; display: block;
  inline-size: 2.5rem; block-size: 3px; margin: var(--space-s) auto 0;
  border-radius: 2px; background: var(--accent-strong);
}
.home .prose h2 { border-block-end: 0; padding-block-end: 0; }

/* 登録とメールアドレス確認の画面（/api/register・/api/verify）。HTML は
 * bd4c-disease-estimation-terraform の register モジュールの Lambda が返すが、
 * 器とカードはここと /dashboard/style.css のものをそのまま使っている。
 *
 * .home の中央揃えだと、カードが中身の幅まで縮む。入力欄が 1 つしか無いので、
 * そのままでは 10 文字ぶんほどの欄になる。34em は読む文章の 1 行で、
 * 入力欄もそれ以上に広げる理由が無い。 */
.register .card { inline-size: min(100%, var(--measure)); }