/* The activity console on the monitor page (17 September 2026).
 *
 * Loaded through {% block head %} on the monitor detail page only. Built out of
 * firm.css variables; the console keeps its dark ground in both themes, as
 * .log-pane does.
 *
 * Why there is a wrapper: the feed is re-fetched every 3 s and the response
 * replaces the <ol>. In firm.css the <ol> (.log-pane) is also the scroll
 * container, so every poll threw a reader who had scrolled down back to the
 * top. Here the scroll container is .activity-scroll, which htmx never
 * replaces: the <ol> inside it just grows to its content.
 */
.activity-scroll{
  max-height:440px;overflow:auto;background:#05070a;color-scheme:dark;
  overscroll-behavior:contain;
}
.activity-scroll .log-pane{max-height:none;overflow:visible}

/* The line above the console: what the monitor is doing right now. */
.act-now{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line);
  font-size:13px;line-height:1.5;
}
.act-now .dot{
  flex:none;width:7px;height:7px;border-radius:50%;background:var(--dot-off);
}
.act-now .txt{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.act-now .btn{flex:none}
.act-now.tone-ok .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.act-now.tone-warn .dot{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.act-now.tone-warn .txt{color:var(--warn)}
.act-now.tone-danger .dot{background:var(--danger);box-shadow:0 0 8px var(--danger)}
.act-now.tone-danger .txt{color:var(--danger)}
.act-now.tone-muted .txt{color:var(--muted)}

/* A folded count reads as a count, not as a footnote. firm.css paints
 * .act-count in the console's dim grey; this gives it a pill in the row's own
 * colour so "×48" is the first thing a reader sees on a retry line. */
.activity-feed .act .act-count{
  display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;
  border:1px solid currentColor;color:inherit;opacity:.9;
  font-size:11px;font-weight:700;line-height:1.6;vertical-align:1px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.activity-feed .act.tone-muted .act-count{color:#9aa1ad}

@media (max-width:640px){
  .activity-scroll{max-height:360px}
  .act-now{padding:10px 14px}
  .act-now .btn{flex-basis:100%;align-self:flex-start;width:max-content}
}