/* Phase B: Activity screen and card */
.act-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 14px; align-items: center; }
.act-scope, .act-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.act-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.act-chip:hover { background: var(--hover); }
.act-chip.on { background: var(--tint); border-color: var(--brand); color: var(--brand-2); }
.act-chip.clear { border-style: dashed; color: var(--ink-3); }
.act-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.act-day { margin-bottom: 18px; }
.act-day h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.act-list { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.act-list > li + li { border-top: 1px solid var(--line); }
.act-row { display: grid; grid-template-columns: 52px 118px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 14px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
a.act-row:hover { background: var(--hover); }
a.act-row:focus-visible { outline: none; box-shadow: inset var(--focus); }
.act-time { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; }
.act-kind { color: var(--brand-2); font-weight: 700; font-size: 12.5px; }
.act-text { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.act-who { color: var(--ink-2); font-size: 12.5px; }
.act-who.sys { color: var(--ink-3); font-style: italic; }
.act-more { display: flex; justify-content: center; padding: 8px 0 16px; }
.act-end, .act-note { text-align: center; color: var(--ink-3); font-size: 13px; margin: 8px 0 16px; }
.act-card .act-list { border: 0; border-radius: 0; background: transparent; }
.act-card .act-row { grid-template-columns: 48px 1fr; padding: 8px 4px; }
.act-card .act-kind, .act-card .act-who { display: none; }
.act-card .act-note { margin: 4px 0; text-align: left; }
@media (max-width: 760px) {
  .act-row { grid-template-columns: 48px 1fr; row-gap: 2px; }
  .act-kind, .act-who { grid-column: 2; }
}