/* Insights > New creators (js/journey-metrics.js): seven small tiles, two columns on a phone. */
.jm-card { margin-bottom: var(--s4, 24px); }
.jm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3, 16px); }
.jm-tile { display: flex; flex-direction: column; gap: 4px; padding: var(--s2, 12px); border: 1px solid var(--line, var(--dk-l-e6e3dc, #e6e3dc)); border-radius: var(--r-sm, 8px); min-width: 0; }
.jm-label { font-size: var(--text-sm, 14px); color: var(--muted, var(--dk-t-6b6760, #6b6760)); }
.jm-value { font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.jm-unit { font-size: var(--text-sm, 14px); font-weight: normal; color: var(--muted, var(--dk-t-6b6760, #6b6760)); margin-left: 6px; }
.jm-meta { font-size: var(--text-2xs, 12px); color: var(--muted, var(--dk-t-6b6760, #6b6760)); }
.jm-tile.is-ok { border-color: var(--ok, #8fb08a); }
.jm-tile.is-off { border-color: var(--warn, #d8a657); }
@media (max-width: 560px) { .jm-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .jm-value { font-size: 1.2rem; } }