/* ---- Add-on notice (deferred modules framed as later-phase) -------------- */
.addon-notice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(26, 26, 78, 0.16); border-radius: 14px; background: linear-gradient(180deg, rgba(26, 26, 78, 0.05), rgba(26, 26, 78, 0.02)); }
.addon-notice-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; color: var(--navy); background: rgba(26, 26, 78, 0.1); }
.addon-notice > div { display: grid; gap: 2px; }
.addon-notice strong { font-size: 13.5px; color: var(--ink); }
.addon-notice p { margin: 0; font-size: var(--text-body-sm); line-height: 1.45; color: var(--muted); }
.addon-notice-tag { margin-left: auto; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: var(--text-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* ---- Accessibility & interaction polish (app-wide, additive) ------------- */
/* Universal keyboard focus ring. :where() keeps specificity at 0 so any
   component's own :focus-visible style still wins — this is only a safe
   fallback for interactive elements that don't define one. */
:where(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible {
  outline: 2px solid rgba(26, 26, 78, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Consistent disabled affordance for interactive controls. */
button:disabled, [aria-disabled='true'] { cursor: not-allowed; }

/* Respect users who prefer reduced motion — dampen the app's animations and
   transitions without removing state changes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}