/* Color contrast checker (/color-contrast-checker): what is its own, the big ratio, the WCAG badges, the preview, the colour
   samples and the colour pickers. Everything else (stage, panels, lists, fields, buttons, colours) comes from the app kit
   (css/app-kit, docs/app-kit.md). The preview and the samples are painted in the user's own colours (inline styles and
   --cc-p-fg / --cc-p-bg set by the engine), never in kit tokens. Loaded only on this app's page (StylePaths). */

.contrast-landing-app > .filter-landing-stage.contrast-landing-stage {
    position: relative;
}

/* Full width, also where the shared narrow-screen layout (seo-pages.css, up to 960px) starts the stage's children at
   their own width. */
.contrast-landing-app > .filter-landing-stage.contrast-landing-stage > * {
    align-self: stretch;
}

/* --- The result: ratio and WCAG badges ------------------------------------------------------------------------------ */

.contrast-landing-app .cc-result {
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.contrast-landing-app .cc-ratio-label {
    margin: 0;
    color: var(--ak-muted);
    font-size: var(--ak-fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.contrast-landing-app .cc-ratio {
    margin: 0;
    color: var(--ak-text);
    font-size: clamp(2.2rem, 8vw, 3.6rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.contrast-landing-app .cc-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A badge per WCAG level: green when the pair passes, red when it fails. */
.contrast-landing-app .cc-badge {
    --cc-state: var(--ak-border);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--cc-state);
    border-radius: var(--ak-radius-pill);
    background: color-mix(in srgb, var(--cc-state) 9%, var(--ak-bg));
    color: var(--ak-text);
    font-size: var(--ak-fs-sm);
}

.contrast-landing-app .cc-badge.is-pass { --cc-state: var(--ak-success); }
.contrast-landing-app .cc-badge.is-fail { --cc-state: var(--ak-danger); }

.contrast-landing-app .cc-badge-min {
    color: var(--ak-muted);
    font-variant-numeric: tabular-nums;
}

.contrast-landing-app .cc-badge-state {
    color: var(--cc-state);
}

/* --- Preview: the user's colours ------------------------------------------------------------------------------------ */

.contrast-landing-app .cc-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--cc-p-bg, #ffffff);
    color: var(--cc-p-fg, #777777);
}

.contrast-landing-app .cc-preview > * {
    margin: 0;
    color: inherit;
}

.contrast-landing-app .cc-p-h2 {
    font-size: 1.5rem;
}

.contrast-landing-app .cc-p-h3 {
    font-size: 1.15rem;
}

.contrast-landing-app .cc-p-link {
    color: inherit;
    text-decoration: underline;
}

.contrast-landing-app .cc-p-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.contrast-landing-app .cc-p-button {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 0.4rem;
    background: var(--cc-p-fg, #777777);
    color: var(--cc-p-bg, #ffffff);
    font-weight: 600;
}

.contrast-landing-app .cc-preview .cc-p-input {
    flex: 1 1 8rem;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--cc-p-fg, #777777);
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    font: inherit;
}

.contrast-landing-app .cc-preview .cc-p-input::placeholder {
    color: inherit;
    opacity: 1;
}

/* --- Suggestions and palette rows ----------------------------------------------------------------------------------- */

.contrast-landing-app .cc-suggest-item,
.contrast-landing-app .cc-palette-item {
    flex-wrap: wrap;
    background: var(--ak-bg);
    font-size: var(--ak-fs-sm);
}

.contrast-landing-app .cc-suggest-item {
    flex-direction: column;
    align-items: stretch;
}

.contrast-landing-app .cc-suggest-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.contrast-landing-app .cc-suggest-ok {
    color: var(--ak-success);
    font-weight: 600;
}

.contrast-landing-app .cc-suggest-text,
.contrast-landing-app .cc-palette-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.contrast-landing-app .cc-palette-ratio {
    color: var(--ak-muted);
    font-variant-numeric: tabular-nums;
}

/* A sample of a colour pair: "Aa" in the user's colours. */
.contrast-landing-app .cc-swatch {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--ak-border);
    border-radius: 0.4rem;
    font-weight: 700;
}

.contrast-landing-app .cc-css {
    resize: vertical;
}

.contrast-landing-app .cc-copy {
    align-self: flex-start;
}

/* --- Control panel: colour picker beside the text field, the swap button --------------------------------------------- */

.contrast-landing-app .cc-form {
    margin: var(--ak-space-2) 0;
}

.contrast-landing-app .cc-color {
    display: flex;
    align-items: center;
    gap: var(--ak-space-2);
}

.contrast-landing-app .cc-pick {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.25rem;
    padding: 0.1rem;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-sm);
    background: var(--ak-field);
    cursor: pointer;
}

.contrast-landing-app .cc-pick:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 2px;
}

.contrast-landing-app .ak-help {
    overflow-wrap: anywhere;
}

.contrast-landing-app .cc-swap {
    align-self: center;
}

/* Phones: the stage uses the full width and the actions fill the row. */
@media (max-width: 600px) {
    .contrast-landing-app > .filter-landing-stage.contrast-landing-stage {
        width: 100%;
        max-width: none;
        padding: 0.75rem 0.5rem;
    }

    .contrast-landing-app .cc-actions .ak-btn {
        flex: 1 1 auto;
    }

    .contrast-landing-app .cc-badge {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}