/* Folder activity (public/activity.js): the rows in the details panel, and Recent ▸ Activity.

   Its own sheet for the reason security.css and push.css give: one feature's rules, kept out of
   the file every page shares. It declares no tokens — every colour, radius and size is one of
   styles.css's, so all seven themes dress it without knowing it exists. The panel reuses the
   history block's frame (.hist) and the overview's (.pod); Recent reuses the timeline's
   (.tl, .tl-group, .tl-head, .tl-items). Only the rows are new, and they are buttons rather than
   .tl-item so app.js's own click and keyboard handling for file rows never mistakes one for a
   file. */

/* ---- the panel ---- */
.act-hist .hist-hd { margin-bottom: 2px; }
.act-rows { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.act-r {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: calc(5 * var(--sp)) calc(6 * var(--sp)); border: 0; background: none; color: var(--text2);
  border-radius: calc(var(--r-2xs) + var(--r-half)); font: inherit; font-size: calc(var(--fs-md) + var(--fs-half));
  text-align: left; cursor: pointer;
}
.act-r:hover { background: var(--glass); }
.act-r:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.act-r[disabled] { cursor: default; }
.act-r[disabled]:hover { background: none; }
.act-r .avatar { --av: 18px; flex: none; }
.act-r { align-items: flex-start; }
.act-r .avatar, .act-r .act-anon, .act-r .act-when { margin-top: 1px; }
/* Two lines, then clipped: the rail is ~260px, and one line left a sentence as "covbob renamed lay�". */
.act-t {
  flex: 1; min-width: 0; overflow: hidden; color: var(--mut); line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.act-t b { color: var(--text2); font-weight: var(--fw-semi); }
/* The sentence, and for a move where it went on a line of its own: at the end of a long file
   name, "to <folder>" was the part the clamp cut off, and it is the useful part. */
.act-tc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.act-to { font-size: var(--fs-sm); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-who { color: var(--text2); font-weight: var(--fw-semi); }
.act-when { flex: none; font-family: var(--font-meta); font-size: var(--fs-sm); color: var(--faint); }
.act-note { margin: 6px 0 0; font-size: calc(var(--fs-md) + var(--fs-half)); color: var(--faint); }
.act-all {
  display: block; margin: 8px 0 0 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--accent-text);
}
.act-all:hover { text-decoration: underline; }
.act-pod .pod-lbl { margin-bottom: 6px; }
.act-pod .act-rows { margin-top: 0; }
.act-pod .act-r { padding-left: 0; padding-right: 0; }
.act-pod .act-all { margin-left: 0; }

/* A drop through a link has nobody to show: a plain disc with the link glyph, sized like an avatar. */
.act-anon {
  --av: 18px; width: var(--av); height: var(--av); flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--chip); color: var(--faint);
}
.act-anon svg { width: 62%; height: 62%; }

/* ---- Recent ▸ Activity ---- */
.view-head .act-tabs { margin-left: auto; align-self: center; }
.act-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0;
  padding: calc(9 * var(--sp)) calc(13 * var(--sp)); border: 0; border-bottom: 1px solid var(--line-soft);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background .12s;
}
.act-item:last-child { border-bottom: 0; }
.act-item:hover { background: var(--glass); transition-duration: 0s; }
.act-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.act-item[disabled] { cursor: default; }
.act-item[disabled]:hover { background: none; }
.act-item .avatar, .act-item .act-anon { --av: 28px; flex: none; }
.act-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.act-line {
  font-size: calc(var(--fs-base) + var(--fs-half)); color: var(--mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-line b { color: var(--text); font-weight: var(--fw-semi); }
.act-line .act-who { color: var(--text); }
.act-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.act-ic { display: inline-grid; place-items: center; color: var(--faint); }
.act-ic svg { width: 14px; height: 14px; }
.act-in, .act-via {
  font-size: var(--fs-sm); color: var(--faint); background: var(--chip);
  padding: calc(2 * var(--sp)) calc(8 * var(--sp)); border-radius: var(--r-pill);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch;
}
/* Where a move went keeps its whole name; where it came from gives way first. */
.act-in.act-dest { flex: none; max-width: 60%; color: var(--text2); }
/* A move taken back by its Undo: one short word that must not be the part cut off. */
.act-in.act-undone { flex: none; }
.act-time { flex: none; font-family: var(--font-meta); font-size: var(--fs-sm); color: var(--faint); }
.act-warn { margin: 0 0 12px; }
.act-more { display: flex; justify-content: center; margin: 16px 0 4px; }

@media (max-width: 640px) {
  .act-item { gap: 10px; padding: calc(9 * var(--sp)) calc(11 * var(--sp)); }
  .act-item .avatar, .act-item .act-anon { --av: 24px; }
  .act-line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* Layout, zoom and sort mean nothing to the feed. */
html[data-view=recent][data-recent=activity] :is(#seg-layout, #seg-size, #btn-sort, #btn-pin) { display: none; }