/* Notices — replaces the previously scattered .error-box / .message-box /
 * .info-box / .create-results / .error-msg / .form-error classes.
 *
 *   .notice               base box (padding, border, radius)
 *   .notice--error        red, used by login failures, validation errors
 *   .notice--success      green, used by flash messages, account-creation results
 *   .notice--info         blue, reserve (currently unused)
 *
 * Inline (non-box) error messages keep their own classes:
 *   .form-error           form-level error inside _form_errors.kte
 *   .error-msg            inline error inside a modal
 *   .form-field-error     per-input validation message rendered by _field_error.kte */

.notice {
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    border: 1px solid transparent;
}
.notice strong { display: block; margin-bottom: .2rem; }

.notice--error {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
}

.notice--success {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.notice--info {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-card));
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-strong);
}

/* Inline error messages (no box) */

.form-error {
    color: var(--danger);
    font-size: .875rem;
    margin-bottom: 1rem;
}

.error-msg {
    color: var(--danger);
    font-size: .875rem;
    margin: .5rem 0;
}

.form-field-error {
    color: var(--danger);
    font-size: .8rem;
    margin-top: 0.25rem;
}

/* Account-creation results panel. Same visual family as .notice--success
 * but slightly larger and contains a table; keeps its own class to avoid
 * the table dragging .notice--success around in markup. */
.create-results {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: 6px;
    max-width: 560px;
}
.create-results p { margin-top: 0; }
.create-results code {
    font-family: monospace;
    font-size: 1rem;
    letter-spacing: 0.05em;
}