/* MetricTile — uniform label/value/trend primitive. */

.metric-tile {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: var(--color-bg-subtle, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    text-decoration: none;
    color: inherit;
    line-height: 1.3;
}

a.metric-tile {
    transition: border-color 0.12s, background-color 0.12s;
}

a.metric-tile:hover {
    border-color: var(--color-accent, #58a6ff);
    background-color: var(--color-bg-hover, rgba(88, 166, 255, 0.05));
}

.metric-tile__label {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--color-text-dim, #8b949e);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.metric-tile__value {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #e6edf3);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.metric-tile__unit {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-dim, #8b949e);
    margin-left: 2px;
}

.metric-tile__sub {
    font-size: 0.6rem;
    color: var(--color-text-dim, #8b949e);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.metric-tile__trend {
    font-size: 0.7rem;
    margin-right: 2px;
    line-height: 1;
}

.metric-tile__trend--up { color: #2ea043; }
.metric-tile__trend--down { color: #ff6384; }
.metric-tile__trend--flat { color: var(--color-text-dim, #8b949e); }

.metric-tile--positive .metric-tile__value { color: #2ea043; }
.metric-tile--negative .metric-tile__value { color: #ff6384; }
.metric-tile--muted { opacity: 0.7; }
.metric-tile--neutral .metric-tile__value { color: var(--color-text, #e6edf3); }