/* Word and character counter (/word-counter): what is its own. Panels, tiles, fields, buttons, table and progress bars
   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. */
.wcn-landing-app > .ak-stage > * {
    align-self: stretch;
}

/* --- Limits: a name, "12 of 280 · 268 left" and a bar that turns amber near the limit and red over it ---------- */

.wcn-landing-app .wcn-limits {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.wcn-landing-app .wcn-limit {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wcn-landing-app .wcn-limit-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    font-size: var(--ak-fs-sm);
}

.wcn-landing-app .wcn-limit-value {
    font-variant-numeric: tabular-nums;
}

.wcn-landing-app .wcn-limit .ak-progress {
    --ak-progress-color: var(--ak-success);
}

.wcn-landing-app .wcn-limit[data-state="near"] .ak-progress {
    --ak-progress-color: var(--ak-warning);
}

.wcn-landing-app .wcn-limit[data-state="over"] .ak-progress {
    --ak-progress-color: var(--ak-danger);
}

.wcn-landing-app .wcn-limit[data-state="over"] .wcn-limit-value {
    color: var(--ak-danger);
    font-weight: 600;
}

/* --- Longest words and the custom limit (unit and value side by side) ------------------------------------------- */

.wcn-landing-app .wcn-longest {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: var(--ak-fs-sm);
    overflow-wrap: anywhere;
}

.wcn-landing-app .wcn-custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
}