/* =============================================================================
   PMC Lab / Decision Guide ページ  v1.0
   Phase 1 工程4 - 2026-09-14
   -----------------------------------------------------------------------------
   スコープの約束（運用ルール8）
     すべてのセレクタの先頭要素が .pmc- で始まるクラスを持つ。
       - .pmc-decide ... （このページだけに出るマークアップ）
       - body.pmc-decide-page ... （既存テンプレートの微調整）
     このCSSは /decide/<decision-id>/ でしか読み込まれない。
   -----------------------------------------------------------------------------
   部品は pmc-base.css（工程2）をそのまま使う。ここに書くのは、
   Decision Guide 固有のレイアウトと「未設定」の枠だけ。
   ============================================================================= */


/* =============================================================================
   1. ページの器
   ============================================================================= */

.pmc-decide {
  display: block;
  padding-block: var(--pmc-space-6) var(--pmc-space-12);
}

@media (min-width: 768px) {
  .pmc-decide {
    max-width: var(--pmc-width-text);
    margin-inline: auto;
  }
}

body.pmc-decide-page .main-inner {
  background: var(--pmc-bg-page);
}


/* =============================================================================
   2. 見出し
   判断のためのページであることを、装飾ではなく構造で示す。
   ============================================================================= */

.pmc-decide__head {
  padding-bottom: var(--pmc-space-5);
  border-bottom: var(--pmc-border-width-strong) solid var(--pmc-ink-900);
}

.pmc-decide__head .pmc-h1 {
  margin: var(--pmc-space-2) 0 0;
}

.pmc-decide__head .pmc-lede {
  margin: var(--pmc-space-3) 0 0;
}

.pmc-decide__head .pmc-meta {
  margin: var(--pmc-space-4) 0 0;
}


/* =============================================================================
   3. 節
   ============================================================================= */

.pmc-decide__section {
  margin-top: var(--pmc-space-12);
}

.pmc-decide__section-title {
  margin: 0 0 var(--pmc-space-4);
  padding-top: var(--pmc-space-4);
  border-top: var(--pmc-border-width) solid var(--pmc-border-color-strong);
  font-family: var(--pmc-font-sans);
  font-size: var(--pmc-text-2xs);
  font-weight: var(--pmc-weight-bold);
  letter-spacing: var(--pmc-tracking-wide);
  line-height: var(--pmc-leading-tight);
  color: var(--pmc-text-color-muted);
  background: none;
}


/* =============================================================================
   4. 設問
   工程2の .pmc-decision をそのまま使い、間隔だけを与える。
   ============================================================================= */

.pmc-decide__question + .pmc-decide__question {
  margin-top: var(--pmc-space-4);
}

.pmc-decide__foot {
  margin-top: var(--pmc-space-6);
}


/* =============================================================================
   5. 未設定の枠
   管理者にしか描画されない。運営側が入れる場所を可視化するためのもの。
   ============================================================================= */

.pmc-decide__slot {
  margin: var(--pmc-space-3) 0;
  padding: var(--pmc-space-4);
  border: var(--pmc-border-width) dashed var(--pmc-border-color-strong);
  border-radius: var(--pmc-radius-md);
  background: var(--pmc-bg-sunken);
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}


/* =============================================================================
   6. 選択肢の下見（比較表が未設定のあいだの暫定表示）
   ============================================================================= */

.pmc-decide__options-preview {
  margin: 0 0 var(--pmc-space-3);
  padding: 0;
  list-style: none;
  border-top: var(--pmc-border-width) solid var(--pmc-border-color-soft);
}

.pmc-decide__options-preview li {
  margin: 0;
  padding: var(--pmc-space-3) 0;
  border-bottom: var(--pmc-border-width) solid var(--pmc-border-color-soft);
  font-size: var(--pmc-text-md);
  line-height: var(--pmc-leading-snug);
  color: var(--pmc-text-color-strong);
}


/* =============================================================================
   7. 判断結果
   工程5で表示を切り替えるまでは hidden。
   ============================================================================= */

.pmc-decide [data-pmc-result][hidden] {
  display: none;
}


/* 判断結果の追加要素（工程5） */

.pmc-result__position {
  margin: var(--pmc-space-2) 0 0;
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}

.pmc-decide [data-pmc-result-state="no-match"] {
  border-color: var(--pmc-border-color-strong);
}

.pmc-decide [data-pmc-result-state="no-match"] .pmc-result__verdict {
  font-size: var(--pmc-text-lg);
  color: var(--pmc-text-color-muted);
}

.pmc-next__item[hidden] { display: none; }


/* =============================================================================
   8. 印刷
   ============================================================================= */

/* =============================================================================
   9. 根拠と次にすること（工程7）
   ============================================================================= */

.pmc-decide__evidence > * + * {
  margin-top: var(--pmc-space-4);
}

.pmc-decide [data-evidence-id][hidden] {
  display: none;
}

.pmc-next__link {
  display: block;
  color: inherit;
  text-decoration: none;
  min-height: var(--pmc-tap-min);
}

.pmc-next__link:hover .pmc-next__title,
.pmc-next__link:focus-visible .pmc-next__title {
  text-decoration: underline;
}


@media print {
  .pmc-decide__slot { display: none; }
  .pmc-compare { overflow: visible; }
}


/* ============================================================
   2026-09-19  375px Mobile Decision UX（ページ側）
   S-1：結論の見え方／S-2：回答前の判断結果／根拠の所在を先に示す行
   ============================================================ */

/* S-2：回答前は判断結果に中身がない。セクションごと見せない。
   JS が .pmc-result の hidden を外した時点で現れる（JSは変更していない）。 */
.pmc-decide__section[data-pmc-section="result"]:has(> .pmc-result[hidden]) {
  display: none;
}

/* S-1：main_option を出さない Decision では verdict が hidden になるため、
   実際の結論である position が最も小さい文字になっていた。
   verdict が出ないときだけ position を結論の大きさにする。
   これは「結論を示す」表示であって Recommendation ではない（共通原則 P-1）。 */
.pmc-result:has(> [data-pmc-result-verdict][hidden]) > .pmc-result__position {
  margin-top: var(--pmc-space-2);
  font-size: var(--pmc-text-xl);
  font-weight: var(--pmc-weight-bold);
  line-height: var(--pmc-leading-tight);
  color: var(--pmc-text-color-heading);
}

/* 根拠の所在を、読む前に示す。読む順番は読者が選ぶ。 */
.pmc-result__evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pmc-space-2) var(--pmc-space-3);
  margin: var(--pmc-space-3) 0 0;
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}

.pmc-result__evidence-link {
  color: var(--pmc-text-color-accent);
  text-decoration: underline;
}

.pmc-result__evidence-link:focus-visible {
  outline: 2px solid var(--pmc-accent-400);
  outline-offset: 2px;
}


/* S-4（2026-09-19）：結果確定後にフォーカスを受ける見出し。
   マウス・タッチでは輪郭を出さず、キーボード操作のときだけ出す。 */
.pmc-decide__section-title[data-pmc-result-focus]:focus {
  outline: none;
}

.pmc-decide__section-title[data-pmc-result-focus]:focus-visible {
  outline: 2px solid var(--pmc-accent-400);
  outline-offset: 4px;
}


/* =====================================================================
   Fix Batch（2026-09-19）：F-3 医学的判断の注記／F-4 用語の説明
   Beard 固有のドメイン注記。出力可否は PHP 側で decision_id を見て決めている。
   Hair / Skin には自動適用しない（設計決定記録 R-D）。
   ===================================================================== */

.pmc-decide__note {
  margin: var(--pmc-space-3) 0 0;
  padding: var(--pmc-space-3) var(--pmc-space-4);
  border-left: 3px solid var(--pmc-border-color-strong);
  background: var(--pmc-bg-sunken);
  border-radius: var(--pmc-radius-md);
  font-size: var(--pmc-text-sm);
  line-height: var(--pmc-leading-normal);
  color: var(--pmc-text-color-muted);
}