/* 解答・解説パネル(AnswerPanel.tsx。spine-web#764)。公開問題ページの「解答・解説」と受験画面の
   採点結果が同じ器を使う。受験画面は AnswerPanel.tsx の import で、公開ページ(A 層)は共有 CSS
   (scripts/exams/lib/shared-assets.mjs → public/exams/assets/answer-panel.css)で読む。
   - 地と枠: お知らせ帯・得点バッジと同じトークンの組(淡い地 --*-surface + 2px の枠 --*)。
     中立(未解答・未判定)は --eval-bg + --border-color。独自の箱・左線・薄字は作らない
     (spine-docs web/ui-rules.md)
   - 見出し: 18px / 600 で、下に 2px の線(段の色。中立は --border-color)。段の色付きでは文字も
     淡い地の上で読める文字用の --ok-text / --warn-text / --ng-text(tokens.css)
   - 節: 枠・地を持たず、節と節の間だけを 1px の水平線(--grid-line-color)で区切る。線の上下は 16px
     (spine-web#732 のオーナー指摘 2026-10-24) */
.answer-panel {
  margin: 16px 0 0;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--eval-bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
}

.answer-panel--ok {
  background: var(--ok-surface);
  border-color: var(--ok);
}

.answer-panel--warn {
  background: var(--warn-surface);
  border-color: var(--warn);
}

.answer-panel--ng {
  background: var(--ng-surface);
  border-color: var(--ng);
}

.answer-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color);
  color: var(--fg);
  font-size: 18px;
  font-weight: 600;
}

.answer-panel--ok > .answer-panel__title {
  color: var(--ok-text);
  border-bottom-color: var(--ok);
}

.answer-panel--warn > .answer-panel__title {
  color: var(--warn-text);
  border-bottom-color: var(--warn);
}

.answer-panel--ng > .answer-panel__title {
  color: var(--ng-text);
  border-bottom-color: var(--ng);
}

/* 器が details のとき(公開ページ): 開閉の印は ▶ / ▼ を自前で描く(既定のマーカーは消す)。
   畳んだ状態では見出しの下線と下の余白を出さない(パネルの枠と二重になる) */
summary.answer-panel__title {
  cursor: pointer;
  list-style: none;
}

summary.answer-panel__title::-webkit-details-marker {
  display: none;
}

summary.answer-panel__title::before {
  content: '▶';
  font-size: 0.7em;
  color: var(--primary);
}

details.answer-panel[open] > summary.answer-panel__title::before {
  content: '▼';
}

details.answer-panel:not([open]) > summary.answer-panel__title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.answer-panel__section {
  margin: 0 0 16px;
}

/* 節の間の区切り線。上の節の下余白 16px と線の下の 16px で挟む */
.answer-panel__section + .answer-panel__section {
  padding-top: 16px;
  border-top: 1px solid var(--grid-line-color);
}

.answer-panel__section > :first-child {
  margin-top: 0;
}

.answer-panel > :last-child,
.answer-panel__section > :last-child {
  margin-bottom: 0;
}

/* 節の見出しは解説の本文(.instruction-markdown の小見出し)と同じ 16px・本文色の太字で、線を持たない */
.answer-panel__section-title {
  margin: 0 0 6px;
  color: var(--fg);
  font-size: 1em;
  font-weight: 700;
}

/* 正解の行(AnswerPanel.Correct。公開ページの #762 と受験画面で共通。spine-web#766)。
   解説本文(16px)より一回り大きく出す(2026-10-26 オーナー指示) */
.answer-panel__correct {
  margin: 10px 0;
  font-size: 1.125rem;
}

/* ---- 受験画面の節の中身(QuestionItemShell) ---- */
/* ルール違反の箇条書き */
.answer-panel__list {
  margin: 0;
  padding-left: 1.5em;
}

/* 採点基準の理由はパネルの中では本文色(淡い地の上で薄字にしない)。基準どうしは線で仕切らず、
   文字の間隔(12px)だけで分ける(線は節の間だけ。2026-10-24 オーナー指摘)。
   .criteria-item / .criteria-reason の素の見た目は Section.css(公開ページの記事の採点基準と共用) */
.answer-panel .criteria-reason {
  color: var(--fg);
}

.answer-panel .criteria-item {
  padding: 0;
  margin: 0 0 12px;
  border-bottom: none;
}

.answer-panel .criteria-item:last-child {
  margin-bottom: 0;
}