/* dpg-tabs.css — タブと切り替えの見た目を2種類にそろえる（区間3。2026-10-15 Cowork）。ほかの dpg-*.css の後に読む。dpg-guide.css のトークンを使う。

   見た目の決まり（周2・周3 の批評「タブ・切り替えの見た目が5種類以上」「選んだ状態が2番手ボタンと同じに見える」への答え）
   A) 画面・中身を切り替える＝下線のタブ（role="tablist" の物）
      文字だけを並べ、並びの下に細い線を1本。選択中は紫の文字＋紫の下線（3px）。地は塗らない・枠も付けない。
      例: 答えた後のくわしい解説／みんなの解説／自分のメモ、棚の画面の本番で解く／読んで覚える、シミュのタスク／ガイドライン／トポロジと機器（SW1 など）。
   B) 値を選ぶ＝白地のセグメント（role="group" と aria-pressed の物）
      つながった白い面（細い線で囲む）の中に選択肢を並べる。選択中は薄紫の面＋紫の文字＋細い紫の線（1px）。
      2番手のボタン（白地に紫の太い枠）とは「中が塗られている・線が細い・白い面の中にある」で見分けられる。
      例: 周回、全ての復習、文字の大きさ、1ブロックの問題数・出題順・制限時間・範囲（.qz-pill）、絞り込みのチップの選択中。
   紫の塗り（白い文字）はタブにも切り替えにも使わない（紫の塗りは1画面に1つの主ボタンだけ）。肌色（--surface-2）の札もやめる。

   上書きのしかた: 相手は :root[data-quiz-theme="paper"] .qz-app[data-screen] … の（0,8,0）前後まであるので、
   各規則の最後に :not(#_) を付けて ID 1つ分だけ詳細度を上げる（id="_" の要素は無いので、どの要素にも当たる）。!important は使わない。
   ほかのページ（ランキング・勉強ログ・勉強計画）はこのファイルを読まないので、同じ決まりを dpg-pages-a.css / dpg-pages-b.css に書いている。 */
:root{
  --t-line: var(--separator);        /* タブの並びの下の線・セグメントの白い面の線 */
  --t-bar: 3px;                      /* 選択中のタブの下線 */
  --t-seg-radius: var(--g-radius-btn);
  --t-seg-item-radius: 10px;
}

/* ===================================================================
   A) 下線のタブ
   =================================================================== */
/* 並び: 下に細い線を1本。カードの面・影・角丸は付けない */
:root[data-quiz-theme="paper"] :is(.qz-answer-tabs, .qz-home-tabs:not(.qz-home-tabs--card), .qz-sim__tabs, .qz-sim__devtabs):not(#_) {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--t-line);
  border-radius: 0;
  box-shadow: none;
}
/* 答えた後のタブは PC で列の上に張り付き、その間は下の中身が透けないよう地の色を持つ（dpg-answer.css）。ほかは地を塗らない */
:root[data-quiz-theme="paper"] :is(.qz-home-tabs:not(.qz-home-tabs--card), .qz-sim__tabs, .qz-sim__devtabs):not(#_) { background: none; }

/* 1つずつのタブ: 文字だけ。下の線に重なる 3px の下線（選択中だけ紫） */
:root[data-quiz-theme="paper"] :is(.qz-answer-tab, .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab, .qz-sim__tab, .qz-sim__devtab):not(#_) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--g-hit);
  margin: 0 0 -1px;
  border: 0;
  border-bottom: var(--t-bar) solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-2);
  font-size: var(--g-fs-body);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root[data-quiz-theme="paper"] :is(.qz-answer-tab, .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab, .qz-sim__tab, .qz-sim__devtab)[aria-selected="true"]:not(#_) {
  border-bottom-color: var(--accent);
  background: none;
  box-shadow: none;
  color: var(--accent);
  font-weight: 800;
}
@media (hover: hover) {
  :root[data-quiz-theme="paper"] :is(.qz-answer-tab, .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab, .qz-sim__tab, .qz-sim__devtab):hover:not(#_) { background: none; color: var(--accent); }
}
:root[data-quiz-theme="paper"] :is(.qz-answer-tab, .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab, .qz-sim__tab, .qz-sim__devtab):focus-visible:not(#_) {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  border-radius: 8px 8px 0 0;
}

/* 幅の分け方: 答えた後（3つ）と本番で解く／読んで覚える（2つ）は等分。シミュは言葉の長さのまま左から並べる */
:root[data-quiz-theme="paper"] :is(.qz-answer-tab, .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab):not(#_) { flex: 1 1 0; min-width: 0; padding: 0 4px; }
:root[data-quiz-theme="paper"] :is(.qz-sim__tab, .qz-sim__devtab):not(#_) { flex: 0 0 auto; padding: 0 var(--g-s2); }
/* シミュのタスク／ガイドライン／トポロジ: 3つを 390px の幅（列の中 約300px）に1行で収める */
:root[data-quiz-theme="paper"] .qz-sim__tab:not(#_) { padding: 0 12px; }
/* 2026-10-16 後戻りの直し R8（棚の中の「本番で解く／読んで覚える」が 375px＋200% 拡大で1文字ずつ折れた。2026-09 R3 の決まり「横2枚だと文字が1語ずつ折れる」の再発）:
   2つの基準の幅を 8em にして折り返し可にする。ふつうの幅（390・1280。2つ合わせて 16em ≒ 272px）は等分の横並びのまま、拡大で列が 16em を切るときだけ縦に積む。
   拡大（documentElement.style.zoom）はメディアクエリの幅を変えないので、幅の条件ではなく中身の幅で効かせる。tools/qa-celebration-v7.mjs の「200 percent tabs stack in one readable column」が見ている。 */
:root[data-quiz-theme="paper"] .qz-home-tabs:not(.qz-home-tabs--card):not(#_) { flex-wrap: wrap; }
:root[data-quiz-theme="paper"] .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab:not(#_) { flex: 1 1 8em; }
/* 機器が多いときは折り返す（今までどおり）。機器のタブは並べ替えのドラッグ中の影（v4.css の .is-dragging）を残す */
:root[data-quiz-theme="paper"] .qz-sim__devtabs:not(#_) { flex-wrap: wrap; }
:root[data-quiz-theme="paper"] .qz-sim__devtab.is-dragging:not(#_) { box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 10px rgb(0 0 0 / 25%); }

/* 棚の画面の「本番で解く／読んで覚える」: 字は本文の大きさのまま（題の .qz-home-tab__title は親の色を継ぐ） */
:root[data-quiz-theme="paper"] .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab :is(.qz-home-tab__title, .qz-home-tab__desc):not(#_) { color: inherit; }
/* タブの並びと ⚙（白い四角）を1行に置くとき、⚙ は下線の高さにそろえて縦の真ん中に */
:root[data-quiz-theme="paper"] .qz-app[data-screen=home] .qz-header:has(> .qz-home-cards):has(> .dpg-topline--gear):not(#_) { align-items: end; }

/* ===================================================================
   B) 白地のセグメント
   =================================================================== */
/* 白い面: 細い線で囲んだ1枚の面の中に、選択肢を並べる（多いときは面の中で折り返す） */
:root[data-quiz-theme="paper"] :is(.qz-round-selector__options, .qz-all-review__options, .qz-text-size, .qz-pills):not(#_) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--t-line);
  border-radius: var(--t-seg-radius);
  background: var(--surface);
  box-shadow: none;
}
/* 1つずつの選択肢: 線も面も無い文字（押せる大きさは今のまま 44px 以上） */
:root[data-quiz-theme="paper"] :is(.qz-round-selector__option, .qz-all-review__option, .qz-text-size__btn, .qz-pill):not(#_) {
  border: 1px solid transparent;
  border-radius: var(--t-seg-item-radius);
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-weight: 700;
}
/* 選択中: 薄紫の面＋紫の文字＋細い紫の線 */
:root[data-quiz-theme="paper"] :is(.qz-round-selector__option, .qz-all-review__option, .qz-text-size__btn, .qz-pill)[aria-pressed="true"]:not(#_) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent);
  font-weight: 800;
}
@media (hover: hover) {
  :root[data-quiz-theme="paper"] :is(.qz-round-selector__option, .qz-all-review__option, .qz-text-size__btn, .qz-pill):not([aria-pressed="true"]):not(:disabled):hover:not(#_) { background: var(--bg); color: var(--accent); }
}
:root[data-quiz-theme="paper"] :is(.qz-round-selector__option, .qz-all-review__option, .qz-text-size__btn, .qz-pill):focus-visible:not(#_) { outline: 3px solid var(--accent); outline-offset: 1px; }
/* 周回・全ての復習・文字の大きさ（2〜3つ）は等分。問題数・制限時間などのピルは言葉の長さのまま */
:root[data-quiz-theme="paper"] :is(.qz-round-selector__option, .qz-all-review__option, .qz-text-size__btn):not(#_) { flex: 1 1 0; min-width: 0; }
/* 2026-10-16 後戻りの直し R7（設定を2倍に拡大した幅 187px で、文字の大きさの3つのボタンが幅 29px になり「あ小さめ」が収まらなかった）: 上の min-width: 0 が、
   quiz.css の .qz-text-size__btn の min-width: 84px（これで狭いときは折り返して1つずつ縦に並んでいた）を消していた。文字の大きさだけ 84px に戻す（ふつうの幅は等分のまま）。
   tools/qa-ux-header-filter.mjs の「ホーム設定 ③ 文字が重ならない」「⚙シート ③ 文字が重ならない」（187px・大きめ）が見ている。 */
:root[data-quiz-theme="paper"] .qz-text-size__btn:not(#_) { min-width: 84px; }
/* 絞り込みのチップ（資格の系統: すべて・IPA・Azure…）: 1行で横に流れるチップのまま、選択中だけセグメントと同じ形
   （dpg-guide.css は白地に紫の枠＝2番手のボタンと同じ見た目にしていた） */
:root[data-quiz-theme="paper"] .dpg-chip[aria-pressed="true"]:not(#_) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent);
}

/* 動きを減らす設定: タブ・切り替えの色の移り変わりを止める */
@media (prefers-reduced-motion: reduce) {
  :root[data-quiz-theme="paper"] :is(.qz-answer-tab, .qz-home-tab, .qz-sim__tab, .qz-sim__devtab, .qz-round-selector__option, .qz-all-review__option, .qz-text-size__btn, .qz-pill, .dpg-chip):not(#_) { transition: none; }
}

/* 問題数・制限時間などのピルの白い面は、中身の幅まで（PC で横に長い空の面にしない）。折り返すときは幅いっぱい */
:root[data-quiz-theme="paper"] .qz-pills:not(#_) { width: fit-content; max-width: 100%; }

/* ===================================================================
   C) 作る画面の値選び（表示サイズ・作るもの・向き）も B) の白地のセグメント（2026-10-15 周4。前は離れた茶色枠のボタン）
   =================================================================== */
:root[data-quiz-theme="paper"] .qz-editor__pills:not(#_) {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px;
  border: 1px solid var(--t-line); border-radius: var(--t-seg-radius); background: var(--surface); box-shadow: none;
}
:root[data-quiz-theme="paper"] :is(.qz-editor__pills .qz-editor__pill, .qz-editor-size > button):not(#_) {
  min-height: 44px; border: 1px solid transparent; border-radius: var(--t-seg-item-radius);
  background: transparent; box-shadow: none; color: var(--text-2); font-weight: 700;
}
:root[data-quiz-theme="paper"] :is(.qz-editor__pills .qz-editor__pill, .qz-editor-size > button)[aria-pressed="true"]:not(#_) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 800;
}
/* 表示サイズは「表示サイズ」の字と同じ並びにあるので、3つのボタンを白い面1枚に見えるようつなげる（DOM は変えない）。
   上の :is(…) の規則（1,4,0）より強くするため、クラスを2回書く */
:root[data-quiz-theme="paper"] .qz-editor-size.qz-editor-size:not(#_) { gap: 0; }
:root[data-quiz-theme="paper"] .qz-editor-size > span:not(#_) { margin-right: var(--g-s1); }
:root[data-quiz-theme="paper"] .qz-editor-size.qz-editor-size > button:not(#_) {
  margin: 0; border-radius: 0; background: var(--surface);
  border-top-color: var(--t-line); border-bottom-color: var(--t-line);
}
:root[data-quiz-theme="paper"] .qz-editor-size.qz-editor-size > span + button:not(#_) { border-left-color: var(--t-line); border-radius: var(--t-seg-radius) 0 0 var(--t-seg-radius); }
:root[data-quiz-theme="paper"] .qz-editor-size.qz-editor-size > button:last-child:not(#_) { border-right-color: var(--t-line); border-radius: 0 var(--t-seg-radius) var(--t-seg-radius) 0; }
:root[data-quiz-theme="paper"] .qz-editor-size.qz-editor-size > button[aria-pressed="true"]:not(#_) { border-color: var(--accent); background: var(--accent-soft); }

/* ===================================================================
   D) 戻る・閉じる（2026-10-15 周4 の批評「戻る・閉じるが6種類ある」への答え）
   戻る＝「‹ 行き先」の文字リンク1種類（左上。紫の文字・下線なし・押せる所 48px）。閉じる＝右上の文字「閉じる」1種類（同じ見た目）。
   枠・地の色・影は付けない（3番手＝文字のリンク）。下の「‹ 読んで覚えるの棚」も同じ見た目（置き場所は今のまま）。
   display は書かない（PC で「‹ 設定」を隠す dpg-settings.css の display:none や hidden を消さないため）。
   =================================================================== */
:root[data-quiz-theme="paper"] :is(.qz-back, .dpg-set__back, .dpg-fr-back, .qz-link[data-role="shelf-back"], .qz-link[data-role="collection-back"], .qz-btn[data-role="practice-shelf"], .dpg-set__close, .dpg-search__close, .dpg-abil__close, .qz-quiz-settings__close, .qz-editor__close):not(#_) {
  flex: none; align-items: center; justify-content: flex-start; gap: 4px;
  width: auto; min-width: var(--g-hit); min-height: var(--g-hit); padding: 0 6px;
  border: 0; border-radius: 8px; background: none; box-shadow: none; filter: none; text-shadow: none;
  color: var(--accent); font-family: inherit; font-size: var(--g-fs-body); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
/* 戻るは左端の字（‹）を中身の左の線にそろえる */
:root[data-quiz-theme="paper"] :is(.qz-back, .dpg-set__back, .dpg-fr-back, .qz-link[data-role="shelf-back"], .qz-link[data-role="collection-back"]):not(#_) { align-self: flex-start; justify-self: start; margin: 0 0 0 -6px; }
:root[data-quiz-theme="paper"] .dpg-set__back-mark:not(#_) { font-size: inherit; }
/* はじめての人の「← 分野を選ぶ」（app.js が ← を字で入れている。2026-10-16 区間10 までは「← もどる」）は ← を隠して ‹ を出す（読み上げは「分野を選ぶ」のまま） */
:root[data-quiz-theme="paper"] .dpg-fr-back > span[aria-hidden="true"]:not(#_) { display: none; }
:root[data-quiz-theme="paper"] .dpg-fr-back:not(#_)::before { content: "‹"; content: "‹" / ""; }
@media (hover: hover) {
  :root[data-quiz-theme="paper"] :is(.qz-back, .dpg-set__back, .dpg-fr-back, .qz-link[data-role="shelf-back"], .qz-link[data-role="collection-back"], .qz-btn[data-role="practice-shelf"], .dpg-set__close, .dpg-search__close, .dpg-abil__close, .qz-quiz-settings__close, .qz-editor__close):hover:not(#_) {
    background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  }
}

/* 2026-10-15 区間4: 作る・編集の画面の右上の［閉じる］（前は下の帯の［やめる］）。PC は見出しの行の右端、
   スマホ（700px 以下）は見出しと同じ行の右端に置き、保存の数と表示サイズはその下の行へ。 */
:root[data-quiz-theme="paper"] .qz-editor__head > .qz-editor__close:not(#_) { order: 9; margin-left: auto; }
:root[data-quiz-theme="paper"] .qz-editor__head > .qz-editor-size + .qz-editor__close:not(#_) { margin-left: 0; }
@media (max-width: 700px) {
  :root[data-quiz-theme="paper"] .qz-editor__head > :is(.qz-editor__close, .qz-editor-size + .qz-editor__close):not(#_) { order: 1; margin-left: auto; }
  :root[data-quiz-theme="paper"] .qz-editor__head > .qz-editor__quota:not(#_) { order: 2; flex-basis: 100%; }
  :root[data-quiz-theme="paper"] .qz-editor__head > .qz-editor-size:not(#_) { order: 3; }
}

/* ===================================================================
   E) 読んで覚えるの画面（practice-study）
   =================================================================== */
/* 進み具合のカード: 線を外して、白い面とやわらかい影（ほかのカードと同じ） */
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] .qz-progress-row:not(#_) {
  border: 0; background: var(--surface); box-shadow: var(--g-card-shadow);
}
/* PC（2列）: 右の列の一番上の［理解した］がこの画面の主＝紫の塗り。下の［理解した］は2番手（白地に紫の枠）にして、塗りを1つにする */
@media (min-width: 1000px) {
  :root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] .qz-side > [data-role="practice-understood-top"]:not(#_):not(#_) {
    border: 1px solid var(--g-primary-border); background: var(--g-primary-fill); box-shadow: var(--g-primary-shadow);
    color: var(--surface); filter: none;
  }
  :root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] .qz-btn[data-role="practice-understood"]:not(#_):not(#_) {
    border: 1px solid var(--g-outline); background: var(--g-outline-bg); box-shadow: inset 0 0 0 1px var(--g-outline);
    color: var(--g-outline); filter: none; text-shadow: none;
  }
}
/* スマホ（599px 以下）: 下の［理解した］（紫の塗り）を、出題中の「次の問題へ」（dpg-answer.css）と同じ形・高さで画面の下に固定する
   （区間4・本人 Q4。批評役「390 では『理解した』が解説とみんなの解説の後ろ、約3000px 下にあり固定もされない」）。
   ・sticky なので、本文の最後まで送ると元の位置（「‹ 読んで覚えるの棚」の上）に戻る＝固定の下に本文・リンクが隠れたままにならない。
     読み進める間に重なる分は、下に 8px の余白（読んで覚えるの画面は出題中と同じく下のメニュー帯を出さない＝nav-compact.css で 0）。
   ・上の［理解した］（枠）は、出題中の上の「次へ」と同じく見た目では出さない（同じ処理が下にいつも見えている。
     desktop-keys.js の Enter などは見えている方を押すので、キーはそのまま効く）。PC（右の列の塗りの［理解した］）は上の規則のまま。 */
@media (max-width: 599.98px) {
  :root[data-quiz-theme] .qz-app[data-screen="practice-study"] .qz-page > .qz-btn[data-role="practice-understood"]:not(#_) {
    position: sticky;
    bottom: calc(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px) + var(--g-s1) + env(safe-area-inset-bottom, 0px));
    z-index: 8;
    min-height: var(--g-btn-h);
    margin: 0;
    font-size: var(--g-fs-body);
  }
  :root[data-quiz-theme] .qz-app[data-screen="practice-study"] .qz-side > [data-role="practice-understood-top"]:not(#_) { display: none; }
  /* 固定した［理解した］の下の「‹ 読んで覚えるの棚」との間（固定の帯の影と重ならないように 8px） */
  :root[data-quiz-theme] .qz-app[data-screen="practice-study"] .qz-page > .qz-practice-study__links:not(#_) { margin-top: var(--g-s1); }
}
/* 下半分の2番手（2026-10-16 周7 批評役（一貫性）「2番手が紫枠と黒字グレー枠の2系統。読んで覚えるの下半分だけ黒字グレー枠」）:
   AIに解説を頼む・画像で解説・音声解説の最初から・みんなの解説の［ログイン］［解説を書く］を、ほかの2番手
   （音声解説の［再生］・自分の解説を追加・下の［理解した］）と同じ白地に紫の枠・紫の字・本文の大きさ（17px）にそろえる。
   押したときの働き・data-role・文言は変えない。コピーできた／できなかった（data-state）の緑・赤の枠は今までどおり。 */
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] :is(.qz-share__btn, .qz-explain-audio__replay, .qz-community .xwrite, .qz-community .btn--soft):not(#_) {
  border: 1px solid var(--g-outline); background: var(--g-outline-bg); color: var(--g-outline);
  box-shadow: inset 0 0 0 1px var(--g-outline); filter: none; text-shadow: none;
}
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] :is(.qz-share__btn, .qz-explain-audio__replay, .qz-community .xwrite, .qz-community .btn--soft):hover:not(:disabled):not(#_) {
  background: var(--accent-soft);
}
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] .qz-share__btn[data-state="done"]:not(#_) { border-color: var(--success); color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] .qz-share__btn[data-state="fail"]:not(#_) { border-color: var(--danger); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] :is(.qz-share__btn, .qz-explain-audio__replay, .qz-explain-audio__toggle, .qz-community .xwrite, .qz-community .btn--soft):not(#_) {
  font-size: var(--g-fs-body);
}
/* 見出しの大きさ（同じ周7）: くわしい解説 15px・みんなの解説 19px・自分の解説 15px と3通りあったのを、
   答えた後の画面のカードの見出し（dpg-answer.css）と同じ本文の大きさの太字（17px）にそろえる。件数などの添え字は補足（14px） */
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] :is(.qz-explain__head, .qz-notes__head):not(#_) {
  font-size: var(--g-fs-body); font-weight: 800; line-height: 1.5;
}
:root[data-quiz-theme="paper"] .qz-app[data-screen="practice-study"] .qz-notes__head small:not(#_) { font-size: var(--g-fs-small); }
/* 2026-10-16 周8 批評役（一貫性 6.5「出題中は『画像で解説』『最初から』がまだ茶色の枠で、読んで覚えると違う」）:
   答えた後のタブの中（くわしい解説・みんなの解説・自分のメモ）の2番手も、上の読んで覚えると同じ白地に紫の枠・紫の字・17px にそろえる。
   働き・data-role・文言は変えない。コピーできた／できなかった（data-state）の緑・赤の枠も上と同じ。見出しは dpg-answer.css で既に 17px の太字。 */
:root[data-quiz-theme="paper"] .qz-app[data-screen] .qz-page--answered :is(.qz-answer-panel, .qz-left-tools) :is(.qz-share__btn, .qz-explain-audio__toggle, .qz-explain-audio__replay, .qz-community .xwrite, .qz-community .btn--soft):not(#_) {
  border: 1px solid var(--g-outline); background: var(--g-outline-bg); color: var(--g-outline);
  box-shadow: inset 0 0 0 1px var(--g-outline); filter: none; text-shadow: none;
  font-size: var(--g-fs-body);
}
@media (hover: hover) {
  :root[data-quiz-theme="paper"] .qz-app[data-screen] .qz-page--answered :is(.qz-answer-panel, .qz-left-tools) :is(.qz-share__btn, .qz-explain-audio__toggle, .qz-explain-audio__replay, .qz-community .xwrite, .qz-community .btn--soft):hover:not(:disabled):not(#_) {
    background: var(--accent-soft);
  }
}
:root[data-quiz-theme="paper"] .qz-app[data-screen] .qz-page--answered :is(.qz-answer-panel, .qz-left-tools) .qz-share__btn[data-state="done"]:not(#_) { border-color: var(--success); color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
:root[data-quiz-theme="paper"] .qz-app[data-screen] .qz-page--answered :is(.qz-answer-panel, .qz-left-tools) .qz-share__btn[data-state="fail"]:not(#_) { border-color: var(--danger); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }

/* ===================================================================
   F) フォーカスの枠: 1本・2px にそろえる（周4 の批評「主ボタンや『‹ 設定』に太い紫の二重枠」）
   theme-dpg.css は 3px を 4px 離して描くので、ボタンの縁・影と合わせて二重に見えていた。キーボードで動かしたときの枠は残す。
   =================================================================== */
:root[data-quiz-theme="paper"] .qz-app :is(button, a, summary, select, [role="tab"]):focus-visible:not(#_) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 下線のタブは内側に（並びの下の線と重ねない） */
:root[data-quiz-theme="paper"] :is(.qz-answer-tab, .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab, .qz-sim__tab, .qz-sim__devtab):focus-visible:not(#_) { outline-width: 2px; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  :root[data-quiz-theme="paper"] :is(.qz-back, .dpg-set__back, .dpg-fr-back, .qz-editor__pill, .qz-editor-size > button, .dpg-set__close, .dpg-search__close, .qz-quiz-settings__close, .qz-editor__close):not(#_) { transition: none; }
}

/* 2026-10-16 r10-study: 読んで覚えるの「正解」の1行（views.js の buildPracticeAnswerHead・data-role="practice-answer-card"）。
   問題文のすぐ下・選択肢の前。問題のカードの中なので線は付けず、正解の選択肢と同じ薄い緑の面（緑は正誤だけ＝正解の印）。
   記号の札は答えた後の結論の「正解は Ⓐ」と同じ線の丸（dpg-answer.css の .qz-conclusion__letter と同じ形）。 */
:root[data-quiz-theme] .qz-practice-answer-head:not(#_) {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-s1);
  box-sizing: border-box; min-height: var(--g-hit); margin: 0; padding: var(--g-s1) var(--g-s2);
  border-radius: var(--g-radius); background: var(--success-soft); color: var(--text);
  font-size: var(--g-fs-body); font-weight: 700; line-height: 1.5;
}
:root[data-quiz-theme] .qz-practice-answer-head__label:not(#_) { color: var(--success); font-weight: 800; }
:root[data-quiz-theme] .qz-practice-answer-head__letter:not(#_) {
  display: inline-grid; place-items: center; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 4px;
  border: 2px solid currentColor; border-radius: 999px; color: var(--success); font-weight: 800; line-height: 1;
}
:root[data-quiz-theme] .qz-practice-answer-head__text:not(#_) { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
:root[data-quiz-theme] .qz-practice-answer-head__sep:not(#_) { color: var(--text-2); }

/* ===================================================================
   E2) 2026-10-16 r11-study2（関所E・本人 p1「読んで理解するのデザインでも詳しい解説とかの画面とか出るよね？この画面だと出てない」）
   読んで覚えるの1画面目に くわしい解説 を出す。1列（スマホ）の並び:
     問題文と正解の1行（.qz-practice-question）→ くわしい解説（.qz-side の中。1列の .qz-side は display:contents）
     → 選択肢と出典（.qz-practice-choices-card）→ AI に頼む・音声解説の箱（left-tools。desktop-keys.js が出す）
     → みんなの解説・自分の解説 → やさしい解説・［理解した］・棚へ。
   DOM の順は変えず order で並べる。PC の2列・見開きでは、左の列（.qz-page の格子）も右の列（.qz-side の縦の並び）も
   order が DOM の順と同じ大小になるので、見た目は今までどおり（右の列は ［理解した］→ くわしい解説 → みんなの解説 → 自分の解説）。
   2026-10-16 区間6（関所F p1・本人が関所Eの形を指して「こっちの方がいい」）: 選択肢は関所Eと同じく問題のカードの中へ戻し（views.js）、
   正解の1行と選択肢のカードは描かない。1列の並びは 問題のカード（問題文・選択肢・出典）→ くわしい解説 → AI・音声の箱 → みんなの解説・自分の解説。
   下の .qz-practice-choices-card・.qz-practice-answer-head・吹き出しの "before" の規則は今は当たらない（戻すときのために残す）。
   =================================================================== */
:root .qz-app[data-screen="practice-study"] .qz-page > .qz-side > .qz-explain { order: 1; }
:root .qz-app[data-screen="practice-study"] .qz-page > .qz-practice-choices-card { order: 2; }
:root .qz-app[data-screen="practice-study"] .qz-page > .qz-side > :not(.qz-explain):not([data-role="practice-understood-top"]):not(.qz-practice-study__time):not(.qz-answer-tabs):not(.qz-answer-panel) { order: 4; }
/* 2026-10-16 区間6（関所F Q4 a）: くわしい解説・みんなの解説・自分のメモ は本番と同じタブ（views.js の buildAnswerTabs）。1列ではタブと中身を
   問題のカードのすぐ後（くわしい解説と同じ order: 1）に置く。AI・音声の箱（left-tools。order: 3）はその後ろ。 */
:root .qz-app[data-screen="practice-study"] .qz-page > .qz-side > :is(.qz-answer-tabs, .qz-answer-panel) { order: 1; }
:root .qz-app[data-screen="practice-study"] .qz-page > .qz-side ~ * { order: 5; }
:root .qz-app[data-screen="practice-study"] .qz-page > .qz-side ~ [data-role="left-tools"] { order: 3; }
/* 選択肢のカード: 問題のカードと同じ白い面。一覧の上の余白は要らない（カードの内側の余白で足りる） */
:root[data-quiz-theme] .qz-practice-choices-card:not(#_) { display: flex; flex-direction: column; gap: var(--g-s1); }
:root[data-quiz-theme] .qz-practice-choices-card > .qz-practice-choices:not(#_) { margin-top: 0; }
:root[data-quiz-theme] .qz-practice-choices-card > .qz-question__source:not(#_) { margin: var(--g-s1) 0 0; }
/* くわしい解説の本文（views.js の buildExplainClamp）: 1列のときだけ最初の約6行で切り、切れたときだけ下の端を薄くして「続きを読む」。
   PC の2列（1000px 以上）は右の列に全部出すので切らない（ボタンも出ない＝app.js の syncPracticeExplainClamp が測って隠す）。 */
@media (max-width: 999.98px) {
  :root .qz-app[data-screen="practice-study"] .qz-explain__clamp:not(.is-open) { max-height: 168px; overflow: hidden; }
  :root .qz-app[data-screen="practice-study"] .qz-explain__clamp.is-cut:not(.is-open) {
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent);
    mask-image: linear-gradient(to bottom, #000 64%, transparent);
  }
}
:root .qz-app[data-screen="practice-study"] .qz-explain__clamp { display: flex; flex-direction: column; gap: inherit; min-width: 0; } /* 段落の間はカードと同じ隙間 */
:root .qz-app[data-screen="practice-study"] .qz-explain__clamp:focus { outline: none; }
:root .qz-app[data-screen="practice-study"] .qz-explain__clamp > :first-child { margin-top: 0; }
/* 「続きを読む」: 3番手＝紫の文字リンク。押せる高さは 48px（--g-hit） */
:root[data-quiz-theme] .qz-explain__more:not(#_) {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--g-hit); margin: 0; padding: 0 var(--g-s1);
  margin-left: calc(var(--g-s1) * -1); border: 0; background: none; color: var(--accent); cursor: pointer;
  font-size: var(--g-fs-body); font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}
:root[data-quiz-theme] .qz-explain__more[hidden]:not(#_) { display: none; }
/* 2026-10-16 後戻りの直し R1（読んで覚えるで「くわしい解説」の見出しを閉じても本文が見えた）: 閉じた見出し（quiz.css の .qz-fold[data-fold="closed"] > :not(.qz-fold__head)）は
   本文を隠す決まりなのに、上の display:flex（箱）と inline-flex（続きを読む）の方が強くて勝っていた。閉じている間だけ箱と「続きを読む」を隠す（開いているときの見た目は変えない）。
   tools/qa-explanations-browser.mjs の「折りたたみ: 閉じる→ …中身は DOM に残るが見えない」が見ている。 */
:root .qz-app[data-screen="practice-study"] .qz-fold[data-fold="closed"] > .qz-explain__clamp { display: none; }
:root[data-quiz-theme] .qz-fold[data-fold="closed"] > .qz-explain__more:not(#_) { display: none; }
/* コースの1問目の吹き出し（dpg-guide.js の段 study）: 1列では正解の1行の上に置く（"before"。くわしい解説の頭を隠さない）。
   問題のカードの中なので、外の余白はカードの隙間に任せて詰め、顔を小さくして文の幅を取る（1画面目に 問題文・吹き出し・正解の1行 が入るように）。 */
:root[data-quiz-theme] .qz-practice-question > .dpg-coach.dpg-coach--down:not(.dpg-coach--float):not(#_) { margin: 0 0 var(--g-s1); padding: var(--g-s1) var(--g-s2) var(--g-s1) var(--g-s1); }
:root[data-quiz-theme] .qz-practice-question > .dpg-coach.dpg-coach--down .dpg-coach__face:not(#_) { width: 40px; height: 40px; }

/* ===================================================================
   G) 出題中の上の帯の道具（音・計算・独り言・設定・トップへ）と、棚の「本番で解く／読んで覚える」のタブの輪（2026-10-16 周8）
   =================================================================== */
/* 押した後は app.js の render が作り直したボタンへ focus() で戻すので、iPhone の Safari や押す動きの無い click では紫の輪（:focus-visible）が残り、
   計算をオフに戻してもオンに見えた（使い込んでいる人役）。棚の選んだタブだけ四角い枠に見えたのも同じ輪（批評役。下線の形はほかの画面と同じ）。
   輪は最後の操作がキーのとき（views.js の watchInputKind が <html data-dpg-input="key"> を付ける）だけ出す。Tab で動かせば今までどおり見える。 */
:root:not([data-dpg-input="key"]) :is(.qz-quiz-head button, .qz-home-tabs .qz-home-tab):focus-visible:not(#_):not(#_) { outline: none; }
/* 2026-10-16 周9（批評役「同じ枠が settings-marks・settings-sound の『‹ 設定』に残る」）: 同じ考えを、描き直しの後に app.js が focus() で移す所へ広げる。
   戻る・閉じる（D の文字リンク。「‹ 設定」で戻った先の設定の行・閉じた後の ⚙ も）と、答えた後の「次の問題へ」・読んで覚えるの「理解した」などの主ボタン。
   Tab・Enter で動かしたとき（data-dpg-input="key"）は今までどおり輪が出る。はじめての5問の吹き出しが付ける「理解した」の輪（.dpg-coach-ring）は焦点の輪ではないので触らない。 */
:root:not([data-dpg-input="key"]) :is(
  .dpg-set__back, .dpg-set__close, [data-role^="settings-row-"], [data-role^="settings-auto-"], [data-role="settings-toggle"],
  .qz-back, .dpg-fr-back, .qz-link[data-role="shelf-back"], .qz-link[data-role="collection-back"], .qz-btn[data-role="practice-shelf"],
  [data-role="next"], [data-role="next-top"], [data-role="practice-understood"], [data-role="practice-understood-top"],
  [data-role="practice-next-understood"], [data-role="practice-result-home"], [data-role="practice-start"], [data-role="practice-continue"]
):focus-visible:not(.dpg-coach-ring):not(#_):not(#_) { outline: none; }
/* 2026-10-16 周9（関所Fで本人に聞く）: 上の帯の道具を押した直後の知らせ（views.js の watchHeadToolToast。showToast の墨の帯）。
   押す物の無い知らせなので、指・マウスは下へ通す（選択肢・計算用紙を押すのを止めない）。計算用紙を開いている間は用紙の上に出す（用紙に重ねない）。 */
.dpg-toast[data-role="tool-toast"] { pointer-events: none; }
html.has-scratch .dpg-toast-region:has(> [data-role="tool-toast"]) { bottom: calc(50dvh + var(--g-s2, 16px)); }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  /* PC の右の列・浮いた窓の用紙: 帯は下のまま。右の列のときは用紙の左の広さの真ん中に出す */
  html.has-scratch .dpg-toast-region:has(> [data-role="tool-toast"]) { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  html.has-scratch:not(.has-scratch-float) .dpg-toast-region:has(> [data-role="tool-toast"]) { right: calc(var(--dpg-scratch-col) + 24px); }
}
/* 2026-10-16 周10（番人役「1280 で知らせ（560×56）が約1.9秒、選択肢 C・D と『わからない』に重なる」）: PC（1000px 以上）は下ではなく、
   押した上の帯のすぐ下に、帯と同じ幅の真ん中で出す（値は views.js の watchHeadToolToast が押すたびに帯の位置から入れる）。答えの段にはかからない。
   計算用紙を開いていても同じ所（帯は用紙の左の広さにある）。スマホ（1000px 未満）は上の規則のまま下に出す。 */
@media (min-width: 1000px) {
  html .dpg-toast-region:has(> [data-role="tool-toast"]):not(#_) {
    top: var(--dpg-tool-toast-top, 96px); bottom: auto;
    left: var(--dpg-tool-toast-left, 0px); right: var(--dpg-tool-toast-right, 0px);
  }
}
/* 計算（開け閉め）: 開いている間（aria-pressed="true"）だけ淡い紫の地＋紫の枠＋紫の名前（B) の選択中と同じ考え）。閉じているときは枠も地も無し。
   音・独り言のオフ（名前の代わりに赤い「オフ」）は本人の決定のまま触らない。 */
:root[data-quiz-theme] .qz-quiz-head .qz-scratch-btn[aria-pressed="true"]:not(#_) { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
:root[data-quiz-theme] .qz-quiz-head .qz-scratch-btn[aria-pressed="true"] .qz-sound-btn__name:not(#_) { color: var(--accent); font-weight: 800; }

/* ===================================================================
   E3) 2026-10-16 区間6（関所F Q4 a／b・評価役B「同じ物の名前と形が違う」「AIに聞くが2か所」）
   ・AI のほかの頼み方（画像で解説・図や計算のコピー・依頼文の選び直し）は「AIへのほかの頼み方：」の1行の文字リンク（3番手）。
     クラスは今までの qz-share__btn／qz-share__prompt--btn のまま、見た目だけ qz-share__btn--link で文字リンクにする（views.js の buildShareTools）。
   ・読んで覚えるの入口［AIに聞く］は本番の［AIに聞く］と同じ白地に紫の枠（上の E の .qz-share__btn）。押した後の1行（.qz-share__status）。
   ・読んで覚えるのタブの中身（.qz-answer-panel）は本番の答えた後（dpg-answer.css）と同じ並べ方。
   =================================================================== */
:root .qz-app .qz-share.qz-share--r23:not(#_) { margin: 0; padding: 0; border-bottom: 0; gap: var(--g-s1); }
:root .qz-app .qz-share--r23 .qz-share__links:not(#_) {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; row-gap: 0; margin: 0;
  color: var(--text-2); font-size: var(--g-fs-small); line-height: 1.5;
}
:root .qz-app .qz-share--r23 .qz-share__links-label:not(#_) { margin-right: 2px; }
:root .qz-app .qz-share--r23 .qz-share__links-sep:not(#_) { color: var(--text-2); }
:root .qz-app .qz-share--r23 .qz-share__links-item:not(#_) { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
:root .qz-app .qz-share--r23 .qz-share__links .qz-share__btn--link:not(#_):not(#_) {
  flex: 0 1 auto; display: inline-flex; align-items: center; width: auto; min-width: 0; max-width: 100%; min-height: 44px;
  margin: 0; padding: 0 4px; border: 0; border-radius: 6px; background: none; box-shadow: none; filter: none;
  color: var(--accent); font: inherit; font-size: var(--g-fs-small); font-weight: 700; line-height: 1.4; text-align: left;
  text-decoration: underline; text-underline-offset: 3px; white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
:root .qz-app .qz-share--r23 .qz-share__links .qz-share__btn--link:is([data-state="done"], [data-state="fail"]):not(#_):not(#_) { color: var(--accent); border: 0; box-shadow: none; text-decoration: none; }
@media (hover: hover) {
  :root .qz-app .qz-share--r23 .qz-share__links .qz-share__btn--link:hover:not(#_):not(#_) { background: none; color: var(--accent); text-decoration-thickness: 2px; }
}
:root .qz-app .qz-share--r23 .qz-share__links .qz-share__btn--link:focus-visible:not(#_):not(#_) { outline: 3px solid var(--accent); outline-offset: 0; }
:root .qz-app .qz-share--r23 .qz-share__links span.qz-share__prompt:not(#_) { font-size: var(--g-fs-small); padding: 0 4px; }
:root .qz-app .qz-share--r23 :is(.qz-share__note, .qz-share__memo-hint):not(#_) { font-size: var(--g-fs-small); line-height: 1.5; }
:root .qz-app .qz-share--r23 .qz-share__row > .qz-share__btn[data-role="copy-ask-ai"]:not(#_) { flex: 1 1 100%; font-size: var(--g-fs-body); }
:root .qz-app .qz-share--r23 .qz-share__status:not(#_) { margin: 0; color: var(--text); font-size: var(--g-fs-small); font-weight: 600; line-height: 1.6; }
:root .qz-app .qz-share--r23 .qz-share__status:empty:not(#_) { display: none; }
/* 読んで覚えるのタブの中身（本番の答えた後と同じ: 縦に並べる・選んでいない中身は出さない・カードの外の余白なし） */
:root .qz-app[data-screen="practice-study"] .qz-answer-tabs:not(#_) { margin: 0; }
:root .qz-app[data-screen="practice-study"] .qz-answer-panel:not(#_) { display: flex; flex-direction: column; gap: var(--g-s2); min-width: 0; margin: 0; }
:root .qz-app[data-screen="practice-study"] .qz-answer-panel[hidden]:not(#_) { display: none !important; }
:root .qz-app[data-screen="practice-study"] .qz-answer-panel > .qz-card:not(#_) { margin: 0; }