/**
 * Login form — error presentation.
 *
 * Written as plain CSS rather than Tailwind utilities because the compiled
 * bundle (assets/css/main.css) can't be rebuilt without node_modules, and
 * the classes this needs — text-red-600 among them — aren't in the version
 * that's checked in. Utilities added here would simply not exist.
 */

.sit-login__error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FDF2F0;
    border: 1px solid #F3D2CB;
    border-left: 3px solid #B4382A;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 22px 0;
    color: #8C2C20;
    font-size: 14px;
    line-height: 1.5;
}

/* The box is focused programmatically so screen readers announce it.
   :focus-visible rather than :focus means that scripted focus doesn't
   paint a ring — a keyboard user tabbing to it still gets one. */
.sit-login__error:focus-visible {
    outline: 2px solid #B4382A;
    outline-offset: 2px;
}

.sit-login__error-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #B4382A;
}

/* Per-field message, sitting directly under the input it belongs to. */
.sit-login__field {
    position: relative;
}

.sit-login__field-error {
    margin: 6px 0 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #B4382A;
}

.sit-login__field-error[hidden] {
    display: none;
}

/* The inputs are underline-style, so the invalid state colours the rule
   rather than drawing a box that would fight the design. */
.sit-login input[aria-invalid="true"] {
    border-bottom-color: #B4382A;
}

.sit-login input[aria-invalid="true"]:focus {
    border-bottom-color: #B4382A;
}

/* The theme's focus styles are very faint; keyboard users need to see
   where they are. */
.sit-login input:focus-visible {
    outline: none;
    border-bottom-color: #BFA572;
    box-shadow: 0 2px 0 0 rgba(191, 165, 114, 0.35);
}

.sit-login button[type="submit"]:focus-visible,
.sit-login a:focus-visible {
    outline: 2px solid #BFA572;
    outline-offset: 3px;
}