/* Activity page in the redesign (flag new_ui). Layout from css/new-ui/layout.css;
   this file only styles what is particular to the page. */
body.new-ui #viewActivity > h1,
body.new-ui #viewActivity > .sub,
body.new-ui #actEmpty,
body.new-ui #actCard { display: none !important; }
body:not(.new-ui) #actPage { display: none; }

body.new-ui .act-page .act-grid { align-items: start; transition: opacity .18s ease; }
body.new-ui .act-page .act-busy { opacity: .55; pointer-events: none; }
body.new-ui .act-page .act-muted { color: var(--ui-ink-3); font-size: 13px; margin: 0; }
body.new-ui .act-page .act-empty-t { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ui-ink); }
body.new-ui .act-page .ui-empty .ui-btn { margin-top: 10px; }
body.new-ui .act-page .act-grid > .ui-kpi { align-self: stretch; }
body.new-ui .act-page .ui-kpi .mid { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabs: same as the Questions table. */
body.new-ui .act-page .act-tabbar { padding: 12px 20px 4px; }
body.new-ui .act-page .act-tabs { background: var(--ui-paper-2); border-color: var(--ui-line); max-width: 100%; overflow-x: auto; }
body.new-ui .act-page .act-tabs button { padding: 5px 11px; font-size: 13px; color: var(--ui-ink-2); white-space: nowrap; }
body.new-ui .act-page .act-tabs button span { margin-left: 4px; font: 12px var(--ui-mono); color: var(--ui-ink-3); }
body.new-ui .act-page .act-tabs button.active { background: var(--ui-paper); color: var(--ui-ink); }

/* The timeline: a day label, then one line per event. */
body.new-ui .act-page .act-list { list-style: none; margin: 0; padding: 0 0 8px; }
body.new-ui .act-page .act-day { padding: 14px 20px 6px; font-size: 12.5px; color: var(--ui-ink-3); border-bottom: 1px solid var(--ui-line-2); }
body.new-ui .act-page .act-day span { font-weight: 500; }
body.new-ui .act-page .act-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--ui-line-2);
}
body.new-ui .act-page .act-item:hover { background: var(--ui-hover); }
body.new-ui .act-page .act-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ui-paper-2); border: 1px solid var(--ui-line-2); }
body.new-ui .act-page .act-ic svg { width: 14px; height: 14px; fill: none; stroke: var(--ui-ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.new-ui .act-page .act-ic-delete svg { stroke: var(--ui-neg); }
body.new-ui .act-page .act-ic-delete { background: var(--ui-neg-soft); border-color: transparent; }
body.new-ui .act-page .act-what { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
body.new-ui .act-page .act-what b { font-weight: 500; }
body.new-ui .act-page .act-x { color: var(--ui-ink-2); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
body.new-ui .act-page .act-ws { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--ui-line); color: var(--ui-ink-2); }
body.new-ui .act-page .act-meta { display: flex; gap: 10px; font-size: 13px; color: var(--ui-ink-3); white-space: nowrap; }
body.new-ui .act-page .act-meta span { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
body.new-ui .act-page .act-meta time { font-family: var(--ui-mono); font-size: 12.5px; }
body.new-ui .act-page .act-tail:empty { display: none; }
body.new-ui .act-page .act-restore { padding: 4px 10px; font-size: 13px; min-height: 0; }
body.new-ui .act-page .act-cur { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--ui-accent-soft); color: var(--ui-ink); }
body.new-ui .act-page .act-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; color: var(--ui-ink-2); }
body.new-ui .act-page .act-pager > span:last-child { display: flex; gap: 8px; }

/* Side cards: set versions and who did what. */
body.new-ui .act-page .act-vers, body.new-ui .act-page .act-people { list-style: none; margin: 0; padding: 0; }
body.new-ui .act-page .act-vers li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ui-line-2); }
body.new-ui .act-page .act-vers li:first-child { padding-top: 0; }
body.new-ui .act-page .act-vers li:last-child { border-bottom: 0; padding-bottom: 0; }
body.new-ui .act-page .act-vers li > div { min-width: 0; }
body.new-ui .act-page .act-vers b { font: 600 14px var(--ui-mono); margin-right: 8px; }
body.new-ui .act-page .act-vers span { font-size: 13.5px; }
body.new-ui .act-page .act-vers small { display: block; font-size: 12.5px; color: var(--ui-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.new-ui .act-page .act-vcard .ui-card-f { padding-top: 12px; }
body.new-ui .act-page .act-people li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; }
body.new-ui .act-page .act-people span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.new-ui .act-page .act-people b { font: 500 12.5px var(--ui-mono); color: var(--ui-ink-2); }
body.new-ui .act-page .act-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; background: var(--ui-paper-2); border: 1px solid var(--ui-line-2); font: 600 11px var(--ui-font); font-style: normal; color: var(--ui-ink-2); }

@media (max-width: 1180px) {
  body.new-ui .act-page .act-grid > .ui-kpi:not(.ui-lead) { grid-column: span 6; }   /* the lead keeps the row */
  body.new-ui .act-page .act-tl { grid-column: span 12; }
  body.new-ui .act-page .act-side { grid-column: span 12; flex-direction: row; flex-wrap: wrap; }
  body.new-ui .act-page .act-side > .ui-card, body.new-ui .act-page .act-side > .ui-card:last-child { flex: 1 1 300px; }
}
@media (max-width: 900px) {
  body.new-ui .act-page .ui-kpi { padding: 14px 16px; }
  body.new-ui .act-page .ui-kpi .big { font-size: 30px; }
  body.new-ui .act-page .act-item { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 10px 16px; }
  body.new-ui .act-page .act-meta { grid-column: 2 / 3; grid-row: 2; }
  body.new-ui .act-page .act-tail { grid-column: 3; grid-row: 1 / 3; }
  body.new-ui .act-page .act-day { padding: 14px 16px 6px; }
  /* All five filters stay visible: they wrap instead of hiding behind a sideways scroll. */
  body.new-ui .act-page .act-tabbar { padding: 12px 16px 4px; }
  body.new-ui .act-page .act-tabs { display: flex; flex-wrap: wrap; overflow: visible; }
  body.new-ui .act-page .act-pager { flex-direction: column; align-items: stretch; }
  body.new-ui .act-page .act-pager > span:last-child > .ui-btn { flex: 1; }
}