/* wicks.css v0.2 Feb 2026 */
@layer sw {


    :root {

        /* --primary: #3e297a;
        --primary: rebeccapurple; */

        /* --secondary: #5151e6;
        --secondary: green; */
        --primary: #3e297a;
        --secondary: #00d0d0;
        /* --secondary: rgb(0, 59, 0); */

        --white: color-mix(in oklch, white 97%, var(--primary) 3%);
        --black: color-mix(in oklch, black 75%, var(--primary) 25%);
        --primaryLightest: color-mix(in oklch, white 94%, var(--primary) 6%);
        --primaryLighter: color-mix(in oklch, white 90%, var(--primary) 10%);
        --primaryLight: color-mix(in oklch, white 60%, var(--primary) 40%);
        --primaryDark: color-mix(in oklch, black 25%, var(--primary) 75%);
        --primaryDarker: color-mix(in oklch, black 50%, var(--primary) 50%);
        --secondaryLightest: color-mix(in oklch, white 94%, var(--secondary) 6%);
        --secondaryLighter: color-mix(in oklch, white 90%, var(--secondary) 10%);
        --secondaryLight: color-mix(in oklch, white 60%, var(--secondary) 40%);
        --secondaryDark: color-mix(in oklch, black 25%, var(--secondary) 75%);
        --secondaryDarker: color-mix(in oklch, black 50%, var(--secondary) 50%);


        --gray: color-mix(in oklch, gray 35%, var(--primaryLight) 65%);

        --danger: red;

        --border: 1px solid var(--primary);
        --borderDanger: 1px solid var(--danger);
        --boxShadow: 0px 0px .5em var(--primaryLight);
        --boxShadow: 0px 0px 1rem color-mix(in oklch, gray 35%, var(--primaryLight) 65%);



        --borderRadius: 0;


        font: normal 16px Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
        color: var(--black);

        box-sizing: border-box;
        interpolate-size: allow-keywords;
        accent-color: var(--secondary);

    }

    html,
    body {
        background-color: var(--white);
        /* scrollbar-gutter: ; */
    }


    * {
        font: inherit;
        margin: 0;
        padding: 0;
        scrollbar-width: thin;
        scrollbar-color: #888 transparent;
        accent-color: var(--secondary);

        &,
        &::before,
        &::after {
            box-sizing: border-box;
        }

        &::-webkit-scrollbar {
            width: 3px;
            height: 3px;
        }

        &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &:link {
            text-decoration-color: transparent;
        }

        &:has(dialog[open]) {
            overflow: hidden;
        }

    }

    ::selection {
        background-color: var(--primary);
        color: var(--white);
    }


    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 600;
        line-height: 1.2;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    h5 {
        font-size: 1.25rem;
    }

    h6 {
        font-size: 1rem;
    }

    p {

        line-height: 1.6;
        text-wrap: balance;
        text-wrap: pretty;

        &:not(:last-of-type) {
            margin-bottom: .75rem;
        }
    }



    a:not([role="button"]) {
        cursor: pointer;
        color: var(--secondary);
        outline: none;

        &:visited {
            color: var(--secondary);
        }

        &:hover,
        &:focus-visible,
        &:active {
            text-decoration: underline;
            text-underline-offset: 0.2rem;
        }

        &:focus-visible,
        &:active {
            outline: 2px solid var(--secondary);
            outline-offset: 2px;
        }

        &:active {
            color: var(--secondaryDarker)
        }
    }

    mark {
        background-color: var(--secondaryLight);
    }

    /* Badge */
    small {}

    strong {
        font-weight: bold;
    }

    em {
        font-style: italic;
    }

    ul,
    ol {
        list-style: none;
    }

    label {
        display: block;
        width: fit-content;
        margin-bottom: .2em;
    }

    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        margin: 0;
        width: 100%;
        display: grid;
        align-items: center;
        justify-items: start;
        grid-template-columns: min-content 1fr;
        gap: .5rem;
        padding: .5rem;
        cursor: pointer;
        border-radius: .2em;
        transition: background-color .1s ease-out;
        user-select: none;

        &:hover {
            background-color: var(--primaryLighter);
        }

        /* Disabled fieldset instead of disabled inputs */
        &:is(fieldset:disabled label:has(input[type="radio"])),
        &:is(fieldset:disabled label:has(input[type="checkbox"])) {
            cursor: default;
            background-color: revert;
        }

    }

    input[type="radio"],
    input[type="checkbox"] {
        cursor: pointer;

        height: 1.5rem;
        width: 1.5rem;
        accent-color: var(--secondary);

        &:disabled {
            cursor: default;
        }


    }


    button,
    a[role="button"],
    select,
    input:not([type="checkbox"], [type="radio"]),
    textarea,
    details>summary,
    meter,
    progress {

        display: block;
        width: 100%;
        height: 2.5rem;
        padding: .4rem .6rem;
        outline: 0;
        border: var(--border);
        border-radius: var(--borderRadius);
        background-color: var(--primaryLightest);

        &:disabled {
            /* Probably needs to be more gray */
            cursor: initial;
            opacity: .7;
            filter: grayscale(.8)
        }

        &:hover:not(:disabled, :focus, :focus-visible, :focus-within) {
            border-color: var(--secondary);
        }

        &:focus-visible,
        &:focus {
            box-shadow: 0px 0px 0px 1px inset var(--secondary);
            border-color: var(--secondary);
            background-color: var(--white);
        }

        &:is(button, a[role="button"], input[type="button"], input[type="submit"], input[type="reset"], details>summary) {
            display: grid;
            place-items: center;
            min-width: 4rem;
            width: fit-content;
            max-width: 100%;
            text-wrap: balance;
            user-select: none;
            cursor: pointer;
            background-color: var(--primary);
            color: var(--white);

            &:active:not(:disabled) {
                outline: 2px solid var(--secondary);
            }

            &:is(details>summary) {
                display: flex;
                flex-flow: row nowrap;
                gap: .5rem;
                width: 100%;

                &::marker,
                &::-webkit-details-marker {
                    display: none;
                    content: "";
                }

                &::before {
                    content: "";
                    width: 0.4rem;
                    height: 0.4rem;
                    border-right: 1.5px solid currentColor;
                    border-bottom: 1.5px solid currentColor;
                    transform: rotate(var(--caret-angle));
                    transform-origin: center;
                    transition: --caret-angle 0.1s ease-out;
                    flex: none;
                }
            }


        }

        &:is(select) {
            /* appearance: none; */
            cursor: pointer;

        }

        &:is([type="file"]) {
            cursor: pointer;
        }

        &:is(input) {

            &[type="color"] {
                aspect-ratio: 1/1;
                width: unset;
                cursor: pointer;
            }

            &[type="search"] {
                --magnifyingGlass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E");
                background-image: var(--magnifyingGlass);
                background-repeat: no-repeat;
                background-size: 1rem;
                background-position: right 0.75rem center;
                padding-right: 2rem;
            }

            &[type="range"] {
                cursor: pointer;
                border-width: 0px;
                -webkit-appearance: none;
                background: transparent;
            }


        }

        &:is(textarea) {
            min-height: 6rem;
            resize: vertical;

            &:focus-visible {
                background-color: var(--white);
            }
        }

        /* Need to exclude from hover styles */
        &:is(meter) {}

        &:is(progress) {


            background-color: transparent;

            &::-webkit-progress-bar {
                background-color: transparent;
            }

            &::-webkit-progress-value {
                background-color: var(--secondary);
            }

            &::-moz-progress-bar {
                background-color: var(--secondary);
            }
        }
    }

    fieldset {
        padding: .5rem 0;
        border: var(--border);
        background-color: var(--primaryLightest);

        legend {
            cursor: default;
            margin: 0 .5rem;
            padding: 0 .5rem;
        }

        label:has(input[type="radio"]),
        label:has(input[type="checkbox"]) {
            border-radius: 0;
        }

    }

    form {
        --column-width: 20rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
        width: clamp(50vw, 60rem, 100%);
        row-gap: 1.5rem;
        column-gap: 2rem;
        padding: 1rem;


        div:has(button[type="submit"]),
        footer:has(button[type="submit"]) {
            grid-column: 1/-1;
            margin-top: 1rem;
            display: flex;
            justify-content: end;
            gap: 1rem;
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        background-color: var(--white);
        /* box-shadow: 0px 0px 0px 1px var(--secondary); */
        border: var(--border);
        /* display: block;
        padding: .5rem; */

        th,
        td {
            padding: .5rem;
            text-align: left;
            vertical-align: middle;
        }

        thead {
            background-color: var(--primaryLightest);
            font-weight: 600;

            th {
                border-bottom: 1px solid var(--primary);

                /* Hmmm */
                /* &:is(table:has(tbody>tr:first-of-type:hover)) th {
                    border-color: transparent;
                } */
            }

        }

        tbody {
            tr {
                &:nth-child(even) {
                    background-color: var(--primaryLightest);
                }

                &:hover {
                    /* box-shadow: 0px 0px 0px 1px inset var(--secondary); */
                }
            }
        }

        tfoot {
            background-color: var(--primaryLighter);
            font-weight: 500;

            td {
                border-top: 1px solid var(--primary);
            }
        }

    }

    i {
        display: block;
        height: 1.5rem;
        width: 1.5rem;
        /* stroke: var(--primary); */


        &::before {
            /* stroke: var(--primary); */
            content: "";
            display: block;
            background-repeat: no-repeat;
            background-size: 1rem;
            background-position: right 0.75rem center;
        }

        &[data-icon="magnifying-glass"] {

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E");
        }

    }

    @property --caret-angle {
        syntax: "<angle>";
        inherits: true;
        initial-value: -45deg;
    }

    details {

        /* &:active {
            background-color: red;
        } */

        --caret-angle: -45deg;
        overflow: hidden;

        &[open] {

            box-shadow: var(--boxShadow);
            --caret-angle: 45deg;

            /* summary {
                background-color: var(--primaryLight);
            } */

        }

        &::details-content {
            block-size: 0;
            overflow: hidden;
            content-visibility: hidden;
            transition: block-size 0.2s ease-out, min-height 0.2s ease-out, content-visibility 0.2s allow-discrete;
        }

        &[open]::details-content {
            border: var(--border);
            block-size: auto;
            content-visibility: visible;
            min-height: 5rem;
            padding: 1rem;
        }
    }


    input[type="range"] {}

    /* Chrome, Safari, Edge */
    input[type="range"]::-webkit-slider-runnable-track {
        height: 6px;
        background: var(--primary);
        border-radius: 3px;
    }

    /* Firefox */
    input[type="range"]::-moz-range-track {
        height: 6px;
        background: var(--primary);
        border-radius: 3px;
    }

    /* Thumb styling (optional) */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        background: var(--primary);
        border-radius: 50%;
        margin-top: -5px;
        /* centers thumb on track */
    }

    input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: var(--primary);
        border-radius: 50%;
        border: none;
    }



    section {}

    aside {}


    /* Layouts */

    body {
        display: grid;
        gap: 1rem;
    }



    body>header {
        display: flex;
        align-items: center;
        height: fit-content;
        gap: 1rem;
        padding: .5rem;
        /* position: fixed; */
        /* top: 0;
        left: 0; */
        /* 
        z-index: 15; */
        background-color: var(--primaryLighter);
        border-bottom: var(--border);
    }

    body>main {
        padding: 0 2rem 4rem 2rem;
    }

    /* body:has(>header) body > main {
        padding-top: calc(var(--headerHeight) + 1rem);
    } */

    /* Body has >aside+main */

    body>footer {
        min-height: 8rem;
        /* margin-top: 2rem; */
        padding: 2rem;
        background-color: var(--primary);
        color: var(--white);
    }

    /* Card */
    article {
        display: grid;
        gap: 1rem;
        width: fit-content;
        background-color: var(--white);
        box-shadow: var(--boxShadow);
        border: var(--border);
        padding: 1rem;

        /* box-shadow: var(--boxShadow); */

        /* Card header */
        >header {}

        /* Card content */
        >div {}

        /* Card footer */
        >footer {}



    }

    menu[popover] {}


    dialog[open] {
        /* padding: 1rem; */
        margin: auto;
        border: var(--border);
        display: flex;
        flex-flow: column nowrap;


        &::backdrop {
            background-color: var(--primary);
            opacity: .4;

        }

        /* Dialog header */
        >header {}

        /* Dialog content */
        >div {}

        /* Dialog footer (buttons) */
        >footer {}


    }
}