/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The page kind tips: what it reaches beyond the default definitions, whose layer order it falls into. */
@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.world_view {
    @scope (.world-view) {
        :scope {
            display: block;
            inline-size: 100%;
            block-size: auto;
            aspect-ratio: 1;
            background: var(--surface-1);
        }
        polyline {
            fill: none;
            stroke: var(--gold);
            stroke-width: var(--stroke);
            stroke-linejoin: round;
            stroke-linecap: round;
        }
        polyline[data-sailed] {
            stroke-dasharray: calc(2 * var(--stroke)) calc(2 * var(--stroke));
        }
    }
}

@layer widgets.tool_card {
    @scope (.tool-card) {
        :scope {
            position: relative;
            display: grid;
            grid-template-areas:
                "icon title act"
                "icon text  act";
            grid-template-columns: auto 1fr auto;
            align-items: center;
            column-gap: 0.875rem;
            row-gap: 0.25rem;
            padding: 0.875rem 1rem;
            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));
        }
        .game-icon { grid-area: icon; --game-icon-width: 2rem; }
        .heading   { grid-area: title; }
        .prose {
            grid-area: text;
            --prose-size: 0.90625rem;
            --prose-leading: 1.6;
            --prose-ink: oklch(65% 0.008 var(--hue-surface));
            --prose-max: none;
        }
        .prose:nth-of-type(2) { --prose-display: none; }
        .heading {
            --heading-size: var(--text-label);
            --heading-case: uppercase;
        }
        :scope.with-long-title > .heading { --heading-case: none; }
        .link {
            grid-area: act;
            justify-self: end;
            --link-face: ui-monospace, monospace;
            --link-size: 0.6875rem;
            --link-tracking: 0.1em;
            --link-case: uppercase;
        }
        .link { --link-size: 0; --link-chevron-size: 1rem; --link-chevron-gap: 0; }
        [data-state="soon"] { color: var(--ink-quiet); cursor: default; }
        :scope:has(.link:where(:hover, :focus-visible)) {
            background: color-mix(in oklab, var(--surface-4) 94%, var(--link));
            box-shadow:
                inset  2px  2px 0 oklch(12% 0.010 var(--hue-surface)),
                inset -2px -2px 0 oklch(33% 0.014 var(--hue-surface));
        }
        :scope {
            transition: background 90ms ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            :scope { transition: none; }
        }
        :scope:has(> .world-view) {
            container-type: inline-size;
            grid-template-areas:
                "icon"
                "title"
                "text"
                "act";
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto auto 1fr;
            align-items: start;
            > .world-view { grid-area: icon; }
            > .heading {
                --heading-size: min(var(--text-head), 8.5cqi);
                --heading-case: none;
            }
            > .link {
                justify-self: start;
                margin-block-start: auto;
                --link-size: var(--text-micro);
                --link-chevron-size: initial;
                --link-chevron-gap: initial;
            }
        }
        @media (min-width: 60rem) {
            :scope {
                grid-template-areas:
                    "icon"
                    "title"
                    "text"
                    "act";
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto 1fr;
                align-items: start;
                gap: 1rem;
                padding: 1.625rem;
            }
            .game-icon { --game-icon-width: 3rem; }
            .prose:nth-of-type(1) { --prose-display: none; }
            .prose:nth-of-type(2) { --prose-display: block; }
            .link {
                justify-self: start;
                margin-block-start: auto;
                --link-size: var(--text-micro);
                --link-chevron-size: initial;
                --link-chevron-gap: initial;
            }
        }
    }
}

@layer slices.slice_tips {
    @scope (.tips) {
        :scope {
            row-gap: var(--space-open);
            padding-block: var(--space-open);
        }
        > :first-child:not(h2) { margin-block-start: calc(2.5rem - var(--space-open)); }
        > .prose {
            --prose-max: 68ch;
        }
        ul {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
            gap: var(--space-open);
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li {
            display: grid;
        }
    }
}