/* Periodic Speller — share-link toast notification and the
   category-colored left-border accents on tiles. */

/* Share toast */
.share-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--surface-0);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  z-index: 9999;
  animation: toastIn 0.25s ease-out;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

.share-toast-out {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Category-colored left border on tiles */
.tile[data-category='nonmetal'] {
  border-color: var(--category-nonmetal);
}
.tile[data-category='noble gas'] {
  border-color: var(--category-noble);
}
.tile[data-category='alkali metal'] {
  border-color: var(--category-alkali);
}
.tile[data-category='alkaline earth metal'] {
  border-color: var(--category-alkaline);
}
.tile[data-category='metalloid'] {
  border-color: var(--category-metalloid);
}
.tile[data-category='halogen'] {
  border-color: var(--category-halogen);
}
.tile[data-category='transition metal'] {
  border-color: var(--category-transition);
}
.tile[data-category='post-transition metal'] {
  border-color: var(--category-post-transition);
}
.tile[data-category='lanthanide'] {
  border-color: var(--category-lanthanide);
}
.tile[data-category='actinide'] {
  border-color: var(--category-actinide);
}
.tile[data-category='custom'] {
  border-color: var(--category-custom);
}

.tile[data-category='nonmetal'] .tile-number {
  color: var(--category-nonmetal);
}
.tile[data-category='noble gas'] .tile-number {
  color: var(--category-noble);
}
.tile[data-category='alkali metal'] .tile-number {
  color: var(--category-alkali);
}
.tile[data-category='alkaline earth metal'] .tile-number {
  color: var(--category-alkaline);
}
.tile[data-category='metalloid'] .tile-number {
  color: var(--category-metalloid);
}
.tile[data-category='halogen'] .tile-number {
  color: var(--category-halogen);
}
.tile[data-category='transition metal'] .tile-number {
  color: var(--category-transition);
}
.tile[data-category='post-transition metal'] .tile-number {
  color: var(--category-post-transition);
}
.tile[data-category='lanthanide'] .tile-number {
  color: var(--category-lanthanide);
}
.tile[data-category='actinide'] .tile-number {
  color: var(--category-actinide);
}
.tile[data-category='custom'] .tile-number {
  color: var(--category-custom);
}