/*
 * 条件案内チャットの配色。チャットの部品（chat.css）は --sc-* の変数で色を受ける。ここで、このサイトのトークン（site.css の :root）を割り当てる。
 * 白に対するコントラスト: 本文 --sc-ink 15.9:1・--sc-accent 6.5:1・--sc-alert 7.5:1、枠線 --sc-rule 5.7:1（本文は 4.5:1、枠線とフォーカスリングは 3:1 以上）。
 * --sc-plane（見出しの帯・カードの地）は #f7f3f1。その上でも ink 14.4:1・accent 5.9:1・alert 6.8:1・rule 5.2:1。
 * 値を変えるときは tests/chat.test.mjs の計算（実際の値で測る）が落ちないことを確かめる。
 */
.sc-open,
.sc-floating,
.sc-panel {
  --sc-paper: #fff;
  --sc-ink: var(--text);
  --sc-accent: var(--brand-dark);
  --sc-plane: #f7f3f1;
  --sc-alert: #a61b1b;
  --sc-rule: var(--muted);
}

/*
 * 側面パネル（1100px 以上）を開いている間は、記事の側が「画面幅 − パネルの幅」になる。
 * 記事の2段組（本文＋右側の補足）は、その幅では本文が数文字で折り返してしまうので、パネルが開いている間だけ右側の補足を畳む。
 * 畳む幅は、2段組が成り立つ幅（1100px）にパネルの幅（440px）を足した 1540px 未満。
 */
@media (min-width: 1100px) and (max-width: 1539px) {
  html.sc-side-open .article-layout.has-side { display: block; max-width: 794px; }
  html.sc-side-open .side { display: none; }
}