/* =========================================================
   AJUS feedback
   Inline notices (.ajus-notice*) and floating toasts (.ajus-toast*).

   Both are tone-driven: the tone class carries the colours through local
   custom properties, so the base block never needs a new rule to gain a
   variant, and no colour is ever written in the markup.

       <div class="ajus-notice ajus-notice--success" role="status">
           <span class="ajus-notice__icon"><i class="fas fa-check-circle" aria-hidden="true"></i></span>
           <span class="ajus-notice__body"><strong class="ajus-notice__title">Saved</strong> Your changes are live.</span>
       </div>

   Tones: --success --warning --danger --info --primary (base = neutral/muted).
   ========================================================= */

/* --------------------------------------------------------------------------
   Inline notice
----------------------------------------------------------------------------*/
.ajus-notice {
    --notice-accent: var(--color-text-soft);
    --notice-bg: var(--color-bg-surface-soft);
    --notice-border: var(--color-border-soft);
    --notice-color: var(--color-text-main);

    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--notice-border);
    border-left: 4px solid var(--notice-accent);
    border-radius: var(--radius-md);
    background: var(--notice-bg);
    color: var(--notice-color);
    font-size: 0.94rem;
    line-height: 1.55;
}

.ajus-notice__icon {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--notice-accent);
}

.ajus-notice__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ajus-notice__title {
    display: block;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

.ajus-notice__dismiss {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.16s ease;
}

.ajus-notice__dismiss:hover,
.ajus-notice__dismiss:focus-visible {
    opacity: 1;
}

.ajus-notice__dismiss:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* ---- Tones (exactly one) ---- */
.ajus-notice--success {
    --notice-accent: var(--color-success);
    --notice-bg: var(--color-success-soft);
    --notice-border: color-mix(in srgb, var(--color-success) 24%, var(--color-border-soft));
}

.ajus-notice--warning {
    --notice-accent: var(--color-warning);
    --notice-bg: var(--color-warning-soft);
    --notice-border: color-mix(in srgb, var(--color-warning) 24%, var(--color-border-soft));
}

.ajus-notice--danger {
    --notice-accent: var(--color-danger);
    --notice-bg: var(--color-danger-soft);
    --notice-border: color-mix(in srgb, var(--color-danger) 24%, var(--color-border-soft));
}

.ajus-notice--info {
    --notice-accent: var(--color-info);
    --notice-bg: var(--color-info-soft);
    --notice-border: color-mix(in srgb, var(--color-info) 24%, var(--color-border-soft));
}

.ajus-notice--primary {
    --notice-accent: var(--color-primary);
    --notice-bg: var(--color-bg-primary-soft);
    --notice-border: var(--color-border-primary);
}

/* --------------------------------------------------------------------------
   Floating toast (built by theme JS `show_message()`)
----------------------------------------------------------------------------*/
.ajus-toast {
    --toast-accent: var(--color-primary);
    --toast-bg: var(--color-bg-primary-soft);
    --toast-border: var(--color-border-primary);
    --toast-color: var(--color-text-main);

    position: fixed;
    top: calc(72px + 1rem);
    left: 50%;
    z-index: var(--z-toast);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: fit-content;
    max-width: min(92vw, 42rem);
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--toast-border);
    border-left: 4px solid var(--toast-accent);
    border-radius: var(--radius-lg);
    background: var(--toast-bg);
    color: var(--toast-color);
    box-shadow: var(--shadow-lg);
    text-align: left;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: ajus-toast-in 0.2s ease-out;
}

.ajus-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.9rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-pill);
    background: var(--toast-accent);
    color: var(--color-text-on-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
}

.ajus-toast__text {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
}

.ajus-toast--success {
    --toast-accent: var(--color-success);
    --toast-bg: var(--color-success-soft);
    --toast-border: color-mix(in srgb, var(--color-success) 28%, var(--color-border-soft));
}

.ajus-toast--warning {
    --toast-accent: var(--color-warning);
    --toast-bg: var(--color-warning-soft);
    --toast-border: color-mix(in srgb, var(--color-warning) 28%, var(--color-border-soft));
}

.ajus-toast--error {
    --toast-accent: var(--color-danger);
    --toast-bg: var(--color-danger-soft);
    --toast-border: color-mix(in srgb, var(--color-danger) 28%, var(--color-border-soft));
}

.ajus-toast--info {
    --toast-accent: var(--color-info);
    --toast-bg: var(--color-info-soft);
    --toast-border: color-mix(in srgb, var(--color-info) 28%, var(--color-border-soft));
}

@keyframes ajus-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, -8px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 575.98px) {
    .ajus-toast {
        top: calc(64px + 0.75rem);
        max-width: 92vw;
    }
}