/* products-hub-hubbot-v3 — PRODUCTS のページの HUB の節に入れる HUBBOT の段。2026-09-29。products-page-v1.css の後に読む。
   v2 の写し。独立審査 中-1：ボタン 160ms で消え終えてから完了返信 920ms・完了行の棒 1020ms。
   v1（products-hub-hubbot-v1.css）の写しに、独立審査（research-refresh/round55/direction-reset/products-hubbot/review/）の直しを入れた版。
   v1 からの変更
     ・必須1（再生の途中で画面が 44px 跳ねる）：ボタン（作成／範囲を広げる／破棄）と完了の返信「〜を作成しました」を、窓の中の同じ升に重ねる。
       ボタンは visibility で出し入れし、高さを変えない（v1 は display:none と max-height で消していたので、窓の高さが 182 → 138 に縮み、
       subgrid で行を共有する 3 列の VAPOR-HUB の画面がまとめて上がっていた）。完成形の窓は 8 高くなる（138 → 146）。
     ・必須2（BOT の説明）：段の見出しを、札「DISCORD BOT」→ 見出し「HUBBOT」（左に HUB の印）にする。
       v1 の見出し「Discordで動くチームに、業務の見通しを。」と説明（製品全体の LP の文。直前の名乗りと重なる）は外した。
       BOT の働きは、3 場面の題・1 行目（Discord の操作 → 完了の返信）・要の文「〜を作成しました」で見せる。
     ・改善（同じ帯の中の金）：隣の章「予定・日程調整」（既存の部品）の金を、#hub に限って灰と紫の系統に替える
       （ホームの裁定「HUB の画面に金を置かない」、契約「金は各ページの帯の中に 1 つ＝冒頭の立涌の一筆」）。§9。主指揮の裁定で外せるよう一か所にまとめた。
     ・改善（注記の大きさ）：STUDIO の帯の注記も 13 にして、ページの注記を 13 にそろえる（細部基準 §2「同じ役割には同じ値」）。§10。
   以下は v1 の説明（変えていない所）。
   オーナー「PRODUCT画面、HUBのほうBOTの説明ない」。ホームの PRODUCTS の HUBBOT の 3 場面（products-r10/）を、このページの HUB の節の主役として移す。
   HUB の節の並び：名乗りと機能（そのまま）→ HUBBOT の段（この CSS）→ 予定・日程調整（そのまま）。
     チケットの全幅ボードは外した（HUBBOT のチケットの場面の「結果が入る先」がボードそのもので、同じ画面が帯の中に 2 回出るため）。
   部品はホームの products-parts-v2.css・products-home-v11.css の写し。次だけを変えた。
     ・範囲は #hub .hb、部品の class の接頭辞は hb-（このページは products-parts-v1.css が .pv-tk・.pv-bar・.pv-ev などを全体に定義しているので、
       名前を分けて値が混ざらないようにする）。
     ・文字の大きさはこのページの段にそろえた 4 段：24（段の見出し「HUBBOT」、ページの章の見出し .pp-h3 と同じ）・20（場面の題、リードと同じ）・
       15（要の文「〜を作成しました」、ページの本文と同じ）・13（札・場面の 2 行・画面の中・注記）。スマホは 20・18・15・13。
     ・場面の題の下に、製品の本物の語だけで組んだ 2 行（1 行目 Discord の操作 → 完了の返信、2 行目 VAPOR-HUB の入る先）。
     ・1440 を超える幅でも拡大（zoom）しない。このページの他の画面と同じく、列の幅だけが広がる（文字の大きさはページ全体で一定）。
   余白（docs/DESIGN-DETAIL-STANDARD.md、このページの役割の値。インクで測る）
     章と章の間 96（スマホ 64）：名乗りと機能 → 段の札、段の注記 → 予定・日程調整の見出しの行
     章の中 48（スマホ 32）：段の見出し → 場面の題、場面と場面（縦に積む幅）
     札 → 見出し 16、場面の題 → 2 行 8、2 行 → 窓 16、窓 → 画面 32（信号線が渡る）、画面 → 注記 8
   色：帯の中は VAPOR-HUB の値だけ（products-parts-v2.css と同じ）。金は置かない（HUB の画面に金を置かない、ホームと同じ）。
     HUB の印（hub-mark.svg）は製品の正式な素材なので色を変えない（契約 §2「製品マークはブランドの印の枠」）。
   つなぎは契約の信号線（1px、rgba(184,156,255,.32)、消灯の輪の節点）だけ。 */

@import "products-hub-hubbot-v2.css";

#hub .hb .dc-scene:is([data-kind="ticket"], [data-kind="event"]).dc-play .dc-btns {
  animation: hb-btns-out 160ms ease-in-out calc(760ms * var(--dc-t, 1)) forwards;
}
#hub .hb .dc-scene:is([data-kind="ticket"], [data-kind="event"]).dc-play .dc-stat.dc-done {
  animation: hb-up 420ms var(--pv-up) calc(920ms * var(--dc-t, 1)) both;
}
#hub .hb .dc-play .dc-stat.dc-done .hb-bar {
  animation-delay: calc(1020ms * var(--dc-t, 1));
}