/* Text case converter (/text-case-converter): what is its own. Panel, buttons, fields 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. */
.tcc-landing-app > .ak-stage > * {
    align-self: stretch;
}

/* A taller editor: the text is the whole app. */
.tcc-landing-app textarea.ak-editor {
    min-height: 16rem;
}

/* The three groups of conversions (case, code and URL, clean up), each a title over a row of buttons. */
.tcc-landing-app .tcc-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

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

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