/*
 * お手スピ計算（図鑑）の見た目。色は各ページの:root(--navy/--paper/--line/--ink等)に依存する。
 */
.bs-tool{ padding:12px 0 0; }
.bs-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
}
.bs-card h2{
  font-size:.85rem;
  margin:0 0 10px;
  color:var(--navy);
}
.bs-note{
  font-size:.7rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 10px;
}
.bs-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:flex-end;
  margin-bottom:10px;
}
.bs-row:last-child{ margin-bottom:0; }
.bs-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.bs-field > label{
  font-size:.68rem;
  font-weight:700;
  color:var(--ink-soft);
}
.bs-time-inputs{
  display:flex;
  align-items:center;
  gap:4px;
}
.bs-tool input[type="number"],
.bs-tool select{
  font-family:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 8px;
}
.bs-tool input[type="number"]{ width:64px; text-align:right; }
.bs-unit{ font-size:.72rem; color:var(--ink-soft); }
.bs-checks{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.bs-check{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.74rem;
  color:var(--ink);
  cursor:pointer;
}
.bs-check input{ accent-color:var(--navy); }

/* 結果 */
.bs-result-card{
  background:var(--selected-bg);
  color:var(--selected-ink);
  border:none;
}
.bs-result-card h2{ color:var(--selected-ink); opacity:.75; }
.bs-result{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.01em;
}
.bs-detail{
  font-size:.66rem;
  opacity:.7;
  margin-top:6px;
  line-height:1.6;
  word-break:break-all;
}

/* 近い基準値のポケモン */
.bs-nearest-title{
  font-size:.7rem;
  font-weight:700;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.bs-nearest-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bs-nearest-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  border-radius:8px;
  background:var(--paper-dim);
}
/* 差が1秒以内なら、その基準値である可能性が高いので目立たせる */
.bs-nearest-item.is-hit{
  background:rgba(246,203,90,.18);
  outline:1px solid var(--moon);
}
.bs-nearest-item img{
  width:28px;height:28px;
  object-fit:contain;
  flex:none;
}
.bs-nearest-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.bs-nearest-name{
  font-size:.74rem;
  font-weight:700;
  color:var(--ink);
}
.bs-nearest-val{
  font-size:.66rem;
  color:var(--ink-soft);
}