/* Single global knob: change this to scale the entire modal's type,
   spacing, and component sizing up or down together. */
#perspective-modal {
    --vh-unitless: calc(1vh / 1px);
    --perspective-scale: clamp(0.85, 0.7 + 0.012 * var(--vh-unitless), 1.15);

    /* Spacing scale */
    --space-xs: calc(0.375rem * var(--perspective-scale));
    --space-sm: calc(0.5rem   * var(--perspective-scale));
    --space-md: calc(0.75rem  * var(--perspective-scale));
    --space-lg: calc(1rem     * var(--perspective-scale));
    --space-xl: calc(1.5rem   * var(--perspective-scale));

    /* Type scale */
    --font-sm:  calc(1rem    * var(--perspective-scale));
    --font-md:  calc(1.05rem * var(--perspective-scale));
    --font-lg:  calc(1.1rem  * var(--perspective-scale));
    --font-xl:  calc(1.15rem * var(--perspective-scale));
    --font-2xl: calc(1.5rem  * var(--perspective-scale));

    /* Component sizing */
    --icon-size:         calc(1.75rem  * var(--perspective-scale));
    --radio-size:        calc(1.375rem * var(--perspective-scale));
    --radio-dot-size:    calc(0.625rem * var(--perspective-scale));
    --radio-dot-offset:  calc(0.25rem  * var(--perspective-scale));
    --toggle-min-height: calc(2.625rem * var(--perspective-scale));

    /* Color tokens */
    --color-primary:       #0d6efd;
    --color-primary-hover: #0b5ed7;
    --color-primary-ring:  rgb(13 110 253 / 25%);
    --color-primary-wash:  rgb(13 110 253 / 4%);
    --color-text:          #212529;
    --color-text-muted:    #495057;
    --color-text-toggle:   #374151;
    --color-border:        #dee2e6;
    --color-border-radio:  #cbd5e1;
    --color-overlay:       rgb(15 23 42 / 70%);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #fff;
    border-radius: 0.75rem; /* 12px */
    border: none;
    padding: var(--space-xl);
    width: 90%;
    max-width: 85vw;
    max-height: 92vh;
    overflow-y: auto;

    /* Centering anchors — !important needed to beat the native <dialog>
       UA stylesheet's own centering/inset rules. */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 99999 !important;

    /* Bulletproof way to completely black out background elements */
    box-shadow: 0 0 0 100vmax var(--color-overlay) !important;

    /* Must include the modal itself, not just descendants — otherwise
       padding is added on top of the 90% width (content-box) instead of
       being carved out of it (border-box), pushing the modal past the
       viewport edge on narrow screens. */
    box-sizing: border-box !important;

    & * {
        box-sizing: border-box !important;
    }

    /* Native browser overlay mask */
    &::backdrop {
        background-color: var(--color-overlay);
        backdrop-filter: blur(8px);
    }

    #perspective-header {
        font-size: var(--font-2xl);
        font-weight: 800;
        text-align: center;
        margin: 0 0 var(--space-lg) 0;
        color: var(--color-text);
        line-height: 1.25;
    }

    #perspective-input-handle {
        display: block;
        width: 100%;
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-lg);
        border: 2px solid var(--color-border);
        border-radius: 8px;
        margin-bottom: var(--space-lg);
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;

        &:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 4px var(--color-primary-ring);
        }
    }

    .dialog-actions {
        text-align: center;
        width: 100%;
        margin-top: var(--space-lg);
    }

    /* Submit button — !important needed to win against the host page's
       default button styling. ID selector alone gives enough specificity,
       so the redundant class+id selector pair has been dropped. */
    #perspective-submit {
        appearance: none !important;
        display: block !important;
        width: 100% !important;
        padding: var(--space-md) var(--space-xl) !important;
        font-family: inherit !important;
        font-size: var(--font-xl) !important;
        font-weight: 800 !important;
        text-align: center !important;
        background-color: var(--color-primary) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 100 !important;
        transition: background-color 0.15s ease, transform 0.1s ease !important;

        &:hover {
            background-color: var(--color-primary-hover) !important;
        }

        &:active {
            transform: scale(0.96) !important;
        }
    }

    /* ==========================================================================
       SECTION 4: RADIO GROUP (SITE SELECTOR)
       ========================================================================== */
    fieldset {
        border: none;
        padding: 0;
        margin: 0;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .radio-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
        margin-bottom: var(--space-lg);
    }

    .section-title,
    .input-title {
        font-size: var(--font-md);
        font-weight: 600;
        margin: 0 0 var(--space-sm) 0;
        color: var(--color-text-muted);
    }

    .radio-design {
        width: var(--radio-size);
        height: var(--radio-size);
        border: 2px solid var(--color-border-radio);
        border-radius: 50%;
        margin-right: var(--space-md);
        position: relative;
        flex-shrink: 0;
        background-color: #fff;

        &::before {
            content: "";
            position: absolute;
            top: var(--radio-dot-offset);
            left: var(--radio-dot-offset);
            width: var(--radio-dot-size);
            height: var(--radio-dot-size);
            border-radius: 50%;
            background: var(--color-primary);
            transform: scale(0);
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
    }

    .modern-radio {
        display: flex;
        align-items: center;
        width: 100%;
        padding: calc(0.625rem * var(--perspective-scale)) var(--space-md);
        background-color: #f8f9fa;
        border-radius: 8px;
        border: 2px solid transparent;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease-in-out;

        &:hover {
            background-color: #e9ecef;

            .radio-design {
                border-color: #94a3b8;
            }
        }

        &:has(input[type="radio"]:checked) {
            border-color: var(--color-primary);
            background-color: var(--color-primary-wash);
        }

        img {
            width: var(--icon-size);
            height: auto;
            margin-right: var(--space-md);
            object-fit: contain;
        }

        input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;

            &:checked + .radio-design {
                border-color: var(--color-primary);

                &::before {
                    transform: scale(1);
                }
            }
        }
    }


    .radio-label {
        display: inline-block;
        font-size: var(--font-lg);
        font-weight: 600;
        color: var(--color-text);
        line-height: 1;
    }

    /* ==========================================================================
       SECTION 5: SEGMENTED TOGGLE (VARIANT SWITCH)
       ========================================================================== */

    /* Standard Chess vs Chess 960 full width toggle track wrapper.
       !important kept: this wrapper needs to win against a flex/layout
       reset applied elsewhere on the page. */
    .modern-toggle-container {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #e5e7eb !important;
        padding: var(--space-xs) !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        margin: var(--space-lg) 0 !important;
        align-items: stretch !important; /* uniform vertical height across row pairs */

        label {
            flex: 1 !important;
            display: flex !important;
        }
    }

    .toggle-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--toggle-min-height);
        font-size: var(--font-sm);
        font-weight: 600;
        padding: var(--space-sm) var(--space-md);
        color: var(--color-text-toggle);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
        user-select: none;
        text-align: center;

        &:hover {
            color: #000;
            background-color: rgb(255 255 255 / 40%);
        }
    }

    .modern-radio,
    .toggle-button {
        min-height: 44px; /* accessible tap target, independent of --perspective-scale */
    }

    /* Hide native radio input */
    .toggle-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;

        &:focus-visible + .toggle-button {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
        }

        &:checked + .toggle-button {
            background-color: var(--color-primary);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 4px 10px rgb(13 110 253 / 30%);
        }
    }

}