/* 護石チェッカーの画面（charm-check.html） */
/* ---- 護石チェッカーの画面（charm-check.html） ---- */

/* 広い画面では、左に調べる護石、右に判定を並べる（判定のしかたとコメント欄は、その下に幅いっぱいに）。狭い画面では縦に並べる */
.charm-check-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
  align-items: start;
}

@media (min-width: 900px) {
  .charm-check-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .charm-check-about {
    grid-column: 1 / -1;
  }
}

/*
 * いちばん下のコメント欄（comments.css の .community）。シミュレーターの画面では画面の幅に合わせて置くが、
 * この画面では、上の欄と同じ幅（この画面の内容の幅）に、2 列の幅いっぱいに置く（余白は、欄のあいだの gap に任せる）
 */
.charm-check-page .community {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* スキル欄: スキルのプルダウン（幅いっぱい）と Lv の選択欄 */
.charm-check-form .charm-skill-row {
  flex-wrap: nowrap;
}

.charm-check-form .charm-skill-row .skill-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}

/* Lv の欄は、スキルを選んでいない（空の）ときも、ほかの行と同じ幅にする */
.charm-check-form .charm-skill-row select {
  min-width: 4.5em;
}

/* スキルのプルダウン（skill-dropdown.js。見た目は skill-picker.css）の一覧は、この画面の内容の横幅いっぱいに開く（一覧の位置の基準） */
.charm-check-page {
  position: relative;
}

.check-slots select {
  flex: 1 1 0;
  min-width: 0;
}

/* 判定。色だけに頼らないよう、実在しうるときは ✓、実在しないときは ✕ の印を付ける */
.check-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--muted);
}

/* まだ判定が出ていないときの「選ぶたびに、判定が変わります。」。はじめの判定の文（.check-verdict）と同じ大きさ・色 */
.check-note {
  margin: 8px 0 4px;
  color: var(--muted);
}

.check-verdict.possible,
.check-verdict.impossible {
  font-size: 1.1rem;
  font-weight: 700;
}

.check-verdict.possible {
  color: var(--ok);
}

.check-verdict.impossible {
  color: var(--danger);
}

.check-verdict.possible::before,
.check-verdict.impossible::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 0.85em;
}

.check-verdict.possible::before {
  content: "✓";
}

.check-verdict.impossible::before {
  content: "✕";
}

.check-subhead {
  margin: 12px 0 4px;
  font-size: 0.9rem;
}

/* 判定の文は、文節の切れ目で折り返し、最後の行に 1〜2 文字だけ残さない（.app-lead と同じ） */
.check-matches,
.check-reasons,
.check-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 出る護石: 名前の後ろに、スロットとほかに付くスキルの数（入りきらなければ、ひとまとまりで次の行に回す） */
.check-match-name {
  font-weight: 600;
}

.check-match-slots,
.check-match-note {
  display: inline-block;
  margin-left: 1em;
  color: var(--muted);
  font-size: 0.9rem;
}

/* 少し変えれば出る形: 文の後ろに「この形で調べる」 */
.check-suggestions li > span {
  margin-right: 8px;
}

.check-suggestions .button {
  margin: 2px 0;
  vertical-align: middle;
}

.check-note {
  margin: 8px 0 0;
  font-size: 0.9rem;
  word-break: auto-phrase;
  text-wrap: pretty;
}

.check-note.caution {
  color: var(--needs-check);
  font-weight: 600;
}

.check-note.muted {
  color: var(--muted);
  font-size: 0.85rem;
}

/* 実在しうるときの「マイ護石に登録」の欄。判定の説明と分けるため、上に線を引く */
.check-register {
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.check-register .check-note {
  margin-top: 0;
}

/* 登録する護石（名前・スキル・スロット）と、登録のボタン。入りきらなければ、ボタンを次の行に回す */
.check-register-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.check-register-charm {
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

#check-register-message:empty {
  display: none;
}

.check-about-list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9rem;
}

.check-about-list li + li {
  margin-top: 4px;
}