/* 種詳細オーバーレイ（共有）。catalog.html（図鑑）と index.html（検出結果）の両方から link する。
   トークン var(--*) は各ページの :root から解決（index は catalog の superset）。
   js は web/js/species-detail.js。 */

/* ── 詳細（オーバーレイ）──────────────────────────── */
#detail {
  position: fixed; inset: 0; z-index: 12; background: var(--color-bg);
  overflow-y: auto; display: none;
  padding-bottom: calc(env(safe-area-inset-bottom) + 48px);
}
#detail.show { display: block; }
/* 本文(.d-body)と同じ max-width で中央寄せ。固定高さをやめ画像実比(115/90≈1.278・帯トリム済)に合わせ、
   広い画面でも全幅 cover による見切れを防ぐ。狭い画面では width<560 で従来どおり全幅。 */
.d-hero { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 115 / 90; overflow: hidden; background: var(--color-placeholder); }
.d-hero .blur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(28px); transform: scale(1.15); }
.d-hero img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
/* no-blur 切り抜き済（帯トリム済）はブラー無しで全面 cover。 */
.d-hero.nohblur img { object-fit: cover; }
.d-hero.ph { background-image: repeating-linear-gradient(45deg, var(--color-placeholder) 0 14px, var(--color-placeholder-stripe) 14px 28px); }
.d-back {
  position: absolute; top: calc(env(safe-area-inset-top) + 14px); left: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: var(--radius-pill); border: none;
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.d-back svg { width: 20px; height: 20px; }
.d-body { max-width: 560px; margin: 0 auto; padding: var(--space-lg) var(--space-lg) 0; }
.d-name { font-size: 28px; font-weight: 700; line-height: 1.35; margin: 0 0 var(--space-md); }
.nrow { display: flex; gap: var(--space-md); align-items: baseline; margin: 2px 0; }
.nrow .lbl { flex: 0 0 76px; font-size: 11px; color: var(--color-text-soft); }
.nrow .val { font-size: 15px; }
.nrow .val.sci { font-family: var(--font-sci); font-style: italic; color: var(--color-text-soft); }
.nrow .val.mono { font-family: var(--font-mono); color: var(--color-text-soft); }
.nrow .val.en { font-style: italic; color: var(--color-text-soft); }
.d-blurb { font-size: 15px; line-height: 1.9; margin: var(--space-lg) 0 0; }
.sec-label { font-size: 12px; color: var(--color-text-soft); letter-spacing: 1px; margin: var(--space-xl) 0 var(--space-sm); }
.linkrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  background: var(--color-surface); border-radius: var(--radius-md); padding: 13px var(--space-md);
  margin-bottom: var(--space-sm); text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-card);
}
.linkrow .lk-name { font-size: 15px; font-weight: 500; }
.linkrow .lk-note { font-size: 12px; color: var(--color-text-soft); }
.linkrow .chev { color: var(--color-text-soft); }
.hub-note { font-size: 12px; color: var(--color-text-soft); line-height: 1.7; margin: var(--space-md) 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  border: 1px solid var(--color-text-soft); background: transparent; color: var(--color-text);
  border-radius: var(--radius-pill); padding: 7px 14px; font-size: 14px; font-family: inherit; cursor: pointer;
}
.credit { font-size: 11px; color: var(--color-text-soft); margin: var(--space-xl) 0 0; line-height: 1.6; }