/* ============================================================================
   Stat row — the calm figures on a card (design batch 1, 2026-10-08).

   Replaces the stack of tinted, bordered number pills. A card shows at most
   THREE figures. Each is a small label above one number; colour lives only on
   the number (and its delta), never on a box around it. Numbers use the
   interface face (Sora, tabular numerals), never the monospace.

   Shared classes — reuse these anywhere a card states figures:

     <dl class="stat-row">                      up to three .stat children
       <div class="stat" data-tone="money">     tone: money | creators | posts |
                                                pay | ads | plain (default)
         <dt>Paid to creators</dt>              the label, above the number
         <dd><span class="stat-num">$50K+</span>
             <span class="stat-delta is-up">↑ from $40K+</span></dd>
       </div>                                   delta: is-up | is-down | is-new |
     </dl>                                      is-plain

     .stat-row.is-compact   tighter numbers for list rows
     .stat-row.is-hero      larger numbers for a page header (brand page);
                            more than three figures = several rows, each a
                            .stat-row of at most three (statRows())
     <span class="stat-note">out of 100</span>   quiet unit / sample size
                                                after the number, in the dd
     <dt><span class="stat-label">…</span><span class="infowrap">…</span></dt>
                            a label with an info button beside it
     <div class="card-badges">                  small neutral badges below
       <span class="shop-badge">…TikTok Shop <b>751K</b> sold</span>
       <span class="card-badge">US market</span>
     </div>

   .shop-badge is outline-only and inherits the panel, so it reads the same in
   light and dark (it was a solid black pill that turned white in dark mode).
   Every number is passed in from that day's feed; nothing here computes one.
   ========================================================================= */

.stat-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0;padding:0;min-width:0}
.stat-row>.stat{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;padding:0 12px}
.stat-row>.stat:first-child{padding-left:0}
.stat-row>.stat:last-child{padding-right:0}
.stat-row>.stat+.stat{border-left:1px solid var(--rule)}
.stat-row dt{margin:0;font-size:12px;font-weight:500;line-height:1.3;color:var(--ink-2);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-row dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:1px;min-width:0}
.stat-num{font-family:var(--sans);font-size:16px;font-weight:650;line-height:1.25;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat[data-tone="money"] .stat-num{color:var(--tone-money)}
.stat[data-tone="creators"] .stat-num{color:var(--tone-creators)}
.stat[data-tone="posts"] .stat-num{color:var(--tone-posts)}
.stat[data-tone="pay"] .stat-num,.stat[data-tone="ads"] .stat-num{color:var(--tone-pay)}
.stat-delta{font-size:12px;font-weight:600;line-height:1.3;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-delta.is-up{color:var(--tone-money)}
.stat-delta.is-down{color:var(--tone-posts)}
.stat-delta.is-new{color:var(--tone-pay)}
a.stat-delta{position:relative;z-index:1;text-decoration:none}
a.stat-delta:hover{text-decoration:underline}
.stat-row.is-compact .stat-num{font-size:15px}
.stat-note{font-size:12px;font-weight:500;line-height:1.3;color:var(--ink-2);white-space:nowrap}
.stat-row dt:has(.infowrap){display:flex;align-items:center;gap:0;overflow:visible}
.stat-row .stat-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.stat-row dt .infowrap{flex:none;margin-left:4px}
/* A page header: bigger numbers, the note on its own line under them. */
.stat-row.is-hero{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-row.is-hero dt{white-space:normal;overflow:visible}
.stat-row.is-hero dt:has(.infowrap){align-items:flex-start}
.stat-row.is-hero .stat-label{overflow:visible}
/* Labels that wrap to two lines keep every number in the row on one line. */
@supports (grid-template-rows:subgrid){.stat-row.is-hero>.stat{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;row-gap:3px}}
.stat-row.is-hero dd{flex-direction:column;align-items:flex-start;row-gap:2px}
.stat-row.is-hero .stat-num{font-size:20px;line-height:1.2}
@media(max-width:700px){.stat-row.is-hero .stat-num{font-size:19px}.stat-row.is-hero>.stat{padding:0 8px}}

/* Small neutral badges under the figures. */
.card-badges{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.shop-badge,.card-badge{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 9px;border:1px solid var(--rule);border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap}
.shop-badge b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.shop-badge .tts-icon{width:12px;height:12px;flex:none;color:var(--ink)}

/* ---- Brand card ---------------------------------------------------------
   The figures sit at the bottom of the card on a hairline, so cards in a row
   line up however long their names are. */
.brand-card .card-stats{align-self:stretch;width:100%;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.brand-card .card-meta>.card-stats:first-child{border-top:0;padding-top:0}
/* A change reads as one quiet line, not a pill. Only the arrow and the
   figures carry colour. */
.brand-card .card-moves{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;font-size:13.5px;font-weight:600;line-height:1.35;font-variant-numeric:tabular-nums}
.brand-card .card-moves li{padding:0;border-radius:0;background:none;color:var(--ink);overflow-wrap:anywhere}
.brand-card .card-moves .is-up,.brand-card .card-moves .is-down,.brand-card .card-moves .is-new{background:none}
.brand-card .card-moves .is-up{color:var(--tone-money)}
.brand-card .card-moves .is-down{color:var(--tone-posts)}
.brand-card .card-moves .is-new{color:var(--tone-pay)}
.brand-card .card-lead{font-size:13.5px;line-height:1.4}

/* Compact ranked rows (Today, Most active): each figure keeps its own
   column from row to row, so the list scans like a table. */
.stat-row.is-compact{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px}
.stat-row.is-compact>.stat,.stat-row.is-compact>.stat:first-child{padding:0;border:0}
.stat-row.is-compact>[data-kind="paid"]{grid-column:1}
.stat-row.is-compact>[data-kind="creators"]{grid-column:2}
.stat-row.is-compact>[data-kind="posts"],.stat-row.is-compact>[data-kind="ads"]{grid-column:3}
@media (min-width:961px){
  .today-rows .is-row .card-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .today-rows .is-row .card-stats{border-top:0;padding-top:0}
  .today-rows .is-row .card-moves{flex-direction:row;flex-wrap:wrap;column-gap:12px}
}

/* ---- Top 100 video tile -------------------------------------------------- */
.video-card .video-stats{padding:10px 12px 2px}
.viewer-history .video-stats{padding:0}
.video-card .video-stats .stat-num{font-size:15px}
.video-card .video-stats dt{font-size:11.5px}
.brand-card .card-meta{display:flex;flex-direction:column;gap:10px;margin-top:auto;min-width:0;align-self:stretch;justify-self:stretch}
.video-card .video-stats.is-empty{display:none}
/* Phones: two tiles a row, so a tighter rhythm and a two-line opening line. */
@media(max-width:700px){.video-grid{row-gap:14px}.video-card .video-hook{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}