/* Lorem ipsum generator (/lorem-ipsum-generator): what is its own. Fields, buttons and colours come from the app kit
   (css/app-kit, docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* --- The app's own -------------------------------------------------------------------------------------------- */

/* On a phone the site's photo-app rule (seo-pages.css, body.filter-app-mode ... > .filter-landing-stage) sets
   align-items: start on every stage, which beats the kit's stretch: the text area would shrink to its own width. */
.lrm-landing-app > .ak-stage > * {
    align-self: stretch;
}

/* Amount, unit and Regenerate on one row, wrapping on a narrow stage. */
.lrm-landing-app .lrm-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}

.lrm-landing-app .lrm-quick-field {
    flex: 1 1 8rem;
}

/* The generated text: tall and airy; HTML output in a code font. */
.lrm-landing-app textarea.ak-editor {
    min-height: 18rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.lrm-landing-app[data-lrm-html="on"] textarea.ak-editor {
    font-family: var(--ak-font-mono);
    font-size: var(--ak-fs-sm);
}

@container (max-width: 640px) {
    .lrm-landing-app textarea.ak-editor {
        min-height: 14rem;
    }

    .lrm-landing-app .ak-btn-row > .ak-btn {
        flex: 1 1 auto;
    }
}