/* 検索結果（装備構成の表示は、マイセットと使い方のページの見本でも使う） */
/* ---- 検索結果 ---- */

/* 見出しと、その横の要約の 1 行目をそろえる（要約は何行にもなるので、中央ではなく文字の並びでそろえる） */
.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 12px;
}

.results-head h2 {
  margin: 0;
}

.result-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  flex: 1 1 200px;
}

.result-status.error {
  color: var(--danger);
}

/*
 * 検索の結果の要約（result-status.js）。1 行目に、印（✓・！）と件数（大きな数字）、検索した条件の札、かかった時間（右端）。
 * 条件をすべて満たせないときは、その下に理由と、代わりに出す構成の件数の札を並べる
 */
.result-summary {
  /* 見出しの横に 420px 取れない幅（スマホなど）では、見出しの下に全幅で出す */
  flex-basis: 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-main,
.status-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.status-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--ok);
  color: var(--surface);
  font-weight: 700;
  line-height: 1;
}

.status-mark::before {
  content: "✓";
}

.result-summary.near .status-mark {
  background: var(--needs-check);
}

.result-summary.none .status-mark {
  background: var(--danger);
}

.result-summary:is(.near, .none) .status-mark::before {
  content: "!";
}

.status-headline {
  color: var(--text);
  font-weight: 700;
}

.result-summary.found .status-headline {
  color: var(--ok);
}

.result-summary.near .status-headline {
  color: var(--needs-check);
}

.result-summary.none .status-headline {
  color: var(--danger);
}

.status-count {
  margin: 0 2px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

/* 検索した条件（下限など）や打ち切りの札 */
.status-chip {
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
}

.status-time {
  margin-left: auto;
  font-size: 0.8rem;
}

.status-reason,
.status-warning,
.status-note {
  margin: 0;
}

.status-reason {
  color: var(--text);
}

.status-warning {
  color: var(--danger);
}

.status-note {
  font-size: 0.8rem;
}

/* 補足の下のボタン（条件に近い構成を探さなかったときの「条件に近い構成を探す」）。要約の薄い文字の色を受け継がないようにする */
.status-actions .button {
  color: var(--text);
}

.status-counts-label,
.status-order {
  font-size: 0.8rem;
}

/* 代わりに出す構成の件数の札。良い知らせ（鑑定護石を手に入れれば条件をすべて満たせる）は緑で囲む */
.status-count-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

/* 数と「件」は離さない */
.status-count-value {
  margin-left: 6px;
  white-space: nowrap;
}

.status-count-chip .status-count {
  margin-left: 0;
  font-size: 1.2rem;
}

.status-count-chip.ok {
  border-color: var(--ok);
  color: var(--ok);
}

.status-count-of {
  margin-left: 4px;
  color: var(--muted);
  font-size: 0.8rem;
}

/*
 * 「トップに戻る」の並び（検索結果の欄のいちばん下）。「検索」ボタンの並びと同じ .actions で、検索結果の欄が画面にあるあいだは
 * 画面の下に留まる（buttons.css）。ボタンは中央に置く
 */
.results-actions {
  justify-content: center;
}

/* 押しやすいよう、「検索」ボタン（幅 861px 以上の並び。buttons.css）と同じく、幅 360px まで広げる */
.results-actions .back-to-top {
  flex: 0 1 360px;
}

.back-to-top span {
  margin-right: 4px;
}

progress {
  width: 100%;
  height: 8px;
  accent-color: var(--accent);
}

/* 並び順（第1〜第3優先）。説明の下に 3 つの選択欄を同じ幅で並べ、幅が足りなければ 2 つずつに折り返す */
.result-sort {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 4px 12px;
}

.result-sort > .field-label {
  grid-column: 1 / -1;
}

/* 条件に近い構成の、必須のスキルのチェック欄とレベルの選択欄 */
.suggest-must {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 「必須のスキルを設定」の見出し */
.suggest-must-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.suggest-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.suggest-skill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.85rem;
}

.suggest-skill label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* レベルの選択欄は小さく。必須にしていないスキルでは選べない（薄く出す） */
.suggest-skill select {
  min-height: 0;
  padding: 0 2px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.suggest-skill select:disabled {
  opacity: 0.5;
}

/* 必須にしたスキルは、アクセントの色で強調する */
.suggest-skill:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* 「すべてチェック」「チェックをすべて外す」。押しても変わらないとき（すべてチェック済み・チェックなし）は押せない */
.suggest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-self: flex-start;
}

.suggest-note {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--muted);
}

.sort-field {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.sort-field select {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}

/*
 * 検索結果の枠。高さに上限を付けて中をスクロールして見る（件数が多くても、画面が縦に長くならないように）。
 * 高さは画面の高さの 75%（スマホは、アドレスバーなどが出ているときの画面の高さで測る）。結果がないときは枠ごと隠す
 */
.result-scroll {
  max-height: 75vh;
  max-height: 75svh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.result-scroll:has(.result-list:empty) {
  display: none;
}

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

/*
 * 検索結果のカードは、全幅の枠の中に、1 枚が 460px 以上になる数だけ横に並べる（PC の幅で 2〜3 列。狭い画面では 1 列）。
 * 1 枚の幅はどの画面でもだいたい同じ（460〜600px）で、広い画面ほど列が増える。
 * カードの高さは構成ごとに違うので、行の中で上にそろえる
 */
.result-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  align-items: start;
  gap: 12px;
}

.result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.result-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  padding: 8px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.result-no {
  font-weight: 700;
  color: var(--accent);
}

/* 会心率・防御力 */
.result-stat {
  font-weight: 600;
}

/*
 * スキルの効果で上がった能力値（検索結果・マイセット）。オプションの「スキルの効果を加味する」のときだけ出る。
 * マウスを乗せると、上げたスキルと装備だけの値が出るので、点線の下線で知らせる
 */
.stat-boosted {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* 会心率の（最大 ○%）。発動条件のあるスキルがすべて発動したときの値なので、常に発動する分より控えめに出す */
.stat-max {
  font-weight: 400;
}

.result-free {
  color: var(--muted);
}

/* 条件に近い構成の、不足している Lv の合計（持っていない護石があれば満たせる構成は、良い知らせなのでアクセントの色） */
.result-deficit {
  font-weight: 600;
  color: var(--danger);
}

.result-deficit.needed {
  color: var(--accent);
}

.parts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0 12px;
  padding: 6px 14px;
}

.part-label,
.part-name,
.part-slots {
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}

.parts > :nth-last-child(-n + 3) {
  border-bottom: none;
}

.part-label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/*
 * 部位のアイコン。装備名が 2 行になってもアイコンは 1 行目の横に来るようにする。
 * 防具・護石の図柄は部品が細かいので、レア度の色が見えやすいよう、文字の 1 行分より少し大きくする（ユーザーの指示）。
 * レア度のあるものは濃いグレーの下地に黒い線で描いて内側をレア度の色で塗り、マイ護石などレア度のないものは枠線だけにする
 */
.part-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/*
 * 防具を限界突破強化した状態の「+」。部位のアイコンの左上の角に、背景なしのピンクの文字だけで重ねる。
 * 見落とさないよう、文字より少し大きくする（ユーザーの指示）。太字だけでは線が細く見えるので、文字と同じ色の縁取りで少し太くする
 */
.part-plus {
  position: absolute;
  top: -0.6em;
  left: -0.42em;
  color: var(--transcend-plus);
  font-size: 1.6em;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 0.05em currentColor;
  pointer-events: none;
}

/* 部位のアイコンを、防具の限界突破強化の切り替えボタンにするとき（押すと「+」が付いたり外れたりする） */
.transcend-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.transcend-toggle:hover .part-icon {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

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

/* 図柄は四角の内側いっぱいに描く（枠との間は 1px だけ空ける） */
.part-icon svg {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}

.part-icon.rarity {
  border-color: var(--rarity-bg);
  background: var(--rarity-bg);
}

/* 内側をレア度の色で塗り、線は黒 */
.part-icon.rarity svg {
  fill: currentColor;
  stroke: var(--rarity-line);
}

/*
 * 武器種・防具・護石のアイコン（icons.js の WEAPON_KIND_ICONS・ARMOR_ICONS・CHARM_ICON）の部品。塗る形（.wk-fill）は上のとおりで、
 * 塗らない黒い線・黒い穴・影（盾の右半分など）と、縁取りのある線（黒い太線の上にレア度の色の細線）を描き分ける
 */
.part-icon.rarity svg .wk-line,
.part-icon.rarity svg .wk-band-under {
  fill: none;
}

.part-icon.rarity svg .wk-hole {
  fill: var(--rarity-line);
}

.part-icon.rarity svg .wk-shade {
  fill: var(--rarity-line);
  fill-opacity: 0.28;
  stroke: none;
}

.part-icon.rarity svg .wk-band-over {
  fill: none;
  stroke: currentColor;
}

/*
 * レア度のないとき（比較の表の項目の欄など）の、武器種・防具の図柄。枠だけの記号の図柄に合わせて、文字の色の線で描き、
 * 内側は地の色で塗る（穴は文字の色で塗る。影は描かない。縁取りのある線は、文字の色の太線の上に地の色の細線）
 */
.part-icon:not(.rarity) svg .wk-fill {
  fill: var(--surface);
  stroke: currentColor;
}

.part-icon:not(.rarity) svg .wk-line,
.part-icon:not(.rarity) svg .wk-band-under {
  fill: none;
  stroke: currentColor;
}

.part-icon:not(.rarity) svg .wk-hole {
  fill: currentColor;
  stroke: currentColor;
}

.part-icon:not(.rarity) svg .wk-shade {
  display: none;
}

.part-icon:not(.rarity) svg .wk-band-over {
  fill: none;
  stroke: var(--surface);
}

.part-icon.rarity-1 { color: var(--rarity-1); }
.part-icon.rarity-2 { color: var(--rarity-2); }
.part-icon.rarity-3 { color: var(--rarity-3); }
.part-icon.rarity-4 { color: var(--rarity-4); }
.part-icon.rarity-5 { color: var(--rarity-5); }
.part-icon.rarity-6 { color: var(--rarity-6); }
.part-icon.rarity-7 { color: var(--rarity-7); }
.part-icon.rarity-8 { color: var(--rarity-8); }

.part-name {
  overflow-wrap: anywhere;
}

.part-alt {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}

/* 防具名の下に並べる、その防具のスキル。検索した条件のスキルは強調する */
.part-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 2px;
  font-size: 0.75rem;
}

.part-skill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
}

.part-skill.required {
  color: var(--text);
  font-weight: 600;
}

.part-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: start;
}

.slot {
  font-size: 0.8rem;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}

.slot.empty {
  color: var(--muted);
  border-style: dashed;
  background: transparent;
}

@media (max-width: 560px) {
  .parts {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .part-slots {
    grid-column: 2;
    padding-top: 0;
  }

  /* 狭い画面ではスロットを名前の下に回すので、区切り線はスロットの行にだけ引く */
  .part-label,
  .part-name {
    border-bottom: none;
  }
}

.result-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.skill-chip.required {
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}

/* 条件に近い構成で、条件のレベルに届いていないスキル */
.skill-chip.required.short {
  border-color: var(--danger);
  border-style: dashed;
}

/* 条件に近い構成の「足りないスキル」の行 */
.result-shortfall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

.shortfall-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--danger);
}

.shortfall-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  padding: 1px 8px;
  border: 1px solid var(--danger);
  border-radius: 999px;
}

/* 持っていない鑑定護石を使う構成の「実現に必要な護石」 */
.needed-charm-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

.needed-charm {
  font-size: 0.85rem;
  font-weight: 600;
}

.needed-charm-note {
  flex: 1 1 100%;
  font-size: 0.75rem;
  color: var(--muted);
}

/*
 * 検索結果の上の「実現に必要な鑑定護石」の表（条件をすべて満たせず、持っていない鑑定護石があれば満たせる構成があるとき）。
 * 良い知らせなので、構成の「実現に必要な護石」と同じアクセントの色で囲む。護石が多いときは、枠の中でスクロールする
 */
.needed-charms {
  flex: 1 1 100%;
  /* 表の幅で結果の列を押し広げない（収まらないときは、表の枠の中で横にスクロールする） */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
}

.needed-charms h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--accent);
}

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

.needed-charms .field-note {
  margin: 0;
}

.needed-charms-scroll {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

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

.needed-charms-table th,
.needed-charms-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.needed-charms-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.needed-charms-table tbody th {
  font-weight: 600;
}

/* 護石の名前と、その前のレア度の色の護石のアイコン（名前が 2 行になっても、アイコンは名前の横の中央） */
.needed-charms-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 名前・レア度・スキル 1 つ・スロットの並びは、途中で折り返さない */
.needed-charms-table .nowrap {
  white-space: nowrap;
}

.needed-charms-table tbody tr:last-child > * {
  border-bottom: none;
}

/* 「構成を見る」と「護石チェッカー」。幅が足りないときは縦に並ぶ */
.needed-charms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.needed-charms-actions .button {
  min-height: 26px;
  padding: 0 6px;
  white-space: nowrap;
}

/* スマホの幅では、表の行をカードのように積む（列の見出しの代わりに、値の前に見出しを出す） */
@media (max-width: 560px) {
  .needed-charms-scroll {
    max-height: 340px;
  }

  .needed-charms-table,
  .needed-charms-table tbody {
    display: block;
  }

  .needed-charms-table thead {
    display: none;
  }

  .needed-charms-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }

  .needed-charms-table tbody tr:last-child {
    border-bottom: none;
  }

  .needed-charms-table th,
  .needed-charms-table td {
    padding: 0;
    border-bottom: none;
  }

  .needed-charms-table tbody th,
  .needed-charms-table .needed-charms-action-cell {
    flex: 1 1 100%;
  }

  .needed-charms-table .needed-charms-action-cell {
    margin-top: 4px;
  }

  .needed-charms-table td[data-label]::before {
    content: attr(data-label);
    margin-right: 4px;
    font-size: 0.75rem;
    color: var(--muted);
  }
}

/* 「実現に必要な鑑定護石」の「構成を見る」で移った構成（少しのあいだ枠で囲む） */
.result.flash {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.result-resist {
  padding: 0 14px 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.more {
  display: block;
  margin: 12px auto 0;
}

.app-footer {
  padding: 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

.app-footer p {
  margin: 2px 0;
}