/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The page kind gold-seed: what it reaches beyond the default definitions, whose layer order it falls into. */
@layer elements.metric {
    @scope (.metric) {
        :scope {
            padding-inline-start: var(--metric-indent);
            border-inline-start: var(--metric-rule);
            display: var(--metric-display, grid);
            align-content: start;
            gap: var(--space-tight);
        }
        > dd {
            margin: 0;
            font-family: var(--metric-face, ui-monospace, monospace);
            font-size: var(--metric-size, var(--text-large));
            line-height: 1.2;
            color: var(--link);
        }
        > dt {
            font-family: ui-monospace, monospace;
            font-size: var(--text-label);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-quiet);
            overflow-wrap: break-word;
            hyphens: auto;
        }
    }
}

@layer elements.picture {
    @scope (.picture) {
        :scope {
            inline-size: var(--picture-width);
            object-fit: var(--picture-fit);
            display: block;
            max-inline-size: 100%;
            block-size: var(--picture-height, auto);
        }
    }
}

@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.metric_row {
    @scope (.metric-row) {
        :scope {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-open) var(--space);
        }
        > .metric:not(:nth-child(3n + 1 of :not(.with-phone-hidden))) {
            --metric-indent: var(--space);
            --metric-rule: 1px solid var(--surface-4);
        }
        @media (max-width: 34.99rem) {
            > .with-phone-hidden { display: none; }
        }
        @media (min-width: 35rem) {
            :scope { column-gap: var(--space-open); }
            :scope:not(:has(> :nth-child(5))) {
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }
            :scope:not(:has(> :nth-child(5))) > .metric + .metric,
            :scope:has(> :nth-child(5)) > .metric:not(:nth-child(3n + 1)) {
                --metric-indent: var(--space-open);
                --metric-rule: 1px solid var(--surface-4);
            }
        }
        @media (min-width: 60rem) {
            :scope { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
            > .metric + .metric {
                --metric-indent: var(--space-open);
                --metric-rule: 1px solid var(--surface-4);
            }
        }
    }
}

@layer slices.slice_gold_seed {
    @scope (.gold-seed) {
        :scope {
            row-gap: var(--space-open);
            padding-block: var(--space-open);
        }
        :scope > * { max-inline-size: 64rem; }
        header {
            display: grid;
            gap: var(--space-tight);
        }
        .map-figure {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-snug);
            margin: 0;
            > figcaption {
                color: var(--ink-quiet);
                font-size: var(--text-small);
            }
        }
        .map-link,
        .back {
            margin: 0;
        }
        section {
            display: grid;
            gap: var(--space-close);
        }
        .description,
        .guide,
        .places {
            max-inline-size: 68ch;
        }
        .places ul {
            display: grid;
            gap: var(--space-tight);
            margin: 0;
            padding: 0;
            list-style: none;
            li {
                display: grid;
                grid-template-columns: max-content max-content 1fr;
                gap: var(--space-close);
                align-items: baseline;
            }
            b {
                color: var(--ink-bright);
                font-weight: 500;
            }
            span {
                color: var(--ink-quiet);
            }
        }
        .pictures {
            grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
            > .heading {
                grid-column: 1 / -1;
            }
            > .picture {
                --picture-width: 100%;
                --picture-height: auto;
            }
        }
    }
}