/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The page kind grade-compare: what it reaches beyond the default definitions, whose layer order it falls into. */
@layer elements.button {
    @scope (.button) {
        :scope {
            inline-size: var(--button-width);
            display: var(--button-display, grid);
            place-items: center;
            block-size: var(--control-height);
            padding-inline: 0.625rem;
            background: var(--link);
            border: 0;
            color: oklch(20% 0.05 130);
            font-family: "Press Start 2P", monospace;
            font-size: 0.8125rem;
            line-height: 1;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow:
                inset  2px  2px 0 oklch(88% 0.12 130),
                inset -2px -2px 0 oklch(52% 0.14 130);
        }
        :scope:disabled {
            background: var(--surface-1, oklch(32% 0.01 260));
            color: var(--ink-muted, oklch(62% 0.01 260));
            box-shadow: none;
            cursor: default;
        }
        :scope.with-gold {
            background: var(--gold);
            color: oklch(24% 0.06 85);
            box-shadow:
                inset  2px  2px 0 oklch(90% 0.09 85),
                inset -2px -2px 0 oklch(58% 0.11 85);
        }
        :scope.with-gold:where(:hover, :focus-visible) {
            background: oklch(from var(--gold) calc(l + 0.05) c h);
        }
        :scope.with-red {
            background: var(--danger);
            color: oklch(18% 0.05 28);
            box-shadow:
                inset  2px  2px 0 oklch(82% 0.14 28),
                inset -2px -2px 0 oklch(46% 0.17 28);
        }
        :scope.with-red:where(:hover, :focus-visible) {
            background: oklch(from var(--danger) calc(l + 0.05) c h);
        }
        a:scope { text-decoration: none; }
        :scope:where(:hover, :focus-visible) {
            background: oklch(from var(--link) calc(l + 0.05) c h);
        }
        :scope.with-sign {
            inline-size: var(--button-width, var(--control-height));
            padding-inline: 0;
            font-family: inherit;
            font-size: var(--text-large);
            text-transform: none;
            -webkit-text-stroke: 0.075em currentColor;
        }
    }
}

@layer elements.choice {
    @scope (.choice) {
        :scope {
            display: grid;
            gap: 0.4375rem;
            min-inline-size: 0;
        }
        .chip {
            --chip-size: 0.625rem;
            --chip-tracking: 0.12em;
            --chip-ink: var(--ink);
        }
        select {
            min-inline-size: 0;
            block-size: var(--control-height);
            padding: 0 0.75rem;
            background: var(--surface-0);
            border: 0;
            color: oklch(90% 0.005 90);
            font-family: ui-monospace, monospace;
            font-size: 0.8125rem;
            letter-spacing: 0.04em;
            box-shadow:
                inset  1.5px  1.5px 0 oklch(9% 0.008 var(--hue-surface)),
                inset -1.5px -1.5px 0 oklch(32% 0.014 var(--hue-surface));
        }
        select:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: -2px;
        }
    }
}

@layer elements.field {
    @scope (.field) {
        :scope {
            display: var(--field-display, grid);
            gap: 0.4375rem;
            min-inline-size: 0;
        }
        .chip {
            --chip-size: 0.625rem;
            --chip-tracking: 0.12em;
            --chip-ink: var(--ink);
        }
        input {
            min-inline-size: 0;
            block-size: var(--control-height);
            padding: 0 0.75rem;
            background: var(--surface-0);
            border: 0;
            color: oklch(90% 0.005 90);
            font-family: ui-monospace, monospace;
            font-size: 0.8125rem;
            letter-spacing: 0.04em;
            box-shadow:
                inset  1.5px  1.5px 0 oklch(9% 0.008 var(--hue-surface)),
                inset -1.5px -1.5px 0 oklch(32% 0.014 var(--hue-surface));
        }
        input::placeholder { color: var(--ink-quiet); }
        :scope:has(input[type="number"]) { grid-template-columns: minmax(0, 1fr); }
        input[type="number"] { appearance: textfield; }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            appearance: none;
            margin: 0;
        }
        input:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: -2px;
        }
    }
}

@layer elements.game_icon {
    @scope (.game-icon) {
        :scope {
            display: var(--game-icon-display, block);
            inline-size: var(--game-icon-width, var(--space-wide));
            block-size: var(--game-icon-height, auto);
            vertical-align: var(--game-icon-valign);
            image-rendering: var(--game-icon-rendering, pixelated);
        }
    }
}

@layer elements.pill {
    @scope (.pill) {
        :scope {
            --pill: var(--rank-1);
            position: relative;
            display: inline-grid;
            padding-block-start: var(--space-snug);
            cursor: pointer;
        }
        :scope[data-rank="2"] { --pill: var(--rank-2); }
        :scope[data-rank="3"] { --pill: var(--rank-3); }
        :scope[data-rank="4"] { --pill: var(--rank-4); }
        input {
            appearance: none;
            position: absolute;
            inset: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }
        span {
            display: grid;
            place-items: center;
            min-inline-size: 2.4em;
            block-size: 1.6em;
            padding-inline: 0.4em;
            border: 1.5px solid var(--pill);
            border-radius: 0.2em;
            color: var(--pill);
            font-family: ui-monospace, monospace;
            font-size: var(--text-micro);
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        :scope::before {
            content: "";
            position: absolute;
            inset-block-start: 0;
            inset-inline: 0;
            margin-inline: auto;
            inline-size: 0;
            block-size: 0;
            border-inline: 0.3em solid transparent;
            border-block-start: 0.35em solid var(--gold);
            opacity: 0;
        }
        :scope:has(:checked)::before { opacity: 1; }
        input:where(:focus-visible) ~ span {
            outline: 2px solid var(--link);
            outline-offset: 2px;
        }
        :scope:hover span {
            background: color-mix(in oklab, var(--pill) 12%, transparent);
        }
    }
}

@layer widgets.breadcrumbs {
    @scope (.breadcrumbs) {
        :scope {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-tight);
            font-size: var(--text-small);
        }
        > * + *::before {
            content: "/";
            margin-inline-end: var(--space-tight);
            color: var(--ink-quiet);
        }
    }
}

@layer slices.slice_grade_compare {
    @scope (.grade-compare) to (.heading > *) {
        :scope {
            container-type: inline-size;
            padding-block: 2.5rem;
            display: grid;
            row-gap: var(--space-open);
        }
        :scope > * { grid-column: content; }
        .breadcrumbs { margin-block-end: var(--space-close); }
        .lead .heading { --heading-hyphens: auto; }
        .lead .prose {
            margin: 0.5rem 0 0;
            --prose-max: 66ch;
            --prose-ink: var(--ink-quiet);
        }
        .method {
            margin-block-start: var(--space-close);
            font-size: var(--text-small);
            summary {
                cursor: pointer;
                inline-size: fit-content;
                color: var(--link);
            }
        }
        .arena {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "first"
                "versus"
                "second"
                "submit"
                "result";
            row-gap: var(--space-open);
        }
        :is(.form, .sides) { display: contents; }
        [data-side="first"]       { grid-area: first; }
        [data-side="second"]      { grid-area: second; }
        .versus      { grid-area: versus; }
        .submit      { grid-area: submit; }
        .result      { grid-area: result; }
        .versus {
            justify-self: center;
            align-self: center;
            font-family: "Press Start 2P", monospace;
            font-size: var(--text-stage);
            font-size: round(var(--text-stage), var(--pixel-grid));
            line-height: 1;
            color: var(--gold);
        }
        @container (min-width: 40rem) {
            .arena {
                inline-size: 100%;
                max-inline-size: 68rem;
                grid-template-columns: minmax(0, 1fr) 12% minmax(0, 1fr);
                grid-template-areas:
                    "first  versus second"
                    "submit submit submit"
                    "result result result";
            }
            .versus {
                grid-row: 1 / -1;
                z-index: 1;
                font-size: calc(var(--text-stage) * 1.272);
                font-size: round(calc(var(--text-stage) * 1.272), var(--pixel-grid));
                pointer-events: none;
            }
        }
        .arena { --card-pad: var(--space-open); }
        .card {
            background: var(--surface-4);
            box-shadow:
                inset  2px  2px 0 oklch(33% 0.014 var(--hue-surface)),
                inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface));
        }
        .side {
            container-type: inline-size;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: end;
            align-content: start;
            gap: var(--space-close) var(--space);
            margin: 0;
            padding: 0 var(--card-pad) var(--card-pad);
            border: 0;
            min-inline-size: 0;
            legend {
                float: inline-start;
                grid-column: 1 / -1;
                padding: var(--card-pad) 0 0;
                margin-block-end: var(--space-tight);
                color: var(--ink-bright);
                font-weight: 500;
            }
        }
        .side {
            > .choice          { grid-column: 1; grid-row: 2; }
            > .icon            { grid-column: 1; grid-row: 3 / span 2; }
            > .skill           { grid-column: 2; grid-row: 2; }
            > .levels          { grid-column: 2; grid-row: 3; }
            > [data-kind="skill"] ~ [data-kind="block"] { grid-row: 4; }
            > :is(.icon, .levels) { align-self: start; }
        }
        .icon .game-icon {
            --game-icon-display: block;
            --game-icon-width: 4rem;
        }
        @container (max-width: 20rem) {
            .side > :is(.choice, .icon, .levels, .skill),
            .side > [data-kind="skill"] ~ [data-kind="block"] {
                grid-column: 1 / -1;
                grid-row: auto;
            }
        }
        .levels {
            display: grid;
            justify-items: start;
            gap: 0.4375rem;
            .chip {
                --chip-size: 0.625rem;
                --chip-tracking: 0.12em;
                --chip-ink: var(--ink);
            }
            .pills {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: var(--space-tight) var(--space-close);
            }
        }
        .skill {
            display: grid;
            grid-template-columns: auto 4.5rem auto;
            justify-content: start;
            align-items: end;
            gap: 0.4375rem var(--space-tight);
            > .field { --field-display: contents; }
            > .field > .chip { grid-column: 1 / -1; grid-row: 1; }
            > .field > input { grid-column: 2; grid-row: 2; }
            > .button { grid-row: 2; }
        }
        .skill[data-shared] { opacity: 0.5; }
        .form[data-live] .submit { display: none; }
        .result {
            inline-size: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            font-variant-numeric: tabular-nums;
            col.name   { inline-size: 40%; }
            col.first  { inline-size: 30%; }
            col.gap    { inline-size: 0; }
            col.repeat { inline-size: 0; }
            col.second { inline-size: 30%; }
            .gap { padding: 0; background: none; }
            .repeat {
                padding: 0;
                overflow: hidden;
                white-space: nowrap;
                background: none;
                color: var(--ink);
            }
            :is(th, td) {
                padding: var(--space-tight) var(--space-tight);
                background: linear-gradient(var(--rule), var(--rule)) no-repeat;
                background-position: var(--rule-start, 0px) 100%;
                background-size: calc(100% - var(--rule-start, 0px) - var(--rule-end, 0px)) 1px;
                text-align: start;
                overflow-wrap: anywhere;
                hyphens: auto;
                --rule: color-mix(in oklab, var(--ink-quiet) 30%, transparent);
            }
            thead th { color: var(--ink-bright); font-weight: 500; }
            tbody th { color: var(--ink); font-weight: 400; }
            td { color: var(--ink); }
            td[data-better] {
                color: var(--link);
                font-weight: 500;
            }
        }
        @container (min-width: 40rem) {
            .result {
                :is(th, td) { padding-inline: var(--space-close); }
                col.name   { inline-size: 26%; }
                col.first  { inline-size: 18%; }
                col.gap    { inline-size: 12%; }
                col.repeat { inline-size: 26%; }
                col.second { inline-size: 18%; }
                .repeat {
                    padding-block: var(--space-tight);
                    white-space: normal;
                    background: linear-gradient(var(--rule), var(--rule)) no-repeat;
                    background-position: var(--rule-start, 0px) 100%;
                    background-size: calc(100% - var(--rule-start, 0px)) 1px;
                }
                thead :is(th, td),
                thead .repeat {
                    block-size: 0;
                    padding-block: 0;
                    font-size: 0;
                    line-height: 0;
                    background: none;
                }
                tr > :first-child {
                    padding-inline-start: var(--card-pad);
                    --rule-start: var(--card-pad);
                }
                tr > :nth-child(2) {
                    padding-inline-end: var(--card-pad);
                    --rule-end: var(--card-pad);
                }
                tr > :nth-child(4) {
                    padding-inline: var(--card-pad) var(--space-close);
                    --rule-start: var(--card-pad);
                }
                tr > :last-child {
                    padding-inline-end: var(--card-pad);
                    --rule-end: var(--card-pad);
                }
                margin-block-end: var(--card-pad);
            }
            .card[data-side="first"]  { grid-area: auto; grid-column: 1; grid-row: 1 / -1; }
            .card[data-side="second"] { grid-area: auto; grid-column: 3; grid-row: 1 / -1; }
            .side { padding-block-end: 0; }
        }
    }
}