/* Community pulse widget styles (bookmark / reference actions).
   Reuses CSS custom properties from assets/site.css so the widget
   inherits the site's light and dark themes automatically. */

/* Right-aligned end-of-section container. Holds the widget on its own
   row after the last paragraph of the section, so readers see the
   reaction affordance after they finish reading the claim, not before.
   position:relative anchors the side-note on desktop. */
.cp-section-end {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin: 1rem 0 2rem 0;
}

.cp-widget {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  /* Wide horizontal gap between the stance-button group and the meta
     group so the two groups read as distinct. Smaller row gap for when
     the widget wraps onto a second line on narrow screens. */
  gap: 0.5rem 1.25rem;
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--text-muted, #666);
}

/* Inline variant: widget nested inside a .mini-synthesis block on the
   debate page. Centered to match the synthesis text, with a subtle top
   border to separate from the prose. */
.cp-section-end--inline {
  justify-content: center;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--text-muted, #666) 15%, transparent);
}

/* Tight cluster of reaction count + share + note-toggle. Lives on the
   right side of the widget, separated from the stance buttons by the
   wider .cp-widget gap above. */
.cp-widget__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .cp-section-end {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0.75rem 0 1.5rem 0;
  }
  .cp-widget {
    font-size: 0.8rem;
  }
}

.cp-widget__buttons {
  display: inline-flex;
  gap: 0.25rem;
}

.cp-widget__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  padding: 0.2rem 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  font-variant-emoji: text;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted, #666);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,0.15));
  border-radius: 0.3rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.cp-widget__button:hover {
  background: var(--surface, rgba(0,0,0,0.04));
}

.cp-widget__button:focus-visible {
  outline: 2px solid var(--c-teal, #2F7D8E);
  outline-offset: 2px;
}

/* Filled star when bookmarked */
.cp-widget__star[aria-pressed="true"] {
  background: var(--surface, rgba(0,0,0,0.06));
  border-color: var(--text, #333);
  color: var(--text, #222);
}
.cp-widget__star[aria-pressed="true"] svg {
  fill: currentColor;
}

.cp-widget__count-num:empty,
.cp-widget__delta:empty {
  display: none;
}

.cp-widget__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted, #666);
}

.cp-widget__delta {
  font-size: 0.75rem;
  opacity: 0.75;
}

.cp-widget__share,
.cp-widget__note-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  padding: 0.2rem 0.35rem;
  color: var(--text-muted, #666);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.cp-widget__share:hover,
.cp-widget__note-toggle:hover {
  color: var(--text, #222);
  background: var(--surface, rgba(0,0,0,0.04));
}

.cp-widget__share:focus-visible,
.cp-widget__note-toggle:focus-visible {
  outline: 2px solid var(--c-teal, #2F7D8E);
  outline-offset: 2px;
}

.cp-widget__share svg,
.cp-widget__note-toggle svg {
  display: block;
}

.cp-widget__note {
  display: block;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text, #222);
  background: var(--surface, rgba(0,0,0,0.03));
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 0.35rem;
  resize: vertical;
  min-height: 4.5rem;
}

/* Desktop (enough viewport for a side panel): absolutely position
   the note to the right of the content column. */
@media (min-width: 960px) {
  .cp-widget__note {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(calc(100% + 1.25rem));
    width: 240px;
  }
}

/* Tablet / narrow desktop: inline below the widget, full content width */
@media (max-width: 959px) {
  .cp-widget__note {
    width: 100%;
    margin-top: 0.5rem;
  }
}

.cp-widget__note[hidden] {
  display: none;
}

/* Placeholder styling */
.cp-widget__note::placeholder {
  color: var(--text-muted, #888);
  font-size: 0.8rem;
}

/* Highlight the note toggle when a note has content */
.cp-widget__note-toggle[data-has-note="true"] {
  color: var(--c-teal, #2F7D8E);
}

.cp-widget__toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--bg, #fff);
  background: var(--text, #222);
  border-radius: 0.35rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

.cp-widget__toast--visible {
  opacity: 0.95;
}

@media (max-width: 600px) {
  .cp-widget {
    font-size: 0.8rem;
    gap: 0.4rem;
  }
  .cp-widget__button {
    padding: 0.65rem 0.75rem;
    font-size: 1rem;
    min-height: 44px;
  }
  .cp-widget__share,
  .cp-widget__privacy,
  .cp-widget__note-toggle {
    padding: 0.5rem 0.55rem;
    min-height: 44px;
  }
}