/* Phase 6 Feature B — shared bookmark button styling.
 *
 * Loaded wherever the `SyntopiBookmarks` JS helper is used. Keeps the
 * visual language consistent across Editor, Galaxy, and Seminar.
 *
 * Button shape matches the existing .passage-actions row buttons (pill,
 * Georgia-in-chrome label, subtle border). States:
 *   data-state="unsaved"  — neutral outline, "Save"
 *   data-state="saved"    — cobalt fill, "Saved"
 *   data-state="signin"   — lower-opacity, "Sign in to save"
 */

.syntopi-bm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  background: transparent;
  color: var(--text-secondary, #5f5e5a);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  line-height: 1.25;
}
.syntopi-bm-btn:hover {
  background: color-mix(in srgb, var(--color-cobalt) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-cobalt) 35%, transparent);
  color: var(--color-cobalt-text, #1438A8);
}
.syntopi-bm-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #1438A8);
  outline-offset: 2px;
}

/* Saved state — filled pill, cobalt accent. */
.syntopi-bm-btn[data-state="saved"] {
  background: color-mix(in srgb, var(--color-cobalt) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-cobalt) 55%, transparent);
  color: var(--color-cobalt-text, #1438A8);
}
.syntopi-bm-btn[data-state="saved"]:hover {
  background: color-mix(in srgb, var(--color-cobalt) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-cobalt) 75%, transparent);
}

/* Sign-in inline affordance — dimmer so it doesn't compete with real
 * actions. Clicking it bounces to /sign-in/?next=<current page> (the
 * dual-Apple/Google chooser shipped at d819d87a). */
.syntopi-bm-btn[data-state="signin"] {
  opacity: 0.75;
  border-style: dashed;
}
.syntopi-bm-btn[data-state="signin"]:hover {
  opacity: 1;
  background: transparent;
  color: var(--color-cobalt-text, #1438A8);
  border-color: color-mix(in srgb, var(--color-cobalt) 55%, transparent);
}

.syntopi-bm-btn .bm-icon { font-size: 14px; line-height: 1; }
.syntopi-bm-btn .bm-label { white-space: nowrap; }

/* Dark-mode tuning — text-safe variants flip to display variants. */
@media (prefers-color-scheme: dark) {
  .syntopi-bm-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-secondary, #b4b2a9);
  }
  .syntopi-bm-btn:hover,
  .syntopi-bm-btn[data-state="saved"] {
    color: var(--color-cobalt-display, #5888E8);
    background: color-mix(in srgb, var(--color-cobalt-display) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-cobalt-display) 55%, transparent);
  }
}

/* Compact variant for tight rows (e.g. Galaxy passage popups). */
.syntopi-bm-btn.compact {
  padding: 4px 10px;
  font-size: 12px;
}