/* ============================================================
   broadcast.css — Clubhouse Broadcast, applied to every page.
   Loaded LAST (after hero.css).

   WHY THIS IS A STYLESHEET AND NOT 70 EDITED MODULES
   The Broadcast primitives (.bcast-chip, .bcast-date, .chero)
   were only ever adopted by FOUR modules — fixtures, family,
   journey, financials, i.e. the parent surface. The other ~70
   pages kept the legacy vocabulary: .pill (190 uses),
   .section-head / .section-title (114), .empty-state (207).

   Those legacy classes are the SAME COMPONENTS by another name.
   So rather than rewrite 70 modules — a large, risky diff that
   would fight every future merge — this restyles the legacy
   classes onto the Broadcast system. Every page adopts it at
   once, and modules already using .bcast-* are untouched.

   JAPANESE IS THE POINT, NOT A DETAIL
   Hayato's parents read Japanese first. The legacy .pill and
   .section-title both apply uppercase + positive letter-spacing,
   which mangles kana and kanji — tokens.css says tracking is a
   latin device and must never hit ja text. The Broadcast system
   already solved this with .bcast-chip--ja; that solution is
   generalised here to every affected class via html[lang="ja"].
   ============================================================ */

/* ── Chips: .pill adopts .bcast-chip ────────────────────────
   Token-driven sizing plus the hairline border that gives the
   Broadcast look its definition on both paper and ink grounds. */
.pill {
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  background: var(--bg-2);
  color: var(--text-2);
}
/* Tinted variants keep their own ground, so the border reads as
   an edge rather than a second colour. */
.pill.green { border-color: color-mix(in srgb, var(--green) 28%, transparent); }
.pill.red   { border-color: color-mix(in srgb, var(--red)   28%, transparent); }
.pill.amber { border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.pill.blue  { border-color: color-mix(in srgb, var(--blue)  28%, transparent); }

/* ── Section rhythm ─────────────────────────────────────────
   The section head is the strongest repeating device on every
   admin page, so it carries the most of the system's character:
   Antonio at a fluid size over a hairline rule. */
.section-head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hair, var(--border));
  gap: var(--space-3);
}
.section-title {
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: var(--lh-tight);
  gap: var(--space-2);
}

/* ── Empty states ───────────────────────────────────────────
   An empty state is a designed state, not a gap. Given how much
   of this app is legitimately empty right now (zero players),
   it is one of the most-seen surfaces in the product. */
.empty-state {
  padding: var(--space-7) var(--space-5);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-3);
  border: 1px dashed var(--border);
  border-radius: var(--r-2, 12px);
  background: var(--bg-2);
  max-width: 52ch;
  margin-inline: auto;
}

/* ── Key/value rows ─────────────────────────────────────────
   .kv/.k/.v appear ~190 times. Tabular figures stop numbers
   jittering between rows. */
.kv .v, .v { font-variant-numeric: tabular-nums; }
.kv .k, .k { color: var(--text-3); font-size: var(--fs-sm); }

/* ── Japanese ───────────────────────────────────────────────
   Generalises .bcast-chip--ja to everything that tracks or
   uppercases. Applied at the document level so no module has to
   remember it. */
html[lang="ja"] .pill,
html[lang="ja"] .bcast-chip,
html[lang="ja"] .section-title,
html[lang="ja"] .hero-eyebrow {
  letter-spacing: var(--ls-normal);
  text-transform: none;
}
html[lang="ja"] .section-title { line-height: 1.3; }
/* ja needs more leading than latin at the same size. */
html[lang="ja"] body { line-height: var(--lh-relaxed); }

/* ── Content rhythm ─────────────────────────────────────────
   Fluid gutters matched to the hero, so a page's edges line up
   with the band above it instead of stepping in or out. */
.content {
  padding-inline: var(--hero-gutter, 24px);
  max-width: var(--max-page, 1280px);
  margin-inline: auto;
}

/* ── Touch targets ──────────────────────────────────────────
   44px is the accessibility floor on touch; several legacy
   buttons sit under it. Applied only on coarse pointers so the
   desktop density is unchanged. */
@media (pointer: coarse) {
  .btn, .pill[role="button"], button {
    min-height: 44px;
  }
  .btn.sm { min-height: 36px; }   /* dense table actions stay usable */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}