/* 操作説明書（/manual）— Web で読む説明書。styles.css のトークンをそのまま使う。
   2026-07-28 ユーザー要望:
   - レスポンシブ（携帯・タブレット・パソコンのどれで開いても読める）
   - パソコンで開いてもほかの端末向けの手順を読める（端末の切替は手動でできる）
   - 作成日とバージョンを出す
   端末別の記述は data-dev="pc" / "tablet" / "phone" を持つ要素で、上部の切替が表示を決める。
   共通の記述は data-dev="tablet phone" のように空白区切りで並べる（2026-07-29）。 */

/* 目次から節へ飛んだとき、固定ヘッダ（.man-top）に見出しが隠れないようにする
   （WCAG 2.4.11 Focus Not Obscured。キーボードのフォーカス移動にも効く） */
/* この CSS は /manual だけが読み込むので、html へ直接指定してよい（:has は使わない） */
html{scroll-padding-top:calc(var(--topbar-h) + var(--sp-4))}
/* 携帯ではヘッダが 2 行に折り返して約 90px になる（実測 390px）。
   同じ値を使わないと、目次から飛んだ見出しがヘッダの下に潜る（WCAG 2.4.11） */
@media(max-width:600px){html{scroll-padding-top:calc(90px + var(--sp-4))}}

/* ---- 全体レイアウト（広い画面 = 目次を左に固定 / 狭い画面 = 1 段） ---- */
.man{max-width:1180px;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-7);
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--sp-6);align-items:start}
@media(max-width:900px){.man{grid-template-columns:1fr;gap:var(--sp-4);padding:var(--sp-4) var(--sp-4) var(--sp-7)}}

/* ---- ヘッダ（自前。ログイン前でも読めるようコンソールのナビは載せない） ---- */
.man-top{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--topbar-h);padding:0 var(--sp-4) 0 0;background:var(--surface-1);
  border-bottom:1px solid var(--border-muted);flex-wrap:wrap}
.man-top .h-logos{flex:none}
.man-top .man-title{font-size:var(--text-md);font-weight:600;line-height:1.2}
.man-top .man-sub{font-size:var(--text-xs);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.man-top .spacer{flex:1}
@media(max-width:600px){
  .man-top{padding-bottom:var(--sp-2)}
  .man-top .man-title{font-size:var(--text-base)}
  /* 折り返した 2 行目（EN・テーマ・コンソールへ）は右上へ寄せる（2026-07-29 ユーザー指定） */
  .man-top #langLink{margin-left:auto}
}

/* ---- 端末切替（パソコン / タブレット / 携帯） ---- */
.man-dev{position:sticky;top:calc(var(--topbar-h) + var(--sp-2));z-index:5;
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg)}
.man-dev .lbl{font-size:var(--text-xs);color:var(--text-secondary);letter-spacing:.06em;white-space:nowrap}
.man-dev .seg{display:flex;gap:4px;flex-wrap:wrap}
.man-dev button{border:1px solid var(--border);background:none;color:var(--text-secondary);
  font-family:inherit;font-size:var(--text-sm);font-weight:500;padding:7px 14px;border-radius:4px;cursor:pointer;
  touch-action:manipulation}
.man-dev button:hover{color:var(--text);border-color:var(--accent);background:var(--accent-subtle)}
/* 選択中は面の色に対して十分な明暗差を取る（#fff だと dark テーマで 3.30:1） */
.man-dev button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg-base)}
.man-dev .note{font-size:var(--text-xs);color:var(--text-secondary);flex-basis:100%}

/* ---- 目次 ---- */
.man-toc{position:sticky;top:calc(var(--topbar-h) + var(--sp-4));
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-3)}
.man-toc b{display:block;font-size:var(--text-xs);color:var(--text-secondary);letter-spacing:.08em;padding:0 var(--sp-2) var(--sp-2)}
/* 広い画面では常に開いた一覧なので、たたむ見出し（summary）は出さない
   （見出しの「目次」が 2 つ並んで見える。2026-07-28） */
.man-toc summary{display:none}
.man-toc ol{list-style:none;margin:0;padding:0;counter-reset:mtoc}
.man-toc li{counter-increment:mtoc}
.man-toc a{display:block;padding:6px var(--sp-2);border-radius:4px;color:var(--text-secondary);
  font-size:var(--text-sm);line-height:1.35}
.man-toc a::before{content:counter(mtoc) ". ";color:inherit;opacity:.75;font-variant-numeric:tabular-nums}
.man-toc a:hover{background:var(--accent-subtle);color:var(--text);text-decoration:none}
.man-toc a.on{background:var(--accent-subtle);color:var(--text);font-weight:600}
@media(max-width:900px){
  /* 狭い画面では畳んでおく（本文を押し下げない） */
  .man-toc{position:static;padding:0}
  .man-toc>b{display:none}
  .man-toc details{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-1)}
  /* 狭い画面ではたたむので summary を戻す（広い画面では display:none にしてある） */
  .man-toc summary{display:block;cursor:pointer;padding:var(--sp-3) var(--sp-4);font-weight:600;font-size:var(--text-sm);
    color:var(--text-secondary);list-style:none}
  .man-toc summary::before{content:"▸ ";color:var(--text-muted)}
  .man-toc details[open] summary::before{content:"▾ "}
  .man-toc ol{padding:0 var(--sp-3) var(--sp-3)}
}

/* ---- 本文 ---- */
.man-body{min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.man-sec{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5);scroll-margin-top:calc(var(--topbar-h) + var(--sp-4))}
@media(max-width:600px){.man-sec{padding:var(--sp-4)}}
.man-sec>h2{font-size:var(--text-lg);border-left:3px solid var(--accent);padding-left:var(--sp-3);margin-bottom:var(--sp-2)}
/* 節へのリンク（JS が付ける）。ふだんは薄く、その節に触れたときだけ見せる */
/* 指でも押せる大きさを確保する（WCAG 2.5.8 目標サイズ 24×24px） */
.man-anchor{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;
  margin-left:.3em;color:var(--text-secondary);font-weight:400;opacity:0;user-select:none;
  transition:opacity var(--dur-fast)}
.man-anchor::after{content:"#"}
.man-sec:hover .man-anchor,.man-anchor:focus-visible{opacity:1;text-decoration:none}
@media (pointer:coarse){.man-anchor{opacity:.45}}
.man-sec>.lead{color:var(--text-secondary);font-size:var(--text-sm);margin:0 0 var(--sp-4)}
.man-sec h3{font-size:var(--text-md);margin:var(--sp-5) 0 var(--sp-2)}
.man-sec h3:first-of-type{margin-top:var(--sp-3)}
/* 本文の幅は表・図と同じ欄いっぱいに使う（2026-07-30 ユーザー指摘「右端の折り返しが
   不自然・本文の大体がそう・表の中は OK」）。以前は WCAG 1.4.8（CJK は 40 グリフ）に
   ならい 42em で切っていたが、全幅の表と混在すると「右端が余っているのに本文だけ早く
   折り返す」ように見える方が読みにくかった */
/* 和文の折り返しのルール（2026-07-29 ユーザー指定「ルール化しておいて」・2026-07-30 改訂）:
   文節の切れ目で折り返す（auto-phrase）のは **行が短い要素だけ**。見出し・目次・表の欄・
   キャプションは、既定（normal）だと「赤い実線の四／角」のように語の途中で割れるので
   文節折りが効く。ルート（.man / .man-top）へ 1 度だけ指定して継承させ、新しい要素も
   自動で従う（要素を個別に列挙すると必ず数え落とす）。
   ただし本文の段落・箇条書き（1 行が全角 40 字近くまで伸びる）は文節折りにしない。
   行末に収まらない文節がまるごと次の行へ送られ、右端に大きな空きが出て不揃いに見える
   （2026-07-30 ユーザー指摘「右端折り返しが不自然」「頻発する」）。長い行は和文の通例
   どおり字単位（禁則処理のみ）で折る方が右端がそろう。
   - 未対応のブラウザ（Safari ほか）は従来の折り返しになるだけで、崩れはしない
   - 英数字だけの文字列（コード・時刻・URL）には影響しない
   回帰は web/backend/tests/test_manual_typography.py が見張る */
.man,.man-top{word-break:auto-phrase}
.man-sec p,.man-sec li,.man-note{word-break:normal}
.man-sec p{margin:var(--sp-2) 0;line-height:1.8}
.man-sec ul,.man-sec ol{margin:var(--sp-2) 0;padding-left:1.4em;line-height:1.8}
.man-sec li{margin:var(--sp-1) 0}
.man-sec li>ul,.man-sec li>ol{margin:var(--sp-1) 0}
.man-sec code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-inset);
  border:1px solid var(--border-muted);border-radius:var(--radius-sm);padding:1px 5px}
.man-sec kbd{font-family:var(--font-mono);font-size:.85em;background:var(--surface-3);
  border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);padding:1px 6px;white-space:nowrap}

/* 表は狭い画面で横スクロール（本文自体は横に溢れさせない） */
.man-table{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);margin:var(--sp-3) 0}
.man-table table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:340px}
.man-table th,.man-table td{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-muted);
  vertical-align:top;line-height:1.6}
.man-table th{background:var(--surface-2);color:var(--text-secondary);font-weight:600;white-space:nowrap}
.man-table tr:last-child td{border-bottom:none}
/* 携帯では最低幅を外して収める（340px 固定だと 390px 幅でも全部の表が横スクロールになる）。
   基本指定（上の white-space:nowrap 等）より後に置かないと打ち消されるので、必ずここに書く */
@media(max-width:420px){
  .man-table table{min-width:0}
  /* 折り返しを許す。word-break:keep-all は和文の行分割を全面的に禁止するため、
     セルの最小幅が文全体まで広がり、かえって全部の表が横スクロールになっていた
     （2026-07-29 実測: 390px で 13 表中 13 表。外すと 0 表） */
  .man-table th,.man-table td{white-space:normal}
  /* 1 列目は項目名。狭すぎると結局割れるので必要な幅を確保する */
  .man-table th:first-child,.man-table td:first-child{min-width:4.5em}
}

/* ---- 画面の図（scripts/capture-manual-shots.py が撮る） ----
   本文と同じ幅に収め、情報量の多い図は押すと原寸を別タブで開く（拡大は素の <a>。JS 不要）。
   カメラ映像の部分は撮影時にプレースホルダへ差し替えてある（実映像は載せない）。
   画像は 2 倍解像度で撮り、width/height には表示寸法（半分）を入れてある。
   max-width で本文幅に収め、height:auto で縦横比を保つ（引き伸ばして粗くしない）。 */
/* 図とキャプションは本文の欄の中央に置く（2026-07-29 ユーザー指定）。
   figure 自体も margin-inline:auto で中央へ寄せる（text-align だけだと、本文幅 42em の
   箱が左端に置かれたままで、欄の中では左寄りに見える） */
.man-fig{margin:var(--sp-4) auto;max-width:42em;text-align:center}
.man-fig img{display:block;max-width:100%;height:auto;margin-inline:auto;
  border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-inset)}
.man-fig a{display:inline-block;line-height:0;border-radius:var(--radius-md);max-width:100%}
.man-fig a:hover img{border-color:var(--accent)}
.man-fig figcaption{margin-top:var(--sp-2);font-size:var(--text-xs);color:var(--text-secondary);line-height:1.6;
  text-align:center}
.man-fig figcaption b{color:var(--text);font-variant-numeric:tabular-nums}
/* 図番号は表示中の端末ぶんだけを数える。端末を 3 つに分けたのでベタ書きでは維持できない
   （display:none の図はカウンタが進まないので、切り替えるたびに 1 から振り直される） */
.man-body{counter-reset:mfig}
.man-fig{counter-increment:mfig}
.man-fig figcaption .fig-n::before{content:"図" counter(mfig) ". "}
.man[data-lang="en"] .man-fig figcaption .fig-n::before{content:"Fig. " counter(mfig) ". "}
/* 図の中の番号（①②③）に対応する説明。図のすぐ下に置く */
.man-fig-legend{list-style:none;margin:var(--sp-2) 0 0;padding:0;max-width:42em;
  font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7}
.man-fig-legend li{display:flex;gap:.5em;align-items:baseline;margin:2px 0}
.man-fig-legend .n{flex:none;color:var(--danger);font-weight:700;font-variant-numeric:tabular-nums}
/* 携帯画面の図は縦長なので、幅を抑えて本文の流れを崩さない */
.man-fig--phone img{max-width:min(260px,60%)}

/* 端末で出し分ける（2026-07-29 ユーザー指定: パソコン・タブレット・携帯はレイアウトが
   違うので、説明も図もその端末のものを出す）。data-dev は空白区切りで複数指定でき、
   共通の説明は data-dev="tablet phone" のように書く。属性セレクタ ~= が語で一致する。
   出し分けるのは本文（.man-sec の中）だけに限る。限定しないと、端末を選ぶボタン自身が
   data-dev を持っているために消えてしまう（2026-07-29 ユーザー指摘「ほかのボタンがない」）。 */
.man[data-show="pc"] .man-sec [data-dev]:not([data-dev~="pc"]),
.man[data-show="tablet"] .man-sec [data-dev]:not([data-dev~="tablet"]),
.man[data-show="phone"] .man-sec [data-dev]:not([data-dev~="phone"]){display:none}
/* 画面では 1 つの端末しか出さないので札は要らない（紙には全端末が載るので、
   @media print 側で「パソコン」「タブレット」「携帯」の札を付ける） */

/* 図の丸番号に対応する表。図のすぐ下に置き、間を空けない */
.man-table--legend{margin-top:calc(-1 * var(--sp-2))}
.man-table--legend td:first-child{font-variant-numeric:tabular-nums;font-weight:700;color:var(--danger);width:3em}
/* 携帯では 3 列だと説明が右に切れて横スクロールが要る。番号＋項目名を 1 行目、
   説明を 2 行目に積んで、そのまま読めるようにする（2026-07-29 実測 390px） */
@media(max-width:480px){
  .man-table--legend{overflow-x:visible;border-radius:var(--radius-md)}
  .man-table--legend table{display:block;min-width:0}
  .man-table--legend thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .man-table--legend tbody,.man-table--legend tr,.man-table--legend td{display:block;width:auto}
  .man-table--legend tr{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-muted)}
  .man-table--legend tr:last-child{border-bottom:none}
  .man-table--legend td{border:none;padding:0}
  .man-table--legend td:first-child{display:inline;width:auto;margin-right:.5em}
  .man-table--legend td:nth-child(2){display:inline;font-weight:600;color:var(--text)}
  .man-table--legend td:nth-child(3){margin-top:2px}
}

/* 補足・注意 */
.man-note{border:1px dashed var(--border-strong);background:var(--surface-2);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);color:var(--text-secondary);margin:var(--sp-3) 0}
.man-note b{color:var(--text)}
.man-warn{border:1px solid var(--warning);background:var(--warning-subtle);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);margin:var(--sp-3) 0}

/* ---- 端末別のブロック（切替で出し分け） ---- */
.dev{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0;background:var(--surface-2)}
.dev>.dev-h{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:700;
  color:var(--accent);letter-spacing:.04em;margin-bottom:var(--sp-1)}
.dev:not([data-dev="pc"]){border-left-color:var(--warning)}
/* 端末ラベルは 4.5:1 を確保する（--warning は light で 4.43:1、印刷で 2.75:1 だった）。
   種別の区別は左の罫線（border-left-color）が担う */
.dev:not([data-dev="pc"])>.dev-h{color:#8a5a12}
[data-theme="dark"] .dev:not([data-dev="pc"])>.dev-h{color:#e6b567}
.dev>*:last-child{margin-bottom:0}
/* 1 つの端末だけ表示しているときは見出しラベルも枠も出さない（同じ札が並んで邪魔になる）。
   出し分け自体は上の [data-dev~=…] の規則が行う */
.man[data-show] .dev-h{display:none}
.man[data-show] .dev{border:none;border-radius:0;padding:0;margin:var(--sp-2) 0;background:none}

/* ---- フッタ（ロゴ + 版） ---- */
.man-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-3) var(--sp-5);padding-top:var(--sp-5);margin-top:var(--sp-2);border-top:1px solid var(--border-muted);
  color:var(--text-secondary);font-size:var(--text-xs);text-align:center}
.man-foot .logos{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--radius-md);padding:6px 16px}
.man-foot .logos img{height:24px;width:auto;object-fit:contain;display:block}
.man-foot .logos img.logo-circle{height:30px}

/* ---- 印刷（配布用に紙にも出せるように） ----
   端末の切替で隠している側も紙には必ず出す。折りたたんだまま印刷すると、
   手元の紙に片方の手順しか残らない（2026-07-28 評価指摘） */
@media print{
  /* 既定テーマは dark。そのまま刷ると暗背景用の文字色が白紙に乗って読めない
     （実測: 補足文 3.10:1 / 端末ラベル 2.75:1）。紙用にトークンごと差し替える */
  :root,[data-theme="dark"],[data-theme="light"]{
    --bg-base:#fff;--bg-inset:#fff;--surface-1:#fff;--surface-2:#fff;--surface-3:#fff;
    --text:#000;--text-secondary:#333;--text-muted:#555;
    --border:#999;--border-muted:#bbb;--border-strong:#777;
    --accent:#000;--warning:#000;--accent-subtle:transparent;--warning-subtle:transparent;
  }
  body{background:#fff!important;color:#000!important}
  .man-sec p,.man-sec li,.man-sec td,.man-sec th,.man-note,.man-warn,.man-sec>.lead{color:#000!important}
  .man-top,.man-toc,.man-dev,.man-anchor,.toast-region{display:none!important}
  .man{display:block;max-width:none;padding:0}
  .man-sec{border:none;padding:0 0 12pt;background:none}
  .man-sec p,.man-sec ul,.man-sec ol{max-width:none}
  .man .dev,.man .dev-h{display:block!important}
  /* 端末の切替で隠している側も紙には必ず出す。図と凡例表も同じ（片方の端末しか載らない
     紙を配ってしまわないように）。どの端末の図かは札で示す */
  .man [data-dev]{display:revert!important}
  .man .man-fig[data-dev]::before{content:attr(data-label);display:block;
    font-size:9pt;font-weight:700;color:#000;margin-bottom:2pt}
  /* .man[data-show="pc"] .dev{border:none;padding:0} に詳細度で勝たせる（同じ形で書く） */
  .man .dev,.man[data-show] .dev{border:none;border-left:2pt solid #999;border-radius:0;
    padding:0 0 0 8pt;background:none;margin:6pt 0}
  .man .dev>.dev-h,.man .dev:not([data-dev="pc"])>.dev-h{color:#000;font-weight:700}
  /* 見出しだけが頁末に取り残されない・表と図は途中で切らない */
  .man-sec>h2,.man-sec h3{break-after:avoid}
  .man-table,.man-note,.man-warn,.man-fig{break-inside:avoid;page-break-inside:avoid}
  .man-fig figcaption{break-before:avoid;page-break-before:avoid}
  /* 図はダーク表示のまま撮ってある。既定では背景が落とされて枠だけになるため、
     色をそのまま出すよう指示する（Chrome 136 未満は -webkit- が要る）。
     紙幅・紙丈を超えないよう上限を付ける（超えると break-inside:avoid が無視される） */
  .man-fig img{max-width:170mm;max-height:170mm;width:auto;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;border:1px solid #999}
  /* 紙では図に枠を残す。幅は本文に合わせ、原寸リンクの下線は消す */
  .man-fig a{border:1pt solid #999;max-width:100%}
  .man-fig figcaption{color:#333}
  .man-foot{border-top:1pt solid #999}
}

/* 用紙は A4 縦。既定の余白はブラウザ任せで揃わないため明示する */
@page{size:A4 portrait;margin:12mm 14mm}