/* Shared semantic feedback cards, loaded last so page styles cannot flatten
   success/error/warning/info. Untyped field help remains compact and neutral. */
:is(.feedback-card, .inline-status, .field-help.success, .field-help.error,
    .field-help.warning, .field-help.info, .toast, .login-username-status,
    .username-availability, .username-availability-message, .warning-box,
    .billing-warning, .party-warning, .party-mode-note, .register-password-warning,
    .prototype-banner,
    .coin-trial-banner, .coin-deletion-warning, .tier-action-note, .tier-message,
    .tier-note, .record-loading, .record-load-error, .route-error,
    .tally-storage-note, .import-fix-reason, .tally-progress, .tally-result-clean,
    .voucher-history-empty, .form-intro, .tally-issue-copy, .invoice-preview-loading,
    .invoice-preview-error, .verified-heading) {
  --feedback-text: var(--primary-dark);
  --feedback-bg: var(--primary-soft);
  --feedback-line: var(--teal-line);
  min-width: 0;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--feedback-line);
  border-left: 4px solid var(--feedback-text);
  border-radius: 10px;
  color: var(--feedback-text);
  background: var(--feedback-bg);
  font-size: .8rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

:is(.feedback-card.success, .inline-status.success, .field-help.success,
    .toast.success, .login-username-status.success, .username-availability.available,
    .tally-result-clean, .tally-issue-section.history .tally-issue-copy,
    .verified-heading) {
  --feedback-text: var(--accepted);
  --feedback-bg: var(--accepted-soft);
  --feedback-line: color-mix(in srgb, var(--accepted) 32%, var(--line));
}
:is(.feedback-card.info, .inline-status.info, .field-help.info, .toast.info,
    .login-username-status.info, .username-availability.info, .tier-action-note.info) {
  --feedback-text: var(--primary-dark);
  --feedback-bg: var(--primary-soft);
  --feedback-line: var(--teal-line);
}
:is(.feedback-card.error, .inline-status.error, .field-help.error, .toast.error,
    .login-username-status.error, .username-availability.unavailable, .username-availability.invalid,
    .record-load-error, .route-error, .voucher-history-empty.error,
    .import-fix-reason.failed, .tally-progress.is-error, .party-warning,
    .tally-issue-section.failed .tally-issue-copy, .username-availability.error,
    .invoice-preview-error) {
  --feedback-text: var(--danger);
  --feedback-bg: var(--danger-soft);
  --feedback-line: color-mix(in srgb, var(--danger) 32%, var(--line));
}
:is(.feedback-card.warning, .inline-status.warning, .field-help.warning,
    .toast.warning, .login-username-status.warning, .username-availability.warning,
    .warning-box, .billing-warning, .register-password-warning, .coin-deletion-warning,
    .coin-trial-banner.warning, .import-fix-reason.skipped, .tier-action-note.warning,
    .tally-issue-section.skipped .tally-issue-copy) {
  --feedback-text: var(--pending);
  --feedback-bg: var(--pending-soft);
  --feedback-line: color-mix(in srgb, var(--pending) 32%, var(--line));
}

/* Message children must inherit their semantic color, not old page-specific
   grey paragraph/small styles. Controls and record tables are not affected. */
:is(.feedback-card, .inline-status, .login-username-status,
    .username-availability, .warning-box, .billing-warning, .party-warning,
    .party-mode-note, .verified-gst, .register-password-warning, .prototype-banner,
    .coin-trial-banner, .coin-deletion-warning, .tier-action-note, .tier-message,
    .tier-note, .record-loading, .record-load-error, .route-error,
    .tally-storage-note, .import-fix-reason, .tally-progress, .tally-result-clean,
    .voucher-history-empty, .form-intro, .tally-issue-copy, .invoice-preview-loading,
    .invoice-preview-error, .verified-heading) :is(p, small, strong, span, b, h2) { color: inherit; }

:is(.feedback-card, .inline-status, .field-help.success, .field-help.error,
    .field-help.warning, .field-help.info, .login-username-status,
    .tier-action-note, .tier-message, .tier-note,
    .voucher-history-empty):empty { display: none; }
.inline-status { min-height:0; margin:10px 0 0; }
.field-help:is(.success, .error, .warning, .info) { display: block; margin-top: 8px; }
.feedback-card { margin: 0; }
.feedback-card + .feedback-card { margin-top: 10px; }
.inline-status.span-2 { grid-column:1/-1; }
.toast { width:min(400px,calc(100vw - 28px)); max-width:calc(100vw - 28px); pointer-events:auto; }
.toast:not(.success):not(.error):not(.warning):not(.info) { --feedback-text:var(--text);--feedback-bg:var(--surface);--feedback-line:var(--line);border-left-color:var(--primary); }
.toast span { margin-top:4px; color:inherit; }
.login-username-status,.username-availability { margin:0 0 12px; padding:9px 11px; }
.login-username-status { min-height:0; }
.auth-form .field-help:is(.success, .error, .warning, .info) { margin: 8px 0 0; }
.coin-trial-banner > span, .coin-deletion-warning > span { color: var(--feedback-text); background: var(--feedback-bg); }
.register-password-warning > span { color: var(--feedback-text); background: var(--feedback-bg); }
.route-error { padding: 20px; }
.record-loading { min-height:70px; margin:0 0 14px; }
.verified-heading { margin:0 0 10px; padding:0; border:0; border-radius:0; border-left:0; background:none; font-size:inherit; line-height:normal; }
.tally-issue-section.failed > .tally-issue-head,
.tally-issue-section.skipped > .tally-issue-head,
.tally-issue-section.history > .tally-issue-head { color:var(--feedback-text); background:var(--feedback-bg); border-bottom-color:var(--feedback-line); }
.tally-issue-section > .tally-issue-head :is(strong, small) { color:inherit; }
.tally-progress.is-error .tally-progress-head > span { color: var(--feedback-text); }
.tally-issue-copy { padding: 9px 11px; }.tally-issue-section :is(.tally-issue-copy p, .tally-issue-copy small) { color: inherit; }
.tally-issue-section.history .tally-issue-copy { --feedback-text:var(--accepted);--feedback-bg:var(--accepted-soft);--feedback-line:color-mix(in srgb,var(--accepted) 32%,var(--line)); }
.tally-issue-section.failed .tally-issue-copy { --feedback-text:var(--danger);--feedback-bg:var(--danger-soft);--feedback-line:color-mix(in srgb,var(--danger) 32%,var(--line)); }
.tally-issue-section.skipped .tally-issue-copy { --feedback-text:var(--pending);--feedback-bg:var(--pending-soft);--feedback-line:color-mix(in srgb,var(--pending) 32%,var(--line)); }
.invoice-settings-savebar .feedback-card { flex:1; }
.invoice-settings-savebar > button { flex:none; }
.username-availability-message { display:flex;align-items:center;gap:7px;color:inherit;font-weight:700; }
.username-availability-message::before { content:'';width:7px;height:7px;flex:none;border-radius:999px;background:var(--feedback-text); }
.username-availability.checking .username-availability-message::before { width:10px;height:10px;border:2px solid var(--feedback-text);border-right-color:transparent;background:transparent;animation:auth-spin .7s linear infinite; }
.username-availability.available .username-availability-message,
.username-availability.unavailable .username-availability-message,
.username-availability.invalid .username-availability-message,
.username-availability.warning .username-availability-message,
.username-availability.error .username-availability-message { color:var(--feedback-text); }
.username-availability.available .username-availability-message::before,
.username-availability.unavailable .username-availability-message::before,
.username-availability.invalid .username-availability-message::before,
.username-availability.warning .username-availability-message::before,
.username-availability.error .username-availability-message::before { background:var(--feedback-text); }
.username-suggestions { display:flex;flex-wrap:wrap;align-items:center;gap:6px; }
.username-suggestion { min-height:28px;padding:5px 9px;border:1px solid var(--teal-line);border-radius:999px;color:var(--primary-dark);background:var(--surface);font-size:.82rem;font-weight:750; }
.username-suggestion:hover,.username-suggestion:focus-visible { border-color:var(--primary);color:#fff;background:var(--primary);outline:none; }
.service-down-card .inline-status { margin:10px 0 0; }
@media (max-width: 680px) {
  .toast-region { right:14px;left:14px;justify-items:stretch; }
}