.image-statistics { container-type: inline-size; padding: 1rem; border-top: 1px solid var(--md-outline-variant); background: var(--md-surface-container-low); color: var(--md-on-surface); }
.image-detail-page > .image-statistics { grid-column: 1 / -1; clear: both; margin-top: 1rem; border-radius: var(--md-radius-lg); }
.image-statistics__heading, .image-statistics__trend-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .4rem .8rem; }
.image-statistics h2, .image-statistics h3 { margin: 0; font-size: .875rem; font-weight: 600; color: var(--md-on-surface); }
.image-statistics p, .image-statistics__heading > span, .image-statistics__notes, .image-statistics__period span, .image-statistics__total span, .image-statistics__engagement dt { margin: 0; color: var(--md-on-surface-variant); font-size: .75rem; }
.image-statistics__row { display: grid; grid-template-columns: minmax(205px,1fr) minmax(155px,.8fr) minmax(190px,1.2fr); align-items: center; gap: 1rem; padding: 1rem 0; }
.image-statistics__orbit { position: relative; width: 205px; height: 190px; margin: auto; font-variant-numeric: tabular-nums; }
.image-statistics__total { position: absolute; inset: 47px auto auto 54px; width: 98px; height: 98px; border: 1px solid var(--md-outline-variant); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.image-statistics__total strong { font-size: 1.3rem; font-weight: 600; max-width: 96px; overflow-wrap: anywhere; text-align: center; }
.image-statistics__period { position: absolute; display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.image-statistics__period strong { font-size: .875rem; font-weight: 600; }
.image-statistics__today { top: 0; left: 76px; }
.image-statistics__week { top: 74px; right: -4px; }
.image-statistics__month { bottom: 0; left: 76px; }
.image-statistics__year { top: 74px; left: -4px; }
.image-statistics__countries ol { list-style: none; padding: .5rem 0 0; margin: 0; }
.image-statistics__countries li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .2rem 0; font-size: .8rem; }
.image-statistics__countries li span { min-width: 0; overflow-wrap: anywhere; }
.image-statistics__countries li strong { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.image-statistics__trend { min-width: 0; }
.image-statistics__trend-heading > span { font-size: .75rem; color: var(--md-primary); }
.image-statistics__trend-heading > span[data-negative="true"] { color: var(--md-error); }
.image-statistics__chart { position: relative; height: 130px; width: 100%; margin: .5rem 0; }
.image-statistics__engagement { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; margin: 0; padding: .85rem 0; border-top: 1px solid var(--md-outline-variant); }
.image-statistics__engagement div { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25rem .5rem; text-align: center; }
.image-statistics__engagement dd { margin: 0; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.image-statistics__engagement dt { font-weight: 400; }
.image-statistics__notes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem .75rem; }
.image-statistics__notes [data-stat-history] { flex-basis: 100%; }
@container (max-width: 600px) { .image-statistics__row { grid-template-columns: minmax(205px,1fr) minmax(145px,1fr); } .image-statistics__trend { grid-column: 1 / -1; } }
@container (max-width: 365px) { .image-statistics__row { grid-template-columns: minmax(0,1fr); } .image-statistics__trend { grid-column: auto; } .image-statistics__engagement { grid-template-columns: repeat(2,minmax(0,1fr)); } }