/* The AI label on the web surfaces (ADR-168): the AI Usage Policy's "[AI]" tag, and the notice beside
   what a model produced, with its link to the policy. The blog's pages and the admin load it; the
   desktop keeps its own copy of these rules with its own (desktop/renderer/css/ai-label.css).
   Ink on the surface, as moltke-theme.css sets them: text-0 on bg-1 is 14.99:1, text-1 on bg-1
   7.70:1. The link is told by its underline, not a hue. */
.ai-tag {
  display: inline-flex; align-items: center; flex: none; vertical-align: middle;
  padding: 1px 4px; border: 1px solid var(--fab-border-light); border-radius: 4px;
  background: var(--fab-bg-1); color: var(--fab-text-0);
  font-family: var(--fab-font-mono, monospace); font-size: 0.64rem; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.02em; white-space: nowrap; text-transform: none;
}

.ai-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  margin: 10px 0 0; padding: 6px 10px; border: 1px solid var(--fab-border); border-radius: 6px;
  background: var(--fab-bg-1); color: var(--fab-text-1);
  font-size: 0.78rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
}
.ai-notice-text { flex: 1 1 220px; }
.ai-notice-link { color: var(--fab-text-0); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ai-notice-link:hover, .ai-notice-link:focus-visible { color: var(--fab-text-0); text-decoration-thickness: 2px; outline: none; }

/* A blog article: the notice under the byline, before the text */
.article-content > .ai-notice { margin: 0 0 24px; }