/* IconCaptcha, dressed as one of our form rows.

   The library ships a single hard-coded look — 330px wide box, blue accent,
   uppercase titles, 8px radius — that reads as a foreign widget dropped into
   the registration form. It exposes no custom properties, so the only way to
   reskin it is to re-declare its own selectors. That works because the
   register page links this file after the library stylesheet: the rules below
   have the same specificity and win on order alone. Keep that link order.

   Deliberately unlayered, unlike every other stylesheet here: the library's
   CSS is unlayered too, and an @layer block rule always loses to it no matter
   the order. Same battlefield, or no fight at all.

   Dark mode costs one trick. The frame and the text follow the semantic
   tokens and flip for free, but the icons come from a PNG the server renders
   for the light theme — dark glyphs that would vanish on a dark surface. The
   glyphs are monochrome, so `filter: invert()` turns them light, and the
   filter is carried by a custom property that flips exactly where
   variables.css flips its tokens.

   Only the frame and the palette are ours. The geometry of the challenge
   strip (the 320px icons/selection area) is load-bearing: click coordinates
   are mapped back to an icon using the element width, so resizing it would
   break the selection. */

.iconcaptcha-widget {
    /* The site's lime, --color-brand — identical in both themes, so the
       pulsing circle, the loader and the selection dot may read it live. */
    --captcha-accent: var(--color-accent, #c6e600);
    /* The breathing animation's low phase; a dimmed lime with no token. */
    --captcha-accent-dim: #a7c200;
    /* Light glyphs for a dark surface — see the dark-mode note above. */
    --captcha-icon-filter: none;

    /* The library caps the widget at 330px. The rest of the form is full
       width, and the captcha is just another row in it. */
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
}

/* Mirrors the token flip in variables.css: OS preference unless overridden,
   plus the explicit [data-theme="dark"] switch. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .iconcaptcha-widget {
        --captcha-icon-filter: invert(1);
    }
}

[data-theme="dark"] .iconcaptcha-widget {
    --captcha-icon-filter: invert(1);
}

.iconcaptcha-widget.iconcaptcha-theme-light {
    /* Matches .form__control: elevated field on the same border weight,
       not the library's grey on a 1px hairline. */
    background: var(--color-bg-elevated);
    border: 1.5px solid var(--color-border);
}

.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-init:hover {
    background: var(--color-bg-subtle);
}

/* The server draws dark glyphs; on a dark surface they come back inverted. */
.iconcaptcha-widget .iconcaptcha-modal__body-icons {
    filter: var(--captcha-icon-filter);
}

/* ===== Idle state ("Overte, že nie ste robot.") ===== */

.iconcaptcha-widget.iconcaptcha-init .iconcaptcha-modal__body-circle {
    border-width: 5px;
    border-color: var(--captcha-accent);
}

/* Same name as the library's, redeclared so the animation stops repainting
   the circle blue on every keyframe. */
@keyframes captcha-breathing {
    0%,
    100% {
        transform: scale(1) translateZ(0);
        border-color: var(--captcha-accent);
    }
    25% {
        transform: scale(0.8) translateZ(0);
        border-color: var(--captcha-accent-dim);
    }
    50% {
        transform: scale(1) translateZ(0);
        border-color: var(--captcha-accent);
    }
    75% {
        transform: scale(0.8) translateZ(0);
        border-color: var(--captcha-accent-dim);
    }
}

.iconcaptcha-widget.iconcaptcha-init .iconcaptcha-modal__body-title,
.iconcaptcha-widget.iconcaptcha-success .iconcaptcha-modal__body-title {
    font-size: 0.9375rem;
    font-weight: 500;
    /* The library shouts these in uppercase; only the small labels above the
       fields are uppercase here, and this line is a sentence, not a label. */
    text-transform: none;
}

.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-init .iconcaptcha-modal__body-title {
    color: var(--color-text);
}

/* ===== Challenge state ===== */

/* The instruction bar above the icons. */
.iconcaptcha-widget .iconcaptcha-modal__header span {
    padding: 9px 12px;
    font-size: var(--text-label-caps);
    font-weight: 500;
    line-height: 1.4;
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__header {
    border-bottom: 1px solid var(--color-border);
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__header span {
    color: var(--color-text);
}

/* The library emphasises the important word ("najmenej") with a <u>. Lime is
   a highlight, not a text color — keep the ink and put it in the underline. */
.iconcaptcha-widget .iconcaptcha-modal__header span u {
    text-decoration-color: var(--captcha-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.iconcaptcha-widget .iconcaptcha-modal__body-selection > i {
    background: var(--captcha-accent);
    border: 1px solid var(--color-ink);
}

.iconcaptcha-widget .iconcaptcha-modal__body .captcha-loader {
    border-width: 5px;
    border-color: var(--captcha-accent);
}

/* ===== Result states ===== */

/* Wrong icon / too many attempts: a headline and one line of explanation. */
.iconcaptcha-widget .iconcaptcha-modal__body-title {
    top: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
}

.iconcaptcha-widget .iconcaptcha-modal__body-subtitle {
    top: 33px;
    font-size: var(--text-label-caps);
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__body-subtitle {
    color: var(--color-text-muted);
}

/* The same red the field errors under the form controls are drawn in. */
.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-error .iconcaptcha-modal__body-title {
    color: var(--color-error);
}

/* No success token exists; --color-secondary is the site's lime read as text
   ink, tuned per theme in variables.css, and it says "done" without shouting. */
.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-success .iconcaptcha-modal__body-title {
    color: var(--color-secondary);
}

.iconcaptcha-widget.iconcaptcha-theme-light.iconcaptcha-success .iconcaptcha-modal__body-checkmark svg {
    stroke: var(--color-secondary);
}

/* An unsolved captcha fails validation like any other field, but the form
   theme's .form__field--error never reaches it — the bundle renders its own
   row block. The red border is inferred from the error list in that row. */
.iconcaptcha-row:has(.form__error) .iconcaptcha-widget.iconcaptcha-theme-light {
    border-color: var(--color-error);
}

/* ===== Attribution footer ===== */

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__footer {
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid var(--color-border);
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__footer > span a,
.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__body-info a {
    /* The library prints the credit link in bold uppercase blue, which ends up
       louder than the instruction it sits under. Attribution stays, the
       shouting does not. */
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: none;
}

.iconcaptcha-widget.iconcaptcha-theme-light .iconcaptcha-modal__footer > span a:hover {
    color: var(--color-text);
}