/* dpg-t-settings.css — 区間T 担当S「設定とできること」（2026-10-27 Cowork）。
   ・T02/T09 できることの作り直し（.dpg-abil--t。本人だけに見える形＝dpg-guide.js の previewT。シートの外枠は dpg-firstrun.css のまま）
   ・T03 設定の一覧の「声と曲」の見出し（.dpg-t-set__heading。本人だけに見える形）と、できることから来た行の印（.dpg-t-spot）
   ・T22 設定のスイッチの行全体を押せる（.dpg-t-row。直しなので全員）
   ・T23 設定の中で浮いた［続きを解く］と下のナビが行に重ならない（直しなので全員）
   色・角丸・余白はトークン（design/dpg/00-tokens.css・dpg-pages-a.css の :root）だけ。動き（transition・animation）は使わない。 */

/* ---------- T02 できること（新しい形） ---------- */
:root[data-quiz-theme] .dpg-abil--t .dpg-abt { gap: var(--g-s2); }
.dpg-abt__sec { --abt-tint: var(--surface-2); --abt-ink: var(--brand-coral); padding: var(--g-s1); border-radius: var(--g-radius); background: var(--abt-tint); }
.dpg-abt__sec--learn { --abt-tint: var(--accent-soft); --abt-ink: var(--accent); }
.dpg-abt__sec--make { --abt-tint: var(--success-soft); --abt-ink: var(--brand-green); }
.dpg-abt__sec--voice { --abt-tint: var(--accent-soft); --abt-ink: var(--brand-blue); }
.dpg-abt__sec--keep { --abt-tint: var(--dpg-gold-soft); --abt-ink: var(--dpg-gold-ink); }
@supports (color: color-mix(in srgb, red 10%, white)) {
  .dpg-abt__sec--voice { --abt-tint: color-mix(in srgb, var(--brand-blue) 10%, var(--surface)); }
}
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__sec-title {
  display: flex; align-items: center; gap: var(--g-s1); margin: 0; padding: 4px var(--g-s1) var(--g-s1);
  font-size: var(--g-fs-body); line-height: 1.4; font-weight: 900; color: var(--text);
}
.dpg-abt__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--abt-ink); }
.dpg-abt__icon svg { width: 22px; height: 22px; }
.dpg-abt__list { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: calc(var(--g-radius) - 4px); background: var(--surface); box-shadow: var(--g-card-shadow); }
.dpg-abt__item + .dpg-abt__item { border-top: 1px solid var(--separator); }
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__row {
  box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0;
  padding: 12px 14px; border: 0; border-radius: 0; background: none; color: var(--text);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__row--where { cursor: default; }
@media (hover: hover) {
  :root[data-quiz-theme] .dpg-abil--t :is(a, button).dpg-abt__row:hover { background: var(--accent-soft); }
}
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.dpg-abt__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dpg-abt__name { display: block; font-size: var(--g-fs-body); line-height: 1.45; font-weight: 800; color: var(--text); }
.dpg-abt__desc { display: block; font-size: var(--g-fs-small); line-height: 1.55; color: var(--text-2); }
.dpg-abt :is(.dpg-abt__name, .dpg-abt__desc) { overflow-wrap: anywhere; word-break: auto-phrase; text-wrap: pretty; }
.dpg-abt__go { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--g-fs-small); font-weight: 800; line-height: 1.3; color: var(--accent); white-space: nowrap; }
.dpg-abt__chev { font-size: 1.2em; line-height: 1; }
.dpg-abt__where { flex: none; padding: 2px var(--g-s1); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__msg { margin: 0; padding: 0 14px 12px; font-size: var(--g-fs-small); line-height: 1.5; font-weight: 700; color: var(--text); }
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__msg:empty { display: none; }
/* 200% 拡大など、シートの中身が狭い時（dpg-firstrun.css と同じ入れ物 dpg-abil-sheet）は、右の［ここを開く］・場所の札を説明の下へ回す */
@container dpg-abil-sheet (max-width: 299.98px) {
  :root[data-quiz-theme] .dpg-abil--t .dpg-abt__row { flex-wrap: wrap; gap: 4px var(--g-s1); padding: 10px 12px; }
  .dpg-abt__text { flex-basis: 100%; }
  .dpg-abt__go, .dpg-abt__where { margin-left: auto; white-space: normal; }
  .dpg-abt__sec { padding: 4px; }
}

/* 節へ飛ぶチップ（2026-10-27 T1 F2。評価役A の N4・評価役B の N1）: シートの頭に1列（解く・覚える・作る・声と曲・そのほか）。
   地の色は節と同じ淡い色。押す所は高さ 44px 以上。390px では1列に収まり、それより狭い（200% 拡大など）時は折り返す。動きは付けない。 */
.dpg-abt__jump-list { display: flex; flex-wrap: wrap; gap: var(--g-s1); margin: 0; padding: 0; list-style: none; }
.dpg-abt__jump-list > li { display: flex; flex: 1 1 auto; }
.dpg-abt__chip { --abt-tint: var(--surface-2); }
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__chip {
  box-sizing: border-box; display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0;
  padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--abt-tint); color: var(--text);
  font: inherit; font-size: var(--g-fs-small); font-weight: 800; line-height: 1.3; white-space: nowrap; cursor: pointer;
}
.dpg-abt__chip--learn { --abt-tint: var(--accent-soft); }
.dpg-abt__chip--make { --abt-tint: var(--success-soft); }
.dpg-abt__chip--voice { --abt-tint: var(--accent-soft); }
.dpg-abt__chip--keep { --abt-tint: var(--dpg-gold-soft); }
@supports (color: color-mix(in srgb, red 10%, white)) {
  .dpg-abt__chip--voice { --abt-tint: color-mix(in srgb, var(--brand-blue) 10%, var(--surface)); }
}
@media (hover: hover) {
  :root[data-quiz-theme] .dpg-abil--t .dpg-abt__chip:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
}
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 飛んだ先の節の頭が、中身を送る所の上の端のぼかし（dpg-firstrun.css の .dpg-abil__body::before）に隠れないように */
.dpg-abt__sec { scroll-margin-top: var(--g-s2); }
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__sec-title:focus:not(:focus-visible) { outline: none; }
:root[data-quiz-theme] .dpg-abil--t .dpg-abt__sec-title:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- T03 設定の一覧の「声と曲」（本人だけに見える形） ---------- */
.dpg-set .dpg-t-set__heading {
  display: flex; align-items: center; gap: var(--g-s1); margin: 0; padding: 10px var(--g-s2);
  background: var(--accent-soft); color: var(--text); font-size: var(--g-fs-small); font-weight: 800; line-height: 1.4;
}
@supports (color: color-mix(in srgb, red 10%, white)) {
  .dpg-set .dpg-t-set__heading { background: color-mix(in srgb, var(--brand-blue) 10%, var(--surface)); }
}
.dpg-set .dpg-t-set__heading .qz-settings__heading-icon { display: inline-grid; place-items: center; color: var(--brand-blue); }
.dpg-set .dpg-t-set__heading svg { width: 20px; height: 20px; }
/* できること・「声と曲」の勉強中の曲から来た時に寄せた行（描き直すまで。動きなし） */
.qz-settings__row.dpg-t-spot { border-radius: var(--r-md); background: var(--accent-soft); box-shadow: 0 0 0 var(--g-s1) var(--accent-soft); }

/* ---------- T22 設定のスイッチの行全体を押せる ---------- */
/* 行（名前・説明の字を含む）を押すとスイッチが切り替わる（views.js の buildToggleRow）。押せる広さは行の高さ（44px 以上）。
   スイッチの見た目（54×34px）は変えない。スイッチ自体の当たりは quiz.css の ::before（44×44px）のまま。 */
.qz-settings__row.dpg-t-row { min-height: 44px; }
.qz-settings__row.dpg-t-row[data-tap-row="on"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-settings__row.dpg-t-row[data-tap-row="on"] :is(.qz-settings__label, .qz-settings__note) { cursor: pointer; }
.qz-settings__row.dpg-t-row :is(details, summary) { cursor: auto; }

/* ---------- T23 設定の中で浮いたボタンが行に重ならない ---------- */
/* 浮いた［続きを解く］（nav-compact.js）は、ホームの「続きから」のカードが画面の外へ出た時の代わり。設定を開いている間はカードごと隠れる
   （dpg-settings.css）ので、代わりのボタンも出さない（音の2段目で「勉強中の曲」の行に重なっていた。評価役B の B13）。 */
html:has(#app [data-role="settings-panel"]) .dpg-nav-fab { display: none !important; }
/* スマホの幅（下のナビが浮いている間）: 設定の最後の行がナビの上まで出るよう下に余白を足し、フォーカスや「寄せる」で動いた行がナビの裏に入らないようにする。 */
@media (max-width: 1023.98px) {
  html:has(#app [data-role="settings-panel"]) { scroll-padding-bottom: calc(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px) + var(--g-s2) + env(safe-area-inset-bottom, 0px)); }
  :root[data-quiz-theme] #app .qz-settings.dpg-set { padding-bottom: calc(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px) + var(--g-s2) + env(safe-area-inset-bottom, 0px)); }
}