/* Lagos Life: badges (owner 5d). Spec: site/cards-sheets.html#badge */
.ll-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--badge-size); height: var(--badge-size); padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--fill-rose); color: var(--ink-on-fill);
  font: var(--type-micro); font-weight: var(--weight-bold); line-height: var(--badge-size);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Attached to an icon or tile: top right, 2px ring in the surface colour so it separates from the icon. */
.ll-badge--attached { position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); box-shadow: 0 0 0 2px var(--paper); }
/* NEW: the app writes it in capitals; kept. */
.ll-badge--new { height: var(--badge-new-height); padding: 0 var(--space-1-5); line-height: var(--badge-new-height); text-transform: uppercase; }
/* 18+: the age mark on sign-up. */
.ll-badge--age {
  width: calc(var(--space-6) + var(--space-1)); height: calc(var(--space-6) + var(--space-1)); padding: 0;
  background: var(--ink-fill); color: var(--ink-on);
  font: var(--type-label-sm); font-family: var(--font-display); font-weight: var(--weight-bold); line-height: 1;
}
/* Status: a soft tint, ink text, and an emoji that says the same thing as the colour. */
.ll-badge--status {
  height: var(--space-6); padding: 0 var(--space-2-5); gap: var(--space-1);
  background: var(--mist); color: var(--ink); font: var(--type-label-sm); line-height: 1;
}
.ll-badge--status[data-tone="positive"] { background: var(--leaf-soft); }
.ll-badge--status[data-tone="warning"] { background: var(--sunset-soft); }
.ll-badge--status[data-tone="danger"] { background: var(--rose-soft); }
.ll-badge--status[data-tone="info"] { background: var(--lagoon-soft); }
.ll-badge--status[data-tone="reward"] { background: var(--gold-soft); }
.ll-badge__emoji { font-family: var(--font-emoji); font-size: var(--icon-xs); line-height: 1; }