/* Pokémon Sun & Moon: island challenge tracker (trials.js). Loaded only on the page whose body contains h2#trial-tracker.
   Reuses theme.css tokens, .sm-band, .sm-version, .sm-dex-guide and type chips (.sm-type, .t-*). */
.sm-tr { --tr-ink: #25304a; --tr-frame: #10182c; --tr-gold: #ffcd3f; --tr-sea: #2bb3c9; max-width: 1400px; margin: 0 auto; padding: 18px 20px 22px; border: 4px solid var(--tr-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(43, 179, 201, .35), transparent 60%), linear-gradient(160deg, #0f4d6b 0%, #146a7d 50%, #1d4a3c 100%); box-shadow: 0 0 0 3px #060911, 0 30px 60px -30px rgba(0, 0, 0, .8); color: #ffffff; }
.sm-tr-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 #062a36, 0 0 14px rgba(0, 0, 0, .35); }
.sm-tr .sm-dex-guide span { color: #d5f3f7; }
.sm-tr-status { margin: 14px 0 0; color: #d5f3f7; font-weight: 800; }

.sm-tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 16px 0 10px; }
.sm-tr-progress { flex: 1 1 300px; min-width: 0; }
.sm-tr-count { margin: 0 0 6px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sm-tr-bar { height: 12px; border: 2px solid var(--tr-frame); border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.sm-tr-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--tr-sea), var(--tr-gold)); transition: width .25s ease; }
.sm-tr-obey { margin: 6px 0 0; color: #d5f3f7; font-size: .85rem; font-weight: 800; }
.sm-tr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sm-tr-ultra { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 800; cursor: pointer; }
.sm-tr-ultra input { width: 18px; height: 18px; accent-color: var(--tr-gold); }

.sm-tr-picker { margin: 0 0 14px; padding: 10px 14px; border: 3px solid var(--tr-frame); border-radius: 16px; background: rgba(253, 252, 249, .97); color: var(--tr-ink); }
.sm-tr-picker summary { font-weight: 900; cursor: pointer; }
.sm-tr-typegrid { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.sm-tr-typegrid button { border: 2px solid transparent; cursor: pointer; opacity: .45; font: inherit; font-size: .8rem; }
.sm-tr-typegrid button[aria-pressed="true"] { border-color: var(--tr-frame); opacity: 1; }
.sm-tr-typegrid button:focus-visible { outline: 3px solid var(--tr-gold); outline-offset: 2px; }
.sm-tr-note { margin: 4px 0 0; color: #5f6a85; font-size: .78rem; }

.sm-tr-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 20px; align-items: start; }
.sm-tr-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sm-tr-island { margin: 8px 0 0; color: var(--tr-gold); font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sm-tr-island:first-child { margin-top: 0; }
.sm-tr-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; padding: 6px 10px; border: 3px solid var(--tr-frame); border-radius: 16px; background: #fdfcf9; color: var(--tr-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.sm-tr-step.is-grand { background: #fff7e0; }
.sm-tr-step.is-done { background: #e6f6ec; }
.sm-tr-step.is-done .sm-tr-art { filter: grayscale(.6); opacity: .7; }
.sm-tr-step.is-next { box-shadow: 0 0 0 3px var(--tr-gold), 0 3px 0 rgba(0, 0, 0, .3); }
.sm-tr-step.is-open { outline: 3px solid var(--tr-sea); outline-offset: 1px; }
.sm-tr-ghost { display: block; border-style: dashed; background: rgba(253, 252, 249, .8); }
.sm-tr-tick { width: 32px; height: 32px; padding: 0; border: 3px solid var(--tr-frame); border-radius: 50%; background: #ffffff; cursor: pointer; }
.sm-tr-tick[aria-pressed="true"] { background: #2f9e5a; }
.sm-tr-tick[aria-pressed="true"]::after { content: "✓"; color: #ffffff; font-weight: 900; }
.sm-tr-tick:focus-visible, .sm-tr-open:focus-visible, .sm-tr-clear:focus-visible { outline: 3px solid var(--tr-sea); outline-offset: 2px; }
.sm-tr-open { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sm-tr-art { width: 56px; height: 56px; object-fit: contain; }
.sm-tr-info { display: grid; gap: 2px; min-width: 0; }
.sm-tr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 1.02rem; font-weight: 900; }
.sm-tr-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--tr-ink); color: #ffffff; font-size: .75rem; }
.sm-tr-tag { padding: 1px 8px; border-radius: 99px; background: var(--tr-gold); color: #3a2a00; font-size: .7rem; font-weight: 900; }
.sm-tr-tag.is-next { background: var(--tr-sea); color: #ffffff; }
.sm-tr-meta { color: #4a5370; font-size: .85rem; font-weight: 700; }
.sm-tr-z { color: #8a5a00; font-size: .8rem; font-weight: 900; }
.sm-tr-uswap { color: #a2306a; font-size: .8rem; font-weight: 800; }
.sm-tr-uswap::before { content: "Ultra: "; font-weight: 900; }
.sm-tr-ghost .sm-tr-uswap::before { content: none; }

.sm-tr-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 14px 16px; border: 3px solid var(--tr-frame); border-radius: 18px; background: rgba(253, 252, 249, .98); color: var(--tr-ink); }
.sm-tr-panel h3 { margin: 0; font-size: 1.25rem; font-weight: 900; }
.sm-tr-panel h4 { margin: 12px 0 6px; font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #5f6a85; }
.sm-tr-kicker { margin: 0 0 2px; color: #5f6a85; font-size: .8rem; font-weight: 800; }
.sm-tr-where, .sm-tr-link { display: inline-block; margin-top: 4px; color: #1b5fc1; font-size: .88rem; font-weight: 800; }
.sm-tr-mon { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid #e3e7ef; }
.sm-tr-mon .sm-tr-art { width: 64px; height: 64px; }
.sm-tr-mon-body { min-width: 0; }
.sm-tr-mon-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.sm-tr-mon-name span { color: #4a5370; font-size: .85rem; font-weight: 800; }
.sm-tr-role { padding: 0 6px; border-radius: 99px; background: #e3e7ef; font-size: .7rem !important; }
.sm-tr-types, .sm-tr-weak, .sm-tr-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; font-size: .78rem; }
.sm-tr-item { padding: 1px 8px; border: 1px solid #c8cfdc; border-radius: 99px; background: #ffffff; font-weight: 800; }
.sm-tr-lab { min-width: 72px; color: #5f6a85; font-weight: 900; }
.sm-tr-weak b { font-weight: 900; }
.sm-tr-moves { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; font-size: .78rem; }
.sm-tr-moves li { padding: 1px 8px; border-radius: 6px; color: #ffffff; font-weight: 800; }
.sm-tr-moves li.t-steel, .sm-tr-moves li.t-electric, .sm-tr-moves li.t-ice { color: #2b3443; }
.sm-tr-eff { padding: 1px 8px; border-radius: 99px; background: #e3e7ef; font-weight: 900; }
.sm-tr-eff.e4 { background: #1f8a4c; color: #ffffff; }
.sm-tr-eff.e2 { background: #bfe8cd; color: #104a28; }
.sm-tr-eff.e0_5, .sm-tr-eff.e0_25 { background: #f6d6d6; color: #7a1f1f; }
.sm-tr-eff.e0 { background: #3a3f4f; color: #ffffff; }
.sm-tr-notes { margin: 12px 0 0; padding: 0 0 0 18px; font-size: .88rem; }
.sm-tr-notes li { margin: 4px 0; }
.sm-tr-clear { width: 100%; margin-top: 12px; padding: 10px; border: 3px solid var(--tr-frame); border-radius: 12px; background: var(--tr-gold); color: #3a2a00; font: inherit; font-weight: 900; cursor: pointer; }

@media (max-width: 900px) {
  .sm-tr-body { grid-template-columns: 1fr; }
  .sm-tr-panel { position: static; max-height: none; }
}
@media (max-width: 560px) {
  .sm-tr { padding: 14px 12px 16px; border-radius: 20px; }
  .sm-tr-open { grid-template-columns: 44px minmax(0, 1fr); }
  .sm-tr-step .sm-tr-art { width: 44px; height: 44px; }
}