/* "Summarize this article/case study with:" bar.
   Theme-aware via the site's design tokens (with safe fallbacks), so it follows
   the [data-theme="dark"] switch automatically. Mono icons (ChatGPT, Perplexity,
   Grok) use currentColor and follow the text colour; Claude (orange) and Gemini
   (gradient) keep their brand colours in both themes. */
.summarize {
  margin: 1.5rem 0 2rem;
}
.summarize__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary, #525252);
  margin-bottom: 0.625rem;
  font-family: var(--font-family-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}
.summarize__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.summarize__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8125rem;
  border-radius: 10px;
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-primary, rgba(0, 0, 0, 0.12));
  color: var(--text-primary, #0d0d0d);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  font-family: var(--font-family-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Hover lift only on real hover devices, so a tap on touch doesn't leave the
   button stuck in its hover state. */
@media (hover: hover) and (pointer: fine) {
  .summarize__btn:hover {
    background: color-mix(in srgb, var(--text-primary, #0d0d0d) 6%, var(--bg-secondary, #f6f5f2));
    border-color: var(--text-secondary, #525252);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }
}
/* Press feedback — the button visibly answers the press (Emil Kowalski). */
.summarize__btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}
.summarize__btn:focus-visible {
  outline: 2px solid var(--text-primary, #0d0d0d);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .summarize__btn,
  .summarize__btn:hover,
  .summarize__btn:active {
    transform: none;
  }
}
.summarize__btn svg {
  display: block;
  flex: 0 0 auto;
}
.summarize__btn span {
  white-space: nowrap;
}