/* Activity (See) page. Layered on style.css; uses its variables with
   fallbacks so it renders under either control-plane theme. Mirrors
   faultwall-ops/mocks/2-activity-feed.html. No emoji. */
.wrap.wide { max-width: 1240px; }
.crumb { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.lede { font-size: 15px; color: var(--muted); margin: 0 0 10px; max-width: 760px; }
.privacy-cap { font-size: 13px; color: var(--muted); border-left: 2px solid var(--accent); padding: 3px 0 3px 10px; margin: 0 0 22px; max-width: 760px; }
.btnlink { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 7px 14px; border: 1px solid var(--line, var(--border)); color: var(--fg); text-decoration: none; }
.btnlink:hover { border-color: var(--accent); }

.banner { border: 1px solid #e6d3a8; background: var(--amber-soft); border-radius: 4px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 14px; }
.banner .grow { flex: 1; }
.banner b { color: var(--yellow); }
.banner.unnamed code { color: var(--yellow); }
.hidden { display: none !important; }

.pill.warn { background: var(--amber-soft); color: var(--yellow); border: 1px solid #e6d3a8; }
.pill.neutral { color: var(--muted); border: 1px solid var(--line, var(--border)); }

.act-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .act-layout { grid-template-columns: 1fr; } .act-side { position: static; } }
.act-layout > * { min-width: 0; }
.act-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 10px; }
.act-side h2 { margin-bottom: 4px; }
.agent { border: 1px solid var(--line, var(--border)); border-radius: 4px; padding: 14px 16px; background: var(--card); color: var(--ink); font-family: var(--sans); font-weight: 400; cursor: pointer; text-align: left; width: 100%; }
.agent:hover { border-color: var(--accent); background: var(--card); color: var(--ink); }
.agent.sel { border-color: var(--accent); }
.agent .nm { font-family: var(--mono); font-weight: 600; font-size: 14px; word-break: break-all; }
.agent .sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.agent .big { font-size: 22px; font-weight: 700; margin-top: 8px; }
.agent .big small { font-size: 12px; font-weight: 400; color: var(--muted); font-family: var(--mono); }
.agent .pills { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--sans); font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--line, var(--border)); color: var(--muted); background: transparent; cursor: pointer; box-shadow: none; border-radius: 3px; font-weight: 500; }
.chip:hover { color: var(--fg); background: transparent; border-color: var(--muted); transform: none; box-shadow: none; }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--green-soft); }
select.win, input.date { width: auto; padding: 6px 10px; font-family: var(--mono); font-size: 12px; border: 1px solid var(--line, var(--border)); background: var(--panel-2); color: var(--fg); }
.noise { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.noise input { width: auto; margin: 0; accent-color: var(--accent); }
.live { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.live .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
.live.paused .dot { background: var(--muted); }

.summary { list-style: none; margin: 0; padding: 0; }
.summary li { font-family: var(--mono); font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line, var(--border)); }
.summary li:last-child { border-bottom: none; }
.summary li.hot { color: var(--yellow); }

.feed td { vertical-align: top; }
.feed td.q { color: var(--fg); white-space: normal; word-break: break-word; max-width: 560px; }
.feed td.q .nosh { color: var(--muted); }
.feed tr.hot td { background: #fbf7ec; }
.feed tr.hot td.q { color: var(--yellow); }
.feed tr.new td { animation: actflash 1.6s ease-out; }
@keyframes actflash { from { background: var(--green-soft); } to { background: transparent; } }
.feed td.t { color: var(--muted); white-space: nowrap; }
.feed td.n { text-align: right; white-space: nowrap; }
.why { font-family: var(--sans, inherit); font-size: 12.5px; color: var(--muted); white-space: normal; margin-top: 4px; }
.empty { color: var(--muted); padding: 24px 0; text-align: center; font-size: 14px; }
.more { margin-top: 14px; text-align: center; }

.export { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.export label { margin: 0; font-family: var(--mono); font-size: 12px; }
.tenant { font-family: var(--mono); font-size: 12px; color: var(--fg); border: 1px solid var(--line, var(--border)); padding: 3px 8px; margin-right: 12px; }
.feed td.q .shape { font-family: var(--mono); }
.feed tr.hot .why { color: var(--yellow, #e5c84a); }