@layer components {
    .content-verdict {
        display: grid;
        gap: var(--space-24);
        margin-top: var(--space-20);
        color: var(--color-text);
    }

    .content-verdict-preview {
        display: inline-flex;
        width: fit-content;
        padding: var(--space-6) var(--space-12);
        border-radius: var(--radius-round);
        background: var(--color-brand-primary);
        color: var(--color-text-strong);
    }

    .content-verdict > h2 {
        font-size: var(--text-2xl);
        line-height: var(--leading-title);
    }

    .content-verdict-text {
        padding-bottom: var(--space-24);
        border-bottom: var(--border-width-hairline) solid var(--color-border);
        line-height: var(--leading-relaxed);
    }

    .content-verdict-conclusion {
        display: grid;
        gap: var(--space-28);
        margin-top: var(--space-4);
        padding: var(--space-32);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface);
        box-shadow: 0 1.25rem 3rem var(--color-shadow-soft);

        @media (max-width: 47.9375rem) {
            gap: var(--space-20);
            padding: var(--space-16);
        }
    }

    .content-verdict-conclusion-left {
        display: grid;
        justify-items: center;
        gap: var(--space-10);
        min-height: 0;
        padding: 0;
        background: transparent;
        color: var(--color-text);
    }

    .content-verdict-conclusion-left-score {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        list-style: none;
    }

    .content-verdict-conclusion-left-score li {
        display: flex;
        align-items: center;
    }

    .content-verdict-conclusion-left-score .review-score-star {
        color: var(--color-brand-primary);
    }

    .content-verdict-conclusion-left-score .review-score-star--regular-star {
        color: var(--color-brand-primary);
    }

    .content-verdict-conclusion-left-score-value {
        min-height: var(--space-40);
        margin-left: var(--space-10) !important;
        padding: 0 var(--space-12) .125rem var(--space-12);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface-alt);
        color: var(--color-text-muted);
        font-weight: var(--font-weight-extrabold);
    }

    .content-verdict-conclusion-left-description {
        display: flex;
        justify-content: center;
        color: var(--color-text-soft);
        font-weight: var(--font-weight-extrabold);
        list-style: none;
    }

    .content-verdict-conclusion-right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-20);
        min-height: 0;
        background: transparent;
        color: var(--color-text);

        @media (max-width: 47.9375rem) {
            grid-template-columns: 1fr;
            gap: var(--space-14);
        }
    }

    .content-verdict-points {
        min-height: 11.25rem;
        padding: var(--space-24) var(--space-28);
        border-radius: var(--radius-corner);

        @media (max-width: 47.9375rem) {
            min-height: 0;
            padding: var(--space-18);
        }
    }

    .content-verdict-points--plus {
        background: var(--color-bg-success-soft);
        box-shadow: inset 0 0 0 var(--border-width-hairline) rgb(27 128 48 / 8%);
    }

    .content-verdict-points--min {
        background: color-mix(in oklch, var(--color-danger) 8%, var(--color-bg-surface));
        box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in oklch, var(--color-danger) 6%, transparent);
    }

    .content-verdict-points__title {
        margin: 0 0 var(--space-14);
        font-size: var(--text-base);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-title);
        text-transform: uppercase;
    }

    .content-verdict-points--plus .content-verdict-points__title,
    .content-verdict-points--plus .content-verdict-point-icon {
        color: var(--color-success-strong);
    }

    .content-verdict-points--min .content-verdict-points__title,
    .content-verdict-points--min .content-verdict-point-icon {
        color: var(--color-danger);
    }

    .content-verdict-conclusion-right-plus,
    .content-verdict-conclusion-right-min {
        display: grid;
        list-style: none;
    }

    .content-verdict-conclusion-right li {
        display: grid;
        grid-template-columns: var(--space-24) minmax(0, 1fr);
        align-items: start;
        gap: var(--space-12);
        min-height: 0;
        padding: var(--space-10) 0;
        border-bottom: var(--border-width-hairline) solid var(--color-border);
        color: var(--color-text);
        line-height: var(--leading-reading);
    }

    .content-verdict-conclusion-right li:first-child {
        padding-top: 0;
    }

    .content-verdict-conclusion-right li:last-child {
        border-bottom: 0;
    }

    .content-verdict-conclusion-right li::before {
        content: none;
        display: none;
    }

    .content-verdict-point-icon.svg-sprite {
        position: static;
        display: block;
        justify-self: center;
        width: var(--space-14);
        height: var(--space-14);
        margin-top: 0.35em;
        fill: currentColor;
    }

    .content-verdict-point-text {
        min-width: 0;
    }

    :root[data-theme="dark"] .content-verdict-points--plus {
        background: color-mix(in oklch, rgb(232 249 236) 72%, var(--color-bg-surface));
        box-shadow: inset 0 0 0 var(--border-width-hairline) rgb(27 128 48 / 8%);
    }

    :root[data-theme="dark"] .content-verdict-points--min {
        background: color-mix(in oklch, color-mix(in oklch, oklch(0.55 0.2 28) 8%, var(--color-white)) 72%, var(--color-bg-surface));
        box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in oklch, oklch(0.55 0.2 28) 6%, transparent);
    }

    :root[data-theme="dark"] .content-verdict-points--plus .content-verdict-points__title,
    :root[data-theme="dark"] .content-verdict-points--plus .content-verdict-point-icon {
        color: oklch(0.5 0.13 145);
    }

    :root[data-theme="dark"] .content-verdict-points--min .content-verdict-points__title,
    :root[data-theme="dark"] .content-verdict-points--min .content-verdict-point-icon {
        color: oklch(0.55 0.2 28);
    }

    :root[data-theme="dark"] .content-verdict-points li {
        border-color: rgb(15 23 42 / 0.14);
        color: rgb(15 23 42);
    }
}

@layer utilities {
    .content-verdict-conclusion-left-score .review-score-star.svg-sprite {
        position: static;
        display: block;
        flex: 0 0 3rem;
        width: 3rem;
        height: 3rem;
        fill: currentColor;

        @media (max-width: 47.9375rem) {
            flex-basis: 2.25rem;
            width: 2.25rem;
            height: 2.25rem;
        }
    }

    .content-verdict-conclusion-left-score .review-score-star--regular-star.svg-sprite {
        fill: var(--color-brand-primary);;
    }
}