/* ツール本体ページの下に置く解説ブロック（scripts/build-tool-page-docs.mjs が生成）。

   ツールより上には出さない。操作を終えた人だけが到達する位置なので、
   彩度と主張を落として、ツールのUIと視線が競合しないようにしている。

   音系ツールは --lab-* を、画像系ツールは --panel / --white 等を定義していて
   変数名が揃っていない。どちらでも崩れないよう、フォールバックを連ねて受ける。 */

.tool-doc {
  --td-text: var(--lab-text, var(--white, #f7f7f2));
  --td-muted: var(--lab-muted, var(--muted, #9f9fa5));
  --td-line: var(--lab-line, var(--line, #39393f));
  --td-panel: var(--lab-panel, var(--panel, #17171a));
  --td-accent: var(--lab-cyan, var(--cyan, #33d2d7));

  margin: 48px auto 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--td-line);
  color: var(--td-text);
}
.tool-doc__section { margin: 0 0 36px; }
.tool-doc__section:last-child { margin-bottom: 0; }
.tool-doc h2 {
  margin: 0 0 14px;
  color: var(--td-muted);
  font: 800 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.tool-doc h3 {
  margin: 0 0 6px;
  color: var(--td-accent);
  font: 800 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tool-doc p { margin: 0 0 10px; font-size: 13px; line-height: 1.9; }
.tool-doc p:last-child { margin-bottom: 0; }

.tool-doc__steps { margin: 0; padding-left: 1.4em; }
.tool-doc__steps li { margin-bottom: 8px; font-size: 13px; line-height: 1.9; }

.tool-doc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.tool-doc__item {
  padding: 16px;
  background: var(--td-panel);
  border: 1px solid var(--td-line);
}
.tool-doc__item p { font-size: 12px; line-height: 1.85; color: var(--td-muted); }

.tool-doc__trouble { margin: 0; padding-left: 1.2em; }
.tool-doc__trouble li { margin-bottom: 8px; font-size: 13px; line-height: 1.9; color: var(--td-muted); }

.tool-doc__related { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tool-doc__related li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--td-panel);
  border: 1px solid var(--td-line);
}
.tool-doc__related a { color: var(--td-accent); font: 800 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; }
.tool-doc__related a:hover { text-decoration: underline; }
.tool-doc__related span { color: var(--td-muted); font-size: 12px; line-height: 1.7; }

/* スクショ撮影モードではツールだけを写す */
.lab-screenshot-mode .tool-doc { display: none; }

@media (max-width: 640px) {
  .tool-doc { margin-top: 36px; padding-top: 24px; }
  .tool-doc__grid { grid-template-columns: 1fr; }
}

/* <main> を持たないハードウェア風ページ（siren-deck / siren）用の外枠。
   本文が画面幅いっぱいに広がると読みにくいので、ここで幅を決める。 */
.tool-doc-shell {
  width: min(1200px, 100% - 48px);
  margin: 0 auto;
  padding-bottom: 48px;
}

/* 記事へ戻る導線。ツール名（英字monospace）と違い記事題は和文なので本文書体で。 */
.tool-doc__reads li { display: block; }
.tool-doc__reads a { display: block; font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.5; }
.tool-doc__reads span { display: block; margin-top: 4px; }
.tool-doc__reads a small { display: block; margin-bottom: 3px; color: var(--td-muted); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }