/* ツール実行(tools)view-specific styles. Every selector starts with
   #page-tools (SPEC: CSS の規律)。

   値はhub tools-v10.html?tool=pd-target-insight の #tool-pane 実測値
   (2026-09-06 pd-target-insight ラウンド)に合わせている。ただし本ファイルが
   扱うのは色・寸法・余白の値のみ。以下1点は構造・機能に関わる差分のため
   このラウンドでは扱っていない(依頼者の判断待ち、PLAN.md参照)。

   - .form-row のラベル横並びレイアウト(hubはラベル上・入力欄下の縦積み)。
     .form-row は本view専用ではなく20超のviewが共有する部品のため、変更は
     全画面に及ぶ。

   ?tool=直リンク時に部門選択・カテゴリボタン一覧カードが表示される挙動は
   既に対応済み(js/views/tools.js参照)。

   タイトル(.tool-header)はhubと同じくカードの外、.tool-form-outer配下に
   .tool-form-cardと並べて置く(js/views/tools.js参照)。.tool-form-outerの
   max-width:820px; margin:0 auto;は、hub .tool-paneの実際のルール
   (2026-09-06、tools-v10.cssから直接確認)そのもの。以前ここに
   margin:0 56pxという固定値を書いたことがあったが、それは1280px幅の
   ブラウザ1つでcomputed styleを観測した数値にすぎず、hub本来のルールが
   幅に応じて中央寄せする仕組みだったため、より広い画面幅では一致しなく
   なる欠陥だった。修正済み(依頼者の許可を得た上で実施、
   docs/loop/20260905-01-pd-target-insight/PLAN.md「手順の瑕疵の記録」
   節参照)。 */
#page-tools .tool-form-outer {
  max-width: 820px;
  margin: 0 auto;
}
#page-tools .tool-header {
  margin: 0 0 28px;
}
#page-tools .tool-header > h1 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}
#page-tools .tool-header > p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.6;
}
#page-tools .tool-form-card {
  border-color: #e5e7eb;
  border-radius: 10px;
  padding: 26px;
  margin-bottom: 22px;
}
#page-tools .tool-form-card > h2,
#page-tools .tool-state-card > h2 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}
#page-tools .tool-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#page-tools .tool-form .form-row {
  margin-bottom: 0;
}
#page-tools .action-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}
#page-tools .tool-form-card .framework-note {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 18px;
  line-height: 1.6;
}
#page-tools .tool-form-card .form-row label {
  color: #374151;
}
#page-tools .tool-form-card .required-mark {
  color: #dc2626;
  font-size: 14px;
  font-weight: 500;
}
#page-tools .tool-form-card .form-row input,
#page-tools .tool-form-card .form-row textarea,
#page-tools .tool-form-card .form-row select {
  border-color: #d1d5db;
  border-radius: 6px;
  color: #1f2937;
  font-size: 14px;
  /* line-height:normal の実測値がbodyフォント(Noto Sans JP優先)で
     hubと異なり高さがずれるため、hubのフォントスタックをこの入力欄
     だけに直接指定する(2026-09-04 paste-classify-parityラウンドの
     .pc-textareaと同じ対処)。 */
  font-family: -apple-system, "system-ui", "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
#page-tools .tool-form-card .form-row textarea {
  resize: vertical;
  min-height: 64px;
}
#page-tools .tool-form-outer .btn-primary {
  border: none;
}
#page-tools .tool-form-outer .btn {
  height: 42px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
#page-tools .tool-form-outer .btn-primary {
  background: #2563eb;
  border-color: #2563eb;
}
#page-tools .tool-form-outer .btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
#page-tools .tool-form-outer .btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}
#page-tools .tool-state-card {
  border-color: #e5e7eb;
  border-radius: 10px;
  padding: 26px;
  margin-bottom: 22px;
}
#page-tools .loading {
  text-align: center;
  padding: 44px 0;
  color: #6b7280;
  font-size: 14px;
}
#page-tools .framework-used-note {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 18px;
  line-height: 1.6;
}
#page-tools .error-title {
  color: #dc2626 !important;
}
#page-tools .error-message {
  color: #991b1b;
  font-size: 14px;
  line-height: 1.7;
}
/* hub #result-text(css/tools-v10.css .result-text、tools-v10.html
   固定参照点)の実測値そのまま。margin はhubのルールに指定が無く(<pre>
   要素のUAデフォルトに依存)、このルールでも指定していない。 */
#page-tools .tool-form-card .tool-result-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: #1f2937;
  max-height: 600px;
  overflow-y: auto;
  font-family: inherit;
}
/* hub js/history-v10.js のインライン style.cssText と同じ宣言・値。 */
#page-tools .tools-history-panel {
  margin: 24px 0;
  padding: 12px 16px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f6f8fa;
  font-size: 14px;
}
#page-tools .tools-history-heading {
  font-weight: bold;
  margin-bottom: 8px;
}
#page-tools .tools-history-panel details {
  margin-bottom: 8px;
}
#page-tools .tools-history-panel summary {
  cursor: pointer;
}
#page-tools .tools-history-panel pre {
  white-space: pre-wrap;
  background: #fff;
  border: 1px solid #eee;
  padding: 8px;
  border-radius: 6px;
  max-height: 300px;
  overflow: auto;
}