/* CompositionDisplay — blend composition summary (vintage / varietal / appellation).
   Self-scoped under .composition-display. The info-blue title uses --pp-status-info-bg/-text
   (info-text was pinned in the force-light reset in batch 5); the #f3f4f6 chip is a neutral
   with no exact token, left literal. Global file is the reliable home for print-composed
   components. */
.composition-display {
    border: var(--pp-border-light);
    border-radius: var(--pp-radius-sm);
    margin: var(--pp-spacing-md) 0;
}

.composition-title {
    padding: var(--pp-spacing-xs) var(--pp-spacing-md);
    background: var(--pp-status-info-bg);
    font-size: var(--pp-font-size-xs);
    font-weight: 700;
    color: var(--pp-status-info-text);
    border-bottom: var(--pp-border-light);
}

.composition-grid {
    padding: var(--pp-spacing-sm) var(--pp-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--pp-spacing-xs);
}

.composition-group {
    display: flex;
    align-items: flex-start;
    gap: var(--pp-spacing-sm);
    font-size: var(--pp-font-size-xs);
}

.group-label {
    font-weight: 600;
    color: var(--pp-text-secondary);
    min-width: 70px;
}

.group-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pp-spacing-xs);
}

.comp-item {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--pp-text-primary);
}

@media print {
    .composition-title {
        background: var(--pp-status-info-bg) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}