/* www の追記(brand-faces で tokens.css から割った後半)── www の Area と block を名指しする配信側の規則。
 * 読み込みは tokens.css → faces.css → www.css(Shell の `stylesheets` が head に並べる、nv-4)。他の面へは写さない。 */

/* wf-0 r2 ── 下端の共通ナビを 1 行の棒に。yumemi の Style に justify-content・white-space・
 * display:contents の語彙が無いので配信側で掛ける(棒の面と項目の寸法・下線なしは Style が持つ)。
 * * white-space: nowrap は棒に置く ── 継承で 4 つ目(逃げ道の中の a)まで届く。
 * T1:固定の 3 つ + 島の 4 つ目(「マイページ」か「登録 / ログイン」)。島の描画の前後で項目の幅が跳ねないよう、棒は 4 列の grid
 * (4 列目は長い方の「登録 / ログイン」が入る幅)で先に列を確保する。
 * 0.12:4 つ目は名前付きの逃げ道 nav_account の要素(棒の grid 項目そのもの)で、0.11 の島の入れ子を解く display:contents は要らない
 * (生成物の要素名は第 29 条で名指せない)。
 */
nav[aria-label="共通ナビ"] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.6fr;
  align-items: center;
  justify-items: center;
  white-space: nowrap;
}

/* yumemi 0.12 ── 生成物(Area・格子・生成のクラス)を名指す規則は書けない(第 29 条)。0.11 のこの file の 8 選択子はこう移した:
 * 足元の中央寄せ → SiteFooter の Style(TextAlign)、帯の深朱 → style.band がブランドの値を直に読む、ナビの地・罫線・下端・PC の幅 →
 * style.nav_bar(Border TopEdge・Responsive PC)と Layout の pin: BottomFlush、格子の高さと行 → Layout の StyledFrame、
 * 嬢のテーマからナビを外す変数 → ナビの要素(nav[aria-label="共通ナビ"])に、地の画像の頁の透ける面 → body の変数に。 */

/* wf-2a ── 嬢のテーマ(75「見た目の入れ方」末尾、ガイド §13)。嬢の 6 page は生成 shell が body に
 * 4 値(--yumemi-theme-bg/-bg-image/-text/-accent)を書く。嬢の頭の block(muse_header)の data-ma-muse を印に、
 * 部品の色の導出を嬢の値へ切り替える(導出の式は .ma-muse-theme と同じ)。
 * 上の帯はどのテーマでも深朱のまま(Q1)── style.band がブランドの値を直に読む。
 */
body:has([data-ma-muse]) {
  --ma-color-canvas: var(--yumemi-theme-bg, var(--ma-brand-paper));
  --ma-color-surface: var(--ma-color-canvas);
  --ma-color-text: var(--yumemi-theme-text, var(--ma-brand-ink));
  --ma-color-muted: var(--ma-color-text);
  --ma-color-action: var(--yumemi-theme-accent, var(--ma-brand-red));
  --ma-color-focus: var(--ma-color-text);
  --ma-color-control-border: var(--ma-color-text);
  --ma-color-error: var(--ma-color-text);
  --ma-color-selection: color-mix(in srgb, var(--ma-color-text) 12%, var(--ma-color-canvas));
  --ma-color-rule: color-mix(in srgb, var(--ma-color-text) 20%, var(--ma-color-canvas));
}

/* wt-1 ── 下端のナビ(Block CommonNav)も MuseArch の物で、嬢のテーマから外す(役員 人見 2026-10-11
 * 「ロゴを変えないなら nav も色を変えない」)。部品の導出は継承で body の嬢の値が届くので、tokens.css の :root と
 * 同じ値をナビの要素で書き直す(ナビの Area の地と罫線は style.nav_bar がブランドの値で塗る)。color は
 * body の嬢の字を墨の字に戻す。嬢のタブ(MuseNav)・本文・footer は嬢の色のまま。
 */
body:has([data-ma-muse]) nav[aria-label="共通ナビ"] {
  --ma-color-canvas: var(--ma-brand-paper);
  --ma-color-surface: var(--ma-brand-white);
  --ma-color-text: var(--ma-brand-ink);
  --ma-color-muted: var(--ma-neutral-muted);
  --ma-color-rule: var(--ma-neutral-rule);
  --ma-color-control-border: var(--ma-neutral-control);
  --ma-color-action: var(--ma-brand-red);
  --ma-color-on-action: var(--ma-brand-paper);
  --ma-color-selection: var(--ma-brand-soft);
  --ma-color-error: var(--ma-brand-red);
  --ma-color-focus: var(--ma-color-text);
  color: var(--ma-color-text);
}

/* bg-1 ── 嬢の背景画像(役員 人見 2026-10-11)。画像は生成 shell が body に置く --yumemi-theme-bg-image の 1 枚だけで、画面に固定した
 * 層(body::before、position: fixed・cover・中央)に敷く ── 頁を送っても画像は動かず、本文だけが流れる。
 * background-attachment: fixed は電話のブラウザで効かないので使わない。
 * 印は頭の Block(MuseHeader)が背景画像の在る嬢だけに置く data-ma-bg-image。画像の無い嬢・テーマの無い嬢には掛からない。
 * 画像が在る嬢では頁の地も板(頭・在籍・タブ・本文のカード・Widget)も背景色で塗らない ── 面の 2 色(canvas・surface)を
 * body で透明にし、画像が全面に透ける(0.11 は page と footer の Area で透明にしていた。0.12 は Area を名指せないので body で
 * 透明にし、帯は style.band、ナビは上の規則と style.nav_bar がブランドの値で塗る)。字は嬢の文字色のまま。
 * 罫線・選択の色(--ma-color-rule・-selection)は背景色から混ぜた値のまま ── 透明にした canvas でなく嬢の地の色で混ぜ直す。
 * 頁の中の <dialog>(Story のシート・確かめ)は画像の上に浮かぶ面なので、背景色の地に戻す。
 * body の background-image(faces.css)は消す ── 残すと敷き詰めの画像が層の下に 2 枚目として描かれる。
 */
body:has([data-ma-muse][data-ma-bg-image]) {
  background-image: none;
  --ma-color-canvas: transparent;
  --ma-color-surface: transparent;
  --ma-color-selection: color-mix(in srgb, var(--ma-color-text) 12%, var(--yumemi-theme-bg, var(--ma-brand-paper)));
  --ma-color-rule: color-mix(in srgb, var(--ma-color-text) 20%, var(--yumemi-theme-bg, var(--ma-brand-paper)));
}
body:has([data-ma-muse][data-ma-bg-image])::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background: var(--yumemi-theme-bg-image) center / cover no-repeat;
  pointer-events: none;
}
body:has([data-ma-muse][data-ma-bg-image]) dialog {
  --ma-color-canvas: var(--yumemi-theme-bg, var(--ma-brand-paper));
  --ma-color-surface: var(--ma-color-canvas);
}

/* mi-2 ── 写真の読み込み中に出す小さい点の格子。img の background にだけ描き、画像が届けば
 * 不透明な画素がこの絵を覆う ── 届くまでの間、枠が空や地の色のままに見えない。JS は足さない。
 * 点は 10px 格子の小さい点だけを枠いっぱいに、単色で、動かさない(役員 人見 2026-10-17
 * 「読みが速く塊が動いて見えないので大きい丸は要らない」)。
 * 掛けるのは写真だけ(/media/・/api/media/ で始まる src と、mi-1 の既定の絵
 * muse-default.webp・客の既定の絵 fan-default.webp)。
 * ロゴ・アイコン・svg には掛けない(透過の後ろに点が透けるのを防ぐ)。
 * 点の色は --ma-color-action そのまま、地と混ぜない。嬢の頁ではその嬢のアクセント、
 * それ以外の頁は MuseArch の赤(--ma-color-action は tokens.css の :root で赤、嬢の頁
 * (上の body:has([data-ma-muse]))で嬢のアクセントに替わる)。地は --ma-color-canvas。
 */
img[src^="/media/"],
img[src^="/api/media/"],
img[src$="/brand/muse-default.webp"],
img[src$="/brand/fan-default.webp"] {
  --ma-dots-small: var(--ma-color-action);
  --ma-dots-ground: var(--ma-color-canvas);
  background-color: var(--ma-dots-ground);
  background-image: radial-gradient(circle at 5px 5px, var(--ma-dots-small) 1.2px, transparent 1.3px);
  background-size: 10px 10px;
  background-repeat: repeat;
}

/* al-1 ── 嬢の記事一覧の行(block article_list)。題は 2 行で切る(書き出しは line-clamp で切らない ── 切るのは al-4 の島)。yumemi の Style に
 * line-clamp の語彙が無いので配信側で掛ける(印は block が題に data-ma-line-clamp-2 を置く)。
 */
[data-ma-line-clamp-2] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* pn-5・pn-5b・pn-7b ── 記事の頁の通報(block article_detail)。題と公開時刻の行は 1 つの grid(題の塊、帯・公開時刻・旗の 3 列)で、
 * 公開時刻の行と通報の details は display: contents ── 閉じている間は旗(summary)が 2 段目の右端の列に並び、開いた中身は 3 段目で
 * 帯の列も含めた全幅に落ちる(帯は 1・2 段目だけなので伸びない)。中身を包む ::details-content の箱
 * (Chromium 153 で確かめた。対応は Chromium 131・Firefox 143・Safari 18.4 からと見ている)が grid の子になるので、その箱に grid-column・grid-row を掛ける(yumemi の Style に語彙が無い)。
 * 包む箱を持たない処理系では中身の div が grid の子で、block が div に置く style の grid-column・grid-row が効く。
 */
[data-report-article]::details-content {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* al-4 ── 記事一覧の書き出しの「…続きを見る」(島 article-lead-fit が 50 字目を含む見た目の行の終わりに置く)。
 * 「続きを見る」は行全体のリンクの中の文字で、色は本文のリンク(style.link の操作色)。
 * 測る前の揺れを抑える:JS が動く環境(scripting: enabled)では、島が測り終えるまで(data-article-lead-fit が付くまで)
 * 書き出しを 4 行の高さに留める。島が来ない・落ちたときは 2 秒で留めを外して全文に戻す。JS が無い環境は留めない(全文)。
 */
[data-article-lead-more-label] {
  color: var(--ma-color-action);
}

@media (scripting: enabled) {
  [data-article-lead]:not([data-article-lead-fit]) {
    max-height: 4lh;
    overflow: hidden;
    animation: ma-article-lead-release 0s 2s forwards;
  }
}

@keyframes ma-article-lead-release {
  to {
    max-height: none;
    overflow: visible;
  }
}

/* pn-1 ── 嬢の TOP の「固定された記事」(Widget Articles、役員 人見 2026-10-11)。見出しは 📌 の SVG(字の色)と題を 1 行に並べ、
 * 記事は 1 行の横の帯(帯の並びと横スクロールは Style の Scroller が持つ)。yumemi の Style に scroll-snap・flex-basis・
 * text-overflow・スクロールバーを隠す語彙が無いので、印(data-ma-pinned-*)を名指して配信側で掛ける。
 * 1 枚の幅は「3 枚が見え、4 枚目の端(0.3 枚分)が覗く」── (帯の幅 − 隙間 3 本)÷ 3.3。隙間は Style の Gap の 8px。
 * 枠から帯が頁の幅を押し広げないよう、枠は min-width: 0・max-width: 100%。1 枚ずつ止める(scroll-snap-type: x mandatory)。
 * 帯の横送りが頁の「戻る」の動きに繋がらないよう overscroll-behavior-x: contain。縦の送りは頁が受ける(touch-action の既定)。
 * 背景画像の在る嬢(bg-1)でも枠の地は面の 2 色(透明にされる)を読むので、画像は透けたまま。字は嬢の文字色。
 * pn-4:どの枚も絵(api が解いた記事の絵か既定の絵)と題 1 行になり、画像の無い記事の札(data-ma-pinned-plain)は消した。
 */
[data-ma-pinned] {
  min-width: 0;
  max-width: 100%;
}
[data-ma-pinned-heading] {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-ma-pinned-icon] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
[data-ma-pinned-heading] > h3 {
  min-width: 0;
}
[data-ma-pinned-strip] {
  min-width: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
[data-ma-pinned-strip]::-webkit-scrollbar {
  display: none;
}
[data-ma-pinned-tile] {
  flex: 0 0 calc((100% - 24px) / 3.3);
  min-width: 0;
  scroll-snap-align: start;
}
[data-ma-pinned-tile] > a {
  display: block;
}
[data-ma-pinned] [data-ma-pinned-image] {
  display: block;
  width: 100%;
  height: auto;
}
[data-ma-pinned] [data-ma-pinned-caption] {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Widget の画像(block widget_image)は枠いっぱいの幅(0.11 は img の width="100%" の属性 ── 0.12 の `attr.width` は Int)。 */
[data-ma-widget-image] {
  width: 100%;
}

/* 嬢のタブ(block muse_nav)の項目は左右の余白 0(「スケジュール」が 1 行に収まる)。Style に縦だけの余白の語彙が無いので
 * 印の規則で(0.11 は style の属性)。生成のクラスの padding より強くするため a を付ける。 */
a[data-ma-muse-nav-item] {
  padding-inline: 0;
}

/* 店の TOP のおすすめの帯(block store_widget_pickup)の写真と、在籍の頁(block cast_profile)の 1 枚目は、列・枠いっぱいの幅。
 * Style に割合の幅の語彙が無いので印の規則で(高さは Crop の比から決まる)。 */
img[data-ma-pickup-photo],
img[data-ma-cast-hero] {
  width: 100%;
}

/* store-widget:TOP バナー ── 帯の幅いっぱいの正方形を 1 枚ずつ横に送る(1 枚の単位は <a> か画像) */
[data-ma-top-banner-item] {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
img[data-ma-top-banner] {
  display: block;
  width: 100%;
}

/* ops-banner-top:TOP の一番上の運営バナー(block ops_banner)── 列の幅いっぱいに、入稿の比(3:1・1200×400)のまま切らずに出す。
 * button の既定の見た目(枠・余白・地)を外し、画像の高さは比から決める(読み込み前も 3:1 の高さを取る)。 */
button[data-ma-ops-banner-button] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
img[data-ma-ops-banner] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}

/* search-tabs r3:嬢を探す・店を探すの言葉の欄の上の画像(block search_form、1254×1254 の正方形)── フォームの幅いっぱいに、切らず、読み込み前から正方形の高さを取る(横スクロールを出さない) */
img[data-ma-search-semantic] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* store-pickup:おすすめの在籍 ── 札は一覧の札と同じ形で、固定幅のまま縮まず横に送る(block store_widget_pickup) */
[data-ma-pickup-card] {
  flex: 0 0 8rem;
  width: 8rem;
  scroll-snap-align: start;
}

/* store-diary:店の頁の nav(block store_nav)── 7 本を折り返して全部見せる。生成の Grid(cols: 4) のまま 4 列で、下の行に残りの 3 本(幅 768px 未満)。
 * 7 本を 1 行に等分するのは **頁の列が広い 768px 以上 1024px 未満** だけ ── 1024px 以上(PC)は頁が左の 390px の列(--ma-product-column)に畳まれ、
 * nav の幅は 342px で 7 等分すると 1 本 49px に「写メ日記」(56px)が入らないので、4 列 × 2 行のまま。横には送らない(今いる頁の項目がどの幅でも見える)。
 * S2・S3 が口コミ・ブログを足しても列の数は変わらない */
@media (min-width: 768px) and (max-width: 1023.98px) {
  nav[data-ma-store-nav] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* 記事の頁(block article_detail)の配置(pn-5・pn-7b・ed-2)── grid-column・grid-row・display: contents・左の辺だけの罫線・
 * 縦だけの余白は yumemi の Style に語彙が無い。0.11 は style の属性で書いていた。0.12 は `style` の属性が無いので、
 * 要素に印(data-ma-ad-*)を置いてここで掛ける。記事の包み(data-ma-article)を前に付けて生成のクラスより強くする
 * (style の属性が生成のクラスに勝っていたのと同じ並び)。値は 0.11 の属性のまま。 */
[data-ma-article] [data-ma-ad-head] {
  align-items:center;
}
[data-ma-article] [data-ma-ad-band] {
  grid-column:1;
  grid-row:1 / 3;
  align-self:stretch;
  background:var(--ma-color-action);
}
[data-ma-article] [data-ma-ad-title] {
  grid-column:2 / -1;
  grid-row:1;
  padding-left:8px;
  margin-bottom:12px;
}
[data-ma-article] [data-ma-ad-meta] {
  display:contents;
  text-align:end;
}
[data-ma-article] [data-ma-ad-divider] {
  box-sizing: content-box;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--ma-color-rule);
}
[data-ma-article] [data-ma-ad-thumb] {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
[data-ma-article] [data-ma-ad-report] {
  display:contents;
}
[data-ma-article] [data-ma-ad-summary] {
  grid-column:-2 / -1;
  grid-row:2;
  align-items:center;
  justify-content:center;
}
[data-ma-article] [data-ma-ad-report-body] {
  grid-column:1 / -1;
  grid-row:3;
  text-align:start;
}
[data-ma-article] [data-ma-ad-rule] {
  box-sizing: content-box;
  height: 0;
  margin: 0.875rem 0;
  border: 0;
  border-top: 1px solid var(--ma-color-rule);
}
[data-ma-article] [data-ma-ad-heading] {
  border-left: 4px solid var(--ma-color-action);
  padding-left: 8px;
}
[data-ma-article] [data-ma-ad-image-margin] {
  margin-block: 12px;
}

/* 嬢の頭(block muse_header、wf-5b・pn-5)の配置 ── align-self・align-items・display: contents・flex の語彙が yumemi の Style に無い。
 * 0.11 は style の属性で書いていた。0.12 は要素の印(data-muse-names ほか)に置き、頭の包み(data-ma-muse)を前に付けて
 * 生成のクラスより強くする。値は 0.11 の属性のまま。 */
[data-ma-muse] [data-muse-names] {
  align-self: center;
}
[data-ma-muse] [data-muse-actions] {
  align-items: center;
}
[data-ma-muse] [data-report-muse] {
  display: contents;
}
[data-ma-muse] [data-report-summary] {
  align-items: center;
}
[data-ma-muse] [data-report-body] {
  flex: 0 0 100%;
}

/* tl-like r2(人見 2026-10-17)── Tweet の行(www/src/tweet_row.gleam)。margin-left: auto・display: contents・flex・row-gap・負の margin・pointer-events の語彙が
 * yumemi の Style に無い。
 * 6:通報の旗は頭の行の右端(X の「⋮」の位置)。details は箱を持たず(display: contents)、旗(summary)は名前・時刻の行の右端へ寄る。
 *    開いた中身は頭の下に全幅で落ちる(muse_header と同じ型)。中身を包む ::details-content の箱(Chromium 131 ほか)も flex の子になるので
 *    全幅を掛け、閉じている間の空の段で隙間が開かないよう頭の行の間(row-gap)は 0 にする。旗の的(44px)は頭の行の高さ(20px)を押し広げないよう上下を負の margin で戻す。
 * 8:いいねのハートと件数の間を返信の吹き出しと同じ 4px(行の gap)に。島のハートを 44px の的の真ん中(18px)に置き(justify-content)、件数を的の右の余白
 *    ((44 - 18) / 2 = 13px)の分だけ戻す。件数は押す物でないので pointer-events: none(重なった所を押しても的に届く)。匿名の行(島が無い)は戻さない。 */
[data-tweet-row] [data-tweet-head] {
  row-gap: 0;
  align-items: center;
}
[data-tweet-head] [data-report-tweet] {
  display: contents;
}
[data-tweet-head] [data-report-summary] {
  margin-inline-start: auto;
  margin-block: -12px;
  align-items: center;
  justify-content: center;
}
[data-tweet-head] [data-report-tweet]::details-content,
[data-tweet-head] [data-report-body] {
  flex: 0 0 100%;
}
[data-tweet-like] button {
  justify-content: center;
}
[data-tweet-like-box]:has([data-tweet-like]) [data-tweet-like-count] {
  margin-inline-start: calc((1.125rem - 2.75rem) / 2);
  pointer-events: none;
}

/* tl-gap(人見 2026-10-17)── Tweet の行の上下の余白を揃える(幅 390 で測った原因は docs/tl-gap/results.md)。align-items・display: none・inline の要素の片側の
 * margin と padding の語彙が yumemi の Style に無い。
 * - 頭の行の row-gap: 0 は上の規則だけだと生成のクラス(Row の gap: 8px)に負けていた(同じ強さで後に読まれる)。行の印を前に付けて強くする
 * - 逃げ道 row_link の要素は行の格子の 3 つ目の子で、2 段目(高さ 0)と段の間 12px を足していた。tweet_row で反応の行の中へ移した(ここでは掛けない ──
 *   生成物を名指す選択子は第 29 条が止める)
 * - 反応の 1 つ(返信のリンク・いいねの包み・島のボタン)は 44px の的の上端にアイコンと件数が寄り、下に 22px の見えない空きがあった。的の真ん中に置く
 * - 反応の行の下は、的(44px)の真ん中に置いた字の下の空き(12px)と行の下の内側(12px)が重なる。的を行の下の内側の分だけ下へ伸ばし
 *   (的は 44px のまま、下端は線の上端で止まる)、見える字から線までを線から名前の字までと同じにする
 * - 記事の行の札「記事」(tl_feed の article_tag、赤い地・紙の字・999px の丸)は表題の字の流れに置く。表題との間 6px、左右の内側は字(14px)の半分の 7px、
 *   上下の内側は 0・行の高さ 20px で表題の行の高さを押し広げない */
[data-tweet-reactions] > *,
[data-tweet-like] button {
  align-items: center;
}
[data-tweet-reactions] {
  margin-block-end: -0.75rem;
}
[data-tl-title] [data-tl-article-tag] {
  margin-inline-start: 0.375rem;
  padding-inline: 0.4375rem;
  padding-block: 0;
  line-height: 1.25rem;
}

/* TOP のマイエリアのチップ(block top_today):押せる高さ 44px(MinHeight 2.75rem)のまま、上下の内側を 0 にして札の高さを 44px にする。
 * 左右の内側は字の高さ(0.875rem)。字は 44px の中央に置く(yumemi の Style に辺ごとの Padding と align-items の語彙が無い)。[＋]は最小幅 2.75rem で 44px の円。 */
[data-top-chip] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  padding-inline: 0.875rem;
}

/* フォローの一覧(block follow_list)の行:アイコンと名前を縦の中央で揃える(0.11 は style の属性)。 */
[data-follow-item] [data-follow-who] {
  align-items: center;
}

/* 客のホーム(block me_profile)の頭:アイコンと名前を縦の中央で揃える(yumemi の Style に align-items の語彙が無い)。 */
[data-me-profile] [data-me-profile-who] {
  align-items: center;
}

/* yumemi 0.12 の el.dialog(確かめ・同意の口)── 閉じている dialog は描かない。dialog に Flow(display: flex)の Style を
 * 載せると生成のクラスが UA の `dialog:not([open]) { display: none }` に勝ち、閉じた dialog が頁の上に出て押しを奪う
 * (Chromium の検収で見つけた ── chat_open の同意の dialog が「チャット」を覆った)。要素名と属性だけの選択子で UA の規則を強める。 */
dialog:not([open]) {
  display: none;
}

/* st-full(役員 人見 2026-10-14、手本は Instagram の Story)── 嬢の TOP の Story のシートを端末の画面いっぱいに出す。地は黒、字は全部白。
 * 上の端に進みの棒・嬢のアイコンと名前・経過・残り時間・✗ を、暗い段差(gradient)を敷いて重ねる。画像は角を丸めたカードで、切り抜かずに
 * 全体を収めて真ん中に置く(object-fit: contain)。下の端は黒の地に 1 行 ── 返信の欄(pill)・送り・吹き出し(返信の一覧)。
 * 鍵盤が出たら逃げ道 story_player が --story-vh・--story-top を visualViewport に合わせ、下の 1 行を鍵盤の上に残す。
 * yumemi の Style に position・inset・gradient・object-fit・text-shadow・safe area の語彙が無いので配信側で掛ける(要素名 + 属性で生成のクラスより強くする)。 */
dialog[data-story-sheet] {
  position: fixed;
  inset: 0;
  top: var(--story-top, 0);
  width: 100%;
  height: var(--story-vh, 100dvh);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}
dialog[data-story-sheet][open] {
  display: flex;
  flex-direction: column;
}
dialog[data-story-sheet]::backdrop {
  background: #000;
}
/* 読み上げにだけ残す語(✗ の「閉じる」、送りの「返信する」、吹き出しの「返信 N 件」の語、欄の label) */
[data-story-sheet] [data-story-sr],
[data-story-sheet] [data-story-bottom] label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 上の端:棒と ✗ ── 段の上に重ね、下へ薄れる暗い段差を敷く。✗ 以外は叩く所を奪わない */
[data-story-sheet] [data-story-top] {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) + 112px);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-right, 0px) + 8px) 0 calc(env(safe-area-inset-left, 0px) + 8px);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
  pointer-events: none;
}
[data-story-sheet] [data-story-bars] {
  display: flex;
  gap: 4px;
}
[data-story-sheet] [data-story-bar] {
  flex: 1 1 0;
  height: 2px;
  border-radius: 1px;
  background: rgb(255 255 255 / 0.35);
}
[data-story-sheet] [data-story-bar][data-story-bar-on] {
  background: #fff;
}
[data-story-sheet] [data-story-close] {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 4px);
  pointer-events: auto;
}
/* 段:叩く所(左の 1/3 で前、残りで次)── 下の 1 行の上までの全部 */
[data-story-sheet] [data-story-slides] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
[data-story-sheet] [data-story-slide]:not([hidden]) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 段の頭:嬢のアイコン・名前(太字)・経過(淡い白)、その下に残り時間(小さく)。棒の下、✗ の左 */
[data-story-sheet] [data-story-who] {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 60px);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
}
[data-story-sheet] [data-story-who-icon] {
  flex: 0 0 auto;
  object-fit: cover;
}
[data-story-sheet] [data-story-who-text] {
  min-width: 0;
}
[data-story-sheet] [data-story-who-line] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.3;
}
[data-story-sheet] [data-story-name] {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-story-sheet] [data-story-age] {
  flex: 0 0 auto;
  color: rgb(255 255 255 / 0.7);
}
[data-story-sheet] [data-story-meta] {
  font-size: 0.75rem;
  line-height: 1.3;
  color: rgb(255 255 255 / 0.7);
}
/* 画像のカード:幅いっぱい、縦は収まる大きさ。切り抜かない(contain)── 告知の画像の字を落とさない */
[data-story-sheet] [data-story-stage] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  background: #000;
}
[data-story-sheet] [data-story-images] {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
[data-story-sheet] [data-story-image],
[data-story-sheet] [data-story-video] {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  scroll-snap-align: start;
  border-radius: 0.5rem;
  background: #000;
}
/* pc(役員 人見 2026-10-13)── キャプションは画像の上に重ねる(白字・影つき・中央下、焼き込みはしない)。嬢の作成の頁
 * (muse editor の posts/posts.css の [data-ma-story-caption])と同じ見え方。段の中なので下の 1 行には隠れない。 */
[data-story-sheet] [data-story-caption] {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12%;
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.85), 0 0 12px rgb(0 0 0 / 0.5);
  overflow-wrap: anywhere;
  pointer-events: none;
}
/* 動画はキャプションを操作の帯(下の 56px)の上へ上げる */
[data-story-sheet] [data-story-stage]:has([data-story-video]) [data-story-caption] {
  bottom: calc(12% + 64px);
}
[data-story-sheet] [data-story-unplayable] {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
  left: 12px;
  right: 12px;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.85);
}
/* 下の端:黒の地に 1 行 ── 左に返信の欄(pill、1 行から伸びる)と送り、右に吹き出し。上へ薄れる段差で画像の下の端と継ぐ */
[data-story-sheet] [data-story-bottom] {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px calc(env(safe-area-inset-right, 0px) + 4px) calc(env(safe-area-inset-bottom, 0px) + 8px) calc(env(safe-area-inset-left, 0px) + 12px);
  background: #000;
}
[data-story-sheet] [data-story-bottom]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
  pointer-events: none;
}
[data-story-sheet] [data-story-reply] {
  flex: 1 1 auto;
  min-width: 0;
}
[data-story-sheet] [data-story-replies-open] {
  flex: 0 0 auto;
  margin-left: auto;
}
[data-story-sheet] [data-story-replies-open] button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
[data-story-sheet] [data-reply-form] {
  gap: 0;
  color: #fff;
}
[data-story-sheet] [data-reply-form] [data-ma-fold-on-ok="reply_post"] {
  color: #fff;
}
[data-story-sheet] [data-reply-form] > span p {
  margin-top: 4px;
}
[data-story-sheet] [data-reply-form] [data-ma-fold-on-ok="reply_post"] {
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
}
[data-story-sheet] [data-reply-form] textarea {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 7.5rem;
  resize: none;
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 22px;
  background: transparent;
  color: #fff;
  line-height: 1.4;
}
[data-story-sheet] [data-reply-form] textarea::placeholder {
  color: rgb(255 255 255 / 0.7);
}
[data-story-sheet] [data-reply-form] p {
  color: #fff;
}
[data-story-sheet] [data-reply-form] [data-reply-consent],
[data-story-sheet] [data-reply-form] [data-reply-consent] p {
  color: var(--ma-color-text);
}
/* 返信の一覧:シートの上に下から出す(頁は移らない)。地は濃い灰、字は白 */
dialog[data-story-replies] {
  box-sizing: border-box;
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 40rem;
  max-height: 70dvh;
  margin: 0 auto;
  padding: 8px calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 16px);
  border: 0;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  background: #1c1c1e;
  color: #fff;
}
dialog[data-story-replies][open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
dialog[data-story-replies]::backdrop {
  background: rgb(0 0 0 / 0.4);
}
[data-story-replies] [data-story-replies-head] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-story-replies] [data-story-replies-title] {
  font-size: 1rem;
  font-weight: 700;
}
[data-story-replies] [data-story-replies-status] {
  color: rgb(255 255 255 / 0.7);
}
[data-story-replies] [data-story-replies-list] {
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-story-replies] [data-story-reply-row] {
  padding: 8px 0;
  border-top: 1px solid rgb(255 255 255 / 0.15);
}
[data-story-replies] [data-story-reply-head] {
  display: flex;
  gap: 8px;
  margin: 0;
  font-weight: 700;
}
[data-story-replies] [data-story-reply-head] a {
  color: #fff;
}
[data-story-replies] [data-story-reply-at] {
  font-weight: 400;
  color: rgb(255 255 255 / 0.6);
}
[data-story-replies] [data-story-reply-body] {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
[data-story-replies] [data-story-replies-login] {
  color: #fff;
}

/* search-days ── 検索の出勤日(役員 人見 2026-10-17)。今日から翌月末までを横 1 列の帯にして指で払って選ぶ(暦にしない)。
 * 帯の並びと横スクロールは Style の Scroller・札の箱は Style が持つ。yumemi の Style に scroll-snap・flex-basis・スクロールバーを隠す・:has・
 * radio を見えなくする語彙が無いので、印(data-ma-day*)を名指して配信側で掛ける。
 * 枠・帯は min-width: 0・max-width: 100%(帯が頁を押し広げて頁ごと横に揺れないため)。1 札ずつ止める(scroll-snap-type: x mandatory)。
 * 帯の横送りが頁の「戻る」の動きに繋がらないよう overscroll-behavior-x: contain。縦の送りは頁が受ける(touch-action の既定)。
 * radio は札に重ねて透明にする(display: none にしない ── キーボードの矢印で選べ、焦点は札の枠で見せる)。選んだ札は :has(:checked) で塗る。
 */
[data-ma-days] {
  min-width: 0;
  max-width: 100%;
}
[data-ma-days-strip] {
  min-width: 0;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
[data-ma-days-strip]::-webkit-scrollbar {
  display: none;
}
[data-ma-day] {
  position: relative;
  flex: 0 0 3.25rem;
  min-width: 0;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  cursor: pointer;
}
[data-ma-day="none"] {
  flex-basis: 5.5rem;
}
[data-ma-day] > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
[data-ma-day-mark] {
  min-height: 1rem;
}
[data-ma-day]:has(> input:checked) {
  background: var(--ma-color-action);
  border-color: var(--ma-color-action);
}
[data-ma-day]:has(> input:checked) [data-ma-day-part] {
  color: var(--ma-color-on-action);
}
[data-ma-day="none"]:has(> input:checked) {
  color: var(--ma-color-on-action);
}
[data-ma-day]:has(> input:focus-visible) {
  outline: 2px solid var(--ma-color-focus);
  outline-offset: 2px;
}