/* pages/activity.css — Activity (Builder D). Page-specific styles only; the
 * design system (tokens, panels, cards, tables, chips, msg, stat tiles) lives in
 * the shared webkit (kit.css). Everything here reuses kit.css custom properties. */

.act-intro { max-width: 60ch; margin-top: -4px; }

/* subject chooser */
.act-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.act-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600;
}
.act-pick:hover { background: var(--surface-2); border-color: var(--primary); }
.act-pick .nav-ico, .act-pick .ico { color: var(--primary); flex: none; }
.act-pick span { display: flex; flex-direction: column; min-width: 0; }
.act-pick small { font-weight: 400; }

/* header + subject switcher */
.act-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.act-sub { font-size: 0.9rem; margin-top: 2px; }
.act-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.act-subject { max-width: 220px; }

a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn.ghost { background: none; }
.btn.ghost:hover { background: var(--surface-2); }

/* filter bar */
.act-filters { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.act-filter { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.act-filter-lbl { color: var(--text-muted); font-weight: 600; }
.act-filters-spacer { flex: 1 1 auto; }
.act-modes { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; align-self: flex-end; }
.act-mode { border: none; border-radius: 0; background: var(--surface); padding: 8px 14px; font-weight: 600; }
.act-mode:hover { background: var(--surface-2); }
.act-mode.on { background: var(--primary); color: #fff; }
.act-mode.on:hover { background: var(--primary-strong); }

/* category blocks (grouped view) */
.act-cat { margin-bottom: 12px; }
.act-cat-sum {
  display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; cursor: pointer;
  font-size: 0.92rem; list-style: none;
}
.act-cat-sum::-webkit-details-marker { display: none; }
.act-cat-name { font-weight: 700; font-size: 1rem; }
.act-cat-group { font-size: 0.78rem; }
.act-cat-counts { margin-left: auto; font-size: 0.86rem; }
.act-cat-seen { font-size: 0.8rem; }
.act-cat table { margin-top: 10px; }

/* Activity tables carry many columns (site, counts, last seen, Allow/Block). On a
 * phone they are wider than the viewport, so each table scrolls INSIDE its panel
 * instead of forcing the whole page to scroll sideways (which pushed the one-tap
 * Allow/Block controls — the audit action — off-screen). */
.act-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* numbers + tags */
.n-bad { color: var(--danger); font-weight: 600; }
.n-ok { color: var(--ok); font-weight: 600; }
.act-site { font-family: var(--mono); font-size: 0.86rem; word-break: break-all; }

.tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em; }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-bad { background: var(--danger-soft); color: var(--danger); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }

/* one-tap allow/block */
.act-actions { display: inline-flex; gap: 6px; }
.mini { padding: 4px 11px; font-size: 0.8rem; font-weight: 600; border-radius: var(--radius-sm); }
.mini.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.mini.ok:hover { background: var(--ok-soft); }
.mini.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.mini.bad:hover { background: var(--danger-soft); }

@media (max-width: 640px) {
  .act-cat-counts { margin-left: 0; }
  .act-head-tools { width: 100%; }
  .act-subject { max-width: none; flex: 1; }

  /* Pin the Allow/Block column to the right edge of the scrolling table so the
   * core audit action stays on screen while the data columns scroll under it. */
  .act-scroll th:last-child, .act-scroll td:last-child {
    position: sticky; right: 0; background: var(--surface);
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.25);
  }
}