/* Metric Cards Component */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background-color: var(--myceo-surface-1);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* The card title, defined ONCE in the shared component.
 *
 * This rule used to colour the title with --primary-color, which is the brand
 * ACCENT - so every card title came out accent-blue in the heading face. Five
 * dashboards each carried their own copy of an override to undo that, and
 * Segments did not, which is the whole reason its cards looked like a
 * different product: blue serif titles beside everyone else's dark sans ones.
 *
 * Both selectors, because the markup is <h3 class="metric-title"> and either
 * could be what a future card uses. */
.metric-card .metric-title,
.metric-card h3 {
    font-family: var(--myceo-font-body, inherit);
    font-size: 1rem;
    font-weight: 600;
    color: var(--myceo-text-primary);
    margin: 0 0 1rem 0;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--myceo-text-primary);
    margin: 0.5rem 0;
}

.metric-comparison {
    font-size: 0.9rem;
    color: var(--myceo-text-secondary);
}

.metric-comparison.positive {
    color: var(--myceo-ink-good);
}

.metric-comparison.negative {
    color: var(--myceo-ink-critical);
}
/* ── Mobile / touch (VERITAS-102 phase 2) ──────────────────────────
   The hover lift sticks after a tap on touch screens — only apply it
   where hover actually exists. */
@media (hover: none) {
    .metric-card:hover { transform: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
}

@media (max-width: 520px) {
    .metrics-row { gap: 0.9rem; }
    .metric-card { padding: 1rem; }
    .metric-value { font-size: 1.6rem; }
}

/* ── The change indicator, promoted from the Revenue dashboard ──────────────
 *
 * Kevin asked for Revenue's card treatment everywhere. It was already
 * everywhere - five dashboards each carried a byte-identical copy of this
 * block, which is precisely how one of them drifts and nobody notices.
 * Defined once here; the copies are deleted.
 *
 * The colours are the one thing NOT copied verbatim. Revenue used #10b981 for
 * a rise, which is 7.58:1 on the dark ground and 2.54:1 on white - fine in the
 * theme it was written for and unreadable in the other. These use the ink
 * tokens, which flip per theme.
 */
.metric-change {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.metric-change .change-value {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.metric-change .change-value.change-positive { color: var(--myceo-ink-good); }
/* No comparison to make — All Time has no honest previous period. Stated in
   secondary ink so it reads as context, not as a good or bad result. */
.metric-change .change-value.change-neutral { color: var(--myceo-text-secondary); }
.metric-change .change-value.change-negative { color: var(--myceo-ink-critical); }

.metric-change .change-period {
    color: var(--myceo-text-dim);
    font-size: 0.8rem;
}

.metric-change .arrow-up,
.metric-change .arrow-down {
    font-size: 0.75rem;
    /* Inherit the change-value colour: these were styled separately and so
       could disagree with the number they point at. */
    color: inherit;
}