/* Read/Unread Status Styles */

/* Read status toggle button — compact icon style */
#toggle-read-status {
  align-items: center;
  display: flex;
  font-size: 0.8125rem;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
}

#toggle-read-status .read-icon {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
}

/* Read bookmark visual indicator — subtle, not heavy */
.bookmark-entry.read,
.bookmark-child.read {
  position: relative;
}

/* Read cards lose the teal left border (handled by :not(.read) in bookmarks CSS) */

.bookmark-entry.read .bookmark-title,
.bookmark-child.read .bookmark-title {
  color: var(--ls-text-secondary);
  font-weight: 400;
}

.bookmark-entry.read .bookmark-description,
.bookmark-child.read .bookmark-description {
  color: var(--ls-text-tertiary);
}

/* Hover state for read bookmarks */
.bookmark-entry.read:hover .bookmark-title {
  color: var(--ls-text-primary);
}

/* Button state when read */
#toggle-read-status[data-is-read="true"] {
  background-color: var(--ls-accent);
  border-color: var(--ls-accent);
  color: white;
}

#toggle-read-status[data-is-read="true"]:hover {
  background-color: var(--ls-accent-hover);
}

#toggle-read-status[data-is-read="true"]:focus-visible {
  outline-color: var(--ls-accent-hover);
}

/* Loading state for read toggle */
#toggle-read-status:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Toggle micro-interaction */
@keyframes read-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#toggle-read-status.just-toggled {
  animation: read-pulse 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #toggle-read-status.just-toggled {
    animation: none;
  }
}