/* Function plotter (/function-plotter): what is its own - the canvas stage, the zoom buttons and the function rows.
   The colours, buttons, fields, chips and messages come from the app kit (css/app-kit, docs/app-kit.md). Loaded only
   on this app's page (StylePaths). */

/* The plot's own colours, read by the script for the canvas (app.colors): the minor and major grid lines and the axes.
   The background, text, labels and label boxes are the kit's tokens. The stage follows the plot's Light / Dark select
   (data-fp-theme; landing-site-theme.js puts data-theme on the app root). */
.functionplotter-landing-app {
    --fp-minor: #eef1f6;
    --fp-major: #d5dbe6;
    --fp-axis: #334155;
}

.functionplotter-landing-app[data-theme="dark"] > .filter-landing-stage {
    --fp-minor: #18223a;
    --fp-major: #2a3654;
    --fp-axis: #cbd5e1;
}

/* --- Stage: the canvas fills it --------------------------------------------------------------------------------- */

.functionplotter-landing-app > .filter-landing-stage.ak-stage {
    gap: 0;
    padding: 0;
    aspect-ratio: 4 / 3;
    min-height: 300px;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.functionplotter-landing-app > .filter-landing-stage.fp-stage--dragging {
    cursor: grabbing;
}

.functionplotter-landing-app > .filter-landing-stage:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: -2px;
}

.functionplotter-landing-app .functionplotter-landing-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Zoom in, zoom out and reset, over the bottom corner of the plot. */
.functionplotter-landing-app .fp-zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.functionplotter-landing-app .fp-zoom-btn {
    background: color-mix(in srgb, var(--ak-field) 92%, transparent);
    font-size: 1.15rem;
}

.functionplotter-landing-app .fp-zoom-btn:hover {
    background: var(--ak-hover);
}

/* --- Functions and examples (control panel) ----------------------------------------------------------------------- */

.functionplotter-landing-app .fp-functions,
.functionplotter-landing-app .fp-presets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.functionplotter-landing-app .fp-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* colour | f1(x) = | formula | show | remove, and the error under them. */
.functionplotter-landing-app .fp-fn {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
}

.functionplotter-landing-app .fp-fn--hidden .fp-fn-input,
.functionplotter-landing-app .fp-fn--hidden .fp-fn-name {
    opacity: 0.5;
}

.functionplotter-landing-app .fp-fn-color {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ak-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.functionplotter-landing-app .fp-fn-name {
    color: var(--ak-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.functionplotter-landing-app input.ak-field.fp-fn-input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    min-width: 0;
    font-family: var(--ak-font-mono);
    font-size: 0.95rem;
}

.functionplotter-landing-app .fp-fn-error {
    grid-column: 1 / -1;
}

.functionplotter-landing-app .fp-add {
    align-self: flex-start;
}

@media (max-width: 640px) {
    .filter-landing-app.functionplotter-landing-app {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
    }

    .functionplotter-landing-app > .filter-landing-stage.ak-stage {
        aspect-ratio: 1 / 1;
        border-radius: 0;
    }

    .functionplotter-landing-app > .filter-landing-controls {
        padding: 0 12px;
    }

    .functionplotter-landing-app .fp-zoom-btn {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }
}