/* Pokémon Sun & Moon: Battle Tree Trainer and Pokémon browser (battle-tree.js).
   Loaded only on the page whose body contains h2#battle-tree-db. Reuses theme.css tokens, type chips (.sm-type, .t-*),
   .sm-band and .sm-dex-field / .sm-dex-guide. */
.sm-bt { --bt-ink: #252d42; --bt-frame: #0b0f1d; --bt-gold: #ffcd3f; position: relative; max-width: 1680px; margin: 0 auto; padding: 18px 20px 22px; border: 4px solid var(--bt-frame); border-radius: 28px; background: radial-gradient(120% 90% at 85% 0%, rgba(255, 205, 63, .22), transparent 55%), linear-gradient(160deg, #134a3c 0%, #123447 55%, #1a2444 100%); box-shadow: 0 0 0 3px #060911, 0 30px 60px -30px rgba(0, 0, 0, .8); color: #ffffff; }
.sm-bt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.sm-bt-title h1 { margin: 0; color: #ffffff; font-family: var(--sm-display); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 #08261f, 0 0 14px rgba(0, 0, 0, .35); }
.sm-bt .sm-dex-guide span { color: #d8efe6; text-shadow: none; }
.sm-bt-status { margin: 14px 0 0; color: #d8efe6; font-weight: 800; }

.sm-bt-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; margin: 16px 0 14px; }
.sm-bt-barlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sm-bt-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-bt-tab { min-width: 44px; padding: 8px 13px; border: 3px solid var(--bt-frame); border-radius: 12px 12px 12px 4px; background: #fdfcf9; color: var(--bt-ink); font: inherit; font-size: .88rem; font-weight: 900; font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.sm-bt-tab[aria-pressed="true"] { background: var(--bt-gold); color: #3a2a00; }
.sm-bt-tab[data-filter="guest"], .sm-bt-tab[data-filter="legend"] { background: #e7ecf4; }
.sm-bt-tab[data-filter="guest"][aria-pressed="true"], .sm-bt-tab[data-filter="legend"][aria-pressed="true"] { background: #ff5544; color: #ffffff; }
.sm-bt-tab:focus-visible, .sm-bt-row:focus-visible, .sm-bt-views button:focus-visible { outline: 3px solid var(--bt-gold); outline-offset: 2px; }
.sm-bt-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; border: 3px solid var(--bt-frame); border-radius: 16px; background: rgba(253, 252, 249, .96); color: var(--bt-ink); font-size: .86rem; }
.sm-bt-tools .sm-dex-field input[type="search"] { width: 230px; }
.sm-bt-views { display: flex; padding: 3px; border-radius: 12px; background: #e5ecf3; }
.sm-bt-views button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--bt-ink); font: inherit; font-weight: 900; cursor: pointer; }
.sm-bt-views button[aria-pressed="true"] { background: var(--bt-ink); color: #ffffff; }

.sm-bt-body { --bt-h: min(calc(100vh - 100px), 980px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 20px; align-items: start; }
.sm-bt-listbox { max-height: var(--bt-h); overflow-y: auto; padding: 4px 10px 16px 2px; scrollbar-color: var(--bt-gold) rgba(0, 0, 0, .2); }
.sm-bt-count { margin: 0 0 8px; color: #d8efe6; font-size: .85rem; font-weight: 900; }
.sm-bt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.sm-bt-item { margin: 0; }
.sm-bt-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 7px 12px; border: 3px solid var(--bt-frame); border-radius: 14px; background: #fdfcf9; color: var(--bt-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); transition: transform .12s ease; }
.sm-bt-row:hover { transform: translateY(-1px); }
.sm-bt-row[aria-current] { background: #fff4cc; box-shadow: 0 0 0 3px var(--bt-gold), 0 3px 0 rgba(0, 0, 0, .3); }
.sm-bt-rowtext { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.sm-bt-rowtext small { color: #697186; font-size: .72rem; font-weight: 900; }
.sm-bt-rowtext strong { overflow: hidden; font-size: .98rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.sm-bt-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 58%; }
.sm-bt-chip { padding: 1px 7px; border-radius: 99px; background: #e5ecf3; color: #3d4559; font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-bt-chip[data-kind="n"] { background: transparent; color: #697186; }
.sm-bt-chip[data-kind="legend"] { background: #ff5544; color: #ffffff; }
.sm-bt-chip[data-kind="guest"] { background: #2b3a63; color: #ffffff; }
.sm-bt-chip[data-kind="sun"] { background: var(--sm-sun); color: #ffffff; }
.sm-bt-chip[data-kind="moon"] { background: var(--sm-moon); color: #ffffff; }
.sm-bt-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sm-bt-portrait { flex: none; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(180deg, #cfe6f3, #e9eef4); object-fit: cover; }
.sm-bt-plate .sm-bt-portrait { width: 64px; height: 64px; align-self: center; border: 2px solid #ffffff; }
.sm-bt-icon { flex: none; width: 40px; height: 40px; object-fit: contain; }
.sm-bt-noicon { display: grid; place-items: center; width: 34px; height: 34px; margin: 3px; border-radius: 50%; color: #ffffff; font-family: var(--sm-display); font-size: 1rem; font-weight: 900; }
.sm-bt-empty { padding: 20px; color: #ffffff; font-weight: 900; text-align: center; }

.sm-bt-detail { position: sticky; top: 84px; max-height: var(--bt-h); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; border: 4px solid var(--bt-frame); border-radius: 22px; background: #e9eef4; box-shadow: 0 0 0 3px #060911; color: var(--bt-ink); }
.sm-bt-idle { display: grid; justify-items: center; gap: 8px; padding: 44px 24px; text-align: center; }
.sm-bt-idle p { margin: 0; color: #4a5368; font-weight: 800; }
.sm-bt-idle .sm-bt-idle-big { color: var(--bt-ink); font-family: var(--sm-display); font-size: 1.35rem; font-weight: 900; }
.sm-bt-idle a { margin-top: 6px; color: var(--sm-accent-deep); font-weight: 900; }
.sm-bt-plate { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 16px 9px; background: #134a3c; color: #ffffff; }
.sm-bt-plate span { color: #bfe6d6; font-size: .8rem; font-weight: 900; }
.sm-bt-plate h3 { flex: 1; margin: 0; color: #ffffff; font-family: var(--sm-display); font-size: 1.4rem; font-weight: 900; line-height: 1.15; }
.sm-bt-close { display: none; height: 32px; padding: 0 12px; border: 2px solid #ffffff; border-radius: 10px; background: transparent; color: #ffffff; font: inherit; font-weight: 900; cursor: pointer; }
.sm-bt-inner { display: grid; gap: 10px; padding: 12px; }
.sm-bt-quote { margin: 0; padding: 10px 14px; border-left: 4px solid var(--bt-gold); border-radius: 10px; background: #fdfcf9; color: #3d4559; font-style: italic; font-weight: 700; }
.sm-bt-base, .sm-bt-hitnote { margin: 0; color: #4a5368; font-size: .85rem; font-weight: 800; }
.sm-bt-hitnote { color: #8a5a00; }
.sm-bt-facts { display: grid; gap: 0; margin: 0; font-size: .86rem; line-height: 1.4; }
.sm-bt-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-top: 1px dashed #d9e1ea; }
.sm-bt-facts > div:first-child { border-top: 0; }
.sm-bt-facts dt { color: #697186; font-weight: 900; }
.sm-bt-facts dd { margin: 0; font-weight: 700; }
.sm-bt-tfacts { padding: 8px 14px; border-radius: 12px; background: #fdfcf9; }
.sm-bt-set { padding: 10px 12px 12px; border: 3px solid var(--bt-frame); border-radius: 14px; background: #fdfcf9; scroll-margin-top: 60px; }
.sm-bt-set.is-hit { box-shadow: 0 0 0 3px var(--bt-gold); }
.sm-bt-sethead { display: flex; align-items: center; gap: 8px; }
.sm-bt-sethead .sm-bt-icon { width: 48px; height: 48px; }
.sm-bt-sethead .sm-bt-noicon { width: 40px; height: 40px; margin: 4px; }
.sm-bt-settitle { flex: 1; min-width: 0; }
.sm-bt-settitle h4 { margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.2; }
.sm-bt-settitle h4 a { color: var(--bt-ink); text-decoration: none; }
.sm-bt-settitle h4 a:hover { text-decoration: underline; }
.sm-bt-setno { flex: none; color: #8a93a6; font-size: .72rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.sm-bt-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 8px 0; padding: 0; list-style: none; }
.sm-bt-move { overflow: hidden; padding: 3px 9px; border-radius: 8px; color: #ffffff; font-size: .8rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
/* type colors come from theme.css .t-*; keep their dark text on the light types */
.sm-bt-move.t-electric, .sm-bt-noicon.t-electric { color: #3d3100; } .sm-bt-move.t-ground, .sm-bt-noicon.t-ground { color: #3d2e08; }
.sm-bt-move.t-steel, .sm-bt-noicon.t-steel { color: #2b3443; }
.sm-bt-users { margin: 8px 0 0; padding-top: 6px; border-top: 1px dashed #d9e1ea; font-size: .82rem; font-weight: 700; line-height: 1.5; }
.sm-bt-users span { color: #697186; font-weight: 900; }
.sm-bt-users a { color: var(--sm-accent-deep); }

.sm-bt-calc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 14px; padding: 10px 12px; border: 3px solid var(--bt-frame); border-radius: 16px; background: rgba(253, 252, 249, .96); color: var(--bt-ink); font-size: .86rem; }
.sm-bt-calc-h { width: 100%; margin: 0; font-size: 1rem; font-weight: 900; }
.sm-bt-calc input[type="number"] { width: 90px; }
.sm-bt-calc-out { flex: 1 1 260px; margin: 0; font-weight: 800; }
.sm-bt-calc-out strong { margin-right: 4px; font-family: var(--sm-display); font-size: 1.3rem; }

.sm-bt-more { display: grid; gap: 10px; }
.sm-bt-more summary { padding: 8px 12px; border-radius: 10px; background: #fdfcf9; color: #4a5368; font-size: .85rem; font-weight: 900; cursor: pointer; }
.sm-bt-more[open] summary { margin-bottom: 0; }
.sm-bt-more > .sm-bt-set { opacity: .8; }

/* No-JavaScript Trainer list below the band */
.sm-bt-index table { font-size: .9rem; }

@media (max-width: 960px) {
  .sm-bt-body { grid-template-columns: minmax(0, 1fr); }
  .sm-bt-listbox { max-height: none; overflow: visible; }
  .sm-bt-detail { position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 86vh; border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .25s ease; }
  body.sm-sheet-open .sm-bt-detail { transform: none; }
  .sm-bt-close { display: block; }
  .sm-bt-idle { display: none; }
}
@media (max-width: 560px) {
  .sm-bt { padding: 12px 10px 16px; border-radius: 20px; }
  .sm-bt-list { grid-template-columns: minmax(0, 1fr); }
  .sm-bt-tools { width: 100%; }
  .sm-bt-tools .sm-dex-field { flex: 1 1 140px; }
  .sm-bt-tools .sm-dex-field input[type="search"], .sm-bt-tools .sm-dex-field select { width: 100%; }
  .sm-bt-tab { padding: 6px 9px; font-size: .8rem; }
  .sm-bt-moves { grid-template-columns: minmax(0, 1fr); }
  .sm-bt-chips { max-width: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-bt-row, .sm-bt-detail { transition: none; }
}