/* Sieve of Eratosthenes (/sieve-of-eratosthenes): what is its own - the canvas stage and the HUD 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 phone layout (the stage on top, the controls below) is
   the shared one for canvas apps in landing/seo-pages.css. */

.sieve-of-eratosthenes-landing-app {
    display: grid;
    gap: 1rem;
    align-items: start;
}

/* --- Stage: the canvas fills it ----------------------------------------------------------------------------------
   The grid is drawn over the background of the Background dialog, so the stage is the canvas's own box with the dark
   of that default background behind it, not the kit's padded .ak-stage column. */

.filter-landing-stage.sieve-of-eratosthenes-landing-stage {
    position: relative;
    display: block;
    width: 100%;
    min-height: 280px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: none;
    cursor: default;
    background-color: #070b14;
    background-image: none;
}

/* Background: Transparent shows the checkerboard behind the grid. */
.sieve-of-eratosthenes-landing-stage.sieve-of-eratosthenes-stage--transparent {
    background: var(--component-checkerboard);
}

.sieve-of-eratosthenes-landing-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

body.filter-app-mode .sieve-of-eratosthenes-landing-app .sieve-of-eratosthenes-landing-canvas {
    max-width: none;
}

body.filter-app-mode .sieve-of-eratosthenes-landing-stage {
    box-shadow: none;
}

/* The status line over the top-left corner of the grid: which prime is being sieved and how many were found. */
.sieve-of-eratosthenes-hud {
    position: absolute;
    left: 12px;
    top: 10px;
    right: auto;
    width: max-content;
    max-width: min(520px, calc(100% - 24px));
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(7, 11, 20, 0.62);
    color: #e2e8f0;
    font-size: 0.78rem;
    line-height: 1.35;
    white-space: pre-line;
    pointer-events: none;
}