/* ——— The person card ———
   The block at the head of an avatar's menu (people/_card_header): a large
   face, the name, and what o'clock it is where they are. Everything else the
   card shows is the action dialog's — the rows, the hairline, the "esc to
   close" line — so this file owns the face block and nothing more.

   The card is centred, which is the one place in the app that is: a menu's
   rows read from the start edge, but this is a portrait, and a portrait is
   symmetrical or it is off-balance. */
@layer components {
  .person-card {
    display: grid;
    justify-items: center;
    gap: var(--block-space-half);
    padding-block: var(--block-space-half);
  }

  .person-card__face {
    --avatar-size: 4rem;
  }

  /* The header it sits in speaks at x-small in the subtle ink (dialog.css) —
     right for a context line, too quiet for the one word this block exists to
     say. The name takes the page's own voice back. */
  .person-card__name {
    font-size: var(--text-normal);
    color: var(--color-ink);
  }
}