/* hero-stats.css — shared "big-number stat tile" for navy page heroes.
 *
 * The canonical hero stat treatment (maintainer Jun 6: "make them like this …
 * i want to use across page heros"). Lifted from the Hall Pass board's
 * `.hp-board-total` tiles into a generic, reusable component so every navy hero
 * shows stats the same way: an uppercase tracked CAP over a big light NUMBER,
 * separated by hairline dividers, optionally a real <a> link with an `is-on`
 * pressed wash.
 *
 * Rendered via the `hero_stats(...)` macro in partials/_hero_stats.html.
 *
 * Colour: white-on-navy is STRUCTURAL + palette-independent (same call the
 * canonical hero makes). The only accent is the focus ring + the `is-on` /
 * tone washes, which read the palette via `--hero-stat-accent` (default the
 * global brand teal) so a palette swap re-tints with no edit here — never a
 * hardcoded brand hex. Load this stylesheet on any page that renders the macro.
 */
.hero-stats {
  --hero-stat-accent: var(--brand-teal, var(--hp-accent-bright, #5B7AB8));
  --hero-stat-danger: var(--hp-rose-soft, #f7a8a8);
  --hero-stat-good: #34d399;
  --hero-stat-amber: #fbbf24;
  --hero-stat-sky: #60a5fa;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 18px);
}

/* A tile — an <a> link (or a plain <span> when no href). A frosted-glass faded
   card (faint white fill + hairline + backdrop blur) with a cap over a big
   number, a focus ring, and an is-on pressed (more opaque) state. ≥44px tap
   target via padding. */
.hero-stat {
  display: block; text-decoration: none; text-align: right;
  padding: 6px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
a.hero-stat:hover { background: rgba(255, 255, 255, 0.06); }
a.hero-stat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-stat-accent) 40%, transparent);
}
.hero-stat.is-on { background: rgba(255, 255, 255, 0.12); }
.hero-stat--over.is-on {
  background: color-mix(in srgb, var(--hero-stat-danger) 16%, transparent);
}
/* Optional per-tile glyph — a small coloured icon above the cap, tinted to the
   tile's tone (matching the number). Block, but hugged to the RIGHT edge so it
   lines up over the right-aligned cap/number (margin-left:auto needs a sized
   box → width:fit-content). Default (no tone) reads a muted white. */
.hero-stat-icon {
  display: block; margin-bottom: 6px;
  margin-left: auto; width: -moz-fit-content; width: fit-content;
  color: rgba(255, 255, 255, 0.75);
}
.hero-stat-icon svg { width: 20px; height: 20px; display: block; }
.hero-stat--teal  .hero-stat-icon { color: var(--hero-stat-accent); }
.hero-stat--over  .hero-stat-icon { color: var(--hero-stat-danger); }
.hero-stat--good  .hero-stat-icon { color: var(--hero-stat-good); }
.hero-stat--amber .hero-stat-icon { color: var(--hero-stat-amber); }
.hero-stat--sky   .hero-stat-icon { color: var(--hero-stat-sky); }
.hero-stat-cap {
  display: block;
  font: 700 11px/1 var(--brand-font-body, system-ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero-stat-num {
  display: block; margin-top: 4px;
  /* Bumped up a touch (maintainer Jun 6: "make numbers a little bigger"). */
  font: 300 clamp(36px, 4vw, 56px)/1 var(--brand-font-body, system-ui);
  letter-spacing: -0.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
/* Tone variants — colour the big NUMBER per stat (the cap stays uniformly
   muted; the dot the pill used is dropped). */
.hero-stat--teal  .hero-stat-num { color: var(--hero-stat-accent); }
.hero-stat--over  .hero-stat-num { color: var(--hero-stat-danger); }
.hero-stat--good  .hero-stat-num { color: var(--hero-stat-good); }
.hero-stat--amber .hero-stat-num { color: var(--hero-stat-amber); }
.hero-stat--sky   .hero-stat-num { color: var(--hero-stat-sky); }
.hero-stat-divider {
  width: 1px; height: 46px; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
}