/* ===========================================================================
   dpg-t-quiz.css — 区間T（2026-10-27 担当Q 出題と声 → T2 担当Q2）
   index.html の最後の CSS（dpg-challenge.css）の後に読む。色・角丸・余白はトークン（design/dpg/00-tokens.css・dpg-guide.css の :root）。
   ・T01 声の入口（本人だけに見える）: 区間T2 で、紫のチップ・初めての吹き出し・聞いている印の帯（T1 の案A＋案C）はやめた
     （本人「でかいと邪魔…今までどうりにして」「これ場所取りすぎじゃない？」）。［声］はほかの道具と同じ形（quiz.css・voice-chat.css のまま）。
     聞き始めた・止めた時の数秒の知らせ（voice-chat-control.js の showNote）だけをここで描く（下の「T2 知らせ」）。
   ・T2 Q3 声の間の独り言を薄くして残す（本人だけに見える。views.js の buildThinkToggle の blocked）
   ・T14 独り言の名前（全員。views.js の buildThinkToggle）
   ・T17 答えた直後の3つ: 主役1つ＋プラスの印（全員。views.js の buildHelpRow）
   押す所は 44px 以上。
   =========================================================================== */

/* ---- 区間T2 担当Q2: 聞き始めた・止めた時の数秒の知らせ（本人だけに見える形の出題。voice-chat-control.js の showNote）----
   本人「オンにした瞬間に一時的に出るでいいんじゃない？あんま場所とりたくないし邪魔」。上の帯のすぐ下の真ん中に重ねて出す（position: fixed。
   中身は押し下げない。位置の top・left は JS が上の帯から決める＝聞き取った言葉の札 .dpg-voice-chip と同じ所。札とは同時に出さない）。
   「● 聞いています。「答えはA」「わからない」など ｜ 一覧」（約3秒）／「○ 止めました」（約2秒）／説明の字だけ（独り言を押した時。約3秒）。
   言葉は画面の幅に入る数だけ（2つ・1つ・なし。言葉の途中で切らない）。動きは薄く出して消すだけ（動きを減らす設定ではフェードなし）。 */
.dpg-voice-note {
  position: fixed;
  z-index: 70;
  top: var(--g-s1);
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--g-s1);
  width: max-content;
  max-width: calc(100vw - 2 * var(--g-s2));
  min-height: 44px;
  padding: 0 var(--g-s2);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--g-card-shadow-lift);
  font-size: var(--g-fs-small);
  font-weight: 700;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.dpg-voice-note.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-fast) var(--ease-out); }
.dpg-voice-note[data-kind="listening"] { padding-right: 0; }
/* 状態の点: 聞いている＝緑の丸（［声］の絵の右上の点と同じ色）／止めた＝灰色の輪。説明の知らせには付けない */
.dpg-voice-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.dpg-voice-note[data-kind="off"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--text-3); }
.dpg-voice-note[data-kind="info"]::before { content: none; }
.dpg-voice-note__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpg-voice-note[data-kind="info"] .dpg-voice-note__text { white-space: normal; }
.dpg-voice-note__say { color: var(--text-2); font-weight: 600; }
.dpg-voice-note__list {
  position: relative;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--g-s2) 0 var(--g-s1);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dpg-voice-note__list[hidden] { display: none; }
/* 「｜」の区切り（押す所には入れない飾り） */
.dpg-voice-note__list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 20px;
  margin-top: -10px;
  background: var(--separator);
}
@media (hover: hover) { .dpg-voice-note__list:hover { background: var(--accent-soft); } }
.dpg-voice-note__list:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* 言える言葉は画面の幅に入る数だけ: 520px 未満は1つ、360px 未満（200% 拡大など）は言葉を省いて「聞いています ｜ 一覧」だけ */
@media (max-width: 519.98px) { .dpg-voice-note__word:nth-of-type(n+2) { display: none; } }
@media (max-width: 359.98px) {
  .dpg-voice-note { padding-left: var(--g-s2); }
  .dpg-voice-note::before { content: none; } /* 点は省く（字が状態を言う）。「聞いています ｜ 一覧」を 187px でも切らずに入れるため */
  .dpg-voice-note__say { display: none; }
  .dpg-voice-note__list { padding: 0 var(--g-s1); } /* ［一覧］は左右 8px（幅 44px） */
  .dpg-voice-note[data-kind="info"] { padding: 0 var(--g-s1); }
}
@media (prefers-reduced-motion: reduce) {
  .dpg-voice-note, .dpg-voice-note.is-on { transition: none; }
}

/* ---- 区間T2 担当Q2 Q3: 声の操作がオンの間の独り言（本人の答え「薄くして残し、押したら説明」。本人だけに見える形）----
   押せる形（大きさ・押した時の地）はそのまま、絵と名前だけを薄くする（切ったのではなく今は使えない＝赤い斜線は付けない）。押すと数秒の説明（app.js）。 */
:root[data-quiz-theme] .qz-quiz-head .qz-think-btn--blocked :is(.qz-sound-btn__icon, .qz-sound-btn__name):not(#_) { opacity: .45; }

/* ---- T14 独り言: 名前「独り言」はオフの時も出す（赤い斜線で切れていると分かる）。オンの間は名前を紫・太字（計算用紙の開いている間と同じ）----
   2026-10-27 区間T。前はオフの間は名前の代わりに赤い「オフ」だけで、何のオフか分からなかった（初めての人役 A9）。 */
:root[data-quiz-theme] .qz-quiz-head .qz-think-btn[aria-pressed="true"] .qz-sound-btn__name:not(#_) { color: var(--accent); font-weight: 800; }

/* ---- T17 答えた直後の3つ（外部のAIに聞く・解説を聴く・声で質問）----
   主役（views.js が付ける .qz-help__btn--main。［解説を聴く］がある時だけ）は白地に紫の太いふち・太字・浮いた影。紫で塗るのは「次の問題へ」の1つだけ。
   ほかの2つ（.qz-help__btn--quiet）はふちを灰色に、字を灰色にして控えめに（押せる物と分かる濃さのふち＝--control-border）。
   流れている間の［解説を聴く］の薄紫の地（dpg-answer.css）はそのまま。 */
:root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn.qz-help__btn--main {
  border-width: 2px;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 800;
  box-shadow: var(--g-card-shadow-lift);
}
:root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn.qz-help__btn--quiet {
  border-color: var(--control-border);
  color: var(--text-2);
  font-weight: 700;
}
/* プラスの印（［声で質問］。プラスでない人だけ）。ボタンの右上のふちに小さな札。前の小さな字「プラス」は3つ並びでは隠れていた */
:root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn:has(> .qz-help__badge) { position: relative; overflow: visible; }
:root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__badge {
  position: absolute;
  top: -9px;
  right: 6px;
  padding: 0 6px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
}
/* 狭い所で縦に積む時（dpg-answer.css の 18)）は、札をボタンの中の右端へ（上のボタンに重ならないように） */
@container (max-width: 239.98px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__badge { top: 50%; right: var(--g-s1); transform: translateY(-50%); }
}
/* 「1回無料」の札が出ている間は、プラスの印は出さない（補足は1つまで。dpg-answer.css の 12) と同じ） */
:root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn[data-trial-float] .qz-help__badge { display: none; }

/* ---- 直し係F1（2026-10-27。検査役 1・2）: 上の帯が狭い時は、題名を1行目の全幅に、道具を2行目の右寄せに ----
   PC（1000px 以上）は題名の横に道具を並べる形。答えた後に［声で質問］で「ドパガキと話す」のパネルを開くと出題の列が約 330px に狭まり、
   題名の幅が 0px（preview。［声］の入口で道具が6つ）や、1字ずつの縦並び（全員。T14 で「独り言」の名前が出て道具が広がった）になっていた。
   画面の幅（@media）ではなく帯の幅（@container。帯そのものを入れ物にする）で決め、1000px 未満と同じ並び（quiz.css の「幅 1000px 未満」）にする。
   折り返す幅は、題名に 150px（10字×2行）ほど残らなくなる所: 道具が5つ（約 255px）なら中身の幅 400px 未満、［声］の入口か［解答を終える］で
   1つ増えた時（約 300px）は 460px 未満、両方の時は 560px 未満。PC のふつうの帯（1000px で約 500px・1280px で約 550px）は今のまま1行。
   区間T2 担当Q2: 道具が6つになるのは［声］と［独り言］が両方ある時（声オフの［声］の入口・声オンの間の薄い［独り言］。どちらも本人だけに見える形）。
   判定を :has(> .qz-voice-btn):has(> .qz-think-btn) にした（前は［声］の入口だけを見ていた）。
   折り返しは題名だけを 100% にして作る（帯は flex-wrap: wrap・右寄せ。題名が flex: 1 で残りを取るので、1行の時の見た目は前と同じ）。 */
:root .qz-app[data-screen="quiz"] .qz-quiz-head { container: dpg-quiz-head / inline-size; flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
@container dpg-quiz-head (max-width: 399.98px) {
  :root .qz-app[data-screen="quiz"] .qz-quiz-head .qz-quiz-head__title { flex: 1 0 100%; }
  /* 道具の間の 2px（quiz.css の .qz-sound-btn）を 1000px 未満と同じ 0 に。道具が6つ（［声］と［独り言］がある時）は［トップへ］の左右の余白も 4px → 2px に。
     パネルを開いた PC（中身 約 290px）で、道具6つ（約 290px）が1行に入る（［トップへ］だけが3行目に落ちないように） */
  :root .qz-app[data-screen="quiz"] .qz-quiz-head .qz-sound-btn { margin-right: 0; }
  :root .qz-app[data-screen="quiz"] .qz-quiz-head:has(> .qz-voice-btn):has(> .qz-think-btn) .qz-exit-btn { padding-left: 2px; padding-right: 2px; }
}
@container dpg-quiz-head (max-width: 459.98px) {
  :root .qz-app[data-screen="quiz"] .qz-quiz-head:is(:has(> .qz-voice-btn):has(> .qz-think-btn), :has(> .dpg-mock-finish-head)) .qz-quiz-head__title { flex: 1 0 100%; }
}
@container dpg-quiz-head (max-width: 559.98px) {
  :root .qz-app[data-screen="quiz"] .qz-quiz-head:has(> .qz-voice-btn):has(> .qz-think-btn):has(> .dpg-mock-finish-head) .qz-quiz-head__title { flex: 1 0 100%; }
}