/* ===========================================================================
   dpg-t-lab.css — 2026-10-29 区間T9 担当E2「数A の実験」（本人だけに見える 't-math-lab'。dpg-t-steps.js が描く）
   形2「図を動かす（表・道順）」と形3「先に見当」の見た目。箱・返し・たたんだ1行は dpg-t-steps.css の .dpg-steps__* をそのまま使う。
   index.html の dpg-t-steps.css の後に読む。札が無い時は .dpg-lab が1つも無いので、何も変わらない。
   色・角丸・余白・字の大きさはトークン（design/dpg/00-tokens.css・dpg-guide.css の :root）だけ。新しい色は作らない。
   紫は問題集の中の操作（押したマス・入れた交差点）だけ。赤と緑は正誤の印だけ。押す所は 44px 以上。動きは無い（返しの浮き出しは dpg-t-steps.css）。
   2026-10-29 直し（検査役の中1・中2・小4）: 見当を開いている間は4択をたたむ。表と碁盤のマスの大きさは、画面の幅ではなく箱の幅で決める
     （container query。PC の2列で右の列が狭い 1000〜1099px でも箱に入る）。表の軸の名前（大 →・小 ↓）を見える字で出す。
   =========================================================================== */
.qz-app .dpg-lab { --dpg-lab-cell: 44px; --dpg-lab-head: 22px; --dpg-lab-gap: 1px; --dpg-lab-road: 6px; }
.qz-app .dpg-lab__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* スマホの幅（390px）で 6×6 の表と碁盤が箱に入るように、表の箱だけ左右の余白を細く（44px のマス×6＋見出し 22px） */
.qz-app .dpg-lab__panel { padding-left: 4px; padding-right: 4px; }
.qz-app .dpg-lab__panel > :not(.dpg-lab__scroll) { margin-left: 4px; margin-right: 4px; }

/* ---- 形2: 表と碁盤の入れ物（はみ出す幅では、この中だけ横に送る。ページは横に動かない） ---- */
.qz-app .dpg-lab__cap { margin: 0; color: var(--text-2); font-size: var(--g-fs-small); line-height: 1.6; overflow-wrap: anywhere; }
.qz-app .dpg-lab__scroll { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 0; -webkit-overflow-scrolling: touch; }
.qz-app .dpg-lab__scroll--sum { padding: 0 var(--g-s1) var(--g-s1); }
.qz-app .dpg-lab__table--wide { --dpg-lab-head: 30px; }
.qz-app .dpg-lab__table { display: grid; gap: var(--dpg-lab-gap); justify-content: center; width: max-content; margin: 0 auto; }
.qz-app .dpg-lab__row { display: grid; grid-template-columns: var(--dpg-lab-head) repeat(var(--dpg-lab-cols), var(--dpg-lab-cell)); gap: var(--dpg-lab-gap); }
.qz-app .dpg-lab__h,
.qz-app .dpg-lab__corner { display: flex; align-items: center; justify-content: center; min-height: 24px; color: var(--text-2); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; }
.qz-app .dpg-lab__corner { font-size: 12px; letter-spacing: -0.04em; white-space: nowrap; }
/* 軸の名前: 列の見出しの上の行に「大 →」、角に縦に「小」「↓」 */
.qz-app .dpg-lab__axis { min-height: 0; }
.qz-app .dpg-lab__axis-col { grid-column: 2 / -1; padding-left: 4px; color: var(--text-2); font-size: 12px; font-weight: 700; line-height: 1.4; text-align: left; white-space: nowrap; }
.qz-app .dpg-lab__axis-row { display: flex; flex-direction: column; align-items: center; color: var(--text-2); font-size: 12px; font-weight: 700; line-height: 1.1; }
.qz-app .dpg-lab__cell {
  display: inline-grid;
  place-items: center;
  width: var(--dpg-lab-cell);
  height: var(--dpg-lab-cell);
  margin: 0;
  padding: 0;
  border: 1px solid var(--separator);
  border-radius: var(--r-sm, 8px);
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qz-app .dpg-lab__cell.is-ro { cursor: default; }
.qz-app .dpg-lab__cell.is-base { background: var(--dpg-gold-soft, var(--surface-2)); border-color: var(--control-border); }
.qz-app .dpg-lab__cell.is-out { background: var(--surface-2); border-style: dashed; opacity: .5; }
.qz-app .dpg-lab__cell[aria-pressed="true"] { background: var(--accent-soft); border: 2px solid var(--accent); }
.qz-app .dpg-lab__cell.is-ok { background: var(--success-soft); border: 2px solid var(--success); color: var(--success); }
.qz-app .dpg-lab__cell.is-bad,
.qz-app .dpg-lab__cell.is-bad[aria-pressed="true"] { background: var(--danger-soft); border: 2px solid var(--danger); color: var(--danger); }
.qz-app .dpg-lab__cell.is-miss { border: 2px dashed var(--success); color: var(--success); }

/* 道順の碁盤: 交差点（丸）と、その間の道（線）。上が北・右が東。A は左下、B は右上 */
.qz-app .dpg-lab__path { display: grid; gap: var(--dpg-lab-road); justify-content: center; width: max-content; margin: 0 auto; padding: 2px 0; }
.qz-app .dpg-lab__prow { display: grid; grid-template-columns: repeat(var(--dpg-lab-cols), var(--dpg-lab-cell)); gap: var(--dpg-lab-road); }
.qz-app .dpg-lab__node {
  position: relative;
  z-index: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--dpg-lab-cell);
  height: var(--dpg-lab-cell);
  margin: 0;
  padding: 0;
  border: 2px solid var(--control-border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qz-app .dpg-lab__node::before { content: ""; position: absolute; z-index: -1; left: 100%; top: calc(50% - 2px); width: var(--dpg-lab-road); height: 4px; background: var(--control-border); }
.qz-app .dpg-lab__node::after { content: ""; position: absolute; z-index: -1; top: 100%; left: calc(50% - 2px); width: 4px; height: var(--dpg-lab-road); background: var(--control-border); }
.qz-app .dpg-lab__node.no-r::before,
.qz-app .dpg-lab__node.no-d::after { display: none; }
.qz-app .dpg-lab__node.is-ro { cursor: default; }
.qz-app .dpg-lab__node.is-given { background: var(--surface-2); border-color: var(--separator); }
.qz-app .dpg-lab__node.is-off { background: var(--surface-2); border-style: dashed; border-color: var(--separator); color: var(--text-3); }
.qz-app .dpg-lab__node.is-filled { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.qz-app .dpg-lab__node.is-goal,
.qz-app .dpg-lab__node.is-via { border-width: 3px; border-color: var(--qz-ornament); }
.qz-app .dpg-lab__node.is-goal.is-filled { background: var(--dpg-gold-soft, var(--surface-2)); color: var(--dpg-gold-ink, var(--text)); }
.qz-app .dpg-lab__node.is-hint { border-style: dashed; border-color: var(--accent); }
.qz-app .dpg-lab__nn { color: var(--text); font-size: 11px; font-weight: 800; line-height: 1.1; }
.qz-app .dpg-lab__legend { margin: 0; color: var(--text-2); font-size: 13px; text-align: center; }

.qz-app .dpg-lab__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-s1); min-width: 0; }
.qz-app .dpg-lab__count { flex: 1 1 8em; min-width: 0; font-size: var(--g-fs-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.qz-app .dpg-lab__text {
  min-width: 44px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--g-fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---- 形3: 先に見当（問題のカードの中・選択肢のすぐ上。押した時だけ開く） ---- */
.qz-app .dpg-lab--guess { display: grid; min-width: 0; }
/* 見当を開いている間は、すぐ後ろの4択をたたむ（4択を見て区間を選ばないように。見当を選ぶか［とじる］で出る）。［わからない］は今のまま */
.qz-app .dpg-lab--guess.is-open ~ .qz-choices { display: none; }
.qz-app .dpg-lab__gline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--g-s1);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 4px var(--g-s1);
  border: 1px dashed var(--separator);
  border-radius: var(--g-radius-btn);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--g-fs-small);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qz-app .dpg-lab__gline .dpg-steps__face,
.qz-app .dpg-lab__gsum .dpg-steps__face { width: 24px; height: 24px; }
.qz-app .dpg-lab__glead { min-width: 0; overflow-wrap: anywhere; }
.qz-app .dpg-lab__gopt { color: var(--text); }
.qz-app .dpg-lab__gmore { margin-left: auto; color: var(--text-3); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.qz-app .dpg-lab__gpanel { gap: var(--g-s1); }
.qz-app .dpg-lab__gopts .dpg-steps__opt.is-picked { border: 2px solid var(--accent); padding: 9px 13px; background: var(--accent-soft); }
.qz-app .dpg-lab__gnote { margin: 0; color: var(--text-2); font-size: var(--g-fs-small); line-height: 1.5; }
.qz-app .dpg-lab__gsum > summary { font-size: var(--g-fs-small); }
.qz-app .dpg-lab__gans,
.qz-app .dpg-lab__gwhy { margin: 0; padding: 0 var(--g-s2) var(--g-s1); font-size: var(--g-fs-small); line-height: 1.7; overflow-wrap: anywhere; }
.qz-app .dpg-lab__gwhy .dpg-steps__wrap-head { display: block; }

.qz-app .dpg-lab button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .qz-app .dpg-lab__cell:not(.is-ro):hover { border-color: var(--accent); }
  .qz-app .dpg-lab__node:not(.is-ro):hover { border-color: var(--accent); }
  .qz-app .dpg-lab__gline:hover { border-color: var(--accent); color: var(--accent); }
}
/* 箱が広い時（幅 400px 以上。スマホの横向き・タブレット・PC の右の列が広い時）は、マスを少し大きく。
   画面の幅でなく箱の幅で決める（PC の2列で右の列が狭い 1000〜1099px は、スマホと同じ 44px のまま）。
   container query が効かない古いブラウザでは、44px のまま（どの幅でも箱に入る） */
.qz-app .dpg-lab:not(.dpg-lab--guess) { container-type: inline-size; }
@container (min-width: 400px) {
  .qz-app .dpg-lab__panel { --dpg-lab-cell: 48px; --dpg-lab-gap: 3px; --dpg-lab-head: 28px; --dpg-lab-road: 12px; padding-left: var(--g-s2); padding-right: var(--g-s2); }
  .qz-app .dpg-lab__panel > :not(.dpg-lab__scroll) { margin-left: 0; margin-right: 0; }
}
/* とても狭い幅（200% 拡大の 187px など）: 表と碁盤は入れ物の中だけ横に送る。見当の1行は字を折り返す */
@media (max-width: 300px) {
  .qz-app .dpg-lab__gmore { margin-left: 0; }
}