/* 使い方の画面（help.html） */
/* ---- 使い方の画面（help.html） ---- */

/* 広い画面では左に目次、右に説明を並べる。狭い画面では目次を上に置く */
.help-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width: 1000px) {
  .help-page {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }

  /* 目次は、説明をスクロールしても見えるようにする */
  .help-toc {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}

.help-toc h2 {
  margin-bottom: 6px;
  font-size: 0.9rem;
}

/* 目次の項目。幅があれば段に分ける（広い画面の左の列では 1 段） */
.help-toc ol {
  margin: 0;
  padding-left: 1.6em;
  columns: 13em;
  column-gap: 24px;
  font-size: 0.9rem;
}

.help-toc li {
  margin: 2px 0;
  break-inside: avoid;
}

.help-toc a {
  text-decoration: none;
}

.help-toc a:hover {
  text-decoration: underline;
}

.help-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* 目次から移ったとき、見出しが画面の端に貼り付かないようにする */
.help-section,
.help-section > h3 {
  scroll-margin-top: 16px;
}

.help-section > h2 {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 1.15rem;
}

.help-section > h3 {
  margin: 20px 0 6px;
  font-size: 1rem;
}

/*
 * 本物の広告を出すときだけ出す説明（data-ads-live。ads.js が hidden を外す）。入れ物の div はないものとして扱い、
 * 中の見出しと段落を、ほかの見出しと段落と同じ見た目にする（プライバシーポリシーの「広告について」）
 */
.help-section > [data-ads-live]:not([hidden]) {
  display: contents;
}

.help-section > [data-ads-live] > h3 {
  margin: 20px 0 6px;
  font-size: 1rem;
}

/* 手順の中の小見出し（例: 「3. レベルを決める」の中の「武器に付いているスキル」）。ほかの節からリンクで移れる */
.help-section > h4 {
  margin: 14px 0 4px;
  font-size: 0.95rem;
  scroll-margin-top: 16px;
}

/* 本文の段落。見本（.help-figure）の中の段落は、本物の画面と同じ見た目のままにするため、直下のものだけ */
.help-section > p {
  margin: 0 0 10px;
}

.help-list {
  margin: 0 0 10px;
  padding-left: 1.5em;
}

.help-list li {
  margin: 4px 0;
}

/* 用語と説明（オプションの名前など） */
.help-terms {
  margin: 0 0 10px;
}

.help-terms dt {
  margin-top: 10px;
  font-weight: 600;
}

.help-terms dt:first-child {
  margin-top: 0;
}

.help-terms dd {
  margin: 2px 0 0 1.2em;
}

/* このツールのページの一覧 */
.help-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.help-pages li {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.help-pages a {
  font-weight: 600;
}

.help-pages p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/*
 * 画面の見本。実際の画面と同じクラスで書いた、押しても動かない例（アイコンは help-page.js が描く）。
 * 見本の中は inert 属性で操作できなくしてあり、マウスを乗せたときの表示の変化も出さない
 */
.help-figure {
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.help-figure figcaption {
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.help-example {
  pointer-events: none;
}

/* 見本を縦に並べる（条件に近い構成の 2 件など） */
.help-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 選択中のスキルの見本は、本物のパネルと同じくらいの幅にする */
.help-selected {
  max-width: 360px;
}

/* 本物では × はボタン。見本では文字なので、ボタンと同じく枠の中央に置く */
.help-selected .selected-remove {
  display: grid;
  place-items: center;
}

/* コメントの見本は、見本の枠の上端から並べる */
.help-figure .comment-list {
  margin-top: 0;
}

/* 本物ではリンク（または、リンクの見た目のボタン）のもの */
.help-link-look {
  color: var(--accent);
  text-decoration: underline;
}

/* 見本で省いたところ */
.help-omitted {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* 見本に添える印（A・B…）。見本の下の説明の印と対応させる。画面の色（アクセントの色など）と紛れないよう、本文の色で塗る */
.help-marker {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.5em;
  height: 1.5em;
  margin-right: 4px;
  padding: 0 0.3em;
  border-radius: 4px;
  background: var(--text);
  color: var(--surface);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.15em;
}

/* 印のすぐ後ろの部位のアイコンは、左上の限界突破強化の「+」が印に重ならないよう、少し離す */
.help-marker + .part-icon {
  margin-left: 5px;
}

/*
 * 説明の文中に置く、選択中のスキルの見本: 装備の分のレベルの四角（.pip.fixed と同じ色）と、装備に付いているスキルの印
 * （.selected-fixed-mark と同じ形）
 */
.help-pip-sample {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 2px;
  background: var(--kind-weapon);
  vertical-align: -0.05em;
}

.help-weapon-mark {
  display: inline-grid;
  color: var(--kind-weapon);
  vertical-align: -0.2em;
}

/* 見本のタブ（シミュレーターの画面のタブと同じ形。見本の枠に収める） */
.help-example .sim-tabs {
  margin: 0;
  padding: 0;
}

/* マイセットの見出しの見本は、見本の部品の間隔（.help-stack）だけで並べる */
.help-example .my-sets-head {
  margin: 0;
}

/*
 * マイセットの「比較」「実現に必要な鑑定護石」の見本は、上の仕切りの線（my-sets.css）の位置が本物と同じになるよう、
 * 見本の部品の間隔（12px）と合わせて 33px 空ける
 */
.help-stack > .my-sets-compare,
.help-stack > .my-sets-charms {
  margin-top: 21px;
}

/* 印ごとの説明: 左に印と名前、右に説明 */
.help-keys {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.help-keys > div {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 2px 10px;
  align-items: baseline;
}

.help-keys dt {
  font-weight: 600;
}

.help-keys dd {
  margin: 0;
}

@media (max-width: 560px) {
  .help-keys > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* アイコンの一覧 */
.help-icon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 12px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.help-icon-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 名前の長い項目の一覧（限界突破強化の見本など） */
.help-icon-list.wide {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* 困ったとき（押すと答えが開く） */
.help-faq {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.help-faq summary {
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

.help-faq > :not(summary) {
  margin: 0 12px 10px;
}