/* it-120.4: the Log tab — a contact's or a record's feed of events (the legacy recent-history shape: an icon, the title
   and who, the time at the right, then the event itself). Each entry is a house .float-card; its change table is the
   house .float-table on an inset panel. Only layout and emphasis here. */
.log-feed { display: flex; flex-direction: column; }
.log-feed__empty { margin: 0; }
.log-feed__older { align-self: center; }
.log-feed > .float-card:last-child { margin-bottom: 0; }

.log-entry { display: flex; flex-direction: column; gap: 1rem; }
.log-entry__head { display: flex; align-items: center; gap: 0.875rem; }
.log-entry__avatar { width: 40px; height: 40px; }
.log-entry__heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.log-entry__title { font-weight: 600; color: var(--md-sys-color-on-surface); }
.log-entry__by { font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
.log-entry__when { align-self: flex-start; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.log-entry__body { margin: 0; }
.log-entry__foot { display: flex; justify-content: flex-end; margin: -0.5rem 0 -0.75rem; }

/* The change: the house .float-table on an inset tonal panel, so what changed is the first thing the eye lands on. */
.log-entry__changes { background: var(--md-sys-color-surface-container-low); border-radius: var(--r-sm); padding: 0.25rem 0.5rem; }
.log-changes { table-layout: fixed; }
.log-changes tbody td { vertical-align: top; } /* a drift badge under a value keeps its field on the same line */
.log-changes tbody tr:hover td { background: none; } /* a record of what happened, not a list to act on */
.log-changes thead th:first-child { padding-left: 12px; } /* headers line up with the cells below */
.log-changes th:first-child { width: 28%; }
.log-change__field { font-weight: 600; white-space: nowrap; }
.log-change__old { color: var(--md-sys-color-on-surface-variant); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.log-change__old .chip { text-decoration: inherit; }
.log-change__new { font-weight: 600; color: var(--md-sys-color-on-surface); }
.log-change__chip--added { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.log-change__chip--removed { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.log-change__now { display: table; margin-top: 0.35rem; font-weight: 500; }
.log-change__field, .log-change__old, .log-change__new { overflow-wrap: anywhere; }