/* dpg-p-photobar.css — 2026-10-29 T15 担当K3「写真から作るの整え」（本人だけに見える p-photo-bar。p-photo-make が出ている時だけ）。
   index.html の最後の CSS の後に読む。.qz-editor[data-pp-bar="on"] の中だけに効く（札が無い時は印が無いので何も変わらない）。
   本人の選択（関所7 Q11）: 案3「下の帯1本にまとめる」＋案2「小さな写真の列」。色・角丸はトークン（00-tokens.css の --accent・--surface・--separator・--r-* など）だけ。新しい色は作らない。
   役ごとに形を分ける: 主＝紫の塗り（下の帯の［このまま保存］）／二番目＝白地に紫の枠（［確認（N件）］）／取り消し＝字だけ（［中止］）／足す＝丸（［撮る］［選ぶ］）。
   動きは足さない（トランジション・アニメーション無し。読み取り中の印も止まった絵）。押す所は 44px 以上。字は 14px 以上。 */

/* 1. 手順の列: 番号の丸い札をやめ、字と細い線のしるし（›）だけに。今の段は紫の字と下の線 */
.qz-editor[data-pp-bar="on"] .qz-editor__steps{gap:0 2px}
.qz-editor[data-pp-bar="on"] .qz-editor__step{gap:0;padding:6px 10px;border:0;border-radius:0;background:none;box-shadow:inset 0 -2px 0 transparent;font-size:14px;font-weight:600;color:var(--text-2)}
.qz-editor[data-pp-bar="on"] .qz-editor__step-no{display:none}
.qz-editor[data-pp-bar="on"] .qz-editor__step[data-current="true"]{background:none;color:var(--accent);font-weight:800;box-shadow:inset 0 -3px 0 var(--accent)}
.qz-editor[data-pp-bar="on"] .qz-editor__step-sep{display:inline-block;width:7px;height:7px;font-size:0;border-top:1.5px solid var(--text-3);border-right:1.5px solid var(--text-3);transform:rotate(45deg);margin:0 4px 0 0}
.qz-editor[data-pp-bar="on"] .qz-editor__step-end{font-size:14px}
/* 文字の大きさの切り替え・ピル・確認の一覧の小さな字（12〜13px → 14px 以上。「大きめ」の時はその大きさのまま） */
.qz-editor[data-pp-bar="on"] .qz-editor-size{font-size:14px}
.qz-editor[data-pp-bar="on"] :is(.qz-editor__pill,.qz-editor__summary,.qz-editor__list-index,.qz-editor__list-kind,.qz-editor__list-text,.qz-editor__list-reason,.qz-editor__list-status,.qz-editor__list-actions button,.qz-editor__item-chip){font-size:max(14px,var(--edit-small,14px))}

/* 2. 進みの面（1枚の面。右上に小さな［中止］） */
.qz-editor[data-pp-bar="on"] .dpg-ppb-headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:4px 8px;min-width:0}
.qz-editor[data-pp-bar="on"] .dpg-ppb-headrow .qz-editor__run-stage{flex:1 1 auto;min-width:0}
.qz-editor[data-pp-bar="on"] .dpg-ppb-cancel{flex:none;min-width:44px;min-height:44px;margin:-10px -8px -6px 0;padding:0 8px;border:0;background:none;color:var(--text-2);font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qz-editor[data-pp-bar="on"] .dpg-ppb-cancel:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media (hover:hover){.qz-editor[data-pp-bar="on"] .dpg-ppb-cancel:hover{color:var(--text)}}
/* 1行の注（保存しても読み続けます・今日あと N 枚） */
.qz-editor[data-pp-bar="on"] .dpg-ppb-note{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:16px;min-width:0}
.qz-editor[data-pp-bar="on"] .dpg-ppb-note > p{margin:0;font-size:14px;line-height:1.7}
.qz-editor[data-pp-bar="on"] .dpg-ppb-note > [data-role="run-quota"]{font-weight:700;color:var(--text)}

/* 3. 小さな写真の列（縦長のタイルをやめる）。最後に丸い［撮る］［選ぶ］ */
.qz-editor[data-pp-bar="on"] .dpg-ppb-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px 8px;min-width:0;margin:0;padding:0}
.qz-editor[data-pp-bar="on"] .dpg-ppb-strip > .dpg-ppb-tiles,
.qz-editor[data-pp-bar="on"] .dpg-ppb-strip > .dpg-ppb-add{display:contents}
.qz-editor[data-pp-bar="on"] .dpg-ppb-strip > .dpg-ppb-add[hidden]{display:none}
.qz-editor[data-pp-bar="on"] .dpg-ppb-tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:0;border:0;border-radius:0;background:none;font-size:14px}
.qz-editor[data-pp-bar="on"] .dpg-ppb-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;border:1px solid var(--separator);border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden}
.qz-editor[data-pp-bar="on"] .dpg-ppb-thumb > .qz-editor__tile-thumb{width:100%;height:100%;border-radius:0}
.qz-editor[data-pp-bar="on"] .dpg-ppb-tile[data-state="failed"] .dpg-ppb-thumb,
.qz-editor[data-pp-bar="on"] .dpg-ppb-tile[data-state="stopped"] .dpg-ppb-thumb{border:2px solid var(--danger)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-tile[data-state="reading"] .dpg-ppb-thumb{border-color:var(--accent)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-tile .qz-editor__tile-name{font-size:14px;font-weight:600;line-height:1.4;color:var(--text)}
/* 状態の札（写真の右下）。字は N問・待ち だけ。読み取り中・読めなかった・止めた は線の絵（字は読み上げ用に残す） */
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge{position:absolute;right:4px;bottom:4px;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:26px;padding:1px 7px;border-radius:var(--r-pill);background:var(--surface);color:var(--success);font-size:14px;font-weight:800;line-height:1.3;box-shadow:0 0 0 1px var(--separator)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge[data-state="reading"]{color:var(--accent)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge[data-state="wait"]{color:var(--text-2)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge[data-state="failed"],
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge[data-state="stopped"]{color:var(--danger)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge[data-state="cancelled"]{color:var(--text-2)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge .dpg-ppb-ico{width:20px;height:20px}
.qz-editor[data-pp-bar="on"] .dpg-ppb-badge:has(.dpg-ppb-ico){min-width:30px;padding:3px}
.qz-editor[data-pp-bar="on"] .dpg-ppb-review{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--text)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-review .dpg-ppb-ico{width:16px;height:16px;color:var(--warn,var(--text))}
/* 読み上げだけに残す字 */
.qz-editor[data-pp-bar="on"] .dpg-ppb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 線の絵（24 の枠・太さ 2・端は丸い。今の［撮る］［選ぶ］の絵と同じ決まり） */
.qz-editor[data-pp-bar="on"] .dpg-ppb-ico{display:inline-grid;place-items:center;flex:none;width:18px;height:18px}
.qz-editor[data-pp-bar="on"] .dpg-ppb-ico svg{display:block;width:100%;height:100%}

/* 丸いボタン（足す）: 白地に紫の線の丸と、下に字。セルの幅いっぱいが押せる所 */
.qz-editor[data-pp-bar="on"] .dpg-ppb-round{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:44px;min-height:44px;margin:0;padding:4px 0 0;border:0;border-radius:var(--r-sm);background:none;color:var(--accent);font:inherit;font-size:14px;font-weight:700;line-height:1.3;text-align:center;cursor:pointer}
.qz-editor[data-pp-bar="on"] .dpg-ppb-round__disc{display:grid;place-items:center;width:56px;height:56px;border:1.5px solid var(--accent);border-radius:50%;background:var(--surface)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-round__disc svg{display:block;width:24px;height:24px}
.qz-editor[data-pp-bar="on"] .dpg-ppb-round__label{display:grid;justify-items:center;min-width:0;color:var(--text);font-weight:700;overflow-wrap:anywhere}
.qz-editor[data-pp-bar="on"] .dpg-ppb-round .dpg-pp__limit{font-size:14px;font-weight:600;line-height:1.3;color:var(--text-2)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-round:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qz-editor[data-pp-bar="on"] .dpg-ppb-round:disabled{opacity:.45;cursor:default}
@media (hover:hover){.qz-editor[data-pp-bar="on"] .dpg-ppb-round:not(:disabled):hover .dpg-ppb-round__disc{background:var(--accent-soft)}}

/* 4. 読めなかった1枚の行（印は写真の右下・ここにコツの1行と［もう一度］）。箱にしない */
.qz-editor[data-pp-bar="on"] .dpg-ppb-fails{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;min-width:0;padding:4px 0 4px 10px;border-left:3px solid var(--danger)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail[data-state="done"],
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail[data-state="cancelled"]{border-left-color:var(--separator)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail__name{font-size:14px;font-weight:800;color:var(--text)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail__text{display:grid;gap:2px;min-width:0}
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail .qz-editor__tile-note{font-size:14px;line-height:1.5;color:var(--text-2)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail .dpg-pp-tiletip{padding:0;background:none;font-size:14px;font-weight:700;line-height:1.5;color:var(--text)}
/* ［もう一度］: 淡い紫の地（字のボタン。主・二番目と形を変える） */
.qz-editor[data-pp-bar="on"] .dpg-ppb-retry{min-width:44px;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);font:inherit;font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer}
.qz-editor[data-pp-bar="on"] .dpg-ppb-retry:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* 5. 足し方の1行と撮り方のコツ（外の枠の箱をやめる。入力の段も同じ） */
.qz-editor[data-pp-bar="on"] .dpg-pp{padding:0;border:0;border-radius:0;background:none}
.qz-editor[data-pp-bar="on"] .dpg-pp__limit{font-size:14px}
.qz-editor[data-pp-bar="on"] .dpg-pp__btn.qz-btn--outline{border:1.5px solid var(--accent);color:var(--accent)}
.qz-editor[data-pp-bar="on"] .dpg-pp-tiletip{font-size:14px}

/* 6. 読み終わった問題: 1つずつの箱をやめて線で区切る。印は線の絵＋字（絵文字なし） */
.qz-editor[data-pp-bar="on"] .qz-editor__run-stream{gap:0}
.qz-editor[data-pp-bar="on"] .qz-editor__run-item{min-height:40px;padding:6px 0;border-bottom:1px solid var(--separator);font-size:14px}
.qz-editor[data-pp-bar="on"] .qz-editor__run-item:last-child{border-bottom:0}
.qz-editor[data-pp-bar="on"] .dpg-ppb-chip{gap:4px;min-height:26px;padding:2px 8px 2px 6px;font-size:14px;font-weight:700}
.qz-editor[data-pp-bar="on"] .dpg-ppb-chip[data-chip="as-is"],
.qz-editor[data-pp-bar="on"] .dpg-ppb-chip[data-chip="checked"]{color:var(--success)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-chip[data-chip="ai"],
.qz-editor[data-pp-bar="on"] .dpg-ppb-chip[data-chip="ai-answer"]{color:var(--accent)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-chip .dpg-ppb-ico{width:16px;height:16px}
/* 確認の画面の［このまま保存］は下の帯の［保存する］と同じ働き（どちらも保存）。下の帯の1つにまとめる */
.qz-editor[data-pp-bar="on"] [data-role="save-now"]{display:none}

/* 7. 下の帯1本（［確認（N件）］＝二番目・［このまま保存］／［保存する］＝主）。PC は今の帯と同じ場所、スマホは画面の下に貼り付く */
.qz-editor[data-pp-bar="on"] .qz-editor__bar{padding-bottom:6px}
.qz-editor[data-pp-bar="on"] .dpg-ppb-dock{flex:0 0 auto;display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:6px 28px calc(12px + env(safe-area-inset-bottom));background:var(--bg)}
.qz-editor[data-pp-bar="on"] .dpg-ppb-dock > .qz-btn{flex:1 1 0;min-width:0;min-height:52px;margin:0;font-size:17px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.qz-editor[data-pp-bar="on"] .dpg-ppb-dock > .qz-btn[hidden]{display:none}
.qz-editor[data-pp-bar="on"] .dpg-ppb-dock > .qz-editor__open-list{border:1.5px solid var(--accent);background:var(--surface);color:var(--accent);box-shadow:none}
@media (min-width:700.02px){.qz-editor[data-pp-bar="on"] .dpg-ppb-dock{justify-content:flex-end}.qz-editor[data-pp-bar="on"] .dpg-ppb-dock > .qz-btn{flex:0 1 240px}}
@media (max-width:700px){.qz-editor[data-pp-bar="on"] .dpg-ppb-dock{padding-inline:18px}}
/* 貼り付けるのは処理・確認の段だけ（選ぶ前の入力の段・1問ずつ入力は今と同じく中身の最後。直し 小2）。
   貼り付けた帯の分だけ、焦点が来た物を送る時の下の余白を取る（Tab・スイッチ操作で焦点が帯の下に隠れない。直し 中1・WCAG 2.4.11） */
@media (max-width:650px){
  .qz-editor[data-pp-bar="on"]:is([data-pp-view="process"],[data-pp-view="list"]){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .qz-editor[data-pp-bar="on"]:is([data-pp-view="process"],[data-pp-view="list"]) .dpg-ppb-dock{position:sticky;bottom:0;z-index:2;padding-top:10px;border-top:1px solid var(--separator);box-shadow:0 -4px 12px var(--qz-editor-shade,rgba(0,0,0,.04))}
}
/* 390px ほどの幅: 読めなかった1枚の行は［もう一度］を文の下に（文の幅を取り「撮っ／てね」と言葉の途中で折れないように。直し 小7） */
@media (max-width:479.98px){
  .qz-editor[data-pp-bar="on"] .dpg-ppb-fail{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-fail > .dpg-ppb-retry{grid-column:2;justify-self:start}
}
.qz-editor[data-pp-bar="on"] .dpg-ppb-fail .dpg-pp-tiletip{word-break:keep-all;overflow-wrap:anywhere}

.qz-editor[data-pp-bar="on"] .dpg-ppb-round .dpg-pp__limit{word-break:keep-all;overflow-wrap:anywhere}
.qz-editor[data-pp-bar="on"] .qz-editor__step-end{padding-left:6px}
/* 200% 拡大（幅 187px 相当）: 列を2つに。進みの面はキャラを上に（言葉の幅を取る）。下の帯は貼り付けたまま、ボタンを横に2つ・小さく（［このまま保存］を遠くしない） */
@media (max-width:259.98px){
  .qz-editor[data-pp-bar="on"] .dpg-ppb-head{flex-wrap:wrap}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-head > .qz-editor__run-face{width:48px;height:48px}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-head > .qz-editor__run-main{flex:1 1 100%;min-width:0}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-strip{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-round__disc{width:48px;height:48px}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-fail{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-fail > .dpg-ppb-retry{justify-self:start}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-dock{gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .qz-editor[data-pp-bar="on"]:is([data-pp-view="process"],[data-pp-view="list"]) .dpg-ppb-dock{padding-top:6px}
  .qz-editor[data-pp-bar="on"] .dpg-ppb-dock > .qz-btn{min-height:44px;padding:4px 6px;font-size:14px;line-height:1.3}
}
/* カメラの無い端末（PC のマウス）では［撮る］を出さない（P1 の決まりと同じ。丸いボタンの display より強く） */
@media (hover:hover) and (pointer:fine){.qz-editor[data-pp-bar="on"] .dpg-ppb-round.dpg-pp__shoot{display:none}}