/* ===========================================================================
   dpg-t-toolbar.css — 区間T4 担当D1（2026-10-28。関所4 Q6・Q7）
   出題の帯「よく使う3つ＋［⋯ほか］」・［⋯ほか］のシート・「帯に出す道具を選ぶ」。本人だけに見える（DpgPreview 't-toolbar'）。
   ここの規則は、新しい物のクラス（.dpg-tb-*）と、views.js が preview の時だけ付ける .dpg-tb-head にだけ効く（札が無い時は何も変わらない）。
   index.html の最後の CSS（dpg-t-home.css）の後に読む。色・角丸・余白はトークン（design/dpg/00-tokens.css・dpg-guide.css の :root）。新しい色は作らない。
   押す所は 44px 以上。動く所は無い（シートを下へ払う間、指に合わせて下がるだけ）。
   =========================================================================== */

/* ---- 帯 ---- */
/* ［⋯ほか］は今の道具（.qz-sound-btn）と同じ形・同じ大きさ。絵の下の小さな字は「ほか」 */
.dpg-tb-more .qz-sound-btn__icon .dpg-ico { stroke-width: 0; }

/* 題の行の左の「‹」（トップへ。帯にトップへが無い時だけ）。44px 四方・線の絵は帯の道具と同じ紫 */
.dpg-tb-back {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0 2px 0 calc(-1 * var(--g-s1, 8px));
  padding: 0;
  border: 0;
  border-radius: var(--r-sm, 12px);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dpg-tb-back__icon, .dpg-tb-back__icon .dpg-ico { display: block; width: 22px; height: 22px; }
@media (hover: hover) { .dpg-tb-back:hover { background: var(--surface-2); } }
.dpg-tb-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 1000px 未満は題が上の段の全幅（quiz.css・dpg-answer.css）。題の幅を減らさないよう、「‹」は2段目（道具の段）の左の端に置く
   （2段目は道具が右に寄っていて左が空いている＝帯の高さは今と同じ）。読む順・Tab の順は「‹ → 道具」のまま（題は Tab に入らない）。 */
@media (max-width: 999.98px) {
  :root .qz-app[data-screen="quiz"] .qz-quiz-head.dpg-tb-head > .dpg-tb-back { order: 1; margin-right: auto; }
  :root .qz-app[data-screen="quiz"] .qz-quiz-head.dpg-tb-head > :not(.qz-quiz-head__title):not(.dpg-tb-back) { order: 2; }
}

/* ---- ［⋯ほか］のシート（body の直下。依頼文のシートと同じく、ほかの固定の帯より前に出す） ---- */
:root[data-quiz-theme] .dpg-tb-root .dpg-more-scrim { z-index: 5000; }
:root[data-quiz-theme] .dpg-tb-root .dpg-tb-sheet {
  z-index: 5001;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--g-s1, 8px);
  /* 下から半分の高さまで（問題文を隠しすぎない）。中が長い時はシートの中で動かす */
  max-height: min(max(50vh, 320px), 90vh);   /* 200% 拡大（高さ 400px ほど）でも行が2つは見える高さ */
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 8px;
  transform: translateY(var(--dpg-tb-drag, 0px));
}
/* 中の物は縮めない（縮むと枠の overflow:hidden で行が切れて、200% 拡大で独り言・トップへが見えなくなる）。シートの中で動かす */
:root[data-quiz-theme] .dpg-tb-root .dpg-tb-sheet > * { flex-shrink: 0; }
/* 選ぶ所は行が6つあるので、開いた人のために高さを足す（それでも画面の上は空ける） */
:root[data-quiz-theme] .dpg-tb-root .dpg-tb-sheet[data-pane="choose"] { max-height: min(86vh, 86dvh, 680px); }
@media (min-width: 650px) {
  :root[data-quiz-theme] .dpg-tb-root .dpg-tb-sheet { transform: translate(-50%, var(--dpg-tb-drag, 0px)); width: min(480px, 92vw); }
}
/* 払うためのつまみの帯（.dpg-more-sheet::before の灰色の棒の所）。押す所の高さを取る */
.dpg-tb-sheet__grab { flex: none; height: 14px; margin: -8px calc(-1 * var(--g-s2, 16px)) 0; touch-action: none; cursor: grab; }
.dpg-tb-sheet__head { flex: none; display: flex; align-items: center; gap: var(--g-s1, 8px); min-height: 44px; touch-action: none; }
.dpg-tb-sheet__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--text); }
.dpg-tb-sheet__title:focus { outline: none; }
.dpg-tb-sheet__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dpg-tb-sheet__x, .dpg-tb-sheet__back {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; min-height: 44px; margin: 0; padding: 0 var(--g-s1, 8px);
  border: 0; border-radius: var(--r-sm, 12px); background: transparent; color: var(--text-2);
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dpg-tb-sheet__back { color: var(--accent); margin-left: calc(-1 * var(--g-s1, 8px)); padding-left: 2px; }
.dpg-tb-sheet__x { margin-right: calc(-1 * var(--g-s1, 8px)); }
.dpg-tb-sheet__x-ico, .dpg-tb-sheet__back-ico { display: block; width: 22px; height: 22px; }
.dpg-tb-sheet__x-ico svg, .dpg-tb-sheet__back-ico svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) { :is(.dpg-tb-sheet__x, .dpg-tb-sheet__back, .dpg-tb-row, .dpg-tb-choose):hover { background: var(--surface-2); } }
:is(.dpg-tb-sheet__x, .dpg-tb-sheet__back, .dpg-tb-row, .dpg-tb-choose, .dpg-tb-pick__move):focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.dpg-tb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--separator); border-radius: var(--r-md, 16px); overflow: hidden; background: var(--surface); }
.dpg-tb-list__item + .dpg-tb-list__item { border-top: 1px solid var(--separator); }
.dpg-tb-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px;
  box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 0 var(--g-s2, 16px);
  border: 0; border-radius: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 16px; font-weight: 800; line-height: 1.35; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dpg-tb-row__ico, .dpg-tb-row__chev { display: block; width: 22px; height: 22px; color: var(--accent); }
.dpg-tb-row__ico svg, .dpg-tb-row__chev svg, .dpg-tb-row__ico .dpg-ico { display: block; width: 22px; height: 22px; }
.dpg-tb-row__chev { width: 18px; height: 18px; color: var(--text-3); }
.dpg-tb-row__chev svg { width: 18px; height: 18px; }
.dpg-tb-row__value { font-size: 14px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.dpg-tb-row__value.is-off { color: var(--danger); }   /* 帯の赤い「オフ」と同じ色 */
.dpg-tb-row[aria-pressed="true"] .dpg-tb-row__value { color: var(--accent); }
/* 声の操作の間の独り言は、帯と同じく薄くする（押すと「同時には使えません」） */
.dpg-tb-row.is-blocked :is(.dpg-tb-row__ico, .dpg-tb-row__name) { opacity: .45; }
.dpg-tb-row.is-blocked .dpg-tb-row__value { white-space: normal; font-size: 13px; }
.dpg-tb-row:disabled { cursor: default; }
/* 2026-10-28 区間T4 直し係A（本人「オフの時はスラッシュで音と同じように」）: 切れている行（音・独り言のオフ、声で聞いていない）は、
   帯と同じ赤い斜線を絵に重ねる（線の形は quiz.css の .qz-sound-btn[data-off] と同じ規則。ここは絵の入れ物を重ねる土台にするだけ） */
.dpg-tb-row__ico { position: relative; }
/* 声の行（検査役 中1）: 状態の字は帯の［声］の読み上げと同じ言葉。長い時（マイクが許可されていません）は折り返す */
.dpg-tb-row[data-voice] .dpg-tb-row__value { white-space: normal; text-align: right; }
/* 声の行の下の小さな2つ（言える言葉＝帯の［声］の長押しと同じ／声をオフ＝設定のスイッチと同じ）。押す所は 44px。字の頭は行の名前にそろえる */
.dpg-tb-row__subs {
  display: flex; flex-wrap: wrap; gap: var(--g-s1, 8px);
  padding: 0 var(--g-s2, 16px) 12px calc(var(--g-s2, 16px) + 24px + 12px);
}
.dpg-tb-sub {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1.5px solid var(--accent); border-radius: var(--r-pill); background: var(--surface); color: var(--accent);
  font: inherit; font-size: 14px; font-weight: 800; line-height: 1.3; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .dpg-tb-sub:hover { background: var(--accent-soft); } }
.dpg-tb-sub:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dpg-tb-row:disabled :is(.dpg-tb-row__ico, .dpg-tb-row__name) { opacity: .45; }

.dpg-tb-choose {
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-s1, 8px);
  box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 0 var(--g-s2, 16px);
  border: 0; border-radius: var(--r-md, 16px); background: transparent; color: var(--accent);
  font: inherit; font-size: 15px; font-weight: 800; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dpg-tb-choose__chev, .dpg-tb-choose__chev svg { display: block; width: 18px; height: 18px; }
.dpg-tb-sheet__empty { margin: 0; padding: var(--g-s1, 8px) 0; font-size: 15px; color: var(--text-2); }
.dpg-tb-sheet__status { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.dpg-tb-sheet__status:empty { display: none; }

/* ---- 帯に出す道具を選ぶ（シートの2段目と、設定の「出題の帯」の2段目で同じ物） ---- */
.dpg-tb-pick { display: flex; flex-direction: column; gap: var(--g-s1, 8px); min-width: 0; }
.dpg-tb-pick__lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.dpg-tb-pick__full[hidden] { display: none; }
.dpg-tb-pick__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--separator); border-radius: var(--r-md, 16px); overflow: hidden; background: var(--surface); }
.dpg-tb-pick__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 44px; align-items: center; min-height: 52px; padding: 0 4px 0 var(--g-s1, 8px); background: var(--surface); }
.dpg-tb-pick__row + .dpg-tb-pick__row { border-top: 1px solid var(--separator); }
.dpg-tb-pick__row.is-drag { position: relative; z-index: 1; background: var(--accent-soft); box-shadow: var(--shadow-card); }
.dpg-tb-pick__label { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding-left: 4px; font-size: 16px; font-weight: 800; color: var(--text); cursor: pointer; }
.dpg-tb-pick__box { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.dpg-tb-pick__ico, .dpg-tb-pick__ico svg { flex: none; display: block; width: 20px; height: 20px; color: var(--accent); }
.dpg-tb-pick__row.is-full .dpg-tb-pick__label { color: var(--text-2); }
.dpg-tb-pick__name { min-width: 0; overflow-wrap: anywhere; }
.dpg-tb-pick__badge { flex: none; padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; line-height: 1.6; }
.dpg-tb-pick__move {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: var(--r-sm, 12px); background: transparent; color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dpg-tb-pick__move:disabled { color: var(--text-3); opacity: .5; cursor: default; }
@media (hover: hover) { .dpg-tb-pick__move:not(:disabled):hover { background: var(--surface-2); } }
.dpg-tb-pick__move-ico, .dpg-tb-pick__move-ico svg { display: block; width: 20px; height: 20px; }
.dpg-tb-pick__grip { display: grid; place-items: center; width: 44px; height: 48px;   /* 直し係A（検査役 小1）: 幅 40px → 44px */ color: var(--text-3); cursor: grab; touch-action: none; }
.dpg-tb-pick__grip-ico, .dpg-tb-pick__grip-ico svg { display: block; width: 20px; height: 20px; }
.dpg-tb-pick__row.is-drag .dpg-tb-pick__grip { cursor: grabbing; }
.dpg-tb-pick__now { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.dpg-tb-pick__foot { display: flex; justify-content: flex-start; }
.dpg-tb-pick__reset { min-height: 44px; }
.dpg-tb-pick__status { margin: 0; min-height: 1.5em; font-size: 13px; line-height: 1.5; color: var(--text-2); }
/* 187px 相当（200% 拡大）: 名前が細くならないよう、上下のボタンを名前の下の段へ回す */
@media (max-width: 300px) {
  .dpg-tb-pick__row { grid-template-columns: minmax(0, 1fr) 44px 44px; grid-template-areas: "label label label" "grip up down"; padding-bottom: 4px; }
  .dpg-tb-pick__label { grid-area: label; }
  .dpg-tb-pick__grip { grid-area: grip; justify-self: start; }
  .dpg-tb-row { column-gap: 8px; padding: 0 var(--g-s1, 8px); }
  .dpg-tb-row__subs { padding: 0 var(--g-s1, 8px) 8px; }
  /* 直し係A: 状態の字（聞いています・声の操作中は使えません など）は名前の下の段へ（名前が押しつぶされて字に重なっていた） */
  .dpg-tb-row { grid-template-columns: 24px minmax(0, 1fr) auto; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  .dpg-tb-row__ico { grid-row: 1 / span 2; }
  .dpg-tb-row__name { grid-column: 2; grid-row: 1; }
  .dpg-tb-row__value { grid-column: 2 / -1; grid-row: 2; white-space: normal; text-align: left; }
  .dpg-tb-row[data-voice] .dpg-tb-row__value { text-align: left; }
  .dpg-tb-row__chev { grid-column: 3; grid-row: 1 / span 2; }
}