/* ============================================================
   TYPOGRAPHY ROLES
   The app has only a handful of recurring text styles. An element takes a role
   class instead of re-declaring family/size/weight; body text just inherits the
   base (--fs-5 / --sans). Single-property or genuinely one-off text uses the
   --fs-* tokens directly. Colour stays on the component — it varies too much to
   bake into a role. See the css skill for the house rules.
   ============================================================ */
.t-label { font-family: var(--sans); font-size: var(--fs-4); font-weight: 600; }  /* controls, pills, field labels, sidebar items — the most repeated style */
.t-meta  { font-family: var(--sans); font-size: var(--fs-3); }                     /* small secondary / caption text */
.t-read  { font-family: var(--read); font-size: var(--fs-4); }                     /* prose: comments, notes, long copy */
.t-title { font-size: var(--fs-6); font-weight: 700; letter-spacing: -.01em; }     /* card & section titles */

/* Avatar base for helper-rendered discs (user_avatar). Size, colour, radius and
   font-size are set inline by the helper; this centres the initials/emoji. */
.kb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1; overflow: hidden; font-weight: 600; user-select: none;
}