/* ── STAT tile options (2026-10-06) ───────────────────────────────────────
   Base tile rules stay in paragraphs.css. Colour comes from --stat-c; the
   classic card keeps its accent top bar for the default Brand colour so a
   stat saved before these options looks exactly as it did. */
.para--stat { --stat-c: var(--color-primary, #01491f); --stat-bar: var(--color-accent, #f5a623); --stat-on: #fff; }
.para-stat--c-brand-dark { --stat-c: var(--color-primary-dark, #002b12); --stat-bar: var(--stat-c); }
.para-stat--c-accent { --stat-c: var(--color-accent, #f5a623); --stat-bar: var(--stat-c); --stat-on: #1f2328; }
.para-stat--c-teal { --stat-c: #0f766e; --stat-bar: var(--stat-c); }
.para-stat--c-navy { --stat-c: #1e3a5f; --stat-bar: var(--stat-c); }
.para-stat--c-plum { --stat-c: #6b3a6b; --stat-bar: var(--stat-c); }
.para-stat--c-coral { --stat-c: #c2410c; --stat-bar: var(--stat-c); }
.para-stat--c-slate { --stat-c: #475569; --stat-bar: var(--stat-c); }

.para--stat .para-stat__value { color: var(--stat-c); }
.para--stat.para-stat--classic { border-top-color: var(--stat-bar); }
/* The accent colour is too light for a number on white: darken it there. */
.para-stat--c-accent.para-stat--classic .para-stat__value,
.para-stat--c-accent.para-stat--minimal .para-stat__value,
.para-stat--c-accent.para-stat--tint .para-stat__value { color: color-mix(in srgb, var(--stat-c) 55%, #000); }

.para--stat.para-stat--tint {
  background: color-mix(in srgb, var(--stat-c) 10%, #fff);
  border-color: color-mix(in srgb, var(--stat-c) 22%, #fff);
  border-top: 4px solid var(--stat-c); box-shadow: none;
}
.para--stat.para-stat--solid { background: var(--stat-c); border-color: var(--stat-c); box-shadow: none; }
.para-stat--solid .para-stat__value { color: var(--stat-on); }
.para-stat--solid .para-stat__label,
.para-stat--solid .para-stat__note { color: var(--stat-on); opacity: .88; }
.para--stat.para-stat--minimal { background: none; border: 0; box-shadow: none; padding: .5rem .25rem; }

.para-stat--size-large .para-stat__value { font-size: clamp(2.6rem, 6vw, 3.8rem); }
.para-stat--size-xl .para-stat__value { font-size: clamp(3.2rem, 8vw, 5rem); }

.para-stat__note { font-size: .8rem; color: var(--color-text-muted, #4a5b52); line-height: 1.3; }