/*
 * Tableau: the kind sits on a crest line at the top, the title is centred
 * beneath it, the figures stand in a strip of boxed tiles like a stat bar,
 * the text follows and the source closes the card under a short rule. The
 * emblem watermarks the crest rather than the corner.
 */

.tableau-card .print-card-watermark {
    right: auto;
    bottom: auto;
    left: 50%;
    top: -6mm;
    width: 30mm;
    height: 30mm;
    transform: translateX(-50%);
}

.tableau-crest {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.8mm;
    margin-bottom: 1.4mm;
    color: var(--card-ink-faint);
}

.tableau-crest::before,
.tableau-crest::after {
    content: "";
    flex: 1;
    height: 0.25mm;
    background: linear-gradient(90deg, transparent, var(--card-accent-second) 45%, var(--card-accent));
}

.tableau-crest::after {
    background: linear-gradient(90deg, var(--card-accent), var(--card-accent-second) 55%, transparent);
}

.tableau-crest .print-card-type {
    color: var(--card-accent-second);
}

.tableau-crest .print-card-type {
    margin-bottom: 0;
}

.tableau-card .print-card-header {
    text-align: center;
}

.tableau-card .badge-list {
    justify-content: center;
}

.tableau-tiles {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8mm;
    margin: 1.6mm 0 0;
}

.tableau-tile {
    flex: 1 1 8em;
    min-width: 0;
    padding: 0.7mm 1mm 0.9mm;
    text-align: center;
    border: 0.2mm solid color-mix(in srgb, var(--card-accent-second) 60%, transparent);
    border-top-width: 0.5mm;
    background: var(--card-accent-soft);
}

.tableau-tile.tableau-tile-wide {
    flex-basis: 100%;
}

.tableau-tile-label {
    font-family: var(--card-label-font);
    font-size: 0.7em;
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: auto;
    letter-spacing: var(--card-label-spacing);
    text-transform: var(--card-label-transform);
    color: var(--card-accent-second);
}

.tableau-tile-value {
    margin: 0.3mm 0 0;
    font-size: 0.95em;
    line-height: 1.25;
    color: var(--card-ink);
}

.tableau-card .print-card-body {
    margin-top: 2mm;
}

.tableau-foot {
    position: relative;
    flex: none;
    display: flex;
    justify-content: center;
    min-height: calc(1.34em + 1.2mm);
    margin-top: 1.4mm;
    padding-top: 1.2mm;
    font-family: var(--card-subtitle-font);
    font-size: 0.76em;
    font-style: italic;
    color: var(--card-ink-faint);
}


.tableau-foot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30%;
    width: 40%;
    height: 0.25mm;
    background: linear-gradient(90deg, transparent, var(--card-accent-second), transparent);
}

@container card (orientation: landscape) {
    .tableau-card .print-card-body {
        column-count: 2;
        column-gap: 4mm;
        column-rule: 0.2mm solid var(--card-rule);
    }
}

@container card (max-width: 70mm) {
    .tableau-tile {
        padding: 0.5mm 0.6mm 0.6mm;
    }

    .tableau-card .print-card-watermark {
        width: 22mm;
        height: 22mm;
        top: -4mm;
    }
}