/* マイセットの欄（シミュレーターの画面の「マイセット」のタブ） */
/* ---- マイセット（「マイセット」のタブ） ---- */

/* タブや、検索条件などの列と同じ幅（.sim-tabs・.layout・.community と同じ）に置く */
.my-sets-area {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width: 1280px) {
  .my-sets-area {
    max-width: 1680px;
  }
}

/* 検索結果の「マイセットに保存済み」からタブを切り替えて移ったとき、見出しが画面の端に貼り付かないようにする */
.my-sets {
  scroll-margin-top: 16px;
}

/* 見出しと、その横の「実現に必要な鑑定護石を見る」（幅が足りないときは、リンクが見出しの下に回る） */
.my-sets-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 10px;
}

.my-sets-head h2 {
  margin: 0;
}

.my-sets-charms-link {
  font-size: 0.85rem;
  font-weight: 600;
}

.my-sets-count {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--muted);
}

/*
 * マイセットの欄の中の「比較」と「実現に必要な鑑定護石」は、上に仕切りの線を引いて、前の部分（一覧・比較）と分ける。
 * 線は、上の余白（33px）の真ん中に引く（線の上下に 16px ずつ空く）
 */
.my-sets-compare,
.my-sets-charms {
  position: relative;
  margin-top: 33px;
}

.my-sets-compare::before,
.my-sets-charms::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
}

/*
 * 「実現に必要な鑑定護石」の表（検索結果の上の表と同じ部品）は枠で囲んだ箱なので、線は枠の外に、枠と同じ幅で引く
 * （線の位置の基準が枠の内側なので、枠の太さの 1px だけずらす）。
 * 見出しの横のリンクで移ったときは、上の仕切りの線まで見えるようにする
 */
.my-sets-charms {
  scroll-margin-top: 33px;
}

.my-sets-charms::before {
  top: -18px;
  left: -1px;
  right: -1px;
}

.my-sets .form-message:empty {
  display: none;
}

/* 保存した構成の一覧。名前を 1 行に 1 つずつ並べ、構成の中身は「構成を表示する」で、名前の下に開く */
.my-set-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.my-set {
  min-width: 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  /* 「実現に必要な鑑定護石」の「構成を見る」で移ったとき、画面の端に貼り付かないようにする */
  scroll-margin-top: 16px;
}

.my-set:last-child {
  border-bottom: none;
}

/* 比較の表に出している構成 */
.my-set.comparing {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* 「実現に必要な鑑定護石」の「構成を見る」で開いた構成（少しのあいだ枠で囲む。一覧の枠で切れないよう内側に描く） */
.my-set.flash {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.my-set-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

/*
 * 並べ替えのつまみ（名前の行の左端。my-sets-panel.js の startDrag・moveByKey）。押したままドラッグすると一覧の中で動かせる。
 * 指で動かすときにページがスクロールしないよう、touch-action を止める
 */
.my-set-handle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 30px;
  margin-right: -4px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.my-set-handle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.my-set-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.grip-icon svg {
  display: block;
  width: 10px;
  height: 16px;
}

/* ドラッグして動かしている構成（一覧の枠で切れないよう、枠は内側に描く） */
.my-set.dragging {
  opacity: 0.8;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.my-set.dragging .my-set-handle {
  cursor: grabbing;
}

.my-set-compare {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

/* 名前の欄は、比較のチェック・削除の「×」と同じ行で、狭くまで縮める（右端の「構成を表示する」は、入らなければ次の行の右端へ） */
.my-set-name {
  flex: 1 1 8em;
  min-width: 0;
  max-width: 28em;
  font-weight: 600;
}

/*
 * 武器種のアイコン（results.css の .part-icon。武器種の図柄で、中の色はレア度）と札（.weapon-kind）のまとまり。
 * 比較の表の武器の行では 2 つを離れないように並べ、名前の行ではアイコンだけを入れる
 */
.my-set-weapon {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

/* 武器種の札（例: 太刀。build-view.js の weaponKindTag。比較の表の武器の行だけで使う） */
.weapon-kind {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/*
 * スマホの幅では、1 行目に並べ替えのつまみ・比較のチェック・名前・武器種のアイコン・削除の「×」、2 行目の左に「表示できません」（表示できない構成だけ）、
 * 右に「構成を表示する」を並べる（「×」が名前から離れて次の行に落ちないように）。
 * 2 行目はすべての列をまたぐ 1 つの領域にし、「表示できません」は左端、「構成を表示する」は右端に寄せる（最後の列を「×」の幅だけにするため）
 */
@media (max-width: 560px) {
  .my-set-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "handle compare name weapon delete"
      "second second second second second";
  }

  .my-set-handle {
    grid-area: handle;
  }

  .my-set-compare {
    grid-area: compare;
  }

  .my-set-name {
    grid-area: name;
    max-width: none;
  }

  .my-set-delete {
    grid-area: delete;
  }

  .my-set-weapon {
    grid-area: weapon;
  }

  .my-set-problem {
    grid-area: second;
    justify-self: start;
  }

  .my-set-toggle {
    grid-area: second;
    justify-self: end;
  }
}

/* いまのデータで表示できない構成（理由は「構成を表示する」で開いて見る） */
.my-set-problem {
  font-size: 0.8rem;
  color: var(--danger);
}

/* 「構成を表示する」「構成を隠す」。リンクと同じ見た目で、開閉の向きの印を付け、名前の行の右端に置く */
.my-set-toggle {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.my-set-toggle::after {
  content: " ▼";
  font-size: 0.7em;
}

.my-set-toggle[aria-expanded="true"]::after {
  content: " ▲";
}

.my-set-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.my-set-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.my-set-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* 持っていない鑑定護石を使う構成の印（検索結果の「実現に必要な護石」と同じ色） */
.my-set-note {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

/* 発動スキル・装備の表・耐性は、検索結果と同じ部品。構成の中では余白と区切りの線を除く */
.my-set .result-skills {
  padding: 0;
  border-top: none;
}

.my-set .parts {
  padding: 0;
}

.my-set .result-resist {
  margin: 0;
  padding: 0;
}

.my-set-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.my-sets-compare-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.my-sets-compare-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

/* 比較の表。構成が多い・画面が狭いときは横にスクロールする（左端の項目の列は動かさない） */
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.compare-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.compare-table th,
.compare-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  background: var(--surface-2);
  font-weight: 600;
}

.compare-table tbody th {
  font-weight: normal;
  white-space: nowrap;
}

.compare-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}

.compare-table thead th:first-child {
  background: var(--surface-2);
}

.compare-table td {
  min-width: 10em;
}

/* 武器の行の、名前の前の武器種のアイコンと札（.my-set-weapon。名前の行と同じまとまり）。まとまりのあとで改行し、名前は次の行に出す */
.compare-table .my-set-weapon {
  display: flex;
  width: fit-content;
  margin-bottom: 2px;
}

/* 装備・防御力と耐性などの区切りの行 */
.compare-table .compare-section th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

/* 検索した条件のスキル */
.compare-table th.required {
  font-weight: 700;
}

/* 項目の欄の、スキル・部位のアイコンと名前 */
.compare-skill,
.compare-part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* その行でいちばんよい値 */
.compare-table td.best {
  color: var(--ok);
  font-weight: 700;
}

/* 発動していないスキル（「—」） */
.compare-table td.none {
  color: var(--muted);
}