/* dpg-guide.css — 関所B の試作（2026-10-15 Cowork）。T3 案1「今の色のまま強弱を作る」の決まりと、
   ホーム・答えた後・結果・はじめての5問の見た目。index.html の CSS の最後に読む（前を上書きする）。
   組み込むときは design/dpg/80-guide.css として足し、theme-dpg.css に入れる（納品/組み込みメモ.md）。 */
:root{
  /* 文字は4段だけ（数字の見出し・画面の見出し・本文とボタン・補足）。14px より小さくしない */
  --g-fs-hero:40px; --g-fs-title:22px; --g-fs-body:17px; --g-fs-small:14px;
  /* 余白は 8 の倍数 */
  --g-s1:8px; --g-s2:16px; --g-s3:24px; --g-s4:32px; --g-s5:40px;
  /* カードは線なし・やわらかい影 */
  --g-card-shadow:0 1px 2px rgb(44 33 30 / 6%),0 6px 20px rgb(113 66 13 / 7%);
  --g-card-shadow-lift:0 2px 4px rgb(44 33 30 / 8%),0 12px 28px rgb(113 66 13 / 10%);
  --g-radius:16px; --g-radius-btn:14px;
  /* 押す物の高さ（指で押せる大きさ） */
  --g-hit:48px; --g-btn-h:52px;
  /* 2番手のボタン＝紫の線、3番手＝文字のリンク */
  --g-outline:var(--accent); --g-outline-bg:var(--surface);
  /* 紫の塗り（design/dpg/06-brand.css の .qz-btn--primary と同じ値。別の要素を主ボタンの見た目にするときに使う） */
  --g-primary-fill:linear-gradient(165deg,#9742f5 0%,#6424ed 48%,#441cf0 100%);
  --g-primary-border:#6125d2;
  --g-primary-shadow:0 3px 0 #4215a8,0 6px 12px #6d33d322;
}

/* ===== 見た目の決まりの土台（2026-10-15 結果の画面の担当が足した。T3 案1「今の色のまま、強弱の決まりを作る」） =====
   どの画面にも効く決まりだけを置く。画面ごとの見た目（dpg-home.css・dpg-answer.css・dpg-result.css など）はこの後に読むので、
   そこで上書きできる。!important は使わない。上書きする相手の多くは theme-dpg.css の :root[data-quiz-theme="paper"] .x（0,3,0）。 */

/* ---- 1) 押す物の強弱: 紫の塗りは1画面に1つ（主）。2番手は白地に紫の枠、3番手以下は文字のリンク ----
   1-a) 画面が主を data-guide="primary" で示しているときは、ほかの紫の塗りのボタンを2番手（白地に紫の枠）にする。
        購入の案内の「おすすめ」の枠と、重なって開く窓（dialog）の中は別の画面として扱い、触らない。
   1-b) 主を示していない画面の決まり: 棚の冊のカードが並ぶときは、塗りの「はじめる」は1冊目だけ。
   1-c) 答えたあとの画面で「次へ」（読んで覚えるでは「理解した」）が塗りのときは、カードの中のほかの塗り（自分の解説を追加 など）を2番手に。
   1-d) .qz-btn--primary 以外の紫の塗りのボタン（音声で質問・音声解説の再生・みんなの解説の中の塗り）は2番手に。
   枠は 1px の線＋内側の影 1px で 2px に見せる（線の太さを変えないので、ボタンの大きさが変わらない）。 */
#app:has([data-guide="primary"]) :is(.qz-btn--primary, .btn--primary):not([data-guide="primary"]):not(.qz-purchase__plan):not(:is(dialog, [role="dialog"]) *),
#app:not(:has([data-guide="primary"])) .qz-set-card ~ .qz-set-card .qz-btn--primary,
#app:not(:has([data-guide="primary"])):has(.qz-btn--primary:is([data-role="next"], [data-role="practice-understood"])) .qz-card .qz-btn--primary:not([data-role="next"], [data-role="practice-understood"]),
:root[data-quiz-theme="paper"] :is(.dpg-voice-chat__trigger, .qz-explain-audio .btn--primary, .qz-community .btn--primary, .qz-set-preview .btn--primary) {
  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;
}
#app:has([data-guide="primary"]) :is(.qz-btn--primary, .btn--primary):not([data-guide="primary"]):not(.qz-purchase__plan):not(:is(dialog, [role="dialog"]) *):hover:not(:disabled),
#app:not(:has([data-guide="primary"])) .qz-set-card ~ .qz-set-card .qz-btn--primary:hover:not(:disabled),
#app:not(:has([data-guide="primary"])):has(.qz-btn--primary:is([data-role="next"], [data-role="practice-understood"])) .qz-card .qz-btn--primary:not([data-role="next"], [data-role="practice-understood"]):hover:not(:disabled),
:root[data-quiz-theme="paper"] :is(.dpg-voice-chat__trigger, .qz-explain-audio .btn--primary, .qz-community .btn--primary, .qz-set-preview .btn--primary):hover:not(:disabled) {
  border-color: var(--g-outline); background: var(--accent-soft); color: var(--g-outline); filter: none;
}
/* 紫の塗りのチップ・選択中のタブ（本番で解く／読んで覚える）も、選択中は白地に紫の枠と紫の文字（紫＝押す物と選択中） */
:root[data-quiz-theme="paper"] .dpg-chip[aria-pressed="true"],
:root[data-quiz-theme="paper"] .qz-app[data-screen] .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab[aria-selected="true"] {
  border-color: var(--g-outline); background: var(--g-outline-bg); color: var(--g-outline); box-shadow: inset 0 0 0 1px var(--g-outline);
}
:root[data-quiz-theme="paper"] .qz-app[data-screen] .qz-home-tabs:not(.qz-home-tabs--card) .qz-home-tab[aria-selected="true"] :is(.qz-home-tab__title, .qz-home-tab__desc) { color: var(--g-outline); }
/* 押す物の高さは 44px 以上・角丸はボタンの角丸 */
:root[data-quiz-theme="paper"] :is(.qz-btn, .dpg-chip, .qz-pill) { min-height: 44px; }
:root[data-quiz-theme="paper"] .qz-btn { border-radius: var(--g-radius-btn); }

/* ---- 2) カードは線をやめて、白い面＋やわらかい影（選択肢 .qz-choice は細い線のまま） ----
   線の色を透明にするだけで太さは残す（中身の位置が 1px も動かない）。
   ホームの「ほかのこと…」の入れ物（.qz-card.qz-library）は面も影も無い入れ物なので、影を付けない
   （:where で詳細度を上げない。上げると、影を消している設定の外枠 .qz-settings--sections などに勝ってしまう）。 */
:root[data-quiz-theme="paper"] :is(.qz-card:not(:where(.qz-library)), .qz-settings__card, .dpg-row) {
  border-color: transparent; box-shadow: var(--g-card-shadow);
}

/* ---- 3) 文字は4段（数字 40・見出し 22・本文とボタン 17・補足 14）。14px より小さい文字を 14px に ---- */
:root[data-quiz-theme="paper"] .qz-page__title { font-size: var(--g-fs-title); font-weight: 800; letter-spacing: 0; }
:root[data-quiz-theme="paper"] :is(
  .dpg-row__prog, .dpg-row__ribbon, .dpg-book__ribbon, .dpg-home-create__action, .dpg-home-create__sub, .dpg-home-create__quota,
  .qz-setup__label, .qz-setup__note, .qz-settings__auto, .qz-settings__note, .qz-round-selector__label, .qz-round-selector__option,
  .qz-sound-btn__name, .qz-exit-btn, .qz-progress-label, .qz-question__domain, .qz-type-badge, .qz-question__source,
  .qz-notes__empty, .qz-choice__status, .xai-line__text, .qz-explain__time, .qz-share__hint, .qz-share__prompt,
  .qz-wrong-list__count, .qz-wrong-list__no, .qz-miss-badge, .qz-autolog, .qz-foot__disclaimer,
  .qz-practice-choice__label, .qz-practice-study__time,
  .xai__by, .pask__foot
) { font-size: var(--g-fs-small); }
/* ボタンの文字は本文と同じ 17px（横いっぱいのボタン）。横に2つ並ぶボタン・小さな札（ピル）は、折り返さないよう今の大きさのまま */
:root[data-quiz-theme="paper"] .qz-btn.qz-btn--block:not(.qz-btn-row *) { font-size: var(--g-fs-body); }
:root[data-quiz-theme="paper"] :is(.dpg-row__ribbon, .dpg-book__ribbon) * { font-size: inherit; }

/* ---- 4) 虹の線はスマホの見出しの下の1本だけ（mode-switch.css の .phead--quiz::after）。ほかの虹の飾りは消すか目立たなく ----
   満点の演出（.qz-fanfare--rainbow）と、設定で選ぶ画面の枠の色（虹）はそのまま。 */
:root[data-quiz-theme="paper"] .dpg-shelf-group__title::before { background: var(--separator); }
:root[data-quiz-theme="paper"] .dpg-home-welcome__title::after { display: none; }
:root[data-quiz-theme="paper"] .dpg-today__bar i { background: var(--accent); }
:root[data-quiz-theme="paper"] .qz-header { border-image: none; }

/* ---- 5) キーの札（desktop-keys.js が付ける data-dpgk の札と、選択肢の数字の札）は 599px 以下では出さない ----
   キーボードのある端末だけに出す決まり（設定の「キーの札を表示」の説明どおり）。キー操作そのものは効いたまま。
   キーの案内（⌨ 1〜4で選ぶ…）も同じ幅では出さない（? で開く一覧は使える）。 */
@media (max-width: 599.98px) {
  html.dpg-keys [data-dpgk]::before,
  html.dpg-keys .qz-choices > .qz-choice::after { content: none; }
  .dpgk-hint { display: none; }
}

/* ---- 6) 赤と緑は正誤だけ（得点の数字・オフ・進み具合・資格の色分けにも使わない） ----
   設定の「自動」の札は緑をやめて、淡い面に墨の薄い文字。 */
/* 周1: 出題の見出しの「オフ」（音・独り言の赤い斜線と赤い文字）は、本人が関所Aの Q7 で「別の担当の直し方のまま」を選んだので赤のまま残す
   （赤は正誤だけ、の決まりの例外。やめるかは本人が決める）。 */
:root[data-quiz-theme="paper"] .qz-settings__auto { background: var(--surface-2); color: var(--text-2); }

/* 2026-10-15 周1: 読み上げの着地点として focus() される見出し（tabindex="-1"）には枠を出さない。
   押せる物ではないので、枠があると「押せる箱」に見える（棚の名前・勉強中の棚・結果の見出しなど）。 */
:root[data-quiz-theme] :is(h1,h2,h3,p)[tabindex="-1"]:is(:focus,:focus-visible){outline:none}