/* Earnings (1.0 step 2): a creator page whose body scrolls (the kit's .ig-sheet-body) under the nav. See earnings.js. */
.ig .creator-page > .earn-body { flex: 1 1 0; min-height: 0; }
.ig .creator-page > .earn-body ~ .grow { display: none; }

/* the range chip, and the dates it covers */
.ig .earn-range { justify-content: space-between; padding: 6px 16px 0; }
.ig .earn-chip { height: 32px; gap: 6px; padding: 0 12px 0 14px; border-radius: 16px; background: #FFFFFF1F; font: 600 14px/17px var(--ig-text); }

/* the total: one hero figure, proportional digits */
.ig .earn-hero { gap: 2px; padding: 20px 16px 0; }
.ig .earn-total { font: 700 44px/52px var(--ig-display); letter-spacing: -.6px; }
.ig .earn-sub { min-height: 17px; }
.ig .earn-delta { gap: 4px; font: 600 13px/17px var(--ig-text); color: var(--ig-muted); }
.ig .earn-delta.up { color: #58C322; }

/* the chart: bars from one baseline with a 4pt rounded top, at most 24pt wide; each bar's column is its hit area */
.ig .earn-chart { padding: 20px 16px 0; }
.ig .earn-bars { height: 88px; align-items: stretch; gap: 2px; border-bottom: 1px solid #FFFFFF26; touch-action: none; }
.ig .earn-bar { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; }
.ig .earn-bar > i { width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--ig-link); transition: height .45s cubic-bezier(.23, 1, .32, 1), opacity .15s; }
.ig .earn-bars.reading .earn-bar > i { opacity: .35; }
.ig .earn-bars.reading .earn-bar.on > i { opacity: 1; background: #fff; }
.ig .earn-axis { justify-content: space-between; margin-top: 6px; font: 400 12px/15px var(--ig-text); color: var(--ig-muted); }

/* ready, pending, and the next payout */
.ig .earn-balance { margin: 20px 16px 0; border-radius: 12px; background: var(--ig-card); }
.ig .earn-split { align-items: stretch; }
.ig .earn-cell { gap: 4px; padding: 14px 16px 12px; }
.ig .earn-cell + .earn-cell { border-left: 1px solid #FFFFFF14; }
.ig .earn-mid { font: 600 20px/24px var(--ig-display); letter-spacing: .1px; }
.ig .earn-payout { gap: 8px; padding: 12px 14px 12px 16px; border-top: 1px solid #FFFFFF14; font: 400 14px/18px var(--ig-text); color: var(--ig-soft); }
.ig .earn-payout b { font-weight: 600; color: #fff; }

/* Reels or Products */
.ig .earn-tabs { margin-top: 20px; }
.ig .earn-list { padding-top: 4px; }
.ig .earn-row, .ig .earn-line { gap: 12px; padding: 8px 16px; }
.ig .earn-text { min-width: 0; gap: 3px; }
.ig .earn-text > * { overflow: hidden; text-overflow: ellipsis; }   /* a long caption stops short of the amount */
.ig .earn-end { align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ig .earn-amt { font: 600 15px/18px var(--ig-text); font-variant-numeric: tabular-nums; }
.ig .earn-end .t-sub { font-variant-numeric: tabular-nums; }
.ig .earn-empty { padding: 18px 16px; text-align: center; }

/* the sheets: a Reel's or a product's earnings, and why Pending waits */
.ig .earn-sheet-head { gap: 12px; padding: 4px 16px 0; }
.ig .earn-sheet-total { gap: 3px; padding: 16px 16px 8px; }
.ig .earn-note { padding: 8px 16px 0; }
.ig .earn-why { padding: 0 16px 6px; }
.ig .earn-done { padding: 16px 16px 0; }

/* press feedback, as the other creator pages */
.device .scr:not(.out) .ig :is(.earn-row, .earn-payout) { transition: background-color .2s; }
.device .scr:not(.out) .ig :is(.earn-row, .earn-payout):active { background: #FFFFFF14; transition: none; }
.device .scr:not(.out) .ig :is(.earn-chip, .earn-pending, .earn-tab) { transition: opacity .12s; }
.device .scr:not(.out) .ig :is(.earn-chip, .earn-pending, .earn-tab):active { opacity: .6; transition: none; }