/* dpg-t-home.css — 区間T（2026-10-27 T1 担当H: ホーム・棚・結果・読む）。index.html の最後の CSS の後に読む。
   色・角丸・余白・字の大きさはトークン（dpg-guide.css の --g-*・brand.css の --accent など・dpg-home.css の紫のカードの上の --h-on-accent*）だけを使う。
   動きは足さない（トランジション・アニメーション無し）。押す所は 44px 以上（--g-hit）。
   例外は 5. の T16（読む画面の正解の肢を短く光らせる。1回きり・1.2 秒。動きを減らす設定では色だけ）。 */

/* ===================================================================================
   1. 案3① はじめての5問の結果の「次はどうする？」（本人だけに見える。app.js の decorateFirstRunNext）
      キャラ（今の絵）の吹き出し → 主ボタン（紫・今のまま1つ）→ 白いカード（次の5問へ・声で解いてみる・自作の冊だけ 写真で作る）→ トップへ
   =================================================================================== */
:root[data-quiz-theme] .qz-result-actions > .dpg-tn-next{container-type:inline-size;margin:0 0 var(--g-s1)}
:root[data-quiz-theme] .dpg-tn-say .dpg-fr-face{--fr-face:56px}
:root[data-quiz-theme] .dpg-tn-say .dpg-fr-bubble{font-size:var(--g-fs-title);line-height:1.4}
:root[data-quiz-theme] .qz-result-actions > .dpg-tn-cards{container-type:inline-size;display:grid;gap:var(--g-s1);margin-top:var(--g-s1)}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--g-s2);box-sizing:border-box;width:100%;min-height:72px;margin:0;padding:12px var(--g-s2);border:0;border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow);color:var(--text);font:inherit;text-align:left;cursor:pointer}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--g-radius-btn);background:var(--accent-soft);color:var(--accent)}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card__ico{display:block;width:24px;height:24px}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card__ico svg{display:block;width:100%;height:100%}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card__text{display:grid;gap:2px;min-width:0}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card__title{font-size:var(--g-fs-body);font-weight:800;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card__sub{font-size:var(--g-fs-small);font-weight:600;line-height:1.5;color:var(--text-2);overflow-wrap:anywhere}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card__chev{font-size:var(--g-fs-title);font-weight:700;line-height:1;color:var(--accent)}
:root[data-quiz-theme] .qz-result-actions .dpg-tn-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (hover:hover){:root[data-quiz-theme] .qz-result-actions .dpg-tn-card:hover{background:var(--accent-soft)}}
/* 200% 拡大（入れ物が 260px 未満）: 絵の四角を外して、名前と説明の幅を取る */
@container (max-width:259.98px){
  :root[data-quiz-theme] .qz-result-actions .dpg-tn-card{grid-template-columns:minmax(0,1fr) auto;gap:var(--g-s1);padding:12px}
  :root[data-quiz-theme] .qz-result-actions .dpg-tn-card__icon{display:none}
  :root[data-quiz-theme] .dpg-tn-say .dpg-fr-bubble{font-size:var(--g-fs-body)}
}

/* ===================================================================================
   2. T09 今日の復習のチップの中身の字「（間違い・忘れかけ）」（views.js の DUE_WHAT）
      幅が足りない時は、名前と中身の字の間で折り返す（中身の字の途中では折らない）
   =================================================================================== */
.qz-header > .dpg-hc .dpg-hc__due b{white-space:normal}
.qz-header > .dpg-hc .dpg-hc__due-what{display:inline-block;font-size:var(--g-fs-small);font-weight:600;color:var(--h-on-accent-soft);white-space:nowrap}
/* PC の右の列「今日」の同じ字（ボタンの中の小さな字。途中では折らない） */
.dpg-tcol__sub-what{display:inline-block;font-size:var(--g-fs-small);font-weight:700;white-space:nowrap}

/* ===================================================================================
   3. T10 計画の入口を1つに: 3日目の勉強計画のヒント（dpg-guide.js の plan-hint）を紫のカードの「今日の目安」の所に出す
      （入れ物 home-hint-slot は views.js が今日の目安のチップの後ろへ移した）。ヒントが出ている間は今日の目安のチップを隠す。
      見た目は紫のカードの中の物と同じ（塗らない白い細い枠・白い字。白く塗るのは「続きを解く」1つのまま）。
   =================================================================================== */
.qz-header > .dpg-hc .dpg-hc__foot:has(> .dpg-hint-slot:not(:empty)){flex-wrap:wrap}
.qz-header > .dpg-hc .dpg-hc__foot > .dpg-hint-slot:not(:empty){flex:1 1 100%}
.qz-header > .dpg-hc .dpg-hc__foot:has(> .dpg-hint-slot [data-role="plan-hint"]) > .dpg-today--chip{display:none}
:root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint{grid-template-columns:minmax(0,1fr);gap:var(--g-s1);padding:12px calc(var(--g-hit) + 4px) 12px var(--g-s2);border:1.5px solid var(--h-on-accent-line);border-radius:12px;background:var(--h-on-accent-panel);box-shadow:none;color:var(--h-on-accent)}
:root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint .dpg-plan-hint__face{display:none}
:root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint .dpg-plan-hint__kicker{margin:0;font-size:var(--g-fs-small);font-weight:600;line-height:1.4;color:var(--h-on-accent-soft)}
:root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint .dpg-plan-hint__text{font-size:var(--g-fs-small);font-weight:700;line-height:1.55;color:var(--h-on-accent)}
:root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint .dpg-plan-hint__go{padding:0 var(--g-s2);border:1.5px solid var(--h-on-accent);border-radius:12px;background:none;color:var(--h-on-accent);font-size:var(--g-fs-small)}
:root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint .dpg-plan-hint__close{color:var(--h-on-accent)}
:root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint :is(a,button):focus-visible{outline-color:var(--h-on-accent)}
@media (hover:hover){
  :root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint :is(.dpg-plan-hint__go,.dpg-plan-hint__close):hover{background:var(--h-on-accent-panel-hover)}
}
/* 200% 拡大（ホームの入れ物が 240px 未満）: ヒントの ✕ は流れの頭（右寄せ）に置き、字の列を ✕ の幅だけ削らない。今日の復習の中身の字も折り返してよい */
@container (max-width:240px){
  :root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint{padding:4px var(--g-s1) 12px}
  :root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint .dpg-plan-hint__close{position:static;order:-1;justify-self:end}
  :root[data-quiz-theme] .qz-header > .dpg-hc .dpg-plan-hint .dpg-plan-hint__go{padding:4px var(--g-s1);text-align:center}
  .qz-header > .dpg-hc .dpg-hc__due-what{white-space:normal}
}
/* PC（1024px 以上）: 読んで覚えるの文字リンクは、続きが1冊の時は今日の目安の行の右端に浮かせている（dpg-home.css）。ヒントが出ている間は
   その行がヒントの箱になるので、リンクは札「続きを解く」の下の流れに戻す（箱に重ねない）。続きが無いカードでは、ヒントは道具の下の1行を横いっぱいに使う。 */
@media (min-width:1024px){
  :root[data-quiz-theme] .qz-app .qz-header > .dpg-hc:not(.dpg-hc--tabs):has(> .dpg-hc__foot [data-role="plan-hint"]) .dpg-hc__slides--practice:not(.dpg-hc__slides--multi) > .dpg-hc__practice{position:static;margin:0}
  :root[data-quiz-theme] .qz-app .qz-header > .dpg-hc:not(.dpg-hc--resume) > .dpg-hc__foot:has(> .dpg-hint-slot [data-role="plan-hint"]){grid-column:1/-1;padding-right:0}
}
/* PC（1280px 以上）で右の列「今日」があるとき: 計画がまだ無い日の右の列の［勉強計画を開く］は出さない（入口は紫のカードの「今日の目安 計画を立てる」か、
   ヒントの［計画を立てる］の1つ。右の列には今日の記録の1行だけ残す）。計画がある日（目安の数と進み）の右の列は今のまま。 */
@media (min-width:1280px){
  .qz-page.dpg-page--today > .dpg-tcol .dpg-tcol__goal:not(:has(.dpg-tcol__goal-head)) > [data-role="home-col-plan"]{display:none}
}

/* ===================================================================================
   4. T21 紫のカードの ⚙ と ？ に字（設定・できること）。PC（1024px 以上）で、紫のカードが左の列の幅いっぱいの時（続きがある・今日の残りがある）だけ見せる。
      スマホと、紫のカードの横に「問題集を作る」の帯が並ぶ狭い時は今の絵だけ（字を入れると「続きから」「どれから解く？」の字が潰れる）。
   =================================================================================== */
.qz-header .dpg-hc__tool-text{display:none}
@media (min-width:1024px){
  .qz-header:not(:has(> .dpg-home-create)) > .dpg-hc:is(.dpg-hc--resume,.dpg-hc--go){--h-tools-w:264px}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:not(:has(> .dpg-home-create)) > .dpg-hc:is(.dpg-hc--resume,.dpg-hc--go) .dpg-hc__tool:has(> .dpg-hc__tool-text){display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 12px 0 10px;border-radius:12px}
  .qz-header:not(:has(> .dpg-home-create)) > .dpg-hc:is(.dpg-hc--resume,.dpg-hc--go) .dpg-hc__tool > .dpg-hc__tool-text{display:inline;font-size:var(--g-fs-small);font-weight:700;line-height:1;white-space:nowrap}
}

/* ===================================================================================
   5. T16 読む画面（読んで覚える）で肢を押したら、正解の肢を短く光らせる（2026-10-27 T2 担当G2。views.js の flashPracticeAnswer が
      一覧に dpg-t-flash を 1.2 秒付ける）。答えにはならない。音は出さない。色は正解の肢の今の色（--success）だけ。
      動きを減らす設定では、光の広がり（box-shadow の動き）を止め、枠の色だけを 1.2 秒出す。
   =================================================================================== */
.qz-practice-choices.dpg-t-flash > .qz-practice-choice--correct{outline:3px solid var(--success);outline-offset:2px;animation:dpg-t-flash 1.2s ease-out 1}
@keyframes dpg-t-flash{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 45%,transparent)}
  35%{box-shadow:0 0 0 var(--g-s1) color-mix(in srgb,var(--success) 25%,transparent)}
  100%{box-shadow:0 0 0 var(--g-s1) transparent}
}
@media (prefers-reduced-motion:reduce){
  .qz-practice-choices.dpg-t-flash > .qz-practice-choice--correct{animation:none}
}