/* Holdfast "Ask AI" component - shared stylesheet.
   Article variant: .askai.askai-article  (under each post H1).
   Footer variant:  .askai.askai-footer   (sitewide footer band).

   var() fallback chains so the component resolves on both of the site's
   token sets: the compare/about/diligence set (--muted / --accent / --rule /
   --accent-soft) and the index/blog/content set (--ink-soft / --teal /
   --teal-light / --border). */

.askai {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
}
.askai-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, var(--ink-soft, #8a847a));
  white-space: nowrap;
}
.askai-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
}
.askai-link {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft, var(--muted, #8a847a));
  text-decoration: none;
  padding: 0.28rem 0.65rem;
  border: 0.5px solid var(--rule, var(--border, rgba(26,24,20,0.12)));
  border-radius: 999px;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.askai-link:hover,
.askai-link:focus-visible {
  color: var(--accent, var(--teal, #3d6b5e));
  border-color: var(--accent, var(--teal, #3d6b5e));
  background: var(--accent-soft, var(--teal-light, #e8f0ee));
}

/* Footer variant: a self-contained dark band so it stays readable wherever it
   sits in the footer region, in both light and dark themes (Holdfast footers
   are always dark). Colours are literal, matching the footer's own treatment. */
.askai-footer {
  margin: 0;
  padding: 1.1rem 1.5rem;
  justify-content: center;
  background: #1a1814;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .askai-footer { background: #08080d; }
.askai-footer .askai-label { color: rgba(245,242,235,0.35); }
.askai-footer .askai-link {
  color: rgba(245,242,235,0.6);
  border-color: rgba(255,255,255,0.12);
}
.askai-footer .askai-link:hover,
.askai-footer .askai-link:focus-visible {
  color: #f5f2eb;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
}

@media (max-width: 600px) {
  .askai-link { font-size: 0.72rem; padding: 0.26rem 0.55rem; }
}