/* blog-feedback.css — "Was this helpful?" thumbs (queue item A). Shared across all blog
   posts. TOKEN-ONLY (Evergreen): every colour rides the page's CSS custom properties, so it
   follows light AND the opt-in dark block (:root[data-theme="dark"]) with no per-mode rules.
   Subtle, inline (not floating). Marketing asset — NOT in the theme-token-gate scope. */
.blog-fb{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 6px;padding:12px 16px;
  border:1px solid var(--border,#E4E1D7);border-radius:var(--radius,12px);
  background:var(--surface,#F7F6F1);
  font-family:var(--font-body,"Hanken Grotesk","Inter",system-ui,sans-serif);font-size:14.5px;
}
/* [hidden] must win over the display:flex/inline rules below (else the voted-out buttons linger) */
.blog-fb [hidden]{display:none !important;}
.blog-fb-q{color:var(--muted,#6B6A5F);font-weight:600;}
.blog-fb-btns{display:flex;gap:8px;}
.blog-fb-btn{
  cursor:pointer;background:transparent;color:inherit;
  border:1px solid var(--border,#E4E1D7);border-radius:999px;
  padding:5px 13px;font-size:17px;line-height:1;transition:border-color .14s,background .14s;
  -webkit-tap-highlight-color:transparent;
}
.blog-fb-btn:hover{border-color:var(--brand,#1E4D33);background:var(--brand-soft,#DFF2E5);}
.blog-fb-btn:focus-visible{outline:2px solid var(--accent,#57B77A);outline-offset:2px;}
.blog-fb-btn[aria-pressed="true"]{border-color:var(--brand,#1E4D33);background:var(--brand-soft,#DFF2E5);}
.blog-fb-btn[disabled]{cursor:default;opacity:.55;}
.blog-fb-thanks{color:var(--brand,#1E4D33);font-weight:600;}
/* dark: --brand (#2F7D45) is only ~3.2:1 on the dark card — use the brighter leaf accent for AA */
:root[data-theme="dark"] .blog-fb-thanks{color:var(--accent,#57B77A);}
/* respect reduced motion — transitions are the only motion, drop them */
@media (prefers-reduced-motion: reduce){.blog-fb-btn{transition:none;}}