/* ==========================================================================
   PLATFORM REPORTS — the small additions the platform's reports make to the office's report page
   --------------------------------------------------------------------------
   Owned by the platform reports workstream. The page itself is drawn with the office reports' own classes (.rep-*, in
   reports.css: the hub, the period control, the tiles, the table that becomes cards on a phone, the charts and the print sheet);
   this file holds only what the platform's page has and the office's does not.

   Rules for this file, as for reports.css: design TOKENS only (no hex, no pixel colours), LOGICAL properties only (inline-start/
   end, block-start/end — never left/right), and nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after app.css
   and apple.css. Every class is prefixed .prep- so it cannot collide with another area's.
   ========================================================================== */

/* The line under a headline figure that says what it is set against: "Previous period (1 – 30 September 2026): 1,200.00 ILS ·
   +12.5%". It is words, never only a colour or a shape; a long period in Arabic wraps rather than running out of the tile. */
.prep-compare {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* A change with no percentage — the figure was nothing in the period before, so there is nothing to divide by — is only an arrow.
   The shared tile lets the arrow and the explanation wrap as two items, which leaves the arrow alone on a line of its own whenever
   the explanation is long (and it is, in Arabic, beside every figure). Here the explanation wraps beside the arrow instead. */
.prep-tile--bare-arrow .stat-tile__body > .cluster { flex-wrap: nowrap; align-items: baseline; }
.prep-tile--bare-arrow .stat-tile__delta { flex: none; }

/* A figure that is worse when it rises — failures, skipped messages, churn, late subscriptions — keeps the tile's shape for the
   direction it moved (▲ up, ▼ down) and swaps the tint: a rise is the warning colour and a fall the good one. The shape and the
   signed percentage say the direction in any case; only the judgement is turned round. */
.prep-tile--rising-is-bad .stat-tile__delta--up { color: var(--color-danger-fg); }
.prep-tile--rising-is-bad .stat-tile__delta--down { color: var(--color-success-fg); }

/* Six headline figures (the subscriptions, MRR and messaging reports) sit three across and two deep. The shared grid would put five
   on a row and one alone beneath them, and the compact tile has too little room for the "Previous period (…)" line, which in Arabic
   runs to four short lines. From a tablet up only: on a phone the office report's own two-column rule applies. */
@media screen and (min-width: 48rem) {
  .stat-grid.prep-kpis--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}