/* Hi-Lo card counting (/hi-lo-card-counting): what is its own - the canvas stage and what is drawn over it. The buttons and the accent
   come from the app kit (css/app-kit, docs/app-kit.md); the sliders and checkboxes are the shared app controls.
   Loaded only on this app's page (StylePaths). The stage is the canvas's own box, not the kit's padded
   .ak-stage column; the phone layout is the shared one for canvas apps in landing/seo-pages.css. */

.filter-landing-stage.hilo-landing-stage {
    position: relative;
    display: block;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    background-image: none;
}

.filter-landing-stage.hilo-landing-stage {
    background-color: #0f5c3c;
}

.hilo-landing-stage:focus {
    outline: none;
}

.hilo-landing-stage:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.7);
    outline-offset: -2px;
}

.hilo-landing-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hilo-landing-app .ak-btn.hilo-auto-btn.hilo-auto-btn--go {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

/* Hi-Lo: Deal waits while a practice question is open. */
.hilo-landing-controls .ak-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

body.filter-app-mode .hilo-landing-stage {
    box-shadow: none;
}

@media (max-width: 600px) {
    .filter-landing-stage.hilo-landing-stage {
        aspect-ratio: 3 / 4;
    }

    body.filter-app-mode .filter-landing-app.hilo-landing-app:not(.is-panel-collapsed) > .filter-landing-stage.hilo-landing-stage {
        aspect-ratio: 3 / 4;
        max-height: max(100dvw, calc(100dvh - var(--seo-chrome-height) - 11rem)) !important;
    }
}

.hilo-landing-stage.hilo-stage--transparent {
    background: var(--component-checkerboard);
}