/*
 * Coral: hláška u nevyplněného nebo špatně vyplněného pole (Světlina 221),
 * základní vzhled. Chování je v coral-formular.js.
 *
 * Hláška je bublinka .coral-tip (coral-tip.css) s třídou .coral-hlaska, takže
 * má tvar, písmo a šipku bublinek webu. Navíc má ikonu výstrahy a hranu
 * v barvě akcentu. Všechno je pod :where(), každé pravidlo webu vyhraje.
 *
 *   --coral-hlaska-akcent     barva ikony, hrany hlášky i hrany chybného pole
 *   --coral-hlaska-pozadi, --coral-hlaska-barva, --coral-hlaska-hrana,
 *   --coral-hlaska-max-sirka  bez nich platí --coral-tip-*
 *   --coral-hlaska-odstup     mezera od pole (jinak --coral-tip-odstup)
 *
 * Chybné pole má aria-invalid="true" a třídu .coral-neplatne (když je pole
 * skryté, nese ji i to, co je z něj vidět: popisek, editor, obal).
 */
:where(.coral-hlaska) {
  --_akcent: var(--coral-hlaska-akcent, #e5486b);
  --_hrana: var(--coral-hlaska-hrana, color-mix(in srgb, var(--_akcent) 55%, transparent));
  max-width: var(--coral-hlaska-max-sirka, min(320px, calc(100vw - 16px)));
  background: var(--coral-hlaska-pozadi, var(--coral-tip-pozadi, #221c19));
  color: var(--coral-hlaska-barva, var(--coral-tip-barva, #f3ebe2));
}

:where(.coral-hlaska__obsah) {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

/* Ikona výstrahy (lucide circle-alert) maskou, ať má barvu akcentu webu. */
:where(.coral-hlaska__obsah)::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.12em;
  background: var(--_akcent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Chybné pole: hrana v barvě akcentu, dokud do něj člověk nepíše. */
:where(.coral-neplatne):not(:focus):not(:focus-within) {
  border-color: var(--coral-hlaska-akcent, #e5486b);
}

@media (prefers-reduced-motion: reduce) {
  :where(.coral-hlaska), :where(.coral-hlaska.je-videt) { transition: none; translate: none; }
}