/* ================================
   Kahlonetrics — Shared Inline Banner / Alert Styles
   Requires theme.css variables.

   Tinted box for inline page-level messages (errors, warnings, info,
   success). Distinct from a flash-message system — banners are part of
   the page layout.

   Usage:
     <div class="kn-banner kn-banner--error">
       <span class="kn-banner-icon">!</span>
       <div class="kn-banner-body">
         <div class="kn-banner-title">API key missing</div>
         <div class="kn-banner-help">Add the anthropic-api-key block …</div>
       </div>
     </div>

   Single-line variant — just text inside .kn-banner is fine, the icon
   and body are optional.
   ================================ */

.kn-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.5;
}

/* Color variants — background tint + matching border + matching text */
.kn-banner--error {
    background: rgba(252, 129, 129, 0.10);
    border-color: rgba(252, 129, 129, 0.40);
    color: var(--color-error);
}
.kn-banner--warning {
    background: rgba(246, 173, 85, 0.12);
    border-color: var(--color-warning);
    color: var(--color-warning);
}
.kn-banner--info {
    background: rgba(96, 165, 250, 0.12);
    border-color: var(--color-info);
    color: var(--color-info);
}
.kn-banner--success {
    background: var(--color-success-surface);
    border-color: var(--color-success);
    color: var(--color-success);
}

/* Layout pieces (optional — banners can be a single line of text too) */
.kn-banner-icon {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    flex-shrink: 0;
}
.kn-banner-body {
    flex: 1;
}
.kn-banner-title {
    font-weight: 600;
    margin-bottom: 2px;
}
.kn-banner-help {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}