/* Lab「PHP 8.6 で変わること」だけで使うスタイル */

/* ページの最初の注意（リリース前の情報であること・情報源） */
.php86-notice {
  max-width: 760px;
  margin: -32px auto 8px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 210, 122, 0.45);
  border-radius: 12px;
  background: rgba(255, 210, 122, 0.07);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(232, 237, 245, 0.85);
}
.php86-notice p { margin: 0; }
.php86-notice ul { margin: 0.5em 0 0; padding-left: 1.2em; }
.php86-notice li + li { margin-top: 0.3em; }
.php86-notice strong { color: #ffd27a; font-weight: 600; }

/* コード */
.prose pre {
  margin: 1.2em 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ink-line);
  border-radius: 8px;
}
.prose pre code {
  padding: 0;
  background: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #dbe6f5;
  white-space: pre;
  font-variant-ligatures: none;   /* => や != を記号1つにまとめない */
}

/* 「背景」（なぜ変わったか）。あとから自分の意見を足しやすいように、本文と分けて見せる */
.prose .why {
  margin: 1.2em 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(168, 208, 255, 0.05);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
}
.prose .why-label {
  display: inline-block;
  margin-right: 0.6em;
  font: 11px 'JetBrains Mono', 'Noto Sans JP', monospace;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* 表の見出しを少し広く（関数名など）。スマホは共通の幅のまま */
.info th { width: 12em; }
@media (max-width: 640px) {
  .info th { width: 7em; }
  .php86-notice { margin-top: -24px; }
}

/* 項目（h3）の間をしっかり空ける。前の項目の「背景」と、次の項目が続いて見えないように */
.prose h3 { margin-top: 96px; }
.prose h2 + h3 { margin-top: 40px; }   /* 大見出しのすぐ下は、空けすぎない */
@media (max-width: 640px) {
  .prose h3 { margin-top: 72px; }
  .prose h2 + h3 { margin-top: 32px; }
}

/* 白背景版（css/reading.css）のときの注意の枠 */
.theme-light .php86-notice { background: #fff8e8; border-color: #f0d28a; color: #4a3b12; }
.theme-light .php86-notice strong { color: #9a6a00; }