/* PROFILE·ACTIVITYFEED — the activity log's day-grouped content layer. (9501, 2026-09-28)
 *
 * THE APPROVED PICTURE: the Activity screen of the signed-off Profile collage — entries
 * grouped under date eyebrows (TODAY / YESTERDAY / the date), each entry an avatar
 * initial, a plain sentence in the parent's voice ("Marc added a log · feed", "You
 * invited someone"), and the time under it.
 *
 * This is the CONTENT LAYER of the log. The sheet it scrolls in, its loading and error
 * states, and its door bar stay 1138 SHELL·ACTIVITY + the view's — this card consumes the
 * real rows (API.listAccessLog) and draws what happened, day by day. The avatar slot is
 * 1133 SHELL·AVATAR's own .avatar class, composed — the one person circle, never a copy.
 *
 * The sentence keeps the app's real action vocabulary (the same label map the view has
 * always shown — "Added a log", "Read week", "Created an invite"…) and who did it: YOU
 * when the row's actor is the signed-in parent, otherwise their name. It does not invent
 * verbs the data does not carry.
 *
 * Self-contained under .acf-*, EXCEPT the composed .avatar (a registered card's own class).
 * STATES (both rendered in the exhibit):
 *   empty — the centred, honest nothing: what will show here, once there is something.
 *   list  — the day-grouped entries.
 * ============================================================================ */
.acf { display: flex; flex-direction: column; }
.acf-day { font-family: var(--font-label); font-size: var(--text-meta); font-weight: var(--weight-600);
  letter-spacing: var(--tracking-08); text-transform: uppercase; color: var(--ink-600);
  margin: var(--space-16) 0 var(--space-8); }
.acf-day:first-child { margin-top: 0; }
.acf-row { display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-12) var(--space-16); }
.acf-row .avatar { flex: none; }
.acf-mid { flex: 1; min-width: 0; }
.acf-sentence { display: block; font-family: var(--font-display); font-weight: var(--weight-500);
  font-size: var(--size-16); color: var(--text-primary); line-height: var(--leading-120); }
.acf-when { display: block; font-family: var(--font-label); font-size: var(--text-meta);
  font-weight: var(--weight-500); color: var(--text-secondary); margin-top: var(--space-4); }
.acf-empty { text-align: center; color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--size-15); /* token-exception */ line-height: var(--leading-140);
  padding: var(--space-32) var(--space-16); margin: 0; }
/* the entry cards: the collage draws each entry on its own cream card */
.acf-item { background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); }
.acf-item + .acf-item { margin-top: var(--space-8); }