/*
 * julepynt.css – kun layoutet på /julepynt/. Farver, knapper, valgbare felter, paneler, felter og beskeder
 * kommer fra designsystemet /css/latl.css (.designer-card, .button, .option, .input, .msg …).
 */

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 400 1rem/1.5 var(--sans);
    color: var(--text);
    background: var(--paper);
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 24px var(--gutter) 48px;
}
@media (max-width: 860px) {
    .layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
}

/* Preview */
.stage { position: relative; }
@media (min-width: 861px) {
    .stage { position: sticky; top: 16px; align-self: start; }
}
.preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 4%; transition: opacity .15s; }
.preview.stale { opacity: .45; }
.preview svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(4, 41, 64, .28)); }
.preview-loading { color: var(--muted); }
.preview-stale { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); max-width: calc(100% - 32px);
    padding: 6px 12px; border-radius: var(--radius-small); background: var(--error); color: #fff; font-size: .8125rem; text-align: center; }
.preview-stale[hidden] { display: none; }
.preview-meta { margin-top: 8px; text-align: center; min-height: 1.4em; }

/* Panelets indhold (selve kortet er .designer-card i latl.css) */
.woods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wood-price { min-height: 1em; }
.tabs { margin-bottom: 10px; }
.motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.motif { padding: 6px 4px; font-size: .6875rem; }
.motif svg { width: 100%; height: 56px; }
.thumb-wood { fill: var(--wood); stroke: var(--grain); stroke-width: .3; }

/* Tekst */
.jp-field { display: block; position: relative; margin-top: 12px; }
.jp-field-label { display: block; margin-bottom: 4px; font-size: .8125rem; color: var(--muted); }
.name-input { padding-right: 52px; font-family: 'LATL Sans', var(--sans); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
.counter { position: absolute; right: 12px; bottom: 13px; font-size: .75rem; color: var(--muted); }
.slider-scale { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--muted); }
.chars-hint { margin: 8px 0 0; }

/* Årstal */
.check { display: flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
#year { margin-top: 10px; width: 8em; padding-right: 12px; }
#yearHint { margin: 8px 0 0; }

/* Beskeder (udseende fra .msg i latl.css) */
.messages { padding-top: 10px; }
.messages:empty { display: none; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Handlinger */
.actions { display: flex; flex-direction: column; gap: 8px; }

/* Galleri */
.gallery { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 48px; }
.gallery-title { margin: 0 0 12px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gallery-item { padding: 12px 8px; text-decoration: none; }
.gallery-item img, .gallery-ph { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.gallery-item img { display: block; filter: drop-shadow(0 3px 5px rgba(4, 41, 64, .22)); }
.gallery-ph { border-radius: var(--radius-small); background: var(--paper); }