@layer components {
    .evaluation-heading {
        display: flex;
    }

    .evaluation-heading > h1:first-child {
        margin-top: 0.5rem;
    }

    .evaluation-heading .evaluation-name {
        margin-left: auto;
    }

    .evaluation-number {
        display: inline-block;
        padding: .5rem 1rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        font-weight: 400;
        font-family: var(--font-heading);
    }

    .evaluation-number > span {
        font-weight: 800;
    }

    .evaluation-name a,
    .evaluation-name .dropdown__toggle {
        color: var(--theme-color-dark-prev);
    }

    /* Points right, as it was drawn: Krajee's stylesheet turned the caret of a toggle marked aria-expanded, which this one always was. */
    .evaluation-name .dropdown__toggle::after {
        transform: rotate(-90deg);
    }

    /* The panel hangs from the summary's line box, which is taller than the inline label it sat under. */
    .evaluation-name .dropdown__panel {
        top: calc(100% - 4px);
    }

    .layout-row > .evaluation-name {
        padding-left: 0;
    }

    .evaluation-number strong {
        font-weight: 800;
        padding-left: 0.25rem;
    }
}