/*
 * AI事始(AIことはじめ) - extra.css
 *
 * クイズ・目録(修了証)・取得状況表示まわりの最小限のスタイル。
 * Material for MkDocsのCSS変数(--md-...)を可能な範囲で使い、
 * ライト/ダーク(slate)配色でも破綻しないようにする。
 */

/* ---------- クイズ ---------- */

.aik-quiz-loading {
  color: var(--md-default-fg-color--light, #666);
}

.aik-quiz-error {
  padding: 0.75em 1em;
  border-radius: 4px;
  color: var(--md-default-fg-color, inherit);
  background: rgba(183, 40, 46, 0.08);
  border: 1px solid #b7282e;
}

.aik-quiz-title {
  font-size: 1.15em;
  margin-bottom: 0.6em;
}

.aik-quiz-passed-note {
  padding: 0.6em 1em;
  border: 1px solid #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  border-radius: 4px;
  color: var(--md-default-fg-color, inherit);
  margin-bottom: 1em;
}

.aik-quiz-form {
  margin-top: 0.5em;
}

.aik-quiz-question {
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 6px;
  padding: 0.8em 1em 1em;
  margin: 0 0 1.2em;
  /* 未回答警告・不正解一覧のアンカーリンクでジャンプした際、Materialの固定ヘッダーに
     設問先頭が隠れないようにする。 */
  scroll-margin-top: 4rem;
}

/* アンカー遷移でスクリプトからフォーカスされた際の枠線は出さない(tabindex="-1"はTabキー操作の
   順序には含めず、リンクからのジャンプ先を示すためだけに使う)。 */
.aik-quiz-question:focus {
  outline: none;
}

.aik-quiz-question legend {
  font-weight: 600;
  padding: 0 0.4em;
  color: var(--md-default-fg-color, inherit);
}

.aik-quiz-question--correct {
  border-color: #2e7d32;
  background: rgba(46, 125, 50, 0.07);
}

.aik-quiz-question--incorrect {
  border-color: #b7282e;
  background: rgba(183, 40, 46, 0.07);
}

/* 採点時に未回答だった設問のハイライト(正誤とは別の警告色にして混同を避ける)。
   回答すると即座に外れる(change時)ほか、再採点のたびに一旦全除去してから付け直す。 */
.aik-quiz-question--unanswered {
  border-color: #f9a825;
  background: rgba(249, 168, 37, 0.12);
}

.aik-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  margin-top: 0.6em;
}

.aik-quiz-choice {
  display: block;
  padding: 0.55em 0.9em;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 4px;
  cursor: pointer;
  color: var(--md-default-fg-color, inherit);
}

.aik-quiz-choice:hover {
  background: var(--md-code-bg-color, rgba(0, 0, 0, 0.04));
}

.aik-quiz-choice input {
  margin-right: 0.7em;
  cursor: pointer;
}

.aik-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 0.5em;
}

.aik-quiz-warning {
  color: #b7282e;
  font-weight: 600;
}

.aik-quiz-warning a {
  color: inherit;
  text-decoration: underline;
}

.aik-quiz-warning a:hover {
  text-decoration: none;
}

.aik-quiz-feedback {
  margin-top: 0.75em;
  padding-top: 0.55em;
  border-top: 1px dashed var(--md-default-fg-color--lightest, #ccc);
}

.aik-quiz-feedback-header {
  font-weight: 600;
  margin: 0 0 0.3em;
  color: var(--md-default-fg-color, inherit);
}

.aik-quiz-explanation {
  margin: 0;
  color: var(--md-default-fg-color--light, inherit);
}

.aik-quiz-summary {
  margin-top: 1em;
  padding: 0.85em 1em;
  border-radius: 6px;
  background: var(--md-code-bg-color, rgba(0, 0, 0, 0.04));
}

.aik-quiz-score {
  font-weight: 600;
  margin: 0 0 0.35em;
  color: var(--md-default-fg-color, inherit);
}

.aik-quiz-incorrect-list {
  margin: 0 0 0.35em;
  color: var(--md-default-fg-color, inherit);
}

.aik-quiz-incorrect-list a {
  color: #b7282e;
  font-weight: 700;
  text-decoration: underline;
}

.aik-quiz-incorrect-list a:hover {
  text-decoration: none;
}

.aik-quiz-result-message {
  margin: 0;
}

.aik-quiz-result-message--pass {
  color: #2e7d32;
  font-weight: 700;
}

.aik-quiz-result-message--fail {
  color: #b7282e;
  font-weight: 700;
}

/* ---------- 目録(修了証) ---------- */

.aik-cert-locked {
  padding: 0.85em 1em;
  border-radius: 6px;
  background: var(--md-code-bg-color, rgba(0, 0, 0, 0.04));
  color: var(--md-default-fg-color--light, inherit);
}

.aik-cert-issue {
  margin-top: 0.5em;
}

.aik-cert-name-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.7em;
  color: var(--md-default-fg-color, inherit);
}

.aik-cert-name-input {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-top: 0.4em;
  padding: 0.55em 0.75em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 4px;
  font-size: 1em;
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, inherit);
}

.aik-cert-hint {
  font-size: 0.8em;
  color: var(--md-default-fg-color--light, #767676);
  margin: 0.45em 0 1em;
}

.aik-cert-error {
  color: #b7282e;
  font-weight: 600;
}

.aik-cert-result {
  margin-top: 1.2em;
}

.aik-cert-preview {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  display: block;
  margin-bottom: 1em;
}

.aik-cert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-bottom: 0.6em;
}

/* ---------- 実践課題(領域B) ---------- */

.aik-exercise-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
  color: var(--md-default-fg-color, inherit);
}

.aik-exercise-textarea {
  display: block;
  width: 100%;
  margin-top: 0.4em;
  padding: 0.6em 0.75em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 4px;
  font-size: 0.9em;
  font-family: inherit;
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, inherit);
  resize: vertical;
}

.aik-exercise-hint {
  font-size: 0.8em;
  color: var(--md-default-fg-color--light, #767676);
  margin: 0.45em 0 1em;
}

.aik-exercise-error {
  color: #b7282e;
  font-weight: 600;
}

.aik-exercise-submitted {
  padding: 0.6em 1em;
  border: 1px solid #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  border-radius: 4px;
  color: var(--md-default-fg-color, inherit);
}

/* ---------- 取得状況(初級目録ステータス) ---------- */

.aik-mokuroku-status-list {
  list-style: none;
  padding-left: 0;
  margin: 0.6em 0;
}

.aik-mokuroku-status-list li {
  padding: 0.3em 0;
  color: var(--md-default-fg-color, inherit);
}

.aik-status-passed {
  color: #2e7d32;
}

.aik-status-partial {
  color: #b26a00;
}

.aik-status-unpassed {
  color: var(--md-default-fg-color--light, inherit);
}

/* ---------- 進捗バッジ(ユニットページ) ---------- */

.aik-area-progress {
  margin: 0.6em 0 1.2em;
  padding: 0.35em 0.75em;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 4px;
  background: var(--md-code-bg-color, rgba(0, 0, 0, 0.04));
  font-size: 0.8em;
}

.aik-area-progress-prefix {
  color: var(--md-default-fg-color--light, inherit);
}

.aik-area-progress-link {
  margin-left: 0.2em;
}

/* ====================================================================
   slate(ダーク)配色の上書き (#11)
   ----------------------------------------------------------------------
   mkdocs.yml の theme.palette に prefers-color-scheme 連動の
   light/dark 2エントリを設定すると、Material は選択中のスキームに応じて
   <body data-md-color-scheme="default|slate"> を切り替える。
   上のセクションで定義した緑/赤/アンバー/オレンジ系のハードコード色は
   ライト配色向けの値のため、slate 選択時のみ [data-md-color-scheme="slate"]
   セレクタで明るめの色に差し替える(既存ルールの書き換えは行わない)。

   コントラスト比は slate 既定背景 ~#2e303e (相対輝度 ≈0.030) に対する概算値。
   通常テキストは WCAG AA 4.5:1 以上、枠線等の非テキストは 3:1 以上を目安にした。
   ==================================================================== */

/* 緑(合格・正解・提出済み) 元 #2e7d32 → #66bb6a (推定コントラスト比 約5.5:1) */
[data-md-color-scheme="slate"] .aik-quiz-passed-note {
  border-color: #66bb6a;
  background: rgba(102, 187, 106, 0.14);
}

[data-md-color-scheme="slate"] .aik-quiz-question--correct {
  border-color: #66bb6a;
  background: rgba(102, 187, 106, 0.12);
}

[data-md-color-scheme="slate"] .aik-quiz-result-message--pass {
  color: #66bb6a;
}

[data-md-color-scheme="slate"] .aik-exercise-submitted {
  border-color: #66bb6a;
  background: rgba(102, 187, 106, 0.14);
}

[data-md-color-scheme="slate"] .aik-status-passed {
  color: #66bb6a;
}

/* 赤(不正解・警告・エラー) 元 #b7282e → #ff6b6b (推定コントラスト比 約4.7:1) */
[data-md-color-scheme="slate"] .aik-quiz-error {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.14);
}

[data-md-color-scheme="slate"] .aik-quiz-question--incorrect {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.12);
}

[data-md-color-scheme="slate"] .aik-quiz-warning,
[data-md-color-scheme="slate"] .aik-quiz-incorrect-list a,
[data-md-color-scheme="slate"] .aik-quiz-result-message--fail,
[data-md-color-scheme="slate"] .aik-cert-error,
[data-md-color-scheme="slate"] .aik-exercise-error {
  color: #ff6b6b;
}

/* アンバー(未回答ハイライト) 元 #f9a825 → #ffca28 (推定コントラスト比 約8.5:1、
   枠線用途で3:1要件は元の値でも満たすが、暗背景での視認性向上のため明度を上げる) */
[data-md-color-scheme="slate"] .aik-quiz-question--unanswered {
  border-color: #ffca28;
  background: rgba(255, 202, 40, 0.16);
}

/* オレンジ(一部達成) 元 #b26a00 → #ffb74d (推定コントラスト比 約7.5:1。
   元の値は暗背景で約3.1:1しかなく通常テキストのAA基準を満たさないため必須の変更) */
[data-md-color-scheme="slate"] .aik-status-partial {
  color: #ffb74d;
}

/* 目録プレビューの縁取り: 暗背景では黒の box-shadow がほぼ見えないため、
   影を強めて白系の目録画像との境界を保つ。 */
[data-md-color-scheme="slate"] .aik-cert-preview {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}