/* Shared feedback derives its colours from the site theme. */
:root, [data-color-mode] {
  --feedback-error-ink: var(--destructive); --feedback-error-line: var(--destructive);
  --feedback-success-ink: var(--success); --feedback-success-line: var(--success);
  --feedback-warning-ink: var(--warning); --feedback-warning-line: var(--warning);
  --feedback-info-ink: var(--info); --feedback-info-line: var(--info);
  --feedback-error-bg: color-mix(in oklch, var(--destructive) 10%, var(--background));
  --feedback-success-bg: color-mix(in oklch, var(--success) 10%, var(--background));
  --feedback-warning-bg: color-mix(in oklch, var(--warning) 10%, var(--background));
  --feedback-info-bg: color-mix(in oklch, var(--info) 10%, var(--background));
}
/* Preserve each status colour when mixing with the app's neutral surfaces. */
html[data-ui-preset="base-lyra"] {
  --feedback-error-bg: color-mix(in oklab, var(--destructive) 10%, var(--background));
  --feedback-success-bg: color-mix(in oklab, var(--success) 10%, var(--background));
  --feedback-warning-bg: color-mix(in oklab, var(--warning) 10%, var(--background));
  --feedback-info-bg: color-mix(in oklab, var(--info) 10%, var(--background));
}
html body :is(.feedback, .errorlist, .field-error, .errornote, :where(.messagelist) > .error) {
  --feedback-bg: var(--feedback-info-bg); --feedback-ink: var(--feedback-info-ink); --feedback-line: var(--feedback-info-line);
  --feedback-icon: url("../vendor/lucide/icons/info.58c1c5abf89a.svg");
  position: relative; display: block; padding: .85rem 1rem .85rem 2.8rem;
  margin-block: .65rem 1rem; border: 1px solid var(--feedback-line); border-left-width: 4px;
  border-radius: var(--control-radius); background: var(--feedback-bg); color: var(--feedback-ink);
  line-height: 1.5; text-align: start; overflow-wrap: anywhere; min-width: 0;
}
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) {
  --feedback-bg: var(--feedback-error-bg); --feedback-ink: var(--feedback-error-ink); --feedback-line: var(--feedback-error-line);
  --feedback-icon: url("../vendor/lucide/icons/circle-alert.51a4026e6ed1.svg");
}
html body :is(.feedback-success, [data-feedback="success"]) {
  --feedback-bg: var(--feedback-success-bg); --feedback-ink: var(--feedback-success-ink); --feedback-line: var(--feedback-success-line);
  --feedback-icon: url("../vendor/lucide/icons/circle-check.96e697f4eec2.svg");
}
html body :is(.feedback-warning, [data-feedback="warning"]) {
  --feedback-bg: var(--feedback-warning-bg); --feedback-ink: var(--feedback-warning-ink); --feedback-line: var(--feedback-warning-line);
  --feedback-icon: url("../vendor/lucide/icons/triangle-alert.a2b907c16c7a.svg");
}
html body :is(.feedback, .errorlist, .field-error, .errornote, :where(.messagelist) > .error)::before {
  content: ''; position: absolute; left: .85rem; top: 1rem; width: 1.15rem; height: 1.15rem;
  background: var(--feedback-ink); mask: var(--feedback-icon) center / contain no-repeat;
  -webkit-mask: var(--feedback-icon) center / contain no-repeat;
}
html body .feedback > :last-child { margin-bottom: 0; }
html body .feedback a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
html body .errorlist { list-style: none; }
/* A form summary can contain error lists; avoid boxes inside boxes. */
html body :is(.feedback, .errorlist) .errorlist {
  padding: 0; margin: .25rem 0 0; border: 0; background: transparent; color: inherit;
}
html body :is(.feedback, .errorlist) .errorlist::before { content: none; }
html body .feedback:has(> .icon)::before { content: none; }
html body .feedback:has(> .icon) { padding-left: 1rem; }
html body :is(.feedback, .errorlist, .field-error, .errornote, :where(.messagelist) > .error):is(:empty, [data-feedback-empty="true"], [hidden]) { display: none !important; }
html body :is(input, select, textarea):is([aria-invalid="true"], .field-invalid, :user-invalid) {
  border-color: var(--feedback-error-line); outline: 1px solid var(--feedback-error-line); outline-offset: 0;
}
html body :is(input, select, textarea)[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--feedback-error-line) 22%, transparent);
}
html body .feedback-inline { display: inline-block; padding: .35rem .65rem .35rem 2rem; margin: 0; font-size: .875rem; }
html body .feedback-inline::before { left: .5rem; top: .5rem; width: 1rem; height: 1rem; }

html body .feedback { color: var(--feedback-ink) !important; }
[data-feedback-messages]:not(:has(> *)) { display: none; }
html body .site-alert { background: var(--feedback-info-bg); color: var(--feedback-info-ink); border-color: var(--feedback-info-line); border-left-width: 4px; }
html body .site-alert-warning { background: var(--feedback-warning-bg); color: var(--feedback-warning-ink); border-color: var(--feedback-warning-line); }
html body .site-alert-promotion { background: var(--feedback-success-bg); color: var(--feedback-success-ink); border-color: var(--feedback-success-line); }
html body .site-alert-icon { color: inherit; }

/* One Lyra error treatment for React, Django forms, async feedback and staff. */
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) {
  font-size: .75rem; font-weight: 400; line-height: 1.5;
  padding: .75rem .75rem .75rem 2.25rem; margin-block: .5rem;
  border: 1px solid color-mix(in oklch, var(--destructive) 20%, transparent);
  border-radius: var(--control-radius); color: var(--destructive);
  background: var(--feedback-error-bg);
}
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error)::before {
  left: .75rem; top: .8125rem; width: 1rem; height: 1rem;
}
html body :is(.errorlist, .field-error, .feedback-danger.feedback-field, .feedback-danger.feedback-inline) {
  padding: 0; border: 0; background: transparent;
}
html body .feedback-danger.feedback-inline { display: inline; margin: 0; }
html body :is(.errorlist, .field-error, .feedback-danger.feedback-field, .feedback-danger.feedback-inline)::before { content: none; }
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) :is(p, h2, h3, li, .text-xs) {
  margin: 0; font-size: inherit; line-height: inherit; color: inherit !important;
}
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) :is(p, li) + :is(p, li) { margin-top: .25rem; }
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) :is(a, button:not(.app-icon-button)) {
  display: inline; padding: 0; height: auto; border: 0; background: transparent;
  color: inherit !important; font: inherit; text-decoration: underline; text-underline-offset: .2em;
}
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) :is(a, button:not(.app-icon-button)):hover { text-decoration-thickness: 2px; }
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) :is(a, button:not(.app-icon-button)):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
html body :is(.feedback-danger, [data-feedback="danger"], .errorlist, .field-error, .errornote, .messagelist > .error) > .icon { width: 1rem; height: 1rem; color: inherit; }
html body .feedback-action + .feedback-action { margin-inline-start: .75rem; }

@media (forced-colors: active) {
  html body :is(.feedback, .errorlist, .field-error, .errornote, :where(.messagelist) > .error) { border-color: CanvasText; }
  html body :is(.feedback, .errorlist, .field-error, .errornote, :where(.messagelist) > .error)::before { background: CanvasText; }
}

html body .feedback-danger:has(> .icon) { padding-left: .75rem; }