/* Pokémon Sun & Moon: Z-Move tool (z-moves.js). Loaded only on the page whose body contains h2#zm-tool.
   Reuses theme.css tokens, .sm-band, .sm-dex-guide and type chips (.sm-type, .t-*). */
.sm-zm { --zm-ink: #252d42; --zm-frame: #0b0f1d; --zm-gold: #ffcd3f; --zm-hot: #ff7a2f; max-width: 1400px; margin: 0 auto; padding: 18px 20px 22px; border: 4px solid var(--zm-frame); border-radius: 28px; background: radial-gradient(80% 70% at 100% 0%, rgba(255, 205, 63, .35), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(255, 122, 47, .3), transparent 60%), linear-gradient(160deg, #2a1a08 0%, #3d2410 50%, #1d2440 100%); box-shadow: 0 0 0 3px #060911, 0 30px 60px -30px rgba(0, 0, 0, .8); color: #ffffff; }
.sm-zm-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 #1a0d00; }
.sm-zm .sm-dex-guide span { color: #ffe6b8; }
.sm-zm-status { margin: 14px 0 0; color: #ffe6b8; font-weight: 800; }

.sm-zm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.sm-zm-tab { padding: 8px 16px; border: 3px solid var(--zm-frame); border-radius: 99px; background: rgba(255, 255, 255, .12); color: #ffffff; font: inherit; font-weight: 900; cursor: pointer; }
.sm-zm-tab[aria-selected="true"] { background: var(--zm-gold); color: #2a1a00; }
.sm-zm-tab:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.sm-zm-pane { padding: 16px; border: 3px solid var(--zm-frame); border-radius: 20px; background: #fdfcf9; color: var(--zm-ink); }

.sm-zm-field { display: grid; gap: 4px; margin: 0 0 10px; font-size: .82rem; font-weight: 900; }
.sm-zm-field > input, .sm-zm-field > select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 2px solid #c8cfdc; border-radius: 10px; background: #ffffff; color: var(--zm-ink); font: inherit; font-size: 1rem; font-weight: 700; }
.sm-zm-field select:disabled { background: #eef0f4; }
.sm-zm-hint, .sm-zm-lede { margin: 6px 0 0; color: #5a6380; font-size: .88rem; }
.sm-zm-lede { margin: 0 0 12px; }
.sm-zm-link { padding: 0; border: 0; background: none; color: #1b5fc1; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

.sm-zm-card:empty { display: none; }
.sm-zm-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.6fr); align-items: start; gap: 12px; margin: 8px 0; }
.sm-zm-from, .sm-zm-to { padding: 12px 14px; border: 2px solid #e3e7ef; border-radius: 14px; }
.sm-zm-to { border-color: var(--zm-gold); background: #fff8e0; }
.sm-zm-from strong, .sm-zm-to strong { display: block; font-size: 1.2rem; font-weight: 900; }
.sm-zm-arrow { align-self: center; color: var(--zm-hot); font-size: 1.8rem; font-weight: 900; }
.sm-zm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; color: #4a5370; font-size: .85rem; font-weight: 800; }
.sm-zm-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: .88rem; }
.sm-zm-dl dt { font-weight: 900; }
.sm-zm-dl dd { margin: 0; }
.sm-zm-dl a, .sm-zm-how a { color: #1b5fc1; font-weight: 800; }
.sm-zm-exc { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--zm-hot); border-radius: 6px; background: #fff1e6; font-size: .9rem; }
.sm-zm-exc.is-dead { border-color: #9aa1b5; background: #f0f1f5; }
.sm-zm-empty { margin: 8px 0; color: #a3341a; font-weight: 800; }

.sm-zm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.sm-zm-moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; }
.sm-zm-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 4px 0 12px; font-size: .88rem; font-weight: 700; }
.sm-zm-pp { font-size: .78rem; font-weight: 700; color: #5a6380; }
.sm-zm-pp input, .sm-zm-check input { accent-color: var(--zm-hot); }
.sm-zm-verdict { padding: 12px 14px; border-radius: 14px; background: #f3f4f8; }
.sm-zm-answer { margin: 0; font-size: 1.15rem; font-weight: 900; }
.sm-zm-answer.is-good { color: #1f7a45; }
.sm-zm-answer.is-bad { color: #b0321a; }
.sm-zm-block, .sm-zm-results { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
.sm-zm-block li { color: #8a2a14; font-weight: 700; }
.sm-zm-results li.is-on { color: #1f7a45; font-weight: 800; }
.sm-zm-results li.is-off { color: #5a6380; }
.sm-zm-tip { margin: 8px 0 0; font-size: .9rem; font-weight: 700; }

.sm-zm-count { margin: 0 0 12px; font-weight: 900; }
.sm-zm-isles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sm-zm-isle h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 900; }
.sm-zm-isle ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sm-zm-wide { margin-top: 14px; }
.sm-zm-wide ul { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sm-zm-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border: 2px solid #e3e7ef; border-radius: 12px; }
.sm-zm-item input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #2f9e5a; }
.sm-zm-item:has(input:checked) { border-color: #2f9e5a; background: #effaf2; }
.sm-zm-item.is-dead { opacity: .7; background: #f3f4f8; }
.sm-zm-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.sm-zm-who { color: #5a6380; font-size: .78rem; font-weight: 800; }
.sm-zm-dead { padding: 1px 8px; border-radius: 99px; background: #5a6380; color: #ffffff; font-size: .7rem; font-weight: 900; }
.sm-zm-how { margin: 2px 0 0; color: #4a5370; font-size: .84rem; }

@media (max-width: 760px) {
  .sm-zm-flow { grid-template-columns: 1fr; }
  .sm-zm-arrow { transform: rotate(90deg); justify-self: center; }
  .sm-zm-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-zm-grid, .sm-zm-flags { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sm-zm { padding: 14px 12px 16px; border-radius: 20px; }
  .sm-zm-pane { padding: 12px; }
}