/* Password generator (/password-generator): what is its own. Panel, buttons, list rows, fields, the progress bar 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 panels would shrink to their own width. */
.pwg-landing-app > .ak-stage > * {
    align-self: stretch;
}

/* --- Strength: the word on the right, a bar coloured from red (weak) to teal (very strong) ----------------------- */

.pwg-landing-app .pwg-summary p {
    margin: 0;
}

.pwg-landing-app .pwg-meter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.pwg-landing-app .pwg-strength {
    font-size: var(--ak-fs-lg);
}

/* Teal for "very strong", the one level colour that is not a kit token. */
.pwg-landing-app {
    --pwg-level-4: #0f766e;
}

.pwg-landing-app[data-theme="dark"] > .filter-landing-stage {
    --pwg-level-4: #2dd4bf;
}

.pwg-landing-app .pwg-meter { --ak-progress-color: var(--ak-danger); }
.pwg-landing-app .pwg-meter[data-level="1"] { --ak-progress-color: var(--ak-series-2); }
.pwg-landing-app .pwg-meter[data-level="2"] { --ak-progress-color: var(--ak-series-7); }
.pwg-landing-app .pwg-meter[data-level="3"] { --ak-progress-color: var(--ak-series-3); }
.pwg-landing-app .pwg-meter[data-level="4"] { --ak-progress-color: var(--pwg-level-4); }

.pwg-landing-app .pwg-entropy {
    font-weight: 600;
}

.pwg-landing-app .pwg-recipe {
    font-size: var(--ak-fs-sm);
}

/* --- The generated passwords: one row each, in a code font, with its own Copy ----------------------------------- */

.pwg-landing-app .pwg-pw {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ak-font-mono);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.pwg-landing-app .pwg-status {
    min-height: 1.2em;
}

/* The value under a slider. */
.pwg-landing-app .pwg-value {
    color: var(--ak-text);
    font-weight: 600;
}

@container (max-width: 640px) {
    .pwg-landing-app .ak-stage > .ak-btn-row > .ak-btn {
        flex: 1 1 auto;
    }
}