/*
 * Metadata grid: a definition list laid out as a responsive grid of compact uppercase labels over their
 * values. Used by the extraction/dev benches to dump parsed sheet metadata. The dt/dd get their look from
 * here, so the markup stays clean (<dt>Label</dt><dd>value</dd>) with no per-element styling.
 */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-sm) var(--space-lg);
    margin: 0 0 var(--space-md);
}

.meta-grid dt {
    font: var(--text-label-md);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0;
}

.meta-grid dd { margin: 0; }

/* Emphasised values (e.g. counts on the format catalogue). */
.meta-grid--strong dd { font-weight: 600; }

/* A scrollable code / JSON dump. */
.pre-block {
    overflow-x: auto;
    background: var(--surface-container-low);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    margin-top: var(--space-sm);
    font-size: var(--text-label-md-size);
}

/* A taller dump that scrolls vertically too. */
.pre-block--tall { max-height: 25rem; }