/* Aspect ratio calculator (/aspect-ratio-calculator): what is its own, the size rows and the two SVG previews (the ratio with
   a comparison ratio, and fit or fill in a target size). Everything else (stage, panels, fields, stat tiles, chips, buttons,
   colours) comes from the app kit (css/app-kit, docs/app-kit.md). Loaded only on this app's page (StylePaths). */

.arcalc-landing-app > .filter-landing-stage.arcalc-landing-stage {
    position: relative;
    gap: var(--ak-space-3);
}

/* Full width, also where the shared narrow-screen layout (seo-pages.css, up to 960px) starts the stage's children at
   their own width. */
.arcalc-landing-app > .filter-landing-stage.arcalc-landing-stage > * {
    align-self: stretch;
}

/* Width [swap] height, and the other pairs of number fields. */
.arcalc-landing-app .arcalc-size-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ak-space-2);
}

.arcalc-landing-app .arcalc-num {
    flex: 1 1 8rem;
}

.arcalc-landing-app .arcalc-input {
    font-size: var(--ak-fs-md);
}

.arcalc-landing-app .arcalc-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ak-space-2) var(--ak-space-4);
}

/* The results are stat tiles in a dl: the dd needs its margin reset. */
.arcalc-landing-app .arcalc-results {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.arcalc-landing-app .arcalc-results dd {
    margin: 0;
}

.arcalc-landing-app .arcalc-results:empty {
    display: none;
}

.arcalc-landing-app .arcalc-actions {
    align-items: center;
}

/* --- The previews ---------------------------------------------------------------------------------------------------- */

.arcalc-landing-app .arcalc-svg {
    display: block;
    width: 100%;
    max-width: 32rem;
    height: auto;
    margin: 0 auto;
}

.arcalc-landing-app .arcalc-shape {
    fill: color-mix(in srgb, var(--ak-accent) 22%, transparent);
    stroke: var(--ak-accent);
    stroke-width: 2;
}

.arcalc-landing-app .arcalc-shape-label {
    fill: var(--ak-text);
    font-size: 16px;
    font-weight: 600;
}

/* The ratio compared with, dashed. */
.arcalc-landing-app .arcalc-compare {
    fill: none;
    stroke: var(--ak-muted);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

/* Fit or fill: the letterbox bars, the cropped part, the content and the target frame. */
.arcalc-landing-app .arcalc-bars {
    fill: #0f172a;
}

.arcalc-landing-app .arcalc-cropped {
    fill: color-mix(in srgb, var(--ak-accent) 12%, transparent);
    stroke: var(--ak-muted);
    stroke-dasharray: 4 3;
}

.arcalc-landing-app .arcalc-content {
    fill: color-mix(in srgb, var(--ak-accent) 55%, #ffffff);
}

.arcalc-landing-app .arcalc-target {
    fill: none;
    stroke: var(--ak-accent);
    stroke-width: 2;
}

.arcalc-landing-app .arcalc-legend {
    text-align: center;
}

.arcalc-landing-app .arcalc-form {
    margin: var(--ak-space-2) 0;
}

.arcalc-landing-app .arcalc-ctl-title {
    margin-top: var(--ak-space-2);
}

/* Phones: the stage uses the full width and the buttons fill the row. */
@media (max-width: 600px) {
    .arcalc-landing-app > .filter-landing-stage.arcalc-landing-stage {
        width: 100%;
        max-width: none;
        padding: 0.75rem 0.5rem;
    }

    .arcalc-landing-app .arcalc-actions .ak-btn,
    .arcalc-landing-app .arcalc-size-row .ak-btn:not(.ak-btn--icon) {
        flex: 1 1 auto;
    }

    .arcalc-landing-app .arcalc-results {
        grid-template-columns: 1fr 1fr;
    }
}