/*
 * PokeTeamOn M8.2 — Editor Visual Polish v1.1
 * Additive presentation only. The single-owner editor remains authoritative.
 */
@media (max-width: 820px) {
  [data-m8-mobile-single-owner-root] {
    /* Bright slider palette. */
    --ptm8-hp-slider: #34d399;
    --ptm8-atk-slider: #fb923c;
    --ptm8-def-slider: #facc15;
    --ptm8-spa-slider: #38bdf8;
    --ptm8-spd-slider: #a78bfa;
    --ptm8-spe-slider: #f472b6;

    /* Keep text labels readable against white. */
    --ptm8-hp-label: #12b76a;
    --ptm8-atk-label: #ea580c;
    --ptm8-def-label: #b88700;
    --ptm8-spa-label: #2583d8;
    --ptm8-spd-label: #7f56d9;
    --ptm8-spe-label: #d93687;
  }

  [data-m8-mobile-single-owner-root] .ptm8-stat-colored {
    --ptm8-stat-slider: #60a5fa;
    --ptm8-stat-label: #475467;
    --ptm8-range-pct: 0%;
  }

  [data-m8-mobile-single-owner-root] .ptm8-stat-colored[data-stat="hp"] {
    --ptm8-stat-slider: var(--ptm8-hp-slider);
    --ptm8-stat-label: var(--ptm8-hp-label);
  }

  [data-m8-mobile-single-owner-root] .ptm8-stat-colored[data-stat="atk"] {
    --ptm8-stat-slider: var(--ptm8-atk-slider);
    --ptm8-stat-label: var(--ptm8-atk-label);
  }

  [data-m8-mobile-single-owner-root] .ptm8-stat-colored[data-stat="def"] {
    --ptm8-stat-slider: var(--ptm8-def-slider);
    --ptm8-stat-label: var(--ptm8-def-label);
  }

  [data-m8-mobile-single-owner-root] .ptm8-stat-colored[data-stat="spa"] {
    --ptm8-stat-slider: var(--ptm8-spa-slider);
    --ptm8-stat-label: var(--ptm8-spa-label);
  }

  [data-m8-mobile-single-owner-root] .ptm8-stat-colored[data-stat="spd"] {
    --ptm8-stat-slider: var(--ptm8-spd-slider);
    --ptm8-stat-label: var(--ptm8-spd-label);
  }

  [data-m8-mobile-single-owner-root] .ptm8-stat-colored[data-stat="spe"] {
    --ptm8-stat-slider: var(--ptm8-spe-slider);
    --ptm8-stat-label: var(--ptm8-spe-label);
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-stat-colored
  input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%;
    height: 18px;
    padding: 0 !important;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    accent-color: var(--ptm8-stat-slider) !important;
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-stat-colored
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background:
      linear-gradient(
        90deg,
        var(--ptm8-stat-slider) 0,
        var(--ptm8-stat-slider) var(--ptm8-range-pct),
        #e8ecf2 var(--ptm8-range-pct),
        #e8ecf2 100%
      ) !important;
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-stat-colored
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ptm8-stat-slider) !important;
    box-shadow:
      0 0 0 1px rgba(16,24,40,.08),
      0 2px 5px rgba(16,24,40,.14);
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-stat-colored
  input[type="range"]::-moz-range-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: #e8ecf2;
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-stat-colored
  input[type="range"]::-moz-range-progress {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--ptm8-stat-slider);
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-stat-colored
  input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ptm8-stat-slider);
    box-shadow:
      0 0 0 1px rgba(16,24,40,.08),
      0 2px 5px rgba(16,24,40,.14);
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-stat-colored
  .ptm8-stat-label-accent {
    color: var(--ptm8-stat-label) !important;
    font-weight: 900 !important;
  }

  /*
   * Move presentation is intentionally untouched in v1.1.
   * No badge CSS is present.
   */

  .ptm8-tera-decorated {
    position: relative !important;
    padding-left: 39px !important;
  }

  .ptm8-tera-decorated > .ptm8-tera-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 21px;
    height: 21px;
    transform: translateY(-50%);
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(16,24,40,.08));
  }

  .ptm8-tera-field-host {
    position: relative !important;
  }

  .ptm8-tera-field-host > .ptm8-tera-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 21px;
    height: 21px;
    transform: translateY(-50%);
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 1px 1px rgba(16,24,40,.08));
  }

  .ptm8-tera-field-host > select.ptm8-tera-control-padded,
  .ptm8-tera-field-host > input.ptm8-tera-control-padded {
    padding-left: 39px !important;
  }
}

/*
 * M8.2 v1.3 — Tera picker option icons.
 * Additive only: owner-created .ptm8so-option buttons keep click behavior.
 */
@media (max-width: 820px) {
  .ptm8so-sheet[data-ptm8-tera-picker="1"]
  [data-so-options]
  .ptm8so-option.ptm8-tera-option-row {
    min-height: 58px;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
  }

  .ptm8so-sheet[data-ptm8-tera-picker="1"]
  .ptm8-tera-option-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 26px;
    height: 26px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(16,24,40,.08));
  }

  .ptm8so-sheet[data-ptm8-tera-picker="1"]
  .ptm8so-option.ptm8-tera-option-row > strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .ptm8so-sheet[data-ptm8-tera-picker="1"]
  .ptm8so-option.ptm8-tera-option-row > small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
}

/*
 * M8.2 v1.4 — selected Move type badges.
 * Pure presentation: the existing single-owner move button remains clickable.
 */
@media (max-width: 820px) {
  [data-m8-mobile-single-owner-root]
  .ptm8so-moves
  button
  .ptm8-move-name-host {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }

  [data-m8-mobile-single-owner-root]
  .ptm8-move-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    min-height: 20px;
    box-sizing: border-box;
    padding: 2px 4px;
    border-radius: 999px;
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .025em;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: auto;
    flex: 0 0 auto;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  }

  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="normal"]   { background:#a8a77a; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="fire"]     { background:#ee8130; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="water"]    { background:#6390f0; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="electric"] { background:#f7d02c; color:#523f00; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="grass"]    { background:#7ac74c; color:#173d0c; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="ice"]      { background:#96d9d6; color:#174a48; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="fighting"] { background:#c22e28; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="poison"]   { background:#a33ea1; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="ground"]   { background:#e2bf65; color:#4a3600; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="flying"]   { background:#a98ff3; color:#35226f; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="psychic"]  { background:#f95587; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="bug"]      { background:#a6b91a; color:#2f3700; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="rock"]     { background:#b6a136; color:#362f00; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="ghost"]    { background:#735797; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="dragon"]   { background:#6f35fc; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="dark"]     { background:#705746; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="steel"]    { background:#b7b7ce; color:#303044; }
  [data-m8-mobile-single-owner-root] .ptm8-move-type-badge[data-type="fairy"]    { background:#d685ad; color:#5b1537; }
}

/*
 * M8.2 v1.4.2.5 — remove non-interactive section direction glyphs.
 * Battle setup, Moves, and EVs & IVs remain always-visible owner sections.
 * This is presentation-only: no click/collapse behavior is introduced.
 */
@media (max-width: 820px) {
  [data-m8-mobile-single-owner-root]
  .ptm8so-section-head {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  [data-m8-mobile-single-owner-root]
  .ptm8so-section-head > :last-child {
    display: none !important;
  }
}
