/* SiftingSignal bookmark component
   --------------------------------
   Small icon-only toggle button. Mirrors share.css for visual consistency:
     - hairline default border, signal-teal hover/focus border
     - 6px radius, Inter sans
     - 16px geometric stroke SVG icon (no external lib)
     - is-saved state = filled icon + signal-2 ink
   Assumes the host page has defined :root tokens (--ink, --signal, etc.)
   from docs/BRAND_GUIDE.md §3. Falls back to defaults via var(--token, fallback).
*/

.ss-bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--surface, #FFFFFF);
  color: var(--ink-2, #334155);
  border: 1px solid var(--border, #E4E4E7);
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 150ms ease-out,
    color 150ms ease-out,
    background 150ms ease-out,
    transform 150ms ease-out;
}

.ss-bm-btn:hover,
.ss-bm-btn:focus-visible {
  border-color: var(--signal, #14B8A6);
  color: var(--ink, #0F172A);
  outline: none;
}

.ss-bm-btn:focus-visible {
  outline: 2px solid var(--signal-2, #0F766E);
  outline-offset: 2px;
}

.ss-bm-btn:active {
  transform: scale(0.94);
}

.ss-bm-btn.is-saved {
  color: var(--signal-2, #0F766E);
  border-color: var(--signal, #14B8A6);
  background: var(--signal-soft, #CCFBF1);
}

.ss-bm-btn.is-saved:hover,
.ss-bm-btn.is-saved:focus-visible {
  background: var(--surface, #FFFFFF);
}

.ss-bm-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ss-bm__icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: block;
}

/* Inline (alongside other action buttons) — same dimensions, no extra spacing.
   The bookmark slot doesn't need its own label; the share component carries
   the SHARE word and the bookmark button stands on its icon-only meaning
   (universal "save" affordance in social products since Twitter 2018). */
.ss-bookmark-slot {
  display: inline-flex;
  align-items: center;
}

/* Toast — uses the same .ss-toast as share.css when share.js isn't on the
   page. When share.js IS loaded, this rule is dead and the share.css copy
   wins (defined identically). Defined here so bookmark.css works standalone
   on pages that don't import share.css. */
.ss-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink, #0F172A);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.ss-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}