<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Accessibility Test Results</title>
        <meta charset="utf-8">
    </head>
    <style>

    :root {
        color-scheme: light dark;

        --grey-100: color(srgb 1 1 1);
        --grey-95: color(srgb 0.95 0.95 0.95);
        --grey-90: color(srgb 0.9 0.9 0.9);
        --grey-85: color(srgb 0.85 0.85 0.85);
        --grey-80: color(srgb 0.8 0.8 0.8);
        --grey-75: color(srgb 0.75 0.75 0.75);
        --grey-50: color(srgb 0.5 0.5 0.5);
        --grey-24: color(srgb 0.24 0.24 0.24);
        --grey-20: color(srgb 0.20 0.20 0.20);
        --grey-16: color(srgb 0.16 0.16 0.16);
        --grey-12: color(srgb 0.12 0.12 0.12);
        --grey-6: color(srgb 0.06 0.06 0.06);
        --grey-0: color(srgb 0 0 0);
        --clear: #00000000;

        --background-button: linear-gradient(light-dark(var(--grey-85), var(--grey-24)), light-dark(var(--grey-80), var(--grey-20)));
        --background-button-down: linear-gradient(light-dark(var(--grey-80), var(--grey-20)), light-dark(var(--grey-75), var(--grey-16)));
        --shadow-button: 0 4px 10px 0 light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
        --shadow-button-down: 0 1px 1px 0 light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));

        --background-primary: light-dark(var(--grey-100), var(--grey-16));
        --background-primary-dark: var(--grey-16);
        --background-secondary: light-dark(var(--grey-95), var(--grey-12));
        --background-tertiary: light-dark(var(--grey-90), var(--grey-6));
        --background-quaternary: light-dark(var(--grey-85), var(--grey-0));
        --text-primary: light-dark(var(--grey-0), var(--grey-90));
        --text-secondary: light-dark(var(--grey-6), var(--grey-80));
        --text-tertiary: light-dark(var(--grey-12), var(--grey-75));
        --text-quaternary: light-dark(var(--grey-16), var(--grey-50));
        --test-pass: light-dark(var(--grey-50), var(--grey-50));
        --test-fail: light-dark(var(--grey-90), var(--grey-0));
    }

    html, body {
        margin: 0;
        padding: 0;
        background: var(--background-primary);
        font-family: -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
        font-size: 62.5%;
    }

    body {
        padding: 0 32px;
    }

    * {
        box-sizing: border-box;
    }

    h1, h2, h3 {
        color: var(--text-primary);
        font-size: 1.8rem;
    }

    p {
        color: var(--text-secondary);
        font-size: 1.2rem;
    }

    .resultsummary {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .resultgraph {
        height: 16px;
        background: var(--test-fail);
        border-radius: 2px;
        overflow: hidden;
    }

    .resultgraph div {
        height: 16px;
        background: var(--test-pass);
    }

    .resultgraphcontainer {
        background: var(--background-secondary);
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 8px;
    }

    table {
        border-collapse: collapse;
        width: 100%;
        font-size: 1.4rem;
    }
    
    td {
        max-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td, th {
        padding: 4px 32px 4px 8px;
        text-align: left;
    }

    th {
        background: var(--background-tertiary);
        color: var(--text-quaternary);
        height: 32px;
        font-weight: 400;
    }

    td p, th p {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        padding: 0;
    }

    td span, th span {
        width: 24px;
        height: 24px;
        display: inline-block;
        background: #ddd;
        margin-right: 8px;
        border-radius: 4px;
        vertical-align: middle;
    }

    td .light, td .dark, td .light-high-contrast, td .dark-high-contrast {
        background: var(--background-tertiary);
        color: var(--clear);
        overflow: hidden;
    }

    td .light {
        background: var(--background-primary-dark) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxkZWZzPjxzdHlsZT4uYSB7ZmlsbDogI2NjYzt9LnMge2ZpbGw6IG5vbmU7c3Ryb2tlOiAjY2NjO3N0cm9rZS1saW5lY2FwOiByb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDogMTA7fTwvc3R5bGU+PC9kZWZzPgo8Y2lyY2xlIGNsYXNzPSJhIiBjeD0iMTIiIGN5PSIxMiIgcj0iNC41Ii8+CjxsaW5lIGNsYXNzPSJzIiB4MT0iMTIiIHkxPSI2IiB4Mj0iMTIiIHkyPSIzLjc1Ii8+CjxsaW5lIGNsYXNzPSJzIiB4MT0iMTIiIHkxPSIyMC4yNSIgeDI9IjEyIiB5Mj0iMTgiLz4KPGxpbmUgY2xhc3M9InMiIHgxPSIxNi4yNCIgeTE9IjcuNzYiIHgyPSIxNy44MyIgeTI9IjYuMTciLz4KPGxpbmUgY2xhc3M9InMiIHgxPSI2LjE3IiB5MT0iMTcuODMiIHgyPSI3Ljc2IiB5Mj0iMTYuMjQiLz4KPGxpbmUgY2xhc3M9InMiIHgxPSIxOCIgeTE9IjEyIiB4Mj0iMjAuMjUiIHkyPSIxMiIvPgo8bGluZSBjbGFzcz0icyIgeDE9IjMuNzUiIHkxPSIxMiIgeDI9IjYiIHkyPSIxMiIvPgo8bGluZSBjbGFzcz0icyIgeDE9IjE2LjI0IiB5MT0iMTYuMjQiIHgyPSIxNy44MyIgeTI9IjE3LjgzIi8+CjxsaW5lIGNsYXNzPSJzIiB4MT0iNi4xNyIgeTE9IjYuMTciIHgyPSI3Ljc2IiB5Mj0iNy43NiIvPgo8L3N2Zz4=');
    }

    td .dark {
        background: var(--background-primary-dark) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxkZWZzPjxzdHlsZT4uYSB7ZmlsbDogI2NjYzt9PC9zdHlsZT48L2RlZnM+CjxwYXRoIGNsYXNzPSJhIiBkPSJNMTMuNjIsNC42OWMuODYsMS4yMiwxLjM4LDIuNywxLjM4LDQuMzEsMCw0LjE0LTMuMzYsNy41LTcuNSw3LjUtLjU2LDAtMS4xLS4wNy0xLjYyLS4xOSwxLjM2LDEuOTIsMy41OSwzLjE5LDYuMTIsMy4xOSw0LjE0LDAsNy41LTMuMzYsNy41LTcuNSwwLTMuNTgtMi41Mi02LjU3LTUuODgtNy4zMVoiLz4KPC9zdmc+');
    }

    td .light-high-contrast {
        background: var(--background-primary-dark) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxkZWZzPjxzdHlsZT4uYSB7ZmlsbDogI2NjYzt9LnMge2ZpbGw6IG5vbmU7c3Ryb2tlOiAjY2NjO3N0cm9rZS1saW5lY2FwOiByb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDogMTA7fTwvc3R5bGU+PC9kZWZzPgo8bGluZSBjbGFzcz0icyIgeDE9IjgiIHkxPSI3LjUiIHgyPSI4IiB5Mj0iNi41Ii8+CjxsaW5lIGNsYXNzPSJzIiB4MT0iNC44MiIgeTE9IjguODIiIHgyPSIzLjYxIiB5Mj0iNy42MSIvPgo8bGluZSBjbGFzcz0icyIgeDE9IjMuNSIgeTE9IjEyIiB4Mj0iMi41IiB5Mj0iMTIiLz4KPGxpbmUgY2xhc3M9InMiIHgxPSI0LjgyIiB5MT0iMTUuMTgiIHgyPSIzLjYxIiB5Mj0iMTYuMzkiLz4KPGxpbmUgY2xhc3M9InMiIHgxPSI4IiB5MT0iMTYuNSIgeDI9IjgiIHkyPSIxNy41Ii8+CjxwYXRoIGNsYXNzPSJhIiBkPSJNMTAsMTJjMC0uNjYuMTEtMS4zLjMxLTEuODktLjU1LS42Ny0xLjM3LTEuMTEtMi4zMS0xLjExLTEuNjYsMC0zLDEuMzQtMywzczEuMzQsMywzLDNjLjkzLDAsMS43Ni0uNDQsMi4zMS0xLjExLS4yLS42LS4zMS0xLjIzLS4zMS0xLjg5WiIvPgo8cGF0aCBjbGFzcz0iYSIgZD0iTTE2LDdjLTIuNzYsMC01LDIuMjQtNSw1czIuMjQsNSw1LDUsNS0yLjI0LDUtNS0yLjI0LTUtNS01Wk0xMiwxMmMwLTIuMjEsMS43OS00LDQtNHY4Yy0yLjIxLDAtNC0xLjc5LTQtNFoiLz4KPC9zdmc+');
    }

    td .dark-high-contrast {
        background: var(--background-primary-dark) url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxkZWZzPjxzdHlsZT4uYSB7ZmlsbDogI2NjYzt9PC9zdHlsZT48L2RlZnM+CjxwYXRoIGNsYXNzPSJhIiBkPSJNMTAsMTJjMC0xLjE1LjMzLTIuMjIuODktMy4xMy0uNy0uODctMS42OC0xLjQ5LTIuODEtMS43NC41OC44MS45MiwxLjguOTIsMi44OCwwLDIuNzYtMi4yNCw1LTUsNS0uMzcsMC0uNzMtLjA1LTEuMDgtLjEyLjkxLDEuMjgsMi4zOSwyLjEyLDQuMDgsMi4xMiwxLjU4LDAsMi45Ni0uNzQsMy44OC0xLjg4LS41NS0uOTEtLjg4LTEuOTctLjg4LTMuMTJaIi8+CjxwYXRoIGNsYXNzPSJhIiBkPSJNMTYsN2MtMi43NiwwLTUsMi4yNC01LDVzMi4yNCw1LDUsNSw1LTIuMjQsNS01LTIuMjQtNS01LTVaTTEyLDEyYzAtMi4yMSwxLjc5LTQsNC00djhjLTIuMjEsMC00LTEuNzktNC00WiIvPgo8L3N2Zz4=');
    }

    @media (prefers-color-scheme: light) {
        td .light, td .dark, td .light-high-contrast, td .dark-high-contrast {
            filter: invert(100%);
        }
    }

    td:nth-child(3) {
        width: 360px;
    }

    tr {
        background: var(--background-secondary);
        color: var(--text-tertiary);
    }

    details {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 16px;
        font-size: 1.4rem;
        box-shadow: var(--shadow-button);
    }

    summary {
        padding: 16px 8px;
        background: var(--background-button);
        color: var(--text-secondary);
        cursor: pointer;
    }

    summary::selection {
        background: var(--clear);
    }

    summary:active {
        background: var(--background-button-down);
        color: var(--text-quaternary);
    }

    details:active {
        box-shadow: var(--shadow-button-down);
    }

    main {
        max-width: 1024px;
        margin: 0 auto;
    }

    footer p {
        text-align: center;
        color: var(--text-quaternary);
        font-size: 1rem;
        padding: 32px 0;
    }

    footer p a {
        color: var(--text-quaternary);
    }

    footer p a:hover {
        color: var(--text-secondary);
    }

    hr {
        margin: 32px 0;
        border: none;
    }
    </style>
    <body>
        <main>
            <h3>Not Enough Colors To Test</h3>
            <p>Add more items to a Test Group and try again</p>
        </main>
    </body>
</html>
