/* Settings selector polish: cleaner segmented controls + swatch picker */

/* Section spacing */
#ppSettingsOverlay [class*="display" i],
#ppSettingsOverlay [class*="accent" i] {
  position: relative;
}

/* Display mode container: segmented-control feel */
#ppSettingsOverlay [class*="display" i] {
  padding-bottom: 18px !important;
}

#ppSettingsOverlay [class*="display" i] button,
#ppSettingsOverlay [class*="display" i] [role="button"] {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

/* Accent picker tiles: lower height, cleaner radius */
#ppSettingsOverlay [class*="accent" i] button,
#ppSettingsOverlay [class*="accent" i] [role="button"] {
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

/* Add checkmark to selected color tile */
#ppSettingsOverlay button[aria-pressed="true"]::after,
#ppSettingsOverlay [role="button"][aria-pressed="true"]::after,
#ppSettingsOverlay .active::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 950;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
}

/* Make sure selected-tile checkmark can position */
#ppSettingsOverlay button,
#ppSettingsOverlay [role="button"] {
  position: relative !important;
}

/* Swatch dots: cleaner, smaller, more like a true picker */
#ppSettingsOverlay button span:first-child,
#ppSettingsOverlay [role="button"] span:first-child {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10),
    0 5px 14px rgba(0,0,0,.22) !important;
}

/* Tone down inactive display mode pills */
#ppSettingsOverlay [class*="display" i] button:not(.active):not([aria-pressed="true"]),
#ppSettingsOverlay [class*="display" i] [role="button"]:not(.active):not([aria-pressed="true"]) {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Desktop mode gets a little tighter */
@media (min-width: 700px) {
  #ppSettingsOverlay [class*="accent" i] button,
  #ppSettingsOverlay [class*="accent" i] [role="button"] {
    height: 46px !important;
    min-height: 46px !important;
  }
}