/* dv-form-alert (2026-11-02): the popup with the reasons a form cannot go on (alert.js), the outline of the faulty
   field and the calendar's fallback line. Kit tokens with fallbacks (the chat and the one-click dialog also run on
   pages outside the kit). */

.dvfa {
  --dvfa-bg: #FBEDEB;
  --dvfa-line: #E2B2AB;
  --dvfa-err: var(--error, #A1281E);
  --dvfa-ink: var(--ink, #1A171B);
  position: fixed;
  inset: auto;
  z-index: var(--z-toast, 110);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 32px;
  align-items: start;
  column-gap: 10px;
  width: max-content;
  max-width: min(400px, calc(100vw - 24px));
  max-height: min(60vh, 420px);
  margin: 0;
  padding: 12px 8px 12px 14px;
  overflow: visible;
  color: var(--dvfa-ink);
  background: var(--dvfa-bg);
  border: 1px solid var(--dvfa-line);
  border-radius: var(--radius-media, 8px);
  box-shadow: 0 18px 40px -14px rgb(26 23 27 / .32), 0 2px 6px rgb(26 23 27 / .08);
  font-family: var(--font-text, system-ui, sans-serif);
  font-size: var(--fs-ui, .9375rem);
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  transform: translateY(6px) scale(.97);
  transition: opacity 180ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)), transform 240ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.dvfa[popover]:not(:popover-open) { display: none; }
.dvfa[hidden] { display: none; }
.dvfa.is-in { opacity: 1; transform: none; }
.dvfa[data-place="below"] { transform: translateY(-6px) scale(.97); }
.dvfa[data-place="below"].is-in { transform: none; }
.dvfa[data-place="dock"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
/* the exit is quicker than the entrance */
.dvfa:not(.is-in) { transition-duration: 120ms; }

.dvfa__icon { display: block; width: 20px; height: 20px; margin-top: 2px; color: var(--dvfa-err); }
.dvfa svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dvfa__msg { min-width: 0; max-height: calc(min(60vh, 420px) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.dvfa__msg p { margin: 0; }
.dvfa__one { padding-top: 1px; font-weight: var(--fw-strong, 600); color: var(--dvfa-err); text-wrap: pretty; }
.dvfa__title { padding-top: 1px; font-weight: var(--fw-strong, 600); color: var(--dvfa-err); }
.dvfa__list { margin: 6px 0 0; padding: 0 0 0 18px; list-style: disc; }
.dvfa__list li { margin: 0; padding: 0; }
.dvfa__list li::marker { color: var(--dvfa-err); }
.dvfa__list li + li { margin-top: 4px; }
/* block: the bullet stays on a reason's first line when it wraps */
.dvfa__list button {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--dvfa-err) 45%, transparent); text-underline-offset: 3px;
  cursor: pointer;
}
.dvfa__list button:hover { text-decoration-color: currentColor; }
.dvfa__list button:focus-visible, .dvfa__x:focus-visible { outline: 2px solid var(--focus, #4C8C2B); outline-offset: 2px; border-radius: 2px; }
.dvfa__x {
  display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 -6px; padding: 7px;
  border: 0; border-radius: var(--radius-control, 4px); background: transparent; color: var(--dvfa-ink); cursor: pointer;
  transition: background-color 150ms ease, transform 150ms var(--ease-out, ease-out);
}
.dvfa__x:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .dvfa__x:hover { background: rgb(161 40 30 / .1); } }
/* a 44 px target on touch screens */
@media (pointer: coarse) { .dvfa__x { width: 44px; height: 44px; margin: -12px -6px -12px 0; padding: 12px; } .dvfa { grid-template-columns: 20px minmax(0, 1fr) 38px; } }

/* the arrow to the pressed button: a rotated square with the popup's own face and frame */
.dvfa__arrow { position: absolute; width: 12px; height: 12px; margin-left: -6px; background: var(--dvfa-bg); border: 1px solid var(--dvfa-line); transform: rotate(45deg); pointer-events: none; }
.dvfa[data-place="above"] .dvfa__arrow { bottom: -7px; border-top: 0; border-left: 0; }
.dvfa[data-place="below"] .dvfa__arrow { top: -7px; border-bottom: 0; border-right: 0; }
.dvfa[data-place="dock"] .dvfa__arrow { display: none; }

/* the faulty field: an outline in the error colour that closes in on it once */
.dvfa-bad { outline: 2px solid var(--error, #A1281E) !important; outline-offset: 3px !important; animation: dvfa-ring 420ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)); }
fieldset.dvfa-bad, .dvt-cal.dvfa-bad, .dvh-cal.dvfa-bad { outline-offset: 5px !important; border-radius: var(--radius-media, 8px); }
@keyframes dvfa-ring { from { outline-offset: 14px; outline-color: rgb(161 40 30 / 0); } }

@media (prefers-reduced-motion: reduce) {
  .dvfa, .dvfa[data-place="below"] { transform: none; transition: opacity 120ms linear; }
  .dvfa-bad { animation: none; }
}

/* the server's list of reasons inside an error notice: each a link to its field (works without JavaScript too) */
.dvfa-summary { margin: 6px 0 0; padding: 0 0 0 18px; list-style: disc; }
.dvfa-summary li + li { margin-top: 2px; }
.dvfa-summary li::marker { color: var(--error, #A1281E); }
.dvfa-summary a { color: var(--error, #A1281E); text-underline-offset: 3px; }

/* dv-tours: the line under the plain date box, shown only while the month calendar is not drawn */
.dvt-cal ~ .dvt-date-fallback, .dvt-date-fallback[hidden] { display: none; }