/* The activity log page (#3453; Figma 21:32742), activity-page.ts. The table
 * is ds/surfaces.css's .ui-table in its .ui-table-card with the pagination
 * footer; this sheet only sets the page head and the columns. Tokens only. */
.act-page { display: flex; flex-direction: column; }
/* Figma #059669 at 12px is 3.8:1 on white; --live-text is the AA green. */
.act-back {
  display: inline-flex; align-items: center; gap: 6px; width: max-content;
  font: 600 12px/15px var(--font-sans); color: var(--live-text); text-decoration: none;
}
.act-back:hover { text-decoration: underline; }
.act-back svg { width: 14px; height: 14px; }
/* 21:32899: back link over the title on the left, Refresh top-aligned on the right. */
.act-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.act-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.act-title-text { margin: 0; font: var(--type-h1); letter-spacing: 0; color: var(--fg-strong); }
.act-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.act-refresh svg, .act-export svg { width: 14px; height: 14px; }
.act-sub { margin: var(--space-4) 0 var(--space-6); font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }

/* Columns (21:32928): 32 + 40 for the dot, Activity ~317, Actor ~212, Details the rest. */
.act-table { table-layout: fixed; min-width: 760px; }
.act-table col.act-col-dot { width: 72px; }
.act-table col.act-col-title { width: 317px; }
.act-table col.act-col-actor { width: 212px; }
.act-table col.act-col-when { width: 112px; }
.act-table .act-dot { padding-left: var(--space-7); padding-right: 0; }
.act-table .act-when { padding-right: var(--space-7); }
.act-table th { padding-top: 0; padding-bottom: 0; }
.act-table td { height: 61px; box-sizing: border-box; padding-top: var(--space-5); padding-bottom: var(--space-5); overflow-wrap: anywhere; }
.act-title { font: 600 13px/19.5px var(--font-sans); color: var(--fg); }
.activity-critical .act-title { color: var(--danger-fg); }
.act-actor { font: 400 13px/19.5px var(--font-sans); color: var(--fg); }
.act-none { color: var(--fg-muted); }
.act-detail { font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.act-when time { font: var(--type-meta); color: var(--fg-muted); white-space: nowrap; }
.act-card .ms-state { padding: var(--space-7) var(--space-5); }

/* Export CSV's outcome (#3517): a capped or failed export says so here. */
.act-export-note { margin: calc(-1 * var(--space-4)) 0 var(--space-4); font: var(--type-meta); color: var(--fg-muted); }
.act-export-note:empty { display: none; }

/* The feed and Log Settings side by side (21:32742): the card is 260 wide,
 * 24 from the table. Below a 1300px window the table would have to scroll
 * sideways beside it, so the card drops below the table. */
.act-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-6); align-items: start; }
.act-main { min-width: 0; }
@media (max-width: 1300px) { .act-layout { grid-template-columns: minmax(0, 1fr); } }

/* Log Settings (21:33133): a DS card, 24 in, 20 between its parts. */
.act-side { display: flex; flex-direction: column; gap: var(--space-4); }
.act-prefs { display: flex; flex-direction: column; gap: 20px; }
.act-prefs-head { display: flex; flex-direction: column; gap: 6px; }
.act-prefs-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 700 13px/normal var(--font-sans); color: var(--fg-strong); }
.act-prefs-title svg { width: 16px; height: 16px; color: var(--fg-muted); }
/* Figma's #9ca3af at 10px fails AA: --fg-muted, as ds/surfaces.css does. */
.act-prefs-sub { margin: 0; font: var(--type-code-eyebrow); letter-spacing: .2px; color: var(--fg-muted); }
.act-prefs-eyebrow { margin: 0 0 -10px; font: 600 10px/normal var(--font-mono); letter-spacing: var(--type-code-eyebrow-tracking); text-transform: uppercase; color: var(--fg-muted); }
.act-pref-list { display: flex; flex-direction: column; gap: var(--space-4); }
.act-pref { display: flex; align-items: flex-start; gap: var(--space-3); }
.act-pref-icon {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: var(--radius); background: var(--surface-sunken); color: var(--fg-muted);
}
.act-pref-icon.is-danger { background: var(--danger-bg); color: var(--danger-fg); }
.act-pref-icon svg { width: 16px; height: 16px; }
.act-pref-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.act-pref-title { font: 600 13px/19.5px var(--font-sans); color: var(--fg); cursor: pointer; }
.act-pref-sub { font: var(--type-meta); color: var(--fg-muted); }
.act-pref .switch { margin-top: 2px; }
.act-pref-note { margin: var(--space-3) 0 0; font: var(--type-meta); color: var(--danger-fg); }
.act-side .act-pref-note:first-child { margin-top: 0; }
.act-prefs-help { display: flex; gap: var(--space-2); margin: 0; padding: 0 var(--space-2); font: 400 11px/18px var(--font-sans); color: var(--fg-muted); }
.act-prefs-help svg { flex: none; width: 12px; height: 12px; margin-top: 3px; }