/* ============================================================
   .uk-feedback-message — proposed canonical inline form-feedback pill (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the inline post-submit pill in `public/css/product-news.css`:

     .newsletter-message              -> .uk-feedback-message
     .newsletter-message-success      -> .uk-feedback-message .uk-feedback-message--success
     .newsletter-message-error        -> .uk-feedback-message .uk-feedback-message--error

   Distinct from the full `.uk-alert` system (alerts.css):
     – `.uk-alert` is a flex container with an icon column, title, and body
       paragraphs — the heavy "important notice" framing.
     – `.uk-feedback-message` is a tiny inline rounded-pill that appears
       below a form input after submit. Different shape, different role,
       different motion — promoting the newsletter pattern to canonical
       rather than forcing it through `.uk-alert--compact`.

   Composes with: nothing — leaf primitive used by newsletter, contact-form,
   tool-form post-submit feedback.

   Hidden by default (`display: none`); JS toggles to `display: inline-block`
   (or `inline-flex` when paired with `--with-icon`) to show. The keyframe
   gives a soft slide-in so the pill doesn't pop in jarringly.
   ============================================================ */

/* ============================================
   Root — pill chrome, hidden until shown
   ============================================
   Default colour-less neutral pill. Tone modifiers below add the success/
   error/info palette. Consumers ship the pill with `display: none` style
   and JS flips it to `inline-block` (or removes the inline style) when
   ready to display.
   ============================================ */
.uk-feedback-message {
    display: inline-block;
    margin-top: var(--space-md);
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    font-weight: 500;
    line-height: var(--line-snug);
    animation: uk-feedback-message-in 0.25s ease-out;
}

@keyframes uk-feedback-message-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .uk-feedback-message {
        animation: none;
    }
}

/* ============================================
   Tones — success / error / info / warning
   ============================================
   Tones share one rgba ramp (10% fill / 25% border) so every variant
   reads at the same visual weight. Text colour matches the tone for
   maximum legibility on the tinted pill.
   ============================================ */
.uk-feedback-message--success {
    background: rgba(var(--color-success-rgb), 0.1);
    border-color: rgba(var(--color-success-rgb), 0.25);
    color: var(--color-success);
}

.uk-feedback-message--error {
    background: rgba(var(--color-error-rgb), 0.1);
    border-color: rgba(var(--color-error-rgb), 0.25);
    color: var(--color-error);
}

.uk-feedback-message--info {
    background: rgba(var(--color-info-rgb), 0.1);
    border-color: rgba(var(--color-info-rgb), 0.25);
    color: var(--color-info);
}

.uk-feedback-message--warning {
    background: rgba(var(--color-warning-rgb), 0.1);
    border-color: rgba(var(--color-warning-rgb), 0.3);
    color: var(--color-warning);
}

/* ============================================
   Modifier — --with-icon
   ============================================
   Shifts to inline-flex so a small inline svg can sit beside the text.
   Icon inherits the tone via currentColor.
   ============================================ */
.uk-feedback-message--with-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.uk-feedback-message--with-icon svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex-shrink: 0;
    color: currentColor;
    stroke: currentColor;
}

/* ============================================
   Modifier — --sm
   ============================================
   Tighter pill for sub-form contexts (inline beside a single field
   rather than below the full submit row).
   ============================================ */
.uk-feedback-message--sm {
    padding: 0.25rem 0.75rem;
    font-size: var(--font-sm);
    margin-top: var(--space-sm);
}

.uk-feedback-message--sm.uk-feedback-message--with-icon svg {
    width: var(--icon-xs, 14px);
    height: var(--icon-xs, 14px);
}