/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The page kind building-plan: 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.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.grade_mark {
    @scope (.grade-mark) {
        :scope {
            --grade: var(--ink);
            display: inline-grid;
            place-items: center;
            min-inline-size: var(--grade-mark-min, 1.6em);
            block-size: var(--grade-mark-height, 1.6em);
            padding-inline: 0.2em;
            border: 1.5px solid var(--grade);
            border-radius: 0.2em;
            color: var(--grade);
            font-size: var(--grade-size, inherit);
            font-weight: 700;
            line-height: 1;
            text-decoration: none;
        }
        :scope[data-grade="S"] { --grade: var(--link); }
        :scope[data-grade="A"] { --grade: var(--gold); }
        :scope[data-grade="B"] { --grade: var(--brand); }
        :scope[data-grade="C"] { --grade: oklch(64% 0.21 22); }
        :scope:where(a:hover, a:focus-visible) {
            background: color-mix(in oklab, var(--grade) 12%, transparent);
        }
        :scope:where(a:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: 2px;
        }
    }
}

@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.dps_graph {
    @scope (.dps-graph) {
        :scope {
            container-type: inline-size;
            display: grid;
            row-gap: var(--space-close);
        }
        [data-damage="slash"]     { --tone: var(--damage-slash); }
        [data-damage="pierce"]    { --tone: var(--damage-pierce); }
        [data-damage="blunt"]     { --tone: var(--damage-blunt); }
        [data-damage="fire"]      { --tone: var(--damage-fire); }
        [data-damage="frost"]     { --tone: var(--damage-frost); }
        [data-damage="lightning"] { --tone: var(--damage-lightning); }
        [data-damage="poison"]    { --tone: var(--damage-poison); }
        [data-damage="spirit"]    { --tone: var(--damage-spirit); }
        [data-damage="damage"]    { --tone: var(--damage-damage); }
        [data-line="primary"]   { --tone: var(--gold); }
        [data-line="secondary"] { --tone: var(--ink-quiet); }
        .topline {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-areas:
                "title at"
                "views views";
            align-items: center;
            gap: var(--space-tight) var(--space-close);
            padding-block-start: var(--space-close);
            > .heading { grid-area: title; }
            > .at { grid-area: at; }
            > .views { grid-area: views; }
            > .heading {
                margin: 0;
                --heading-ink: var(--ink-bright);
                --heading-face: var(--face-text);
                --heading-size: 0.8125rem;
                --heading-weight: 500;
                --heading-case: uppercase;
                --heading-tracking: 0.07em;
            }
        }
        @container (min-width: 26rem) {
            .topline {
                grid-template-columns: auto 1fr auto;
                grid-template-areas: "title at views";
            }
        }
        .at {
            color: var(--ink-quiet);
            font-size: var(--text-small);
            i { font-style: normal; }
        }
        .views {
            display: flex;
            gap: var(--space-tight);
            margin: 0;
            padding: 0;
            border: none;
            legend {
                position: absolute;
                inline-size: 1px;
                block-size: 1px;
                overflow: hidden;
                clip-path: inset(50%);
                white-space: nowrap;
            }
        }
        .view {
            display: grid;
            row-gap: var(--space-snug);
            margin: 0;
        }
        .reckoning {
            margin: 0;
            color: var(--ink);
            line-height: 1.6;
            b {
                color: var(--gold);
                font-size: calc(var(--scale-base) * 1.272);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
            em {
                padding-inline: var(--space-hair);
                color: var(--ink-quiet);
                font-style: normal;
            }
        }
        .portions {
            display: flex;
            block-size: var(--space-snug);
            margin: 0;
            i {
                inline-size: calc(var(--share) * 1%);
                background: var(--tone);
            }
        }
        .shares {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-tight) var(--space-open);
            margin: 0;
            padding: 0;
            list-style: none;
            color: var(--ink);
            font-size: var(--text-small);
            b {
                color: var(--ink-bright);
                font-weight: 600;
                font-variant-numeric: tabular-nums;
            }
        }
        :is(.shares li, .key i)::before {
            content: "";
            display: inline-block;
            inline-size: 0.625rem;
            block-size: 0.625rem;
            margin-inline-end: var(--space-tight);
            background: var(--tone);
        }
        .key i[data-line]::before {
            inline-size: 1rem;
            block-size: 0;
            vertical-align: middle;
            background: none;
            border-block-start: var(--space-hair) solid var(--tone);
        }
        .key i[data-line="secondary"]::before { border-block-start-style: dashed; }
        .drawing {
            display: grid;
            grid-template-columns: 2.5rem 1fr;
            grid-template-areas:
                "rise plot"
                ".    run";
            row-gap: var(--space-hair);
        }
        .canvas {
            grid-area: plot;
            position: relative;
            aspect-ratio: 5 / 2;
            border-inline-start: 1px solid var(--ink-quiet);
            border-block-end: 1px solid var(--ink-quiet);
        }
        @container (min-width: 40rem) {
            .canvas { aspect-ratio: 3 / 1; }
        }
        svg {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            overflow: visible;
            polygon {
                fill: var(--tone);
                fill-opacity: 0.7;
                stroke: none;
            }
            polyline {
                fill: none;
                stroke: var(--tone);
                stroke-width: 2.5;
                stroke-linejoin: round;
            }
            polyline[data-line="secondary"] { stroke-dasharray: 6 4; }
            .gridline {
                stroke: var(--ink-quiet);
                stroke-width: 1;
                stroke-opacity: 0.25;
            }
        }
        .mark {
            position: absolute;
            inset-inline-start: calc(var(--x) * 1%);
            inset-block-end: calc(var(--y) * 1%);
            padding-inline-start: var(--space-tight);
            padding-block-end: var(--space-hair);
            color: var(--ink-bright);
            font-size: var(--text-small);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            b { color: var(--gold); font-weight: 600; }
        }
        :is(.rise, .run) {
            position: relative;
            color: var(--ink-quiet);
            font-size: var(--text-small);
            font-variant-numeric: tabular-nums;
            span { position: absolute; white-space: nowrap; }
        }
        .rise {
            grid-area: rise;
            span {
                inset-block-start: calc(var(--at) * 1%);
                inset-inline-end: var(--space-tight);
                translate: 0 -50%;
            }
        }
        .run {
            grid-area: run;
            block-size: 1.4em;
            span {
                inset-inline-start: calc(var(--at) * 1%);
                translate: -50% 0;
            }
            span:first-child { translate: 0 0; }
        }
        figcaption {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--space-tight) var(--space-close);
            color: var(--ink-quiet);
            font-size: var(--text-small);
        }
        .key {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-tight) var(--space-close);
            color: var(--ink);
            i { font-style: normal; }
            b { color: var(--ink-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
        }
        .stage {
            display: grid;
            row-gap: var(--space-close);
            > .prose {
                --prose-max: 68ch;
                margin: 0;
                --prose-ink: var(--ink-quiet);
                --prose-size: var(--text-small);
            }
        }
        .numbers {
            overflow-x: auto;
            color: var(--ink);
            font-size: var(--text-small);
            summary {
                cursor: pointer;
                color: var(--link);
            }
            table {
                margin-block-start: var(--space-close);
                border-collapse: collapse;
                font-variant-numeric: tabular-nums;
            }
            :is(th, td) {
                padding: var(--space-hair) var(--space-close);
                border-block-end: 1px solid oklch(from var(--ink-quiet) l c h / 0.30);
                text-align: start;
                white-space: nowrap;
            }
            th { color: var(--ink-bright); font-weight: 500; }
        }
        :scope:has(.views input[value="composition"]:checked) .view:not(.with-composition),
        :scope:has(.views input[value="combo"]:checked) .view:not(.with-combo),
        :scope:has(.views input[value="rhythm"]:checked) .view:not(.with-rhythm) {
            display: none;
        }
    }
}

@layer widgets.item_dossier {
    @scope (.item-dossier) {
        :scope {
            padding: var(--item-dossier-padding);
            &:not(:has([data-rank] > :checked)) [data-level]:not([data-level="1"]),
            &:has([data-rank="1"] > :checked) [data-level]:not([data-level="1"]),
            &:has([data-rank="2"] > :checked) [data-level]:not([data-level="2"]),
            &:has([data-rank="3"] > :checked) [data-level]:not([data-level="3"]),
            &:has([data-rank="4"] > :checked) [data-level]:not([data-level="4"]) {
                display: none;
            }
            &:not(:has([data-rank] > :checked)) [data-from],
            &:has([data-rank="1"] > :checked) [data-from],
            &:has([data-rank="2"] > :checked) [data-from="3"],
            &:has([data-rank="2"] > :checked) [data-from="4"],
            &:has([data-rank="3"] > :checked) [data-from="4"] {
                display: none;
            }
            &:has([data-rank="2"] > :checked) [data-max="2"],
            &:has([data-rank="3"] > :checked) [data-max="3"],
            &:has([data-rank="4"] > :checked) [data-max="4"] {
                display: none;
            }
        }
        :scope .card {
            --sheet-line: oklch(from var(--ink-quiet) l c h / 0.20);
            display: grid;
            font-size: var(--text-small);
            gap: var(--space-close);
            padding-block-end: var(--space-close);
            border-block-end: 1px solid var(--sheet-line);
            &:has(> .kind:only-child) {
                padding-block-end: 0;
                border-block-end: none;
            }
        }
        :scope .kind {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-close);
            margin: 0;
            padding-block: var(--space-close);
            border-block-end: 1px solid var(--sheet-line);
            color: var(--link);
        }
        :scope .hero {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            column-gap: calc(var(--space-close) * 2);
            margin: 0;
            color: var(--ink);
            b {
                color: var(--gold);
                font-size: calc(var(--scale-base) * 1.618);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
        }
        :scope .grades-line {
            --grade-size: var(--text-small);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-tight) var(--space-close);
            margin: 0;
            color: var(--ink);
            font-size: var(--text-small);
            > span:first-child { color: var(--gold); }
        }
        :scope .figure-tables {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr) 50%;
        }
        :scope .figures {
            display: grid;
            grid-row: span var(--rows, 1);
            grid-template-rows: subgrid;
            grid-template-columns: max-content minmax(0, 1fr);
            align-items: start;
            column-gap: var(--space-snug);
            line-height: 1.3;
            color: var(--ink);
            b {
                color: var(--ink-bright);
                font-size: var(--text);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
            span {
                hyphens: auto;
                overflow-wrap: break-word;
            }
            span::before {
                content: "\200B";
                font-size: var(--text);
            }
            b.with-cost { color: var(--brand); }
            b.with-gold { color: var(--gold); }
            b.with-gold + span { color: var(--gold); }
            &:first-child:not([data-span]) {
                grid-column: 1 / 3;
                grid-template-columns: subgrid;
            }
            &:nth-child(2):not([data-span]) {
                grid-column: 3;
                padding-inline-start: var(--space-close);
            }
            &[data-span="wide"] {
                grid-column: 1 / -1;
                grid-row: auto;
                grid-template-rows: none;
                grid-template-columns: subgrid;
                > span { grid-column: 2 / -1; }
            }
        }
        :scope .caption {
            margin: 0;
            color: var(--link);
        }
        :scope .foot {
            margin: 0;
            color: var(--ink-bright);
            b {
                color: var(--link);
                font-weight: 700;
            }
            b.with-cost { color: var(--brand); }
        }
        :scope .origin-rows {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: baseline;
            column-gap: var(--space-close);
            padding-block-end: 0.5rem;
            font-size: 0.8125rem;
            line-height: 1.45;
            > div {
                display: grid;
                row-gap: 0.3125rem;
            }
        }
        :scope .origin-region {
            color: var(--ink);
            white-space: nowrap;
        }
        :scope .hero,
        :scope .figures,
        :scope .foot {
            b i { font-style: normal; }
        }
        :scope .origin {
            margin: 0;
            color: var(--ink);
            span:first-child::after { content: ":"; }
            b { font-weight: 400; }
            em { font-style: normal; }
        }
        :scope > .stat[data-kind="id"] {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 0.5rem;
            margin: 1.4em 0 0;
            margin-block-start: 1lh;
            padding-block: var(--space-close);
            border-block-start: 1px solid oklch(from var(--ink-quiet) l c h / 0.20);
            color: var(--ink);
            b {
                margin-inline-start: auto;
                color: var(--ink-bright);
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: var(--text-small);
                font-weight: 400;
                user-select: all;
                text-align: end;
                word-break: break-word;
            }
        }
        :scope:not(:has(> .side > *)) > .stat[data-kind="id"] {
            border-block-start: none;
        }
        :scope[data-mode="page"] > .stat[data-kind="id"] {
            border-block: 1px solid var(--gold);
        }
        .section [data-kind="checked"] {
            color: var(--gold);
        }
        .section + .section {
            border-block-start: 1px solid oklch(from var(--ink-quiet) l c h / 0.20);
        }
        .head {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            margin: 0;
            padding-block: 0.75rem 0.375rem;
        }
        .title {
            color: var(--ink-bright);
            font-size: 0.8125rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }
        .rows {
            --gap: 1.25rem;
            display: grid;
            grid-template-columns: max-content 1fr;
            column-gap: var(--gap);
            row-gap: 0.3125rem;
            padding-block-end: 0.5rem;
            font-size: 0.8125rem;
            line-height: 1.45;
            > * { grid-column: 1 / -1; }
            .text + :not(.text),
            :not(.text) + .text {
                padding-block-start: 0.5rem;
            }
        }
        .text {
            margin: 0;
            color: var(--ink);
            b { color: var(--gold); font-weight: 500; }
            b[data-kind="item"] { color: var(--ink-bright); }
        }
        .cost {
            display: grid;
            grid-template-columns: subgrid;
            align-items: baseline;
            margin: 0;
            color: var(--ink);
            > span:first-child::after { content: ":"; }
            > span:first-child i { font-style: normal; }
        }
        .cost + .cost { padding-block-start: 0.5rem; }
        .parts {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.125rem var(--gap);
            > i {
                color: var(--ink);
                font-style: normal;
                font-size: 0.75rem;
            }
        }
        .part {
            min-inline-size: 0;
            .game-icon {
                --game-icon-display: inline-block;
                --game-icon-width: 1.25em;
                --game-icon-height: 1.25em;
                --game-icon-valign: -0.3em;
                --game-icon-rendering: auto;
            }
            b {
                color: var(--ink-bright);
                font-weight: 500;
                font-variant-numeric: tabular-nums;
            }
            i { font-style: normal; }
        }
        .planner {
            margin: 0.875rem 0 0;
            .button { --button-width: 100%; }
        }
        [data-kind="crafting"] > summary {
            cursor: pointer;
            list-style: none;
            user-select: none;
        }
        [data-kind="crafting"] > summary::-webkit-details-marker { display: none; }
        [data-kind="crafting"] > summary:where(:focus-visible) {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }
        .chevron {
            align-self: center;
            margin-inline: auto var(--space-tight);
            inline-size: 0.5rem;
            block-size: 0.5rem;
            border-inline-end: 2px solid var(--gold);
            border-block-end: 2px solid var(--gold);
            transform: translateY(-25%) rotate(45deg);
            transition: transform 90ms steps(3);
        }
        [data-kind="crafting"][open] .chevron {
            transform: translateY(25%) rotate(225deg);
        }
        @media (prefers-reduced-motion: reduce) {
            .chevron { transition: none; }
        }
        @container (min-width: 45rem) {
            :scope[data-mode="page"] {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: auto auto 1fr;
                grid-template-areas: "card side" "dps side" "id side";
                column-gap: 1.5rem;
                > .card { grid-area: card; }
                > .stat { grid-area: id; align-self: start; }
                > .dps-graph { grid-area: dps; }
                &:not(:has(> .dps-graph)) > .card {
                    padding-block-end: 0;
                    border-block-end: none;
                }
                > .side {
                    grid-area: side;
                    padding-inline-start: 1.5rem;
                    border-inline-start: 1px solid var(--gold);
                }
            }
        }
    }
}

@layer widgets.item_sheet {
    @scope (.item-sheet) {
        :scope {
            position: fixed;
            inset: 0;
            margin: auto;
            z-index: var(--sheet-layer);
            inline-size: min(var(--sheet-inline-size), calc(100% - 2 * var(--sheet-margin)));
            max-block-size: var(--sheet-max-block-size);
            overflow-y: auto;
            padding: 0;
            border: var(--sheet-edge) solid var(--gold);
            background: var(--surface-4);
            color: var(--ink);
            box-shadow: var(--sheet-shadow);
            opacity: 0;
            transition-property: opacity, overlay, display;
            transition-duration: 500ms;
            transition-timing-function: ease;
            transition-behavior: allow-discrete;
        }
        :scope:popover-open { opacity: 1; }
        :scope:not(:popover-open) { pointer-events: none; }
        @starting-style {
            :scope:popover-open { opacity: 0; }
        }
        :scope::backdrop {
            background: var(--sheet-scrim);
            opacity: 0;
            mask-image: linear-gradient(oklch(0% 0 0) 0 0), linear-gradient(oklch(0% 0 0) 0 0);
            mask-repeat: no-repeat, no-repeat;
            mask-position: 0 0, var(--hole-x, -9999px) var(--hole-y, -9999px);
            mask-size: 100% 100%, var(--hole-width, 0) var(--hole-height, 0);
            mask-composite: exclude;
            transition-property: opacity, overlay, display;
            transition-duration: 500ms;
            transition-timing-function: ease;
            transition-behavior: allow-discrete;
        }
        :scope:popover-open::backdrop { opacity: 1; }
        @starting-style {
            :scope:popover-open::backdrop { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            :scope,
            :scope::backdrop {
                transition-duration: 1ms;
            }
        }
        :scope > header {
            cursor: grab;
            touch-action: none;
            user-select: none;
            position: sticky;
            inset-block-start: 0;
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem calc(var(--space-open) * 2 + 0.75rem) 0.875rem 1rem;
            background: var(--surface-4);
            .game-icon {
                grid-area: 1 / 1;
                --game-icon-width: 64px;
                --game-icon-height: 64px;
            }
            .level {
                grid-area: 1 / 1;
                justify-self: end;
                align-self: start;
                padding: 0.1em 0.25em;
                background: var(--surface-4);
                color: var(--ink-bright);
                font-size: var(--text-small);
                font-style: normal;
                font-weight: 500;
                line-height: 1;
                font-variant-numeric: tabular-nums;
            }
            .level::after { content: var(--level, "1"); }
            b {
                grid-area: 1 / 2;
                color: var(--rank, var(--ink-bright));
                font-size: 1.0625rem;
                font-weight: 500;
                line-height: 1.25;
            }
        }
        :scope {
            &:has([data-rank="2"] > :checked) { --rank: var(--rank-2); --level: "2"; }
            &:has([data-rank="3"] > :checked) { --rank: var(--rank-3); --level: "3"; }
            &:has([data-rank="4"] > :checked) { --rank: var(--rank-4); --level: "4"; }
        }
        :scope .icon-button {
            --icon-button-cursor: pointer;
            position: absolute;
            inset-block-start: 0.25rem;
            inset-inline-end: 0.25rem;
            z-index: 1;
        }
        :scope > .item-dossier {
            --item-dossier-padding: 0 1rem 1rem;
        }
        :scope header a {
            color: inherit;
            text-decoration: none;
        }
        :scope header a:where(:hover, :focus-visible) {
            text-decoration: underline;
            text-underline-offset: 0.1875rem;
        }
    }
}

@layer widgets.item_tile {
    @scope (.item-tile) {
    :scope {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 0.75rem;
        inline-size: var(--item-tile-width, 100%);
        block-size: var(--tile-height, 4.9375rem);
        padding: 0.375rem 0.75rem;
        border: 0;
        background: var(--surface-4);
        color: inherit;
        font: inherit;
        text-decoration: none;
        text-align: start;
        cursor: pointer;
        box-shadow:
            inset  2px  2px 0 oklch(33% 0.014 var(--hue-surface)),
            inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface));
        .game-icon {
            --game-icon-width: var(--tile-symbol, 50px);
            --game-icon-height: var(--tile-symbol, 50px);
        }
        b {
            color: var(--ink-bright);
            font-weight: 500;
            line-height: 1.2;
            overflow-wrap: break-word;
            hyphens: none;
        }
    }
    :scope::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
        inline-size: 0.9375rem;
            block-size: 0.9375rem;
            border-block-start: 0.3125rem solid var(--gold);
            border-inline-end: 0.3125rem solid var(--gold);
        pointer-events: none;
    }
    :scope:where(:hover, :focus-visible) {
        background: color-mix(in oklab, var(--gold) 10%, var(--surface-4));
    }
    :scope:where(:hover, :focus-visible) {
        background: color-mix(in oklab, var(--gold) 10%, var(--surface-4));
    }
    :scope:where(:hover, :focus-visible)::after {
        border-color: oklch(from var(--gold) calc(l + 0.08) c h);
    }
    :scope:where(:focus-visible) {
        outline: 2px solid var(--link);
        outline-offset: -2px;
    }
    :scope.with-icon {
        grid-template-columns: 1fr;
        place-items: center;
        inline-size: var(--item-tile-width, var(--tile-square, 4rem));
        block-size: auto;
        aspect-ratio: 1;
        padding: var(--space-snug);
        .game-icon {
            --game-icon-width: 100%;
            --game-icon-height: 100%;
        }
    }
    }
}
@layer widgets.item_tile {
    @scope (.item-tile) {
        .signal {
            position: absolute;
            inset-block-end: var(--space-close);
            inset-inline-end: var(--space-close);
            color: light-dark(oklch(from var(--link) 0.45 c h), var(--link));
            font-family: "Press Start 2P", monospace;
            font-size: 0.5rem;
            line-height: 1;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
    }
}

@layer slices.slice_tree {
    @scope (.tree) to (:is(.heading, .dps-graph) > *) {
        :scope {
            --row: 4.5rem;
            --band-head: 1.5rem;
            padding-block: 2.5rem;
            display: grid;
            row-gap: 1.25rem;
            grid-template-areas:
                ". lead  ."
                ". board .";
        }
        :scope > * { grid-column: content; }
        .lead { grid-area: lead; }
        .intro-text {
            margin: 0.5rem 0 0;
            max-inline-size: 66ch;
            color: var(--ink-quiet);
        }
        .board {
            grid-area: board;
            container-type: inline-size;
            display: grid;
            row-gap: 0.75rem;
            align-content: start;
            min-block-size: 20rem;
            padding: 1rem;
            border-inline-start: 2px solid var(--gold);
        }
        .empty {
            display: grid;
            gap: 0.75rem;
            justify-items: start;
            align-self: center;
            padding: 1.5rem 0;
            p { margin: 0; color: var(--ink); }
            b { color: var(--ink-bright); font-weight: 500; }
            .missing {
                font-size: var(--text-small);
                color: var(--ink-quiet);
                b { color: var(--ink); font-weight: 500; }
            }
        }
        .tree-grid {
            display: grid;
        }
        .tree-grid > * {
            grid-area: 1 / 1;
            min-inline-size: 0;
            block-size: calc(var(--rows) * var(--row) + var(--bands) * var(--band-head));
        }
        .bands {
            display: grid;
            grid-template-rows: var(--tracks);
            pointer-events: none;
        }
        .band-area {
            --biome: var(--surface-4);
            grid-row: var(--from) / var(--to);
            grid-column: 1 / -1;
            background: linear-gradient(90deg,
                color-mix(in oklab, var(--biome) 35%, var(--surface-0)),
                color-mix(in oklab, var(--biome) 12%, var(--surface-0)));
            &[data-biome="meadows"]     { --biome: var(--biome-meadows); }
            &[data-biome="blackforest"] { --biome: var(--biome-forest); }
            &[data-biome="swamp"]       { --biome: var(--biome-swamp); }
            &[data-biome="mountain"]    { --biome: var(--biome-mountain); }
            &[data-biome="plains"]      { --biome: var(--biome-plains); }
            &[data-biome="mistlands"]   { --biome: var(--biome-mistlands); }
            &[data-biome="ashlands"]    { --biome: var(--biome-ashlands); }
            &[data-biome="deepnorth"]   { --biome: var(--biome-deepnorth); }
            &[data-biome="ocean"]       { --biome: var(--biome-ocean); }
        }
        .edges {
            inline-size: 100%;
            overflow: visible;
            pointer-events: none;
            .edge {
                stroke: oklch(from var(--ink-quiet) l c h / 0.5);
                stroke-width: 1px;
            }
            .path {
                stroke: oklch(from var(--link) l c h / 0.7);
                stroke-width: 1.5px;
            }
            line[data-back] { stroke-dasharray: 4 3; }
            .band {
                stroke: oklch(from var(--ink-quiet) l c h / 0.45);
                stroke-width: 1px;
                stroke-dasharray: 2 4;
            }
            text {
                fill: var(--ink-bright);
                font-size: var(--text-micro);
                font-weight: 500;
                text-anchor: middle;
                dominant-baseline: middle;
                paint-order: stroke;
                stroke: var(--surface-0);
                stroke-width: 0.1875rem;
                stroke-linejoin: round;
            }
            text.band-name {
                text-anchor: start;
                dominant-baseline: middle;
                translate: 0.4rem 0;
                fill: var(--gold);
                font-size: var(--text-label);
                font-weight: 400;
                letter-spacing: 0.08em;
                text-transform: uppercase;
            }
            text[data-anchor="end"]   { text-anchor: end;   translate: -0.35em 0; }
            text[data-anchor="start"] { text-anchor: start; translate:  0.35em 0; }
        }
        .nodes {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-template-rows: var(--tracks);
        }
        .nodes,
        .legend {
            --circle: min(2.75rem, 14cqi);
        }
        .node {
            grid-row: var(--r);
            grid-column: var(--c);
            display: grid;
            justify-items: center;
            align-content: center;
            row-gap: 0.2rem;
            min-inline-size: 0;
            padding-inline: 0.15rem;
            color: inherit;
            text-decoration: none;
            pointer-events: none;
            > * { pointer-events: auto; }
            .mark {
                --plaque-edge: var(--ink-quiet);
                position: relative;
                display: grid;
                place-items: center;
                inline-size: var(--circle);
                block-size: var(--circle);
                border-radius: 50%;
                border: 2px solid var(--plaque-edge);
                background: color-mix(in oklab, var(--biome, var(--surface-4)) 60%, var(--surface-2));
                box-shadow: 0 0 0 3px oklch(from var(--surface-0) l c h / 0.6);
                .game-icon {
                    --game-icon-width: 72%;
                    --game-icon-height: 72%;
                    --game-icon-rendering: pixelated;
                }
            }
            b {
                font-size: var(--text-micro);
                font-weight: 500;
                line-height: 1.15;
                text-align: center;
                color: var(--ink-bright);
                overflow-wrap: anywhere;
                max-inline-size: 100%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
        button.node .mark {
            border-start-end-radius: 0;
        }
        button.node .mark::after {
            content: "";
            position: absolute;
            inset-block-start: -2px;
            inset-inline-end: -2px;
            inline-size: calc(var(--circle) * 0.3);
            block-size: calc(var(--circle) * 0.3);
            border-block-start: calc(var(--circle) * 0.09) solid var(--gold);
            border-inline-end: calc(var(--circle) * 0.09) solid var(--gold);
            pointer-events: none;
        }
        button.node:where(:hover, :focus-visible) .mark::after {
            border-color: oklch(from var(--gold) calc(l + 0.08) c h);
        }
        .node.with-target .mark {
            --plaque-edge: var(--link);
        }
        .node[data-biome="meadows"]     { --biome: var(--biome-meadows); }
        .node[data-biome="blackforest"] { --biome: var(--biome-forest); }
        .node[data-biome="swamp"]       { --biome: var(--biome-swamp); }
        .node[data-biome="mountain"]    { --biome: var(--biome-mountain); }
        .node[data-biome="plains"]      { --biome: var(--biome-plains); }
        .node[data-biome="mistlands"]   { --biome: var(--biome-mistlands); }
        .node[data-biome="ashlands"]    { --biome: var(--biome-ashlands); }
        .node[data-biome="deepnorth"]   { --biome: var(--biome-deepnorth); }
        .node[data-biome="ocean"]       { --biome: var(--biome-ocean); }
        button.node {
            appearance: none;
            border: 0;
            background: none;
            font: inherit;
            cursor: pointer;
        }
        :is(a, button).node:where(:hover, :focus-visible) b {
            text-decoration: underline;
            text-underline-offset: 0.15em;
        }
        :is(a, button).node:focus-visible {
            outline: none;
            .mark { outline: 2px solid var(--link); outline-offset: 2px; }
        }
        .node.with-station .mark {
            background: color-mix(in oklab, var(--ink-quiet) 12%, var(--surface-2));
            inline-size: auto;
            min-inline-size: var(--circle);
            max-inline-size: 100%;
            block-size: auto;
            min-block-size: var(--circle);
            padding: 0.3rem 0.3rem;
            border-radius: 0.375rem;
            font-size: var(--text-micro);
            font-weight: 500;
            line-height: 1.15;
            text-align: center;
            color: var(--ink-bright);
            overflow-wrap: anywhere;
            i {
                display: block;
                font-style: normal;
                font-size: var(--text-label);
                color: var(--gold);
                letter-spacing: 0.04em;
            }
        }
        .node.with-extension .mark {
            background: color-mix(in oklab, var(--ink-quiet) 12%, var(--surface-2));
            inline-size: calc(var(--circle) / 2);
            block-size: calc(var(--circle) / 2);
            border-style: dashed;
            box-shadow: none;
        }
        .result {
            display: grid;
            justify-items: center;
            justify-content: center;
            row-gap: 0.35rem;
            padding-block-start: 0.5rem;
            .item-tile { --item-tile-width: min(17.4375rem, 100%); }
        }
        .result-head {
            margin: 0;
            color: var(--gold);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-size: var(--text-label);
        }
        .bill {
            display: grid;
            row-gap: 0.5rem;
            margin-block-start: 0.75rem;
            padding-block-start: 0.75rem;
            border-block-start: 1px solid oklch(from var(--ink-quiet) l c h / 0.35);
        }
        .bill-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            > p {
                margin: 0;
                color: var(--gold);
                letter-spacing: 0.06em;
                text-transform: uppercase;
                font-size: var(--text-label);
            }
        }
        .bill-count {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: var(--text-small);
            color: var(--ink-quiet);
            input {
                inline-size: 4.5rem;
                padding: 0.2rem 0.4rem;
                font: inherit;
                font-variant-numeric: tabular-nums;
                color: var(--ink);
                background: var(--surface-2);
                border: 1px solid oklch(from var(--ink-quiet) l c h / 0.35);
                border-radius: 0.25rem;
            }
            input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
        }
        .bill-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 20rem));
            justify-content: start;
            gap: 0.35rem 1rem;
            margin: 0;
            padding: 0;
            list-style: none;
            a {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.25rem 0.4rem;
                border-radius: 0.25rem;
                color: inherit;
                text-decoration: none;
                font-size: var(--text-small);
            }
            a:hover, a:focus-visible { background: var(--surface-2); }
            .game-icon {
                flex: none;
                --game-icon-width: 1.75rem;
                --game-icon-height: 1.75rem;
            }
        }
        .bill-name {
            flex: 0 1 auto;
            min-inline-size: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .bill-dots {
            flex: 1 1 auto;
            min-inline-size: 0.75rem;
            align-self: center;
            block-size: 0;
            border-block-end: 1px dotted oklch(from var(--ink-quiet) l c h / 0.55);
        }
        .bill-amount {
            flex: none;
            color: var(--gold);
            font-variant-numeric: tabular-nums;
        }
        .bill-hint {
            margin: 0;
            font-size: var(--text-small);
            color: var(--ink-quiet);
        }
        .legend {
            display: grid;
            row-gap: 0.5rem;
            padding-block-start: 0.25rem;
        }
        .legend-head {
            margin: 0;
            color: var(--gold);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-size: var(--text-label);
        }
        .legend-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
            gap: 0.5rem 2rem;
            font-size: var(--text-small);
            color: var(--ink-quiet);
            > span {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                min-block-size: 1.6rem;
            }
            i {
                flex: none;
                inline-size: calc(var(--circle) / 2);
                block-size: calc(var(--circle) / 2);
                border-radius: 50%;
                border: 2px solid var(--ink-quiet);
                background: var(--surface-2);
            }
            .with-target i { border-color: var(--link); }
            .with-station i { border-radius: 0.25em; }
            .with-extension i {
                border-style: dashed;
                inline-size: calc(var(--circle) / 3);
                block-size: calc(var(--circle) / 3);
            }
            .with-step i,
            .with-path i {
                inline-size: calc(var(--circle) * 0.9);
                block-size: 0;
                border: 0;
                background: none;
                border-block-start: 2px solid oklch(from var(--ink-quiet) l c h / 0.7);
                border-radius: 0;
            }
            .with-path i {
                border-block-start-width: 0.1875rem;
                border-block-start-color: oklch(from var(--link) l c h / 0.9);
            }
            .with-biome {
                align-items: center;
            }
            .with-biome i {
                inline-size: var(--circle);
                block-size: var(--circle);
                border-color: var(--ink-quiet);
                border-start-end-radius: 0;
                background: linear-gradient(100deg,
                    color-mix(in oklab, var(--biome-meadows) 60%, var(--surface-2)) 50%,
                    color-mix(in oklab, var(--biome-mistlands) 60%, var(--surface-2)) 50%);
            }
        }
        @container (min-width: 44rem) {
            .legend-items {
                grid-template-columns: none;
                grid-template-rows: repeat(2, auto);
                grid-auto-flow: column;
                grid-auto-columns: max-content;
                justify-content: start;
                .with-biome { grid-row: span 2; }
            }
        }
        @media (min-width: 35rem) {
            .board { padding: 1.25rem; }
        }
    }
}