/* 面の共通(brand-faces)── 4 面が tokens.css の次に読む body の規則。www/scripts/brand-assets.mjs が muses・console へ写す。
 * 置き場の正典は tech 95「配信の素材の置き場」(B2)。中身は tokens.css の www 追記から移したもの。 */

/* wf-0 ── www 側の追記(ガイド原本には無い配信側の規則、tech 75「body の地は tokens.css が塗る」)。
 * 生成された shell が body に置く 4 値(--bg/--bg-image/--text/--accent、既定は shell.gleam の
 * ThemeDefaults、嬢の page では嬢のテーマ)をそのまま読む。書体は --ma-font-ui(Noto Sans JP)、
 * @font-face は /fonts/ui.css(www/scripts/article-fonts.mjs が書く)。
 * margin: 0 ── ブラウザ既定の 8px を消し、深朱の帯を画面の端から端までにする(wf-0 r2)。
 */
body {
  margin: 0;
  background-color: var(--yumemi-theme-bg, var(--ma-color-canvas));
  background-image: var(--yumemi-theme-bg-image, none);
  color: var(--yumemi-theme-text, var(--ma-color-text));
  font-family: var(--ma-font-ui);
}

/* 帯を画面の上に留める(sticky-header、役員 人見 2026-10-13)── 3 面(www・muse link・muse editor)の帯(SiteHeader の `header[data-sticky-band]`)は
 * Layout の header の Area の `pin: Top`(position: sticky; top: env(safe-area-inset-top); z-index: 3)で画面の上に残る。頁内の飛び先(`/settings#affiliations` など)が
 * 帯の下に隠れないよう、飛びの余白を帯の高さ(--ma-header-height = 56px)+ 上の safe area に取る。console・admin は帯が留まらないので、この印のある頁だけ。 */
html:has([data-sticky-band]) {
  scroll-padding-top: calc(var(--ma-header-height) + env(safe-area-inset-top, 0px));
}

/* チャットの頭をサイトの帯のすぐ下に留める(chat-face r2、役員 人見 2026-10-21「ヘッダは残して」)── 嬢の面と客の面のチャットの頁の頭(ChatHead の
 * `[data-chat-head]`)。Area の `pin: Top` は `top: env(safe-area-inset-top)` でサイトの帯(Layout の header、同じ `pin: Top`)と同じ位置を取り合い、
 * yumemi の Style に「別の帯の下に止める」語彙が無い(top の値を持たない)ので、ここで帯の高さ(--ma-header-height = 56px、帯の Area の最小高さ)+ 上の
 * safe area を top に置く。頭は発言の並びと同じ置き場の先頭にあり、sticky の親はその置き場(発言の並びの高さ)。z-index は帯・送りの欄と同じ 3。
 * 帯の下に文言(el.notice)が出ている間は帯が高くなり、その分だけ頭が文言に重なる。 */
[data-chat-head] {
  position: sticky;
  top: calc(var(--ma-header-height) + env(safe-area-inset-top, 0px));
  z-index: 3;
}

/* チャットの送りの欄を下の帯のすぐ上に留める(chat-face r2、chat-dock-bottom で sticky から fixed に)── 欄(`[data-chat-dock]`)は発言の並び(Block chat_thread、Live)の
 * 末尾の子で、別の Live の Block にしない(柏木 P1-1 ── 合図ごとに chat_read が 2 回走る)。Area の `pin` は Area にしか掛からないので、位置はここで持つ。
 * sticky だった間は、包む箱(発言の並び)の終わりで止まり、一番下まで送ると Layout の足元が箱の後ろに出て欄が帯から離れて浮いた(役員 人見 2026-10-22)。
 * fixed は包む箱に縛られないので、どこを読んでいても欄は帯の上端に着いて動かない。幅は頁の列と同じ ── left は static のまま(列の左端 + この Block の余白 16px)に、
 * margin-left: -16px で列の左端に寄せ、幅は狭い画面(頁の列が画面いっぱいの間)なら画面の幅、PC(1024px 以上、Layout の PC の格子)なら列の 24.375rem。
 * 帯の高さの分は欄の透明の下の縁(3.5rem)、iPhone の下端のバーの分は欄の中の空き(env(safe-area-inset-bottom))が持ち、どちらも帯の後ろに隠れる(帯は後に描かれて上)。 */
[data-chat-dock] {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0 0 0 -16px;
  z-index: 3;
}

@media (min-width: 1024px) {
  [data-chat-dock] {
    width: 24.375rem;
  }
}

/* 固定の欄は頁の高さに入らないので、足元(Layout の `footer`)の下に欄の高さの分の空きを取る ── 一番下まで送ると足元が欄の上に出て押せ、最後の発言も欄に隠れない。
 * 高さは逃げ道 `chat_dock` が `--chat-dock-h` に書く(欄は 1〜3 行に伸びる)。JS が無いときの既定は 1 行の欄の高さ。 */
body:has([data-chat-dock]) footer {
  margin-bottom: var(--chat-dock-h, 4.5rem);
}

/* 「これが最新のメッセージです」の行(Block chat_thread の `[data-chat-latest]`、chat-latest)── JS が無いときの「最新の発言へ」(`#chat-latest`)の行き先。
 * 頁内の印へ飛ぶとき、行の上端を送りの欄の面の上端に寄せる(最新の発言の下端が欄のすぐ上に付き、足元は欄の後ろ)。JS があるときは逃げ道 `chat_latest` が同じ位置へ送る(実際の欄の位置を測る)。
 * 欄の面の上端は、画面の下端から 下の帯 3.5rem + 欄の高さ(`--chat-dock-h`)の所。 */
[data-chat-latest] {
  scroll-margin-top: calc(100svh - 3.5rem - var(--chat-dock-h, 4.5rem));
}