/*
 * ============================================================
 * CAPTCHA — the human check card (js/captcha.js): challenge image, refresh, answer field. Used inside the
 * sign-in / sign-up forms, the placement-test start and the public forms. Light and dark via the shared tokens.
 * ============================================================
 */
.captcha-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 10px;
    padding: 14px 16px 16px;
    border-radius: 20px;
    border: 1px solid var(--neutral-border);
    background: linear-gradient(160deg, var(--accent-soft-bg), transparent 70%), var(--color-surface);
    box-shadow: 0 8px 24px -16px rgba(93, 13, 24, 0.35);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.captcha-box[hidden] { display: none; }
/* Space for the card before js/captcha.js has built it (the module arrives late on slow phones): without it the form
   below jumped by the card's whole height (measured CLS 0.6 on /login at 390px, throttled). The numbers are the card's
   measured height: 158px side by side, about 35vw + 105px once the image stacks above the field. */
[data-captcha]:not(.captcha-box) { box-sizing: border-box; min-height: 158px; margin: 4px 0 10px; }
@media (max-width: 560px) {
    [data-captcha]:not(.captcha-box) { min-height: calc(35vw + 92px); }
}
.captcha-box:focus-within { border-color: var(--accent-gold); box-shadow: 0 0 0 4px var(--accent-soft-bg), 0 8px 24px -16px rgba(93, 13, 24, 0.35); }
.captcha-box.has-error { border-color: var(--color-error); }

.captcha-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.captcha-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--primary-navy); }
.captcha-title svg { width: 20px; height: 20px; color: var(--accent-gold); }
.captcha-title b { font-weight: 800; }
.captcha-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--neutral-soft-bg);
    color: var(--ink-soft);
    font: 700 12px var(--font-body);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.captcha-refresh svg { width: 16px; height: 16px; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.captcha-refresh:hover, .captcha-refresh:focus-visible { background: var(--accent-soft-bg); color: var(--accent-gold); outline: none; }
.captcha-refresh:hover svg, .captcha-refresh:focus-visible svg { transform: rotate(180deg); }

.captcha-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.captcha-img {
    position: relative;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 240 / 84;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--neutral-border);
    background: #fbf6ee;
    box-shadow: inset 0 2px 8px rgba(60, 10, 20, 0.08);
    user-select: none;
}
.captcha-img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 0.3s ease; -webkit-user-drag: none; pointer-events: none; }
.captcha-img.is-loading img { opacity: 0; }
.captcha-img.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(184, 150, 74, 0.28) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: captcha-shimmer 1.2s linear infinite;
}
@keyframes captcha-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.captcha-field { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.captcha-input {
    width: 100%;
    height: 52px;
    text-align: center;
    text-transform: uppercase;
    font: 800 22px 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 6px;
    padding-inline-start: 6px;
}
.captcha-input::placeholder { font: 600 13px var(--font-body); letter-spacing: 0; text-transform: none; opacity: 0.6; }
.captcha-msg { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--color-error); line-height: 1.7; }

@media (max-width: 560px) {
    .captcha-body { grid-template-columns: minmax(0, 1fr); }
    .captcha-img { width: 100%; }
    .captcha-refresh span { display: none; }
    .captcha-refresh { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .captcha-img.is-loading::after, .captcha-refresh svg { animation: none; transition: none; }
}