/*
 * Autodiagnostic Qualiopi (owlic/autodiagnostic)
 *
 * One column of work (profile, grid, plan) and, from 1000px, a sticky summary
 * beside it. The criterion badges are the theme's (is-style-badge,
 * components/badge.css), coloured like the critère pages.
 *
 * Statuses: the text is at 4.5:1 at least on its tint. The partial one has no
 * palette colour between the green and the red: its two values stay literal.
 */

.wp-block-owlic-autodiagnostic {
    --autodiag-ink: var(--wp--custom--color--ink);
    --autodiag-muted: var(--wp--custom--color--ink-muted);
    --autodiag-raised: var(--wp--custom--color--surface-raised);
    --autodiag-sunken: var(--wp--custom--color--surface-sunken);
    --autodiag-border: var(--wp--custom--color--border);
    --autodiag-border-strong: var(--wp--preset--color--beige-dark);
    --autodiag-have: var(--wp--preset--color--vert-800);
    --autodiag-have-tint: var(--wp--preset--color--vert-100);
    --autodiag-part: #8a4b0f;
    --autodiag-part-tint: #ffebdc;
    --autodiag-missing: var(--wp--preset--color--rouge-600);
    --autodiag-missing-tint: var(--wp--preset--color--rouge-100);
    --autodiag-na: var(--wp--preset--color--gray-700);
    --autodiag-na-tint: var(--wp--preset--color--gray-200);
    --autodiag-accent: var(--wp--preset--color--mauve-800);
    --autodiag-accent-tint: var(--wp--preset--color--mauve-100);
    --autodiag-radius: var(--wp--preset--border-radius--md);
}

/* What the grid hides stays hidden, in the editor too: on the front,
   Tailwind's preflight already enforces [hidden], which the editor lacks.
   The doubled attribute outranks the grid's own display rules. */
.wp-block-owlic-autodiagnostic [hidden][hidden] {
    display: none;
}

/* Borders inside the sizes, as Tailwind's preflight sets them on the front:
   without it, the editor grew every bordered box by its border. */
.wp-block-owlic-autodiagnostic,
.wp-block-owlic-autodiagnostic *,
.wp-block-owlic-autodiagnostic *::before,
.wp-block-owlic-autodiagnostic *::after {
    box-sizing: border-box;
}

.wp-block-owlic-autodiagnostic__form {
    /* Between the grid and its summary, and above the sticky summary. */
    --autodiag-column-gap: var(--wp--preset--spacing--48);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--autodiag-column-gap);
}

@media (min-width: 1000px) {
    .wp-block-owlic-autodiagnostic__form {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

/* Step 2, then step 3: the theme's media space between them. */
.wp-block-owlic-autodiagnostic__main {
    display: grid;
    gap: var(--wp--preset--spacing--media);
    min-width: 0;
}

/* Beside the summary, the steps join the form's grid: the summary takes
   step 2's row alone, so it stops sticking where step 2 ends, and the plan
   runs below it. */
@media (min-width: 1000px) {
    .wp-block-owlic-autodiagnostic__main {
        display: contents;
    }

    .wp-block-owlic-autodiagnostic__main > .wp-block-owlic-autodiagnostic__step:first-child {
        grid-row: 2;
        grid-column: 1;
    }

    .wp-block-owlic-autodiagnostic__main > .wp-block-owlic-autodiagnostic__step + .wp-block-owlic-autodiagnostic__step {
        grid-row: 3;
        grid-column: 1;
        /* The media space in all, the form's row gap included. */
        margin-block-start: calc(var(--wp--preset--spacing--media) - var(--autodiag-column-gap));
    }

    .wp-block-owlic-autodiagnostic__summary {
        grid-row: 2;
        grid-column: 2;
    }
}

.wp-block-owlic-autodiagnostic__step {
    display: grid;
    gap: var(--wp--preset--spacing--24);
    scroll-margin-top: var(--wp--preset--spacing--64);
}

/* A flex column (is-layout-flex in the markup), out of the theme's heading
   rhythm: eyebrow, title and lede keep this tighter gap. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__step-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--8);
}

.wp-block-owlic-autodiagnostic__step-head > * {
    margin: 0;
}

.wp-block-owlic-autodiagnostic__step-head > p:last-child {
    max-width: 64ch;
    color: var(--autodiag-muted);
}

.wp-block-owlic-autodiagnostic__eyebrow {
    margin: 0;
    font-size: var(--wp--preset--font-size--body-helper);
    font-weight: var(--wp--custom--typography--weight-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--autodiag-muted);
}

/* Profile */
.wp-block-owlic-autodiagnostic__profile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wp--preset--spacing--16);
}

.wp-block-owlic-autodiagnostic__profile fieldset {
    display: grid;
    align-content: start;
    gap: var(--wp--preset--spacing--12);
    min-width: 0;
    margin: 0;
    padding: var(--wp--preset--spacing--16);
    background: var(--autodiag-raised);
    border: 1px solid var(--autodiag-border);
    border-radius: var(--autodiag-radius);
}

.wp-block-owlic-autodiagnostic__profile legend {
    float: left;
    width: 100%;
    margin-bottom: var(--wp--preset--spacing--4);
    padding: 0;
    font-weight: var(--wp--custom--typography--weight-medium);
    color: var(--autodiag-ink);
}

.wp-block-owlic-autodiagnostic__option {
    display: flex;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--8);
    font-size: var(--wp--preset--font-size--body-small);
    line-height: 1.4;
    cursor: pointer;
}

.wp-block-owlic-autodiagnostic__option input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--autodiag-ink);
}

.wp-block-owlic-autodiagnostic__option small {
    display: block;
    font-size: var(--wp--preset--font-size--body-helper);
    color: var(--autodiag-muted);
}

/* The profile spans the whole width, above the grid and its summary. With the
   script, it is centred; while the questions run, it fills the screen, as a
   conversational form would. */
.wp-block-owlic-autodiagnostic__step.is-profile {
    grid-column: 1 / -1;
}

.is-enhanced .wp-block-owlic-autodiagnostic__step.is-profile {
    justify-items: center;
    text-align: center;
}

.is-enhanced .is-profile > * {
    width: 100%;
    max-width: 640px;
    text-align: start;
}

.is-enhanced .is-profile > .wp-block-owlic-autodiagnostic__step-head {
    align-items: center;
    text-align: center;
}

/* While the questions run, the slide fills the screen: its own progress
   says where the visitor stands, so the step heading only stays for screen
   readers. */
.is-enhanced .is-profile.is-asking > .wp-block-owlic-autodiagnostic__step-head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The slides keep the block's wide alignment, questions and recap alike. */
.is-enhanced .is-profile > .wp-block-owlic-autodiagnostic__profile {
    max-width: none;
}

/* The questions done, their recap takes the panel's whole width. */
.is-enhanced .is-profile:not(.is-asking) > .wp-block-owlic-autodiagnostic__profile.is-stepped {
    grid-template-columns: minmax(0, 1fr);
}

.is-enhanced .is-profile.is-asking > .wp-block-owlic-autodiagnostic__profile {
    /* Less the fixed site header and the count below. */
    min-height: calc(100svh - 14rem);
}

/* The whole diagnostic waits for « Commencer le diagnostic »: a link to
   #profil in the page (the hero's button) opens it. The script also makes it
   inert. */
.wp-block-owlic-autodiagnostic.is-waiting .wp-block-owlic-autodiagnostic__form {
    display: none;
}

/* Until the profile is first validated, the grid, the plan and the summary
   wait: the script also makes them inert. */
.wp-block-owlic-autodiagnostic.is-profiling .wp-block-owlic-autodiagnostic__main,
.wp-block-owlic-autodiagnostic.is-profiling .wp-block-owlic-autodiagnostic__summary {
    display: none;
}

.wp-block-owlic-autodiagnostic.is-revealed .wp-block-owlic-autodiagnostic__main > *,
.wp-block-owlic-autodiagnostic.is-revealed .wp-block-owlic-autodiagnostic__summary {
    animation: autodiag-question var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out-soft);
}

/* One question at a time (src/autodiagnostic.ts), as the slides of the
   questionnaire designer (Figma, Owlic · Identity, « Auto-diagnostic »): a
   white slide, the question led by its number and an arrow, the answers
   indented under its title. */
.wp-block-owlic-autodiagnostic__profile.is-stepped {
    --autodiag-indent: 60px;

    display: grid;
    grid-template-columns: minmax(0, 720px);
    grid-template-rows: auto 1fr auto;
    justify-content: center;
    gap: var(--wp--preset--spacing--32);
    padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--64);
    background: var(--autodiag-raised);
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: var(--wp--preset--border-radius--sm);
}

/* Once answered, the recap is the slide's only content: no empty rows. */
.is-profile:not(.is-asking) > .wp-block-owlic-autodiagnostic__profile.is-stepped {
    grid-template-rows: none;
}

.is-stepped fieldset {
    align-self: center;
    gap: var(--wp--preset--spacing--48);
    padding: 0;
    background: none;
    border: 0;
}

/* Between two slides, the question comes first, then its answers one after
   the other. `both` keeps each hidden until its turn. */
.is-stepped fieldset > legend,
.is-stepped .wp-block-owlic-autodiagnostic__option {
    animation: autodiag-question var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out-soft) both;
}

.is-stepped .wp-block-owlic-autodiagnostic__answers > .wp-block-owlic-autodiagnostic__option {
    animation-delay: 180ms;
}

.is-stepped .wp-block-owlic-autodiagnostic__option:nth-child(2) {
    animation-delay: 240ms;
}

.is-stepped .wp-block-owlic-autodiagnostic__option:nth-child(3) {
    animation-delay: 300ms;
}

.is-stepped .wp-block-owlic-autodiagnostic__option:nth-child(n + 4) {
    animation-delay: 360ms;
}

.is-stepped fieldset:focus,
.wp-block-owlic-autodiagnostic__profile:focus {
    outline: none;
}

.is-stepped legend {
    display: grid;
    grid-template-columns: var(--autodiag-indent) minmax(0, 1fr);
    align-items: start;
    margin-bottom: 0;
    font-size: var(--wp--preset--font-size--heading-5);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.wp-block-owlic-autodiagnostic__question-number {
    display: none;
}

.is-stepped .wp-block-owlic-autodiagnostic__question-number {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    font-size: var(--wp--preset--font-size--body-medium);
    line-height: 1.9;
    color: var(--wp--preset--color--mauve-700);
}

.wp-block-owlic-autodiagnostic__arrow {
    flex: none;
    width: 24px;
    height: 24px;
}

.wp-block-owlic-autodiagnostic__answers {
    display: grid;
    gap: var(--wp--preset--spacing--12);
}

.is-stepped .wp-block-owlic-autodiagnostic__answers {
    gap: var(--wp--preset--spacing--16);
    padding-inline-start: var(--autodiag-indent);
}

/* The markers only exist for the stepped form; without the script, the
   browser's own radio buttons and checkboxes show. */
.wp-block-owlic-autodiagnostic__key,
.wp-block-owlic-autodiagnostic__box {
    display: none;
}

.is-stepped .wp-block-owlic-autodiagnostic__option {
    position: relative;
    align-items: center;
    gap: var(--wp--preset--spacing--12);
    font-size: var(--wp--preset--font-size--body-large);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.02em;
    color: var(--autodiag-ink);
}

.is-stepped .wp-block-owlic-autodiagnostic__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.is-stepped .wp-block-owlic-autodiagnostic__option small {
    margin-top: var(--wp--preset--spacing--4);
    font-size: var(--wp--preset--font-size--body-small);
    font-weight: var(--wp--custom--typography--weight-regular);
}

/* A single choice: a field-like row with its keyboard letter; the chosen one
   takes the pink-to-lavender gradient of the site's buttons as its border. */
.is-stepped .wp-block-owlic-autodiagnostic__option.is-radio {
    min-height: 56px;
    padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
    background: var(--autodiag-raised);
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: var(--wp--preset--border-radius--sm);
    transition: border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}

.is-stepped .wp-block-owlic-autodiagnostic__option.is-radio:hover {
    border-color: var(--wp--preset--color--gray-500);
}

/* Nothing is checked beforehand in the stepped form: a checked answer is
   always the visitor's own choice. */
.is-stepped .wp-block-owlic-autodiagnostic__option.is-radio:has(input:checked) {
    background: linear-gradient(var(--autodiag-raised), var(--autodiag-raised)) padding-box, var(--wp--custom--button--gradient) border-box;
    border-color: transparent;
}

.is-stepped .wp-block-owlic-autodiagnostic__key {
    display: grid;
    flex: none;
    place-items: center;
    align-self: flex-start;
    width: 24px;
    height: 24px;
    /* Centred on the title's first line, halfway between its capitals and
       its lowercase; the letter, a capital, on the box's centre. */
    margin-top: -0.4px;
    padding-top: 2px;
    font-size: var(--wp--preset--font-size--body-small);
    font-weight: 700;
    line-height: 1;
    background: var(--wp--preset--color--gray-200);
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: calc(var(--wp--preset--border-radius--sm) / 2);
}

/* Several choices: a box that fills with the mint-to-sky gradient. */
.is-stepped .wp-block-owlic-autodiagnostic__box {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    color: transparent;
    background: var(--autodiag-raised);
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: calc(var(--wp--preset--border-radius--sm) * 0.75);
}

.is-stepped .wp-block-owlic-autodiagnostic__box svg {
    width: 16px;
    height: 16px;
}

.is-stepped .wp-block-owlic-autodiagnostic__option:has(input:checked) .wp-block-owlic-autodiagnostic__box {
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--gradient--blue-green);
    border-color: transparent;
}

.is-stepped .wp-block-owlic-autodiagnostic__option:has(input:focus-visible) {
    outline: 2px dotted var(--wp--custom--color--focus);
    outline-offset: 3px;
}

@keyframes autodiag-question {
    from {
        opacity: 0;
        translate: 0 var(--wp--preset--spacing--12);
    }
}

.wp-block-owlic-autodiagnostic__progress {
    display: grid;
    gap: var(--wp--preset--spacing--8);
}

.wp-block-owlic-autodiagnostic__progress p {
    margin: 0;
    font-size: var(--wp--preset--font-size--body-small);
    font-variant-numeric: tabular-nums;
    color: var(--autodiag-muted);
}

.wp-block-owlic-autodiagnostic__progress-track {
    display: block;
    height: 4px;
    overflow: hidden;
    background: var(--autodiag-sunken);
    border-radius: var(--wp--preset--border-radius--pill);
}

.wp-block-owlic-autodiagnostic__progress-track > span {
    display: block;
    height: 100%;
    background: var(--wp--preset--color--mauve);
    border-radius: inherit;
    transition: width var(--wp--custom--motion--duration) var(--wp--custom--motion--ease-out-soft);
}

/* « Retour » hidden on the first question: its buttons row goes too. */
.wp-block-owlic-autodiagnostic__stepper-nav > .wp-block-buttons:has([hidden]) {
    display: none;
}

.wp-block-owlic-autodiagnostic__stepper-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--12);
}

.wp-block-owlic-autodiagnostic__stepper-nav small {
    font-size: var(--wp--preset--font-size--body-helper);
    color: var(--autodiag-muted);
}

/* No keyboard to press Enter on, as a rule, on a touch screen. */
@media (hover: none) {
    .wp-block-owlic-autodiagnostic__stepper-nav small {
        display: none;
    }
}

/* The recap, once the questions are answered. */
.wp-block-owlic-autodiagnostic__recap dl {
    display: grid;
    margin: 0;
}

.wp-block-owlic-autodiagnostic__recap dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--16);
    padding-block: var(--wp--preset--spacing--12);
    border-bottom: 1px solid var(--autodiag-border);
}

.wp-block-owlic-autodiagnostic__recap dl > div:first-child {
    padding-top: 0;
}

.wp-block-owlic-autodiagnostic__recap dl > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.wp-block-owlic-autodiagnostic__recap dl > div > * {
    align-self: baseline;
    margin: 0;
}

.wp-block-owlic-autodiagnostic__recap dt {
    font-size: var(--wp--preset--font-size--body-small);
    color: var(--autodiag-muted);
}

.wp-block-owlic-autodiagnostic__recap dd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--wp--preset--spacing--12);
    margin: 0;
    font-weight: var(--wp--custom--typography--weight-medium);
    color: var(--autodiag-ink);
}

.wp-block-owlic-autodiagnostic__recap button {
    padding: 0;
    font: inherit;
    font-size: var(--wp--preset--font-size--body-small);
    font-weight: var(--wp--custom--typography--weight-regular);
    color: var(--autodiag-ink);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

@media (max-width: 599px) {
    .wp-block-owlic-autodiagnostic__profile.is-stepped {
        --autodiag-indent: 0;

        padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
    }

    /* The number and its arrow above the question, the answers full width. */
    .is-stepped legend {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wp--preset--spacing--8);
    }

    .wp-block-owlic-autodiagnostic__recap dl > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .is-stepped fieldset > legend,
    .is-stepped .wp-block-owlic-autodiagnostic__option,
    .wp-block-owlic-autodiagnostic.is-revealed .wp-block-owlic-autodiagnostic__main > *,
    .wp-block-owlic-autodiagnostic.is-revealed .wp-block-owlic-autodiagnostic__summary {
        animation: none;
    }

    .wp-block-owlic-autodiagnostic__progress-track > span,
    .wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__summary-inner {
        transition: none;
    }
}

/* A core/group in the owlic gradient and grain style, as on the pricing
   page (render.php): the site paints both. Its flex gap alone spaces it. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--12);
    padding: var(--wp--preset--spacing--16);
    /* The theme takes this gradient for a dark ground (base/themes.css) and
       writes white on it, at 1.3:1 on its light green. Dark ink, as on the
       pricing page: the theme's ink tokens follow the scheme. */
    color-scheme: light;
    color: var(--wp--custom--color--ink);
    border-radius: var(--autodiag-radius);
}

/* The theme's media space above and below the banner, in all: its margins
   make up the step's gap above it and the form's below. Prefixed: the
   profile's children have their own width and margins. */
.wp-block-owlic-autodiagnostic .is-profile > .wp-block-owlic-autodiagnostic__scope {
    margin-block: calc(var(--wp--preset--spacing--media) - var(--wp--preset--spacing--24)) calc(var(--wp--preset--spacing--media) - var(--autodiag-column-gap));
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__scope > * {
    margin-block: 0;
}

/* The sentence runs on from the tag, on its line, centred on it. It takes
   the room left of the button; on a phone, the button drops to the bottom
   of the box. */
.wp-block-owlic-autodiagnostic__scope p {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
}


.wp-block-owlic-autodiagnostic__scope > .wp-block-buttons {
    flex: none;
    margin: 0;
}

/* A button with its icon alone (NativeBlocks, iconOnly): one white disc
   round the icon. */
.wp-block-owlic-autodiagnostic .wp-block-button__link.is-icon-only {
    justify-content: center;
    gap: 0;
    width: var(--wp--custom--size--touch-target);
    height: var(--wp--custom--size--touch-target);
    padding: 0;
    border-radius: 50%;
}

.wp-block-owlic-autodiagnostic .wp-block-button__link.is-icon-only .wp-block-button__icon {
    --button-icon-background-color: var(--wp--preset--color--white);

    margin: 0;
}

/* On a phone, everything in the banner is centred. */
@media (max-width: 599px) {
    .wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__scope,
    .wp-block-owlic-autodiagnostic__scope p {
        justify-content: center;
        text-align: center;
    }
}

/* The indicators' tag, its number first: the padding mirrors. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__indicator-tag.is-count {
    padding: var(--tag-inset) var(--wp--preset--spacing--12) var(--tag-inset) var(--tag-inset);
}

/* The tag in frosted glass (the scope banner's count, the new V10
   indicator's badge): half-white and blurred behind, its 1px frame white
   and see-through, as the site's glass fields (components/form.css). */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__indicator-tag.is-glass {
    --autodiag-criterion: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);

    background: color-mix(in srgb, var(--wp--preset--color--white) 50%, transparent);
    border-width: 1px;
    backdrop-filter: blur(16px);
}

/* A word in the square, « V10 »: as wide as it needs. */
.wp-block-owlic-autodiagnostic__indicator-tag.is-glass mark {
    width: auto;
    min-width: calc(var(--wp--preset--spacing--24) + 2px);
    padding-inline: var(--wp--preset--spacing--4);
}

/* Buttons are core/button blocks (NativeBlocks): the theme styles them.
   « Suivant » waits for an answer. */
.wp-block-owlic-autodiagnostic .wp-block-button__link:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.wp-block-owlic-autodiagnostic :focus-visible {
    outline: 2px dotted var(--wp--custom--color--focus);
    outline-offset: 3px;
}

/* With the script, the grid follows the profile live: no need to send it. */
.wp-block-owlic-autodiagnostic.is-enhanced [data-without-script],
.wp-block-owlic-autodiagnostic.is-enhanced .wp-block-buttons:has([data-without-script]) {
    display: none;
}

/* Criteria */
.wp-block-owlic-autodiagnostic__criterion {
    --autodiag-mascotte: 93px;

    display: grid;
    gap: var(--wp--preset--spacing--12);
    scroll-margin-top: var(--wp--preset--spacing--64);
}

.wp-block-owlic-autodiagnostic__criterion + .wp-block-owlic-autodiagnostic__criterion {
    margin-top: var(--wp--preset--spacing--32);
}

/* The criterion's badge above its title, tilted as if pinned there. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__criterion-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--12);
    padding-bottom: var(--wp--preset--spacing--12);
}

/* The title, balanced over its lines, and the button to the critère page
   at its right; the button drops below it when the row runs short. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__criterion-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
    width: 100%;
}

.wp-block-owlic-autodiagnostic__criterion-title > .wp-block-heading {
    flex: 1 1 320px;
    margin: 0;
    text-wrap: balance;
}

.wp-block-owlic-autodiagnostic__criterion-title > .wp-block-buttons {
    flex: none;
    margin: 0;
    margin-inline-start: auto;
}

/* On a phone, the button goes up to the badge's row, at the right, and the
   title runs under both. */
@media (max-width: 599px) {
    .wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__criterion-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__criterion-title {
        display: contents;
    }

    .wp-block-owlic-autodiagnostic__criterion-title > .wp-block-heading,
    .wp-block-owlic-autodiagnostic__criterion-head > .wp-block-owlic-autodiagnostic__meta {
        grid-column: 1 / -1;
    }

    .wp-block-owlic-autodiagnostic__criterion-head > .wp-block-owlic-autodiagnostic__badge {
        grid-row: 1;
        justify-self: start;
    }

    .wp-block-owlic-autodiagnostic__criterion-title > .wp-block-buttons {
        grid-row: 1;
        grid-column: 2;
    }
}

/* Prefixed: the new V10 indicator's badge is a tag, tilted less. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__criterion-head > .wp-block-owlic-autodiagnostic__badge {
    rotate: -5deg;
}

.wp-block-owlic-autodiagnostic__badge {
    margin: 0;
    white-space: nowrap;
}

.wp-block-owlic-autodiagnostic__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--16);
    margin: 0;
    font-size: var(--wp--preset--font-size--body-small);
    color: var(--autodiag-muted);
}

/* The count changes as the visitor answers: digits of one width keep it,
   and the link beside it, from shifting. */
.wp-block-owlic-autodiagnostic__meta [data-criterion-count] {
    font-variant-numeric: tabular-nums;
}

/* The criterion's mascotte (owlic/critere-mascotte) sits in the top right
   corner of its first indicator, 62 % inside the card and the rest above it.
   The card's head and the criterion's heading keep clear of it on the right.
   Its size is set on the criterion. */
.wp-block-owlic-autodiagnostic__indicator > .wp-block-owlic-critere-mascotte {
    position: absolute;
    top: calc(var(--autodiag-mascotte) * -0.38);
    right: var(--wp--preset--spacing--24);
    z-index: 1;
    width: var(--autodiag-mascotte);
    /* Clockwise, against the badges' tilt. */
    rotate: 4deg;
    pointer-events: none;
}

/* The indicator's head keeps clear of the mascotte; the criterion's head
   does not need to: its button sits right, above the mascotte's reach. */
.wp-block-owlic-autodiagnostic__indicator:has(> .wp-block-owlic-critere-mascotte) .wp-block-owlic-autodiagnostic__indicator-head {
    padding-inline-end: calc(var(--autodiag-mascotte) + var(--wp--preset--spacing--24));
}

@media (max-width: 599px) {
    .wp-block-owlic-autodiagnostic__criterion {
        --autodiag-mascotte: 64px;
    }

    /* Smaller, the mascotte stops above the question and below the
       criterion's heading: both take the full width. */
    .wp-block-owlic-autodiagnostic__indicator:has(> .wp-block-owlic-critere-mascotte) .wp-block-owlic-autodiagnostic__indicator-head {
        padding-inline-end: 0;
    }
}

/* Indicators */
.wp-block-owlic-autodiagnostic__indicator {
    position: relative;
    background: var(--autodiag-raised);
    border: 1px solid var(--autodiag-border);
    border-radius: var(--autodiag-radius);
}

/* As much room under the answers as above them: the theme's column gap. */
.wp-block-owlic-autodiagnostic__indicator-row {
    padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) var(--wp--preset--spacing--gap-column);
}

/* The indicator's tag above its question. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__indicator-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--12);
}

/* The indicator's tag (Figma, Owlic · Identity, « Tags »): framed in its
   criterion's colour, the number in a white square, at the size of the
   compact critère badge of the critère navigation (critere-card-nav.css). */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__indicator-tag {
    /* A touch rounder than the small radius; the number's follows it. */
    --tag-radius: calc(var(--wp--preset--border-radius--sm) + 2px);
    /* Between the frame and the number: a pixel tighter, given to the number. */
    --tag-inset: 3px;

    display: inline-flex;
    flex: none;
    align-items: center;
    align-self: flex-start;
    gap: var(--wp--preset--spacing--8);
    /* The theme's paragraph rule would stretch it across the row. */
    width: fit-content;
    max-width: none;
    margin: 0;
    padding: var(--tag-inset) var(--tag-inset) var(--tag-inset) var(--wp--preset--spacing--12);
    font-size: var(--wp--preset--font-size--body-small);
    /* Bold: at this small size, medium reads too light. */
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--autodiag-ink);
    border: 2px solid var(--autodiag-criterion, var(--wp--preset--color--gray-300));
    border-radius: var(--tag-radius);
    /* Tilted like the criterion's badge, a little more. */
    rotate: -3deg;
}

/* The number's corners follow the tag's, less the padding between them. */
.wp-block-owlic-autodiagnostic__indicator-tag mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--wp--preset--spacing--24) + 2px);
    height: calc(var(--wp--preset--spacing--24) + 2px);
    font-variant-numeric: tabular-nums;
    color: var(--autodiag-ink);
    background: var(--wp--preset--color--white);
    --mark-radius: calc(var(--tag-radius) - var(--tag-inset));

    border-radius: var(--mark-radius);
    box-shadow: var(--wp--preset--shadow--small);
}

.wp-block-owlic-autodiagnostic__indicator.is-off .wp-block-owlic-autodiagnostic__indicator-tag {
    opacity: 0.6;
}

.wp-block-owlic-autodiagnostic__number {
    font-weight: var(--wp--custom--typography--weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--autodiag-ink);
}

/* The theme's column gap between the question and its answers. */
.wp-block-owlic-autodiagnostic__indicator-body {
    display: grid;
    gap: var(--wp--preset--spacing--gap-column);
    min-width: 0;
}


.wp-block-owlic-autodiagnostic__indicator-title strong {
    font-weight: var(--wp--custom--typography--weight-medium);
    color: var(--autodiag-ink);
}

.wp-block-owlic-autodiagnostic__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
}

/* The fieldset only groups and names the answers (AnswerControl): the
   control is the div inside it. */
.wp-block-owlic-autodiagnostic__answer-field {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

/* The three answers, as the site's tabs (components/buttons-like-tabs.css,
   tabs.css): a pill of real radio buttons, and behind the chosen one an
   indicator in the answer's colour that slides from one answer to the next.
   CSS alone, so it works without the script and in the editor: the answers
   share the width equally, and the indicator moves by its own width. */
.wp-block-owlic-autodiagnostic__answer {
    --answer-inset: 2px;
    --answer-radius: var(--wp--preset--border-radius--pill);
    --answer-step: 0;
    --answer-colour: transparent;
    --fluid-hover-background: var(--autodiag-sunken);
    --fluid-hover-radius: var(--answer-radius);

    position: relative;
    display: inline-grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--answer-inset);
    background: var(--autodiag-raised);
    border: 1px solid var(--autodiag-border);
    border-radius: var(--answer-radius);
}

/* The indicator, one answer wide, under the labels. */
.wp-block-owlic-autodiagnostic__answer::after {
    content: "";
    position: absolute;
    top: var(--answer-inset);
    left: var(--answer-inset);
    z-index: 0;
    width: calc((100% - 2 * var(--answer-inset)) / 3);
    height: calc(100% - 2 * var(--answer-inset));
    background: var(--answer-colour);
    border-radius: var(--answer-radius);
    opacity: 0;
    translate: calc(var(--answer-step) * 100%) 0;
    /* Longhands: stylelint hangs on a shorthand listing several var() pairs.
       The standard curve speeds up then brakes: a brisker step than the
       soft one's long tail. */
    transition-property: translate, background-color, opacity;
    transition-duration: var(--wp--custom--motion--duration-fast);
    transition-timing-function: var(--wp--custom--motion--ease-standard);
    pointer-events: none;
}

.wp-block-owlic-autodiagnostic__answer:has(input:checked)::after {
    opacity: 1;
}

.wp-block-owlic-autodiagnostic__answer:has(input[value="ok"]:checked) {
    --answer-colour: var(--autodiag-have);
}

.wp-block-owlic-autodiagnostic__answer:has(input[value="todo"]:checked) {
    --answer-step: 1;
    --answer-colour: var(--autodiag-missing);
}

.wp-block-owlic-autodiagnostic__answer:has(input[value="na"]:checked) {
    --answer-step: 2;
    --answer-colour: var(--autodiag-na);
}

.wp-block-owlic-autodiagnostic__answer input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wp-block-owlic-autodiagnostic__answer label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--8);
    min-height: var(--wp--custom--size--touch-target);
    padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
    font-size: var(--wp--preset--font-size--body-medium);
    font-weight: var(--wp--custom--typography--weight-medium);
    line-height: 1.24;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--autodiag-ink);
    border-radius: var(--answer-radius);
    cursor: pointer;
    user-select: none;
    transition-property: color, background-color;
    transition-duration: var(--wp--custom--motion--duration-fast);
    transition-timing-function: var(--wp--custom--motion--ease-standard);
}

@media (min-width: 600px) {
    .wp-block-owlic-autodiagnostic__answer label {
        white-space: nowrap;
    }
}

/* An answer lights up under the pointer. With the site's fluid hover
   (data-fluid-hover, src/fluid-hover.ts), a single pill glides from one
   answer to the next, under the chosen one's indicator; without it, the
   answer itself lights up. */
.wp-block-owlic-autodiagnostic__answer:not(.has-fluid-hover) input:not(:checked) + label:hover {
    background: var(--autodiag-sunken);
}

/* The colour alone marks the chosen answer: in bold, its label would grow,
   and the control with it. */
.wp-block-owlic-autodiagnostic__answer input:checked + label {
    color: var(--wp--preset--color--white);
}

.wp-block-owlic-autodiagnostic__answer input:focus-visible + label {
    outline: 2px dotted var(--wp--custom--color--focus);
    outline-offset: 2px;
}

/* A radio ring before each answer, so it reads as something to click. */
.wp-block-owlic-autodiagnostic__answer label::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    /* Centred on the label as it is: the text's middle, between its
       capitals and its lowercase, sits there too. */
    background: var(--autodiag-raised);
    border: 1.5px solid var(--wp--preset--color--gray-600);
    border-radius: 50%;
    transition: border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-standard);
}

.wp-block-owlic-autodiagnostic__answer input:not(:checked) + label:hover::before {
    border-color: var(--autodiag-ink);
}

/* Chosen, the ring turns white on the indicator and carries the answer's
   sign in its colour: the site's check, its cross, or a dot. */
.wp-block-owlic-autodiagnostic__answer input:checked + label::before {
    background-color: var(--wp--preset--color--white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    animation: autodiag-ring-chosen var(--wp--custom--motion--duration-moderate) var(--wp--custom--motion--ease-standard);
}

/* As it is chosen, the ring shrinks a touch and springs back with its sign. */
@keyframes autodiag-ring-chosen {
    0% {
        scale: 0.6;
    }

    60% {
        scale: 1.15;
    }

    100% {
        scale: 1;
    }
}

.wp-block-owlic-autodiagnostic__answer input[value="ok"]:checked + label::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 12l3.5 3.5L17 9" stroke="%232D6649" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.wp-block-owlic-autodiagnostic__answer input[value="todo"]:checked + label::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 8.5l7 7M15.5 8.5l-7 7" stroke="%23B1020B" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.wp-block-owlic-autodiagnostic__answer input[value="na"]:checked + label::before {
    background-image: radial-gradient(circle, var(--autodiag-na) 0 30%, transparent 35%);
}

/* A single proof: the same control, smaller, on the light beige of the
   site's first tabs (components/buttons-like-tabs.css) to stand out of its
   white row. */
.wp-block-owlic-autodiagnostic__answer.is-compact {
    background: var(--autodiag-sunken);
    --fluid-hover-background: var(--autodiag-raised);
}

.wp-block-owlic-autodiagnostic__answer.is-compact label {
    gap: 6px;
    min-height: 0;
    padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
    font-size: var(--wp--preset--font-size--body-small);
}

.wp-block-owlic-autodiagnostic__answer.is-compact label::before {
    width: 14px;
    height: 14px;
}

/* On a phone, an indicator's three answers stack, each a full-width row
   read from its ring, and the indicator slides down rather than across. */
@media (max-width: 599px) {
    .wp-block-owlic-autodiagnostic__controls .wp-block-owlic-autodiagnostic__answer:not(.is-compact) {
        --answer-radius: var(--wp--preset--border-radius--md);
        /* Inside the frame: its radius, less the inset. */
        --answer-inner-radius: calc(var(--wp--preset--border-radius--md) - var(--answer-inset));
        --fluid-hover-radius: var(--answer-inner-radius);

        grid-auto-rows: minmax(0, 1fr);
        grid-auto-flow: row;
        width: 100%;
    }

    .wp-block-owlic-autodiagnostic__controls .wp-block-owlic-autodiagnostic__answer-field,
    .wp-block-owlic-autodiagnostic__proofs .wp-block-owlic-autodiagnostic__answer-field {
        width: 100%;
    }

    .wp-block-owlic-autodiagnostic__controls .wp-block-owlic-autodiagnostic__answer:not(.is-compact)::after {
        width: calc(100% - 2 * var(--answer-inset));
        height: calc((100% - 2 * var(--answer-inset)) / 3);
        border-radius: var(--answer-inner-radius);
        translate: 0 calc(var(--answer-step) * 100%);
    }

    .wp-block-owlic-autodiagnostic__controls .wp-block-owlic-autodiagnostic__answer:not(.is-compact) label {
        justify-content: flex-start;
        gap: var(--wp--preset--spacing--12);
        padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
        text-align: start;
        border-radius: var(--answer-inner-radius);
    }
}

/* On a phone, a proof's answers keep to one line each in a third of the
   row: smaller text, ring and margins. */
@media (max-width: 599px) {
    .wp-block-owlic-autodiagnostic__answer.is-compact {
        width: 100%;
    }

    /* Under its proof, the pill keeps 4px on every side of the row; the
       proof takes the rest of the margin. Prefixed: the proofs' own rules
       come later in this sheet. */
    .wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__proofs li {
        padding: var(--wp--preset--spacing--4);
    }

    .wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__proofs li > span {
        padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--8) 0;
    }

    .wp-block-owlic-autodiagnostic__answer.is-compact label {
        gap: var(--wp--preset--spacing--4);
        padding-inline: 6px;
        font-size: var(--wp--preset--font-size--body-helper);
        white-space: nowrap;
    }

    .wp-block-owlic-autodiagnostic__answer.is-compact label::before {
        width: 12px;
        height: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-owlic-autodiagnostic__answer::after,
    .wp-block-owlic-autodiagnostic__answer label {
        transition: none;
    }

    .wp-block-owlic-autodiagnostic__answer input:checked + label::before {
        animation: none;
    }
}

/* Every status is outlined, as the NCm examples of the audit page: a white
   pill, a light border of its colour, its text and an icon of the Owlic
   collection in that colour. */
.wp-block-owlic-autodiagnostic__status {
    --background: var(--autodiag-raised);

    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--4);
    padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12) var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
    font-size: var(--wp--preset--font-size--body-helper);
    font-weight: var(--wp--custom--typography--weight-medium);
    white-space: nowrap;
    color: var(--autodiag-na);
    background: var(--autodiag-raised);
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: var(--wp--preset--border-radius--pill);
    /* From one status to the next, its colours shift rather than jump. */
    transition-property: color, border-color;
    transition-duration: var(--wp--custom--motion--duration-moderate);
    transition-timing-function: var(--wp--custom--motion--ease-standard);
}

.wp-block-owlic-autodiagnostic__status[data-status="ok"] {
    color: var(--autodiag-have);
    border-color: var(--wp--preset--color--vert-200);
}

.wp-block-owlic-autodiagnostic__status[data-status="part"] {
    color: var(--autodiag-part);
    border-color: var(--autodiag-part-tint);
}

.wp-block-owlic-autodiagnostic__status[data-status="todo"] {
    color: var(--autodiag-missing);
    border-color: var(--wp--preset--color--rouge-100);
}

/* One icon per status, all in the markup; the status shows its own. The
   icon centres between the pill's borders as it is, and so does the label:
   its line box sets it halfway between its capitals centred (too low) and
   its lowercase centred (too high). */
.wp-block-owlic-autodiagnostic__status-icon {
    display: inline-flex;
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--wp--preset--color--gray-600);
    transition: color var(--wp--custom--motion--duration-moderate) var(--wp--custom--motion--ease-standard);
}

.wp-block-owlic-autodiagnostic__status-icon > span {
    display: none;
    width: 100%;
    height: 100%;
}

.wp-block-owlic-autodiagnostic__status[data-status="ok"] .is-ok,
.wp-block-owlic-autodiagnostic__status[data-status="part"] .is-part,
.wp-block-owlic-autodiagnostic__status[data-status="todo"] .is-todo,
.wp-block-owlic-autodiagnostic__status[data-status="none"] .is-none,
.wp-block-owlic-autodiagnostic__status[data-status="na"] .is-na {
    display: block;
}

.wp-block-owlic-autodiagnostic__status-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The cross's file carries its own grey: it takes the status' colour. */
.wp-block-owlic-autodiagnostic__status-icon .is-todo path {
    fill: currentColor;
}

/* The icons are brighter than their text, in the same hue and 0.1 lighter
   in OKLCH: the green and the orange at the most chroma the screen shows
   there, the red at its own, already strong. The grey ones are lighter, to
   step back from their text. The symbol knocked out of them stays at 4.3:1
   at least. */
.wp-block-owlic-autodiagnostic__status[data-status="ok"] .wp-block-owlic-autodiagnostic__status-icon {
    color: oklch(0.563 0.129 159);
}

.wp-block-owlic-autodiagnostic__status[data-status="part"] .wp-block-owlic-autodiagnostic__status-icon {
    color: oklch(0.58 0.14 57.3);
}

.wp-block-owlic-autodiagnostic__status[data-status="todo"] .wp-block-owlic-autodiagnostic__status-icon {
    color: oklch(0.579 0.195 28);
}

/* Out of the visitor's profile: greyed, and nothing to answer. */
.wp-block-owlic-autodiagnostic__off-note {
    display: none;
    margin: 0;
    font-size: var(--wp--preset--font-size--body-small);
    color: var(--autodiag-muted);
}

.wp-block-owlic-autodiagnostic__indicator.is-off {
    background: transparent;
    border-style: dashed;
}

.wp-block-owlic-autodiagnostic__indicator.is-off .wp-block-owlic-autodiagnostic__off-note {
    display: block;
}

/* The whole controls row goes: left empty, it would still take a gap of the
   indicator's grid between the title and the reason. */
.wp-block-owlic-autodiagnostic__indicator.is-off .wp-block-owlic-autodiagnostic__controls,
.wp-block-owlic-autodiagnostic__indicator.is-off .wp-block-owlic-autodiagnostic__proofs {
    display: none;
}

.wp-block-owlic-autodiagnostic__indicator.is-off .wp-block-owlic-autodiagnostic__indicator-title strong {
    color: var(--autodiag-muted);
}

/* Proofs: a core/details in the « Preuves » style (components/details-proofs.css),
   which brings the accordion and its motion. Only its content is styled here. */
.wp-block-owlic-autodiagnostic__proofs {
    /* Inside the card's border: its radius, less that border. */
    --proofs-radius: calc(var(--autodiag-radius) - 1px);
}

.wp-block-owlic-autodiagnostic__proofs ul {
    display: grid;
    gap: var(--wp--preset--spacing--8);
    margin: 0;
    padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
    list-style: none;
}

.wp-block-owlic-autodiagnostic__proofs li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
    /* White on the proofs' beige; the answers' pill sets the row's height. */
    padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) var(--wp--preset--spacing--12);
    background: var(--autodiag-raised);
    border-radius: var(--wp--preset--border-radius--sm);
}

.wp-block-owlic-autodiagnostic__proofs li > span {
    flex: 1 1 240px;
    min-width: 0;
    /* Clear of the row's top and bottom when the proof runs on two lines. */
    padding-block: var(--wp--preset--spacing--8);
    font-size: var(--wp--preset--font-size--body-small);
}

/* The answers fill the row's height: as far from its top and bottom as
   from its right side, however long the proof. */
.wp-block-owlic-autodiagnostic__proofs li > .wp-block-owlic-autodiagnostic__answer-field {
    align-self: stretch;
}

.wp-block-owlic-autodiagnostic__proofs .wp-block-owlic-autodiagnostic__answer {
    height: 100%;
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__hint {
    margin: 0 var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
    padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12);
    font-size: var(--wp--preset--font-size--body-small);
    color: var(--autodiag-muted);
    border-inline-start: 3px solid var(--autodiag-border-strong);
}

.wp-block-owlic-autodiagnostic__hint.is-v10 {
    border-color: var(--wp--preset--color--mauve);
}

.wp-block-owlic-autodiagnostic__hint strong {
    font-weight: var(--wp--custom--typography--weight-medium);
    color: var(--autodiag-ink);
}

/* Plan */
.wp-block-owlic-autodiagnostic__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--wp--preset--spacing--12);
    margin: 0;
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__tiles > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--wp--preset--spacing--4);
    padding: var(--wp--preset--spacing--16);
    background: var(--autodiag-raised);
    border: 1px solid var(--autodiag-border);
    border-radius: var(--autodiag-radius);
}

.wp-block-owlic-autodiagnostic__tiles dt {
    font-size: var(--wp--preset--font-size--body-small);
    color: var(--autodiag-muted);
}

/* Size from the theme's preset (has-heading-4-font-size, in the markup). */
.wp-block-owlic-autodiagnostic__tiles dd {
    margin: 0;
    line-height: 1.1;
    font-weight: var(--wp--custom--typography--weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--autodiag-ink);
}

.wp-block-owlic-autodiagnostic__plan-group {
    display: grid;
    gap: var(--wp--preset--spacing--12);
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__plan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--12);
}

.wp-block-owlic-autodiagnostic__plan-head > .wp-block-heading {
    /* The theme sets headings full width: beside the badge, it takes the rest. */
    flex: 1 1 240px;
    margin: 0;
}

.wp-block-owlic-autodiagnostic__plan-group ul {
    display: grid;
    gap: var(--wp--preset--spacing--8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wp-block-owlic-autodiagnostic__plan-group li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: var(--wp--preset--spacing--12);
    padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
    font-size: var(--wp--preset--font-size--body-small);
    background: var(--autodiag-raised);
    border: 1px solid var(--autodiag-border);
    border-radius: var(--wp--preset--border-radius--sm);
}

.wp-block-owlic-autodiagnostic__plan-group li > span:last-child {
    display: grid;
    gap: 2px;
}

/* The indicator's number in a square: the summary's (bar-label), its frame
   alone in the criterion's colour. */
.wp-block-owlic-autodiagnostic__plan-group li .wp-block-owlic-autodiagnostic__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: var(--wp--preset--font-size--body-small);
    font-weight: 600;
    color: var(--wp--preset--color--black);
    border: 2px solid var(--autodiag-criterion, var(--wp--preset--color--gray-300));
    border-radius: var(--wp--preset--border-radius--sm);
}

.wp-block-owlic-autodiagnostic__plan-group small {
    font-size: var(--wp--preset--font-size--body-helper);
    color: var(--autodiag-muted);
}

.wp-block-owlic-autodiagnostic__plan-group small strong {
    font-weight: var(--wp--custom--typography--weight-medium);
    color: var(--autodiag-accent);
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__empty {
    margin: 0;
    padding: var(--wp--preset--spacing--16);
    color: var(--autodiag-muted);
    border: 1px dashed var(--autodiag-border-strong);
    border-radius: var(--autodiag-radius);
}

/* Summary */
.wp-block-owlic-autodiagnostic__summary {
    min-width: 0;
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__summary-inner {
    /* Prefixed: the gradient's sheet (components/gradient-svg.css) sets
       position: relative on it. */
    position: sticky;
    /* Clear of the site's header while it shows (--header-offset,
       src/header-scroll.js), and following it as it slides. */
    top: calc(var(--header-offset, 0px) + var(--autodiag-column-gap));
    display: grid;
    gap: var(--wp--preset--spacing--16);
    padding: var(--wp--preset--spacing--24);
    /* The secondary grey falls to 2.9:1 on the gradient's lavender: the
       full ink keeps 8:1 at least. */
    --autodiag-muted: var(--autodiag-ink);

    /* A core/group in the pink gradient and grain style, as on the pricing
       page (parts/summary.php): the site paints both. */
    border-radius: var(--wp--preset--border-radius--card);
    transition: top var(--wp--custom--motion--duration) var(--wp--custom--motion--ease-standard);
}

/* The panel's grid gap alone spaces its content: the group's flow layout
   would add its own margins above the bars and the button. */
.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__summary-inner > * {
    margin-block: 0;
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__percent {
    font-size: var(--wp--preset--font-size--heading-3);
    font-weight: var(--wp--custom--typography--weight-medium);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--autodiag-ink);
}

.wp-block-owlic-autodiagnostic__bars {
    display: grid;
    gap: var(--wp--preset--spacing--8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wp-block-owlic-autodiagnostic__bars a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--wp--preset--spacing--12);
    font-size: var(--wp--preset--font-size--body-small);
    color: var(--autodiag-ink);
    text-decoration: none;
}

/* Each criterion's number in a square of its colour. */
.wp-block-owlic-autodiagnostic__bar-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--wp--preset--border-radius--sm);
}

.wp-block-owlic-autodiagnostic__bar-label mark {
    font-size: var(--wp--preset--font-size--body-small);
    /* Bold: at this small size, medium reads too light. */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--black);
    background: none;
}

/* The dark green needs white figures. */
.wp-block-owlic-autodiagnostic__bar-label.has-vert-foret-background-color mark {
    color: var(--wp--preset--color--white);
}

.wp-block-owlic-autodiagnostic__track {
    display: flex;
    height: 8px;
    overflow: hidden;
    background: var(--autodiag-sunken);
    border: 1px solid var(--autodiag-border);
    border-radius: var(--wp--preset--border-radius--pill);
}

.wp-block-owlic-autodiagnostic__track > span {
    border-radius: var(--wp--preset--border-radius--pill);
    transition-property: width, background-color;
    transition-duration: var(--wp--custom--motion--duration-moderate);
    transition-timing-function: var(--wp--custom--motion--ease-standard);
}

.wp-block-owlic-autodiagnostic__track .is-have {
    background: var(--autodiag-have);
}

/* Each share is rounded at both ends. Where the red meets the green, a
   ring of the track's colour sets them apart; alone, the red starts where
   the green would. A gap would push it aside even after an empty green. */
.wp-block-owlic-autodiagnostic__track .is-missing {
    background: var(--autodiag-missing);
}

/* Empty, the red keeps no ring: it would flatten the green's end. Its
   width is written inline, by the server and the script alike. */
.wp-block-owlic-autodiagnostic__track .is-missing:not([style*="width: 0%"]) {
    outline: 2px solid var(--autodiag-sunken);
}

.wp-block-owlic-autodiagnostic__bar-count {
    font-variant-numeric: tabular-nums;
    color: var(--autodiag-muted);
}

.wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--12);
    font-size: var(--wp--preset--font-size--body-helper);
    font-variant-numeric: tabular-nums;
    color: var(--autodiag-muted);
}

.wp-block-owlic-autodiagnostic__legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: var(--wp--preset--spacing--4);
    background: var(--autodiag-border-strong);
    border-radius: var(--wp--preset--border-radius--pill);
}

.wp-block-owlic-autodiagnostic__legend .is-have::before {
    background: var(--autodiag-have);
}

.wp-block-owlic-autodiagnostic__legend .is-missing::before {
    background: var(--autodiag-missing);
}

@media (max-width: 999px) {
    /* Above the grid on narrow screens, the summary would push it down: it
       closes the page instead, after the plan. */
    .wp-block-owlic-autodiagnostic__summary {
        order: 1;
    }

    /* Relative, not static: the gradient's SVG is placed against it. */
    .wp-block-owlic-autodiagnostic .wp-block-owlic-autodiagnostic__summary-inner {
        position: relative;
    }
}

/* After the rules they undo: the status and the bars' shares change at once. */
@media (prefers-reduced-motion: reduce) {
    .wp-block-owlic-autodiagnostic__status,
    .wp-block-owlic-autodiagnostic__status-icon,
    .wp-block-owlic-autodiagnostic__track > span {
        transition: none;
    }
}