/* The ALTCHA bot check on the sign-in, sign-up, password and 2FA pages,
   restyled to sit with the form fields around it (load after
   vendor/altcha.css). The widget renders in the light DOM, so its own
   classes can be styled here; its states come from data-state on .altcha
   (unverified / verifying / verified / error / expired). Wording comes from
   partials/altcha-widget. The vendor default was a fixed 260px grey box
   with the ALTCHA logo, which looked foreign next to the full-width fields. */

altcha-widget { display: block; }

.altcha {
    --altcha-max-width: 100%;
    --altcha-border-radius: 8px;
    --altcha-color-border: #dee2e6;
    --altcha-color-border-focus: #007BFF;
    --altcha-color-base: #f8fafc;
    --altcha-color-text: #212529;
    --altcha-color-error-text: #dc3545;
    --altcha-color-active: #007BFF;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.altcha:focus-within { box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .15); }

.altcha-main { gap: .75rem; padding: .7rem .9rem; min-height: 58px; }

/* Checkbox in the brand blue, a touch bigger to tap. */
.altcha-checkbox { width: 22px; height: 22px; flex-shrink: 0; }
/* Drawn like Bootstrap's .form-check-input ("Keep me signed in" above it),
   not the browser's own box, which is grey in dark mode. The verifying state
   hides it (vendor: appearance none + opacity 0) for the spinner. */
.altcha-checkbox input {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid #adb5bd;
    border-radius: .3rem;
    background: #fff center / 75% no-repeat;
    transition: background-color .15s ease, border-color .15s ease;
}
.altcha-checkbox input:checked {
    border-color: #007BFF;
    background-color: #007BFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}
.altcha-checkbox input:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
.altcha-checkbox .altcha-spinner { color: #007BFF; }

/* Label plus a one-line caption underneath that follows the state. */
.altcha-label { font-size: .95rem; font-weight: 500; line-height: 1.25; }
.altcha-label::after {
    content: "Quick private check, no puzzles";
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 400;
    color: #6c757d;
}

/* A shield in place of the ALTCHA logo (a link off-site, not useful here). */
.altcha-logo { display: none !important; }
.altcha-main::after {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: #94a3b8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0'/%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 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background-color .2s ease;
}

/* Checking. */
.altcha[data-state="verifying"] { --altcha-color-border: #7fb8ff; --altcha-color-base: #f1f7ff; }
.altcha[data-state="verifying"] .altcha-label::after { content: "This only takes a moment"; }
.altcha[data-state="verifying"] .altcha-main::after { background-color: #007BFF; }

/* Done: green, so it reads as "nothing more to do". */
.altcha[data-state="verified"] { --altcha-color-border: #a3d9b8; --altcha-color-base: #f0faf4; }
.altcha[data-state="verified"] .altcha-label { color: #157347; }
.altcha[data-state="verified"] .altcha-label::after { content: "You're all set"; color: #4b8a65; }
.altcha[data-state="verified"] .altcha-checkbox input { border-color: #198754; background-color: #198754; }
.altcha[data-state="verified"] .altcha-main::after { background-color: #198754; }

/* Failed or expired: red edge, the reason shows underneath. */
.altcha[data-state="error"],
.altcha[data-state="expired"] { --altcha-color-border: #f1aeb5; --altcha-color-base: #fff7f8; }
.altcha[data-state="error"] .altcha-label::after,
.altcha[data-state="expired"] .altcha-label::after { content: "Tick the box to try again"; }
.altcha[data-state="error"] .altcha-main::after,
.altcha[data-state="expired"] .altcha-main::after { background-color: #dc3545; }
.altcha-error { padding: 0 .9rem .7rem; }

/* ---- Dark theme (THEME_PLAN: hand-written colours need an html.dark rule) ---- */
html.dark .altcha {
    --altcha-color-border: #3b4c6e;
    --altcha-color-base: #18223a;
    --altcha-color-text: #e2e8f0;
    --altcha-color-border-focus: #3b82f6;
    --altcha-color-error-text: #f87171;
}
html.dark .altcha:focus-within { box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .25); }
html.dark .altcha-checkbox input { border-color: #506285; background-color: #1e2a45; }
html.dark .altcha-checkbox input:checked { border-color: #3b82f6; background-color: #3b82f6; }
html.dark .altcha-checkbox .altcha-spinner { color: #60a5fa; }
html.dark .altcha-label::after { color: #94a3b8; }
html.dark .altcha-main::after { background-color: #64748b; }
html.dark .altcha[data-state="verifying"] { --altcha-color-border: #3b82f6; --altcha-color-base: rgba(59, 130, 246, .12); }
html.dark .altcha[data-state="verifying"] .altcha-main::after { background-color: #60a5fa; }
html.dark .altcha[data-state="verified"] { --altcha-color-border: rgba(52, 211, 153, .45); --altcha-color-base: rgba(16, 185, 129, .1); }
html.dark .altcha[data-state="verified"] .altcha-label { color: #6ee7b7; }
html.dark .altcha[data-state="verified"] .altcha-label::after { color: #34d399; }
html.dark .altcha[data-state="verified"] .altcha-checkbox input { border-color: #10b981; background-color: #10b981; }
html.dark .altcha[data-state="verified"] .altcha-main::after { background-color: #34d399; }
html.dark .altcha[data-state="error"],
html.dark .altcha[data-state="expired"] { --altcha-color-border: rgba(248, 113, 113, .5); --altcha-color-base: rgba(239, 68, 68, .1); }
html.dark .altcha[data-state="error"] .altcha-main::after,
html.dark .altcha[data-state="expired"] .altcha-main::after { background-color: #f87171; }