/* =============================================================
   inline-validation.css — styles for the `galv-inline-validation` handle.

   Pairs with assets/js/inline-validation.js. Loaded on calculator and
   free-resource singulars alongside the per-slug comp stylesheet.

   WHY !important ON THE FIELD STATE. This has to win over eleven independent comp
   stylesheets, each of which styles its own inputs at higher specificity than a
   single class can reach — e.g. `body.single-calculator .form-group input` is
   (0,2,1) and `input.galv-input-error` is only (0,1,1). Raising specificity here
   would mean guessing each comp's selector shape and re-guessing whenever a comp is
   re-extracted. The alternative (a long selector list) is the fragile option, not
   the safe one. Scope is a single galv-prefixed class, so the blast radius is
   exactly the fields our own JS marks.

   The message itself is NOT !important — nothing competes for .galv-field-error,
   and leaving it normal keeps a comp free to restyle its own error text.
   ============================================================= */

.galv-input-error {
    border-color: #ff4d4d !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.2) !important;
}

.galv-field-error {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #d32f2f;
    font-family: inherit;
}

.galv-field-error::before {
    content: "\26A0";
    /* Decorative — the text carries the meaning and role="alert" announces it. */
    speak: never;
}

/* ⚠ Must come AFTER .galv-field-error. `display: flex` overrides the `hidden`
   attribute's UA `display: none`, so without this a cleared message would keep
   occupying space as an empty red row. Verified in-browser, not assumed. */
.galv-field-error[hidden] {
    display: none;
}