/* デモを開く前のお知らせ（demo-notice.js が組み立てるダイアログ）。
   トップとドキュメントの両方が読む＝どちらの CSS にも頼らずにこのファイルだけで見た目が決まる。
   色の変数（--ink・--line・--paper）はトップとドキュメントの両方の :root に同じ値である。
   セレクタは class から始める＝トップの h2・p（要素の規則）より強く効く。 */
.notice-dialog {
  width:calc(100vw - 32px);
  max-width:520px;
  padding:28px 30px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink)
}
/* 背景は image-viewer.css の窓と同じ値＝変えたら両方直す */
.notice-dialog::backdrop {
  background:#071526d9;
  backdrop-filter:blur(5px)
}
/* 太さと字間もここで決める＝トップの h2 の規則が効くページと効かないページで見出しが変わらない */
.notice-dialog h2 {
  font-size:18px;
  font-weight:650;
  letter-spacing:0;
  line-height:1.6;
  margin:0 0 14px
}
.notice-dialog p {
  font-size:15px;
  line-height:1.9;
  color:var(--ink);
  margin:0 0 24px
}
.notice-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:12px
}
/* トップの .button・.primary と同じ見た目を写してある（ドキュメントには .button が無いため）。
   トップのボタンの体裁を変えたら、ここも合わせること */
.notice-button {
  display:inline-flex;
  align-items:center;
  gap:28px;
  padding:16px 22px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border-radius:5px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer
}
.notice-button.primary {
  border-color:var(--ink);
  background:var(--ink);
  color:#fff
}
.notice-button.primary:hover {
  background:#2b4059
}
.notice-button:focus-visible {
  outline:3px solid #35669d;
  outline-offset:3px
}
/* 開いている間は背景をスクロールさせない */
body:has(.notice-dialog[open]) {
  overflow:hidden
}
@media(max-width:640px) {
  .notice-dialog {
    padding:24px 20px
  }
}