/* ============================================================================
   ICONS CAPTCHA — styled for Kintech (reach-out.html)
   Uses the site's design tokens (src/css/core/tokens.css), so it matches the
   form fields and follows the light/dark theme. Unlayered on purpose: it sits
   on top of the site's cascade layers without needing !important.
   Text colour on tiles must not transition: the canvas labels read the
   computed colour right after a class change (see generate-icons-captcha.js).
   ============================================================================ */

.icons-captcha{
    --icons-ok: light-dark(#1b7f4b, #6fdc9c);
    --icons-error: #d6336c;

    padding: clamp(1rem, 2.5vw, 1.4rem);
    border-radius: 1rem;
    border: 2px solid var(--ink-mute);
    background: var(--surface-solid);
    color: var(--ink);
}

.icons-captcha-header{
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
}

.icons-captcha-header i{ font-size: 1rem; }

.icons-captcha-prompt-panel{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .45rem;
    margin-bottom: 1rem;
    padding: .85rem 1.1rem;
    border-radius: .85rem;
    background: var(--grad-brand);
    color: #fff;
}

.icons-captcha-prompt{
    margin: 0;
    font-size: var(--fs-sm);
}

.icons-captcha-target{
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.1;
}

.icons-captcha-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.icons-captcha-tile{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    min-inline-size: 0;
    padding: 1.05rem .5rem .75rem;
    border-radius: .85rem;
    border: 2px solid var(--ink-mute);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    cursor: pointer;
    user-select: none;
    transition: border-color .3s, background-color .3s, translate .35s var(--ease-spring);
}

.icons-captcha-tile:hover{
    border-color: color-mix(in oklab, var(--accent) 55%, transparent);
    translate: 0 -2px;
}

.icons-captcha-tile:focus-visible,
.icons-captcha-new-problem:focus-visible,
.icons-captcha-verify-btn:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.icons-captcha-tile.is-selected{
    border-color: var(--accent);
    background: var(--accent);
    color: light-dark(#fff, var(--k-indigo));
}

.icons-captcha-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    color: var(--accent);
}

.icons-captcha-tile.is-selected .icons-captcha-icon{ color: inherit; }

/* The canvas is a fixed 140px wide; let it shrink inside narrow tiles */
.icons-captcha-label-canvas{
    display: block;
    max-inline-size: 100%;
    block-size: auto !important;
    aspect-ratio: 140 / 26;
    display: none;
}

.icons-captcha-actions{
    display: flex;
    align-items: center;
    justify-content: center;            /* Reset + Verify centred under the grid */
    gap: .6rem;
}

.icons-captcha-new-problem,
.icons-captcha-verify-btn{
    padding: .6rem 1.25rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--accent);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s, color .3s, border-color .3s, translate .35s var(--ease-spring);
}

.icons-captcha-new-problem{
    background: transparent;
    color: var(--accent);
}

.icons-captcha-verify-btn{
    background: var(--accent);
    color: light-dark(#fff, var(--k-indigo));
}

.icons-captcha-new-problem:hover,
.icons-captcha-verify-btn:hover{
    translate: 0 -2px;
}

.icons-captcha-new-problem:hover{
    background: color-mix(in oklab, var(--accent) 12%, transparent);
}

.icons-captcha-feedback{
    margin: 0;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 500;
}

.icons-captcha-feedback:not(:empty){ margin-top: .85rem; }
.icons-captcha-feedback.is-error{ color: var(--icons-error); }
.icons-captcha-feedback.is-success{ color: var(--icons-ok); }

/* Submit stays locked until the captcha passes */
.is-captcha-locked .send-btn:disabled{
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    translate: none;
}

@media (max-width: 420px){
    .icons-captcha-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce){
    .icons-captcha-tile,
    .icons-captcha-new-problem,
    .icons-captcha-verify-btn{ transition: none; }
}