/* Mondriaan Maker landing (/mondriaan-maker)
   Shared controls live in apps.css */

.mondriaan-maker-landing-app {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.filter-landing-stage.mondriaan-maker-landing-stage {
    --mm-ratio-w: 4;
    --mm-ratio-h: 3;
    --mm-aspect: 4 / 3;
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 280px;
    aspect-ratio: var(--mm-aspect);
    border-radius: 0;
    overflow: hidden;
    background: var(--footer-surface);
    box-shadow: 0 16px 36px rgba(20, 20, 20, 0.22);
    outline: 3px solid #141414;
    outline-offset: 0;
    touch-action: manipulation;
    cursor: pointer;
}

.mondriaan-maker-landing-canvas {
    /* Absolute so the bitmap does not lock landing-page stage height. */
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
}

.mondriaan-maker-landing-controls {
    display: grid;
    gap: 0.65rem;
}

.mondriaan-maker-landing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 6px;
    width: 100%;
}

.mondriaan-maker-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.1rem 0;
    cursor: pointer;
    font-weight: 600;
}

.mondriaan-maker-check-row input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
}

.mondriaan-maker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.mondriaan-maker-palette {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}

.mondriaan-maker-swatches {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: #141414;
    width: max-content;
}

.mondriaan-maker-swatch {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
}

.mondriaan-maker-swatch:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.mondriaan-maker-swatch.is-active {
    box-shadow: inset 0 0 0 2px #141414, inset 0 0 0 4px #f3f0e8;
}

.mondriaan-maker-swatch--light.is-active {
    box-shadow: inset 0 0 0 2px #f3f0e8, inset 0 0 0 4px #141414;
}

.mondriaan-maker-aspect-row {
    align-items: center;
}

.mondriaan-maker-aspect {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 16rem;
}

@media (max-width: 600px) {
    .mondriaan-maker-landing-stage:not([data-mm-aspect]),
    .mondriaan-maker-landing-stage[data-mm-aspect="auto"] {
        aspect-ratio: 1 / 1;
        min-height: 240px;
    }
}

/* App mode: the stage fills the grid cell. Size the canvas to the
   selected ratio (contain-fit) so Square / 16:9 actually change shape. */
body.filter-app-mode .mondriaan-maker-landing-app {
    align-items: stretch;
    min-height: 0;
}

body.filter-app-mode .mondriaan-maker-landing-app > .filter-landing-stage,
body.filter-app-mode .filter-landing-stage.mondriaan-maker-landing-stage {
    align-self: stretch;
    height: 100%;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
    place-items: center;
    overflow: hidden;
    outline: none;
    box-shadow: none;
    background: var(--footer-surface);
}

body.filter-app-mode .mondriaan-maker-landing-canvas {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    outline: 3px solid #141414;
    outline-offset: 0;
    box-shadow: 0 16px 36px rgba(20, 20, 20, 0.22);
    background: var(--footer-surface);
}