/* members-gen-v1 — ストリーマーの期の札と、STREAMER の下の期の絞り込み（2 段目）。MEMBERS の一覧と詳細の両方で読む（2026-10-21）。
 * 計画：PLAN-v2 3-2・3-3・3-5（オーナーの答え 12「一覧にもでてほしい」・16 段階の絞り込み・17「タグとしての期は、一覧では必ずでていること」）。
 * 契約：docs/RENEWAL-BRAND-SYSTEM.md（色は契約の値だけ・3 書体・枠や面を付けない・操作の型 .u・反応は 3 つだけ）、
 *       docs/DESIGN-DETAIL-STANDARD.md（8u、インクで測る、押せる範囲 44）。
 * 読む位置：一覧は detail-fix-v1.css の後、詳細は member-accent-v1.css の後（どちらも motion-system-v3.css の前）。
 * 期が 1 人もいない写しでは、ここで当てる要素（.m3-role-unit・.m3-gen・.mb-role-row・.mb-gen・.mb-filters--gen・.mb-controls--gen・
 *   .mb-kicker--gen）は作られないので、このファイルは何も変えない。
 * 見た目は案 1（推す）：文字「1期生」（数字は半角。scripts/v8/lib/data-emit.mjs の genLabel）、Zen Kaku Gothic New 500・字間 0.08em、
 *   色は役割の札と同じ控えめな紙色（色を足さない）。2 段目の期の文字も Zen Kaku Gothic New 500・字間 0.08em（名札の期の札と同じ太さ）。
 *   大きさは役割の札・1 段目と同じ下限（15px／767px 以下 14px）。
 * 独立の審査の指摘で直した 3 点（2026-10-21、v2。撮り直しは .cache/hub-cms-migration/fasttrack/gen-visual/v2/）：
 *   ① 2 段目の期の文字の太さを 700 → 500（契約 §4 の和文の操作は 700。期の札と同じ 500 にそろえる例外で、主指揮の裁可が要る）。
 *   ② 2 段目の左端を、ガターから 1 段目の STREAMER の文字のインクの左端へ（台本が測って --mb-gen-indent に入れる。STREAMER の子に見せる）。
 *   ③ 2 段目の先頭の文字を「ALL」から、1 段目の「ALL」と紛れない欧文の機能の文言へ（台本の GEN_ALL_LABEL。候補は画像で比べて決める）。
 *   確かめの担当の指摘で直した所（2026-10-21、v3）：2 段目の和文の期の下線を、描かれた字の下端から欧文と同じ空き 8 に（bottom 4.75 → 2.75。下の規則）。
 *   比べの案 2・3 は、このファイルの後に上書きの CSS を足して撮った（見本の道具。案が決まったら、選ばれた値をここへ移して道具の上書きは使わない）：
 *     案 2：期の札の文字だけ緑青 #8cc5a0（契約の「日付・小さな時系列の札の文字」）。2 段目のチップは紙色の決まりのまま。
 *     案 3：文字「1ST」（genLabel の ordinal）、札も 2 段目も Barlow Condensed 600・字間 0.2em、名札は --m3-gen-sep: "·"（台本が区切りを置く）。 */

/* ---------------------------------------------------------------- 一覧の名札（台本 members-v3b-list-gen-v1.js が作る） */
/* 役割の段の包み：役割の札 → 期の札（案 3 は間に区切り）。インクの中心合わせと寄せの横のずれは包みに掛け、中の役割の札には掛けない。
   ベースラインで揃える。部品の間は台本がインクで測って 8u にする（margin-left。ここの値は台本が動く前の既定） */
body.mb-page .m3-role-unit {
  display: inline-flex;
  align-items: baseline;
  color: var(--mb-quiet, rgba(243, 236, 220, 0.78));
  white-space: nowrap;
  translate: calc(var(--m3-role-dx, 0px) + var(--m3-clamp, 0px)) 0;
}
body.mb-page .m3-role-unit > .m3-role { translate: none; }
body.mb-page .m3-role-unit > .m3-gen { margin-left: calc(8px * var(--m3-u, 1)); }
/* 期の札：大きさは役割の札と同じ下限（type-floor-v1.css の .m3-role と同じ式）。
   行の高さ 0：役割の段の箱（台本の "MANAGEMENT" の測り、行 16u）を広げない＝名札の高さ・段の位置・ON AIR の位置が期の有無で変わらない。
   和文の字面は欧文の大文字より上下に大きく、箱から少し出る（出る量は確かめの台本で実測して主指揮が裁く） */
body.mb-page .m3-gen {
  display: block;
  font-family: var(--mb-jp, "Zen Kaku Gothic New", sans-serif);
  font-weight: 500;
  font-size: max(15px, calc(15px * var(--m3-u, 1)));
  line-height: 0;
  letter-spacing: 0.08em;
}
@media (max-width: 767px) {
  body.mb-page .m3-gen { font-size: max(14px, calc(14px * var(--m3-u, 1))); }
}

/* ---------------------------------------------------------------- 一覧：JS なしの名札（src/v8/render/lists.mjs）。ふだんは台本が作り直す */
/* 役割の札の上の余白（members-role-v1.css の 4px／760px 以下 2px）を行に移し、同じ行に期の札を置く。付け替えは .mb-role-row の中だけ
   （期の無い名札は今と同じ）。役割の札の字間の末尾（0.2em）を打ち消し、インクの間を 8px にする。大きさは JS なしの役割の札（13px）と同じ */
body.mb-page .mb-role-row {
  display: flex;
  align-items: baseline;
  column-gap: 8px;
  margin-top: 4px;
  color: rgb(243 236 220 / 0.64); /* JS なしの役割の札と同じ値（members-role-v1.css） */
  white-space: nowrap;
}
body.mb-page .mb-role-row .mb-role {
  margin-top: 0;
  margin-right: -0.2em;
  padding-left: 0;
}
body.mb-page .mb-role-row .mb-gen {
  font: 500 13px / 0 var(--mb-jp, "Zen Kaku Gothic New", sans-serif);
  letter-spacing: 0.08em;
}
@media (max-width: 760px) {
  body.mb-page .mb-role-row { margin-top: 2px; }
}

/* ---------------------------------------------------------------- 一覧：期の絞り込み（2 段目）。台本が GEN_FILTERS のあるときだけ作る */
/* 操作の型は 1 段目と同じ（class に mb-filters を含むので、members-v2.css・detail-fix-v1.css の型・下限・下線・反応・焦点がそのまま当たる）。
   1 段目の押せる範囲（44）の下端 → 2 段目の押せる範囲の上端 16。
   左端は 1 段目の STREAMER の文字のインクの左端（審査の指摘②。STREAMER の下に字下げして、2 段目が STREAMER の子だと分かるようにする）：
   台本（members-v3b-list-gen-v1.js の indentGenNav）が STREAMER と 2 段目の先頭の字のインクを測り、その差を --mb-gen-indent に入れる
   （箱ではなくインクの端で揃える。DESIGN-DETAIL-STANDARD.md §3 の光学補正）。字下げは padding なので、2 段目が折り返しても 2 行目は同じ左端から。
   PC：1 段目と配信の要約（右のガター）の行の下に置く（order）。スマホ：配信の要約は 1 段目の下の行なので、2 段目をその前（1 段目のすぐ下）に置く。
   欧文の先頭の文字と和文の期の文字は、ベースラインで揃える（押せる範囲の箱が字面の差だけ上下にずれ、下線はそれぞれの箱の同じ位置） */
body.mb-page .mb-controls--gen > .mb-filters--gen {
  order: 1;
  flex-basis: 100%;
  align-items: baseline;
  margin-top: 16px;
  padding-left: var(--mb-gen-indent, 0px);
}
body.mb-page .mb-controls--gen > .mb-filters--gen[hidden] { display: none; }
@media (max-width: 767px) {
  body.mb-page .mb-controls--gen > .mb-live { order: 2; }
}
/* 期の文字（先頭の欧文の文字以外）：Zen Kaku Gothic New 500・字間 0.08em（審査の指摘①。名札の期の札と同じ太さにそろえる。
   契約 §4 の和文の操作の 700 からの例外で、主指揮の裁可が要る）。
   大きさ・色・下線は 1 段目と同じ（選んでいるものは紙色＋下線、ほかは控えめな紙色で下線なし。緑青・金にしない） */
body.mb-page nav.mb-filters--gen > a:not([data-gen=""]) {
  font-family: var(--mb-jp, "Zen Kaku Gothic New", sans-serif);
  font-weight: 500;
  letter-spacing: 0.08em;
}
/* 期の文字の下線（選んでいるとき・焦点のとき）：描かれた字の下端 → 下線の空きを、欧文（1 段目の STREAMER・2 段目の先頭）と同じ 8 にする
   （契約の道具 measure-underline-ink.mjs の値で 8.5。2 倍の画素で 10 幅（1920〜360）、1 倍の画素で 1440・390・360 を実測。確かめの担当の指摘、v3）。
   契約 §4「和文の操作も下線の位置は同じ」と、CONTACT の区分の前例（和文の下線を下げてそろえた）に合わせる。
   欧文と同じ bottom 4.75 では空き 6（契約の値 6.5）だった：和文の字面は欧文の大文字より 1 下まで出て、ベースライン揃えで箱が欧文より 1 上にあるため。
   2 下げて 2.75（15px・14px とも）。下線は箱の中のまま（押せる範囲・名札・1 段目・先頭のチップは変わらない）。
   名簿の上端は、この下線から 48u（台本の placeTop が 2 段目の選んでいるチップの ::after の bottom を読む） */
body.mb-page nav.mb-filters--gen > a:not([data-gen=""])::after {
  bottom: 2.75px;
}

/* ---------------------------------------------------------------- 詳細の副情報の行（台本 members-v2-detail-gen-v1.js）：「STREAMER · 1期生 · ローマ字」 */
/* 期の札の大きさは副情報の行と同じ（detail-fix-v1.css の span の 15／14px がそのまま当たる）。和文なので Zen Kaku Gothic New 500・字間 0.08em。
   行の高さ 0 とベースライン揃え：欧文（Barlow Condensed）の span と同じベースラインに置き、行の高さ（名前 → 副情報 24／16、
   副情報 → CHANNELS 48）を変えない。その人の色の線（member-accent-v1.css の ::after）は align-self: center のまま */
body.mb-page .mb-kicker--gen { align-items: baseline; }
body.mb-page .mb-kicker > .mb-gen {
  font-family: var(--mb-jp, "Zen Kaku Gothic New", sans-serif);
  font-weight: 500;
  line-height: 0;
  letter-spacing: 0.08em;
}
/* 期の札の前の中黒（members-v2.css の span + span::before）は、ほかの中黒と同じ欧文の書体のまま（和文の書体の中黒にしない） */
body.mb-page .mb-kicker > .mb-gen::before {
  font-family: var(--sp-latin, var(--mb-face, "Barlow Condensed", sans-serif));
  font-weight: 600;
  letter-spacing: 0.2em;
}
/* その人の色の線（member-accent-v1.css の .mb-kicker::after、56px／767px 以下 40px、行の右）：期の札のぶん行が長くなり、狭い幅でローマ字の
   長い人（360・390）は線が次の行に落ちて役割の下に出て、行も 3px 高くなった（実測）。期のある人だけ、線を行の残りに収める：
   流れの上の大きさ 0 から、残りがあれば本来の長さまで伸ばす（次の行に落とさない＝行の高さと下の要素の位置は期の有無で同じ）。
   伸ばせる長さが 16px 未満のときは台本が mb-kicker--short を付けて見せない（短すぎる線の切れ端を出さない）。字は今までどおり */
body.mb-page--detail .mb-kicker--gen::after {
  flex: 1 1 0px;
  min-width: 0;
  max-width: 56px;
}
body.mb-page--detail .mb-kicker--gen.mb-kicker--short::after { visibility: hidden; }
@media (max-width: 767px) {
  body.mb-page--detail .mb-kicker--gen::after { max-width: 40px; }
}