/* Metrics component layer. */

.metric-card-grid--dictionary,
.metric-card-grid--progress {
    gap: 14px;
}

.metric-card-grid--dictionary {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.metric-card-grid--progress {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.metric-card--dictionary,
.metric-card--summary {
    min-width: 0;
    --metric-card-gap: 14px;
    --metric-card-padding: 20px;
    --metric-card-base-bg: var(--theme-surface-subtle);
    background: var(--theme-surface-subtle);
    border: 1px solid var(--theme-border-normal);
}

.metric-card--dictionary-primary {
    --metric-card-value-color: var(--stats-accent-primary);
}

.metric-card--dictionary-secondary {
    --metric-card-value-color: var(--stats-accent-secondary);
}

.metric-card--summary-primary {
    --metric-card-value-color: var(--theme-text-accent);
}

.metric-card--summary-success {
    --metric-card-value-color: var(--stats-accent-primary);
}

.metric-card--summary-progress {
    --metric-card-value-color: var(--stats-accent-secondary);
}

.metric-card--dictionary .metric-card__hero,
.metric-card--summary .metric-card__hero {
    --metric-card-hero-gap: 6px;
}

.metric-card--dictionary .metric-card__eyebrow,
.metric-card--summary .metric-card__eyebrow {
    --metric-card-eyebrow-size: var(--metric-card-eyebrow-size);
    --metric-card-eyebrow-track: var(--metric-card-eyebrow-track);
}

.metric-card--dictionary .metric-card__value,
.metric-card--summary .metric-card__value {
    --metric-card-display-size: var(--metric-card-value-size);
    --metric-card-display-line: var(--metric-card-value-line);
    --metric-card-value-color: var(--metric-card-value-color, var(--theme-text-strong));
}

.metric-card--summary .metric-card__value {
    --metric-card-display-size: var(--metric-card-summary-value-size);
}

.metric-card--dictionary .metric-card__caption,
.metric-card--summary .metric-card__caption {
    --metric-card-caption-size: var(--metric-card-caption-size);
    --metric-card-caption-line: var(--metric-card-caption-line);
}

.metric-card__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.metric-card__item {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--surface-radius);
    border: 1px solid var(--theme-border-surface-item);
    background: color-mix(in srgb, var(--theme-surface-base) 76%, var(--theme-surface-subtle));
    box-shadow: none;
    cursor: default;
}

.metric-card__item-label {
    --text-meta-size: var(--type-label-size);
    --text-meta-line: 1.35;
    --text-meta-track: 0.05em;
    --text-meta-text-transform: uppercase;
    --text-meta-color: var(--hierarchy-meta-color);
}

.metric-card__item-value {
    --text-title-size: clamp(18px, 2vw, 24px);
    --text-title-line: 1;
    --text-title-track: -0.04em;
    --text-title-weight: var(--hierarchy-strong-weight);
}

.metric-card__hint {
    --text-hint-margin: var(--metric-card-hint-margin-top) 0 0;
    --text-hint-size: var(--metric-card-hint-size);
    --text-hint-line: var(--metric-card-hint-line);
    --text-hint-color: var(--metric-card-hint-color);
}

.metric-card__bar {
    --progress-bar-bg: var(--metric-card-progress-bg);
}

.metric-card__bar span {
    background: var(--metric-card-progress-fill);
}

@media (max-width: 720px) {
    .metric-card-grid--dictionary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .metric-card__items {
        grid-template-columns: 1fr;
    }
}