/* Customer announcements: the /notifications section and the console banner. Built from the shared theme tokens, so light, dark
   and obsidian follow the page; severity uses the primary accent and border weight, never colour alone. No transitions or animation. */
.ann-banner-host { margin: 0 0 20px; }
.ann-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 8px 16px; padding: 12px 16px; border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--muted-foreground)); border-radius: calc(var(--radius) / 2); background: hsl(var(--card)); }
.ann-banner[data-severity="warning"] { border-left-color: hsl(var(--primary)); }
.ann-banner[data-severity="critical"] { border-left-color: hsl(var(--primary)); border-left-width: 6px; background: hsl(var(--accent)); }
.ann-banner-text { min-width: 0; }
.ann-banner-title { margin: 0 0 2px; font-weight: 600; overflow-wrap: anywhere; }
.ann-banner-body { margin: 0; color: hsl(var(--muted-foreground)); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ann-banner-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 12px; justify-content: flex-end; }
.ann-banner-links a, .ann-banner-unavailable a { text-decoration: underline; text-underline-offset: 2px; }
.ann-banner-unavailable { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 8px 12px; font-size: 12px; color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--border)); border-radius: calc(var(--radius) / 2); }

.ann-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ann-severity[data-severity="warning"] { border-color: hsl(var(--primary)); }
.ann-severity[data-severity="critical"] { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.badge.ann-unread { border-color: hsl(var(--primary)); font-weight: 600; }

.ann-section { scroll-margin-top: 16px; }
.ann-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ann-top .as-of { font-size: 12px; color: hsl(var(--muted-foreground)); }
.ann-note:empty { display: none; }
.ann-note { font-size: 12px; color: hsl(var(--muted-foreground)); }
.ann-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.ann-item { padding: 14px 16px; border: 1px solid hsl(var(--border)); border-left: 3px solid hsl(var(--border)); border-radius: calc(var(--radius) / 2); min-width: 0; }
.ann-item[data-severity="warning"], .ann-item[data-severity="critical"] { border-left-color: hsl(var(--primary)); }
.ann-item[data-read="false"] .ann-title { font-weight: 650; }
.ann-title { margin: 10px 0 6px; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ann-body { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ann-times { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.ann-actions, .ann-more-row { margin-top: 10px; justify-content: flex-start; }
.ann-op { margin: 10px 0 0; }
.ann-op-note { margin: 8px 0 0; font-size: 12px; }
.ann-outside { margin-top: 20px; }
.ann-outside h3 { font-size: 14px; margin: 0; }
.ann-outside-ref { margin: 0 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.ann-outside-item .caption { margin: 0; }
.ann-empty { margin-top: 12px; }
.ann-section button:focus-visible, .ann-section a:focus-visible, .ann-title:focus-visible, #ann-h:focus-visible, .ann-banner a:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

@media (max-width: 640px) {
  .ann-banner { grid-template-columns: minmax(0, 1fr); }
  .ann-banner-links { justify-content: flex-start; }
  .ann-section button, .ann-banner a, .ann-banner-unavailable a { min-height: 44px; display: inline-flex; align-items: center; }
  .ann-actions, .ann-more-row { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { .ann-banner *, .ann-section * { transition: none; animation: none; } }