/* RF-AVALON Market V61.0.97 — visually thin grade frames.
   V96 normalized the CSS border width, but colored grades still looked heavier
   because the slot itself, ::before and the animated tracer were all colored.
   V97 keeps one visible grade-color hairline + a light tracer; the structural
   slot border stays neutral. No game data or grade mapping is changed. */

/* Do not paint the structural slot border with the grade color. This removes
   the second colored ring that made green/gold/red frames look 2–3px thick. */
.equipment-slot.graded,
.equipment-slot.graded.filled:hover,
.equipment-slot.graded.filled:focus-visible {
  border-width: 1px !important;
  border-color: #566168 !important;
}

/* Keep only one colored hairline around the icon. */
.equipment-slot.graded::before {
  inset: -1px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--item-grade-color) 82%, white) !important;
  opacity: .78 !important;
  box-shadow: 0 0 1px color-mix(in srgb, var(--item-grade-color) 34%, transparent) !important;
  animation: rfv97-grade-hairline 3.9s ease-in-out infinite !important;
}

/* The moving highlight is also a single pixel and no longer carries a broad halo. */
.equipment-slot.graded::after {
  inset: -1px !important;
  padding: 1px !important;
  border-radius: 2px !important;
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--item-grade-color) 26%, transparent)) !important;
}

.equipment-slot.graded.filled:hover::before,
.equipment-slot.graded.filled:focus-visible::before {
  opacity: .94 !important;
  box-shadow: 0 0 2px color-mix(in srgb, var(--item-grade-color) 42%, transparent) !important;
}

.equipment-slot.graded.filled:hover::after,
.equipment-slot.graded.filled:focus-visible::after {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--item-grade-color) 42%, transparent)) !important;
}

/* Remove the colored body glow inherited from the original graded hover.
   The icon still gets a subtle neutral lift while the grade line stays colored. */
.equipment-slot.graded.filled:hover,
.equipment-slot.graded.filled:focus-visible {
  box-shadow:
    inset 0 0 0 1px #090c0d,
    inset 0 0 14px rgba(117, 152, 160, .10),
    0 0 5px rgba(111, 156, 174, .12) !important;
}

@keyframes rfv97-grade-hairline {
  0%, 100% { opacity: .72; }
  50% { opacity: .88; }
}

@media (prefers-reduced-motion: reduce) {
  .equipment-slot.graded::before {
    animation: none !important;
    opacity: .82 !important;
  }
}