/* ——— Site marks ———
   Styling for the inline Lichess / Chess.com / PGN logos.

   The marks are inline SVG with fill="currentColor", so they take the colour of
   whatever contains them. That is what lets one asset work in every button
   state: idle, hover, and selected. There is deliberately no second "selected
   logo" asset to keep in sync.

   Every mark is aria-hidden in the markup, so nothing here affects what a screen
   reader announces — the button's own text still names the site. */

.site-logo {
  display: block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  /* The marks are line-art fills. Slight optical lift so they do not look
     undersized next to cap-height text. */
  transform: translateY(-0.02em);
}

/* ——— Tracking chips ——— */

.tracking-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.tracking-chip .site-logo {
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

.tracking-chip:hover .site-logo {
  opacity: 0.9;
}

/* Selected: the chip already flips to a solid accent with contrasting text, so
   the mark goes to full contrast to match rather than staying washed out. */
.tracking-chip.active .site-logo {
  opacity: 1;
}

/* ——— Import panel toggles ——— */

.home-import-toggle-btn {
  gap: 7px;
}

.home-import-toggle-btn .site-logo {
  opacity: 0.6;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-import-toggle-btn:hover .site-logo {
  opacity: 0.85;
}

.home-import-toggle-btn.active .site-logo {
  opacity: 1;
}

/* A small lift on hover gives the mark the same affordance as the button. */
.home-import-toggle-btn:hover .site-logo {
  transform: translateY(-0.02em) scale(1.06);
}

/* ——— Connected account fields ———
   These are labelled inputs rather than a toggle, so the mark sits in the
   label line to the left of the site name. */

.profile-linked-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.profile-linked-label .site-logo {
  width: 1.1em;
  height: 1.1em;
  color: var(--muted);
}

.profile-linked-field:focus-within .profile-linked-label .site-logo {
  /* Brightens with the field, matching the existing focus treatment. */
  color: var(--gold-bright);
}

/* ——— Reduced motion ——— */

@media (prefers-reduced-motion: reduce) {
  .tracking-chip,
  .tracking-chip .site-logo,
  .home-import-toggle-btn .site-logo {
    transition: none;
  }

  .home-import-toggle-btn:hover .site-logo {
    transform: translateY(-0.02em);
  }
}