.urbis-notice, .urbis-toast {
  --notice-tone: var(--color-info);
  border: 1px solid color-mix(in srgb, var(--notice-tone) 30%, transparent);
  background: color-mix(in srgb, var(--notice-tone) 10%, var(--color-base-100));
  color: var(--color-base-content);
  border-radius: .5rem;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  line-height: 1.5;
  text-align: start;
  overflow-wrap: anywhere;
}
:is(.urbis-notice, .urbis-toast)[data-tone="success"] { --notice-tone: var(--color-success); }
:is(.urbis-notice, .urbis-toast)[data-tone="warning"] { --notice-tone: var(--color-warning); }
:is(.urbis-notice, .urbis-toast)[data-tone="error"] { --notice-tone: var(--color-error); }
.urbis-notice[data-density="compact"] { padding: .75rem; font-size: .8125rem; }
.urbis-notice[data-variant="banner"] { border-color: var(--notice-tone); background: color-mix(in srgb, var(--notice-tone) 18%, var(--color-base-100)); }
.urbis-notice[data-variant="public"] { color: var(--ink, var(--color-base-content)); background: color-mix(in srgb, var(--notice-tone) 10%, var(--paper, var(--color-base-100))); }
.urbis-notice-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--notice-tone); margin-top: .125rem; }
.urbis-notice-content { flex: 1; min-width: 0; }
.urbis-notice-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
#toast-container { position: fixed; bottom: 1rem; right: 1rem; width: min(26rem, calc(100vw - 2rem)); max-height: 60vh; max-height: 60dvh; overflow-y: auto; white-space: normal; padding: .25rem; }
.urbis-toast { width: 100%; align-items: center; box-shadow: 0 3px 12px #0002; }
.urbis-toast [data-toast-message] { flex: 1; min-width: 0; white-space: pre-line; }
.urbis-toast button { flex-shrink: 0; }

/* A validation marker is independent of widget kind; no widget is rebuilt to show an error. */
[data-feedback-invalid] {
  border-color: var(--color-error);
  outline-color: var(--color-error);
}