@layer components {
  /* ——— The feed's day divider ———
     The date leads, one rule runs out from it, and the day's datum closes the
     line — Basecamp's shape (user, 2026-08-13). It was centred between two
     rules until then, which pointed the eye at the middle of a day whose rail
     starts at the start edge.

     The date is a filled ink chip (.badge--strong), which is BC's own
     treatment and the one place a filled block earns its keep outside a
     button: every row below hangs off this datum, and everything else on the
     line — the rule, the count, the faces — whispers. Recorded under HANSHI's
     Deviations, because "hierarchy by weight and spacing, not size and colour"
     is the rule it bends.

     It speaks at the divider's own size, not .badge's small: this whole line
     is one voice, and the date is part of it rather than a title over it. */
  .day-divider {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    font-size: var(--text-x-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);

    .badge {
      font-size: inherit;
    }

    /* Generated last but ordered second: the rule belongs between the date and
       the datum, and `order` is the only way to say that without giving the
       hairline an element of its own. With no datum it simply runs to the edge,
       which is the same line with nothing on the end of it. */
    &::after {
      content: "";
      order: 1;
      flex: 1;
      block-size: var(--border-size);
      background-color: var(--color-line);
    }
  }

  /* The chat's day (HANSHI sheet 10): the same voice, centred between two
     rules — nothing closes that line, so nothing leads it either. */
  .day-divider--centred::before {
    content: "";
    flex: 1;
    block-size: var(--border-size);
    background-color: var(--color-line);
  }

  .day-divider__datum {
    order: 2;
  }
}