/* =============================================================================
   analytics.css - Analytics addon styles

   Linked after theme.css. Lays out the period links, the headline numbers
   (four cards in one row from the tablet width up), the count columns of
   the tables and the dashboard widget. Built from the style.css and
   theme.css tokens, so it follows the theme and dark mode.
   ============================================================================= */

/* The period links: a row of buttons that wraps on a narrow screen */
.analytics-periods {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.analytics-periods a {
    margin-inline-end: 8px;
    margin-bottom: 8px;
}

/* The page's section titles and the widget's title at the size of an app
   section title, not the large default heading */
.analytics-periods ~ h2,
.analytics-widget h2 {
    font-size: 1.25rem;
}

.analytics-periods ~ h2 {
    margin: 32px 0 12px;
}

.analytics-widget h2 {
    margin-top: 0;
}

/* The note above the numbers (demo mode, storage off) */
.analytics-note {
    color: var(--gray);
    font-size: .9rem;
}

/* The headline cards: the number over its label. The row is the core
   .card-grid; two cards per row on a phone, four from the tablet width up */
.analytics-stat strong {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.analytics-stat span {
    display: block;
    margin-top: 4px;
    color: var(--gray);
    font-size: .9rem;
}

.analytics-stats > .custom-column {
    flex-basis: 50%;
    width: 50%;
}

@media (min-width: 768px) {
    .analytics-stats > .custom-column {
        flex-basis: 25%;
        width: 25%;
    }
}

/* The revenue card under the headline numbers: one line per currency */
.analytics-revenue {
    margin-top: 16px;
    margin-bottom: 8px;
}

.analytics-revenue h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.analytics-revenue li {
    font-size: .95rem;
}

/* The count columns of the tables line up on the right; a day never
   breaks across lines on a narrow screen (the table scrolls instead) */
.analytics-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.analytics-day {
    white-space: nowrap;
}

/* The dashboard widget: a card holding the headline cards and the link */
.analytics-widget .analytics-stats {
    margin-bottom: 8px;
}

.analytics-widget-link {
    margin: 8px 0 0;
    font-size: .9rem;
}