/* The Logs page (activity/index.html, _rows.html): the console's Activity log on the components of app.css. One
   panel: a single 48 px head row with the tabs and their counts at the left and the search box, the Filters fold
   and Export at the right; the filter bar (the presets as select chips, the level, kind, bot, source and window
   fields, the total at the right) folded under it, open when a filter is set; then the lines in one run (time ·
   picture with the level's dot at its corner · message over "who · what" · links); the retention note at the
   foot with the background jobs folded into it. Page-local here: the head row, the line grid and its pictures.
   Every colour is a token, so the light theme follows; nothing moves under the pointer. */

/* ── the page: the "showing the log of" row above the panel ── */
.act__ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.act__ctxchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 5px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); color: var(--ink); font-weight: 500; }
.act__ctxchip:hover { text-decoration: none; background: var(--panel-2); }
.act__ctxchip .bavatar__game { display: none; }
.act__ctxchip .icon { color: var(--ink-3); margin-left: 4px; }

/* ── the panel head: one row, the tabs at the left, the tools at the right ── */
.act__panel { overflow: visible; }
.act__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 0 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.act__tabs { padding: 0; min-width: 0; }
.act__tabs .ftab { height: 48px; color: var(--ink-3); }
.act__tabs .ftab:hover, .act__tabs .ftab.is-active { color: var(--ink); }
/* the count pill is the same on every tab, active or not (the mockup's panel-2 / ink-3 mono pill) */
.act__tabs .ftab__n, .act__tabs .ftab.is-active .ftab__n { background: var(--panel-2); color: var(--ink-3); box-shadow: none; }
.act__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 7px 0; min-width: 0; }
.act__search { height: 34px; width: min(240px, 100%); flex: 0 1 240px; min-width: 0; }
.act__search input { font-size: 13px; }
.act__filterbtn, .act__export { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.act__filterbtn { gap: 6px; color: var(--ink-2); }
.act__filterbtn .ftab__n { height: 18px; }
.act__filterbtn .icon { transition: transform .15s; }
.act__filterbtn.is-open { color: var(--ink); background: var(--panel-2); }
.act__filterbtn.is-open .icon { transform: rotate(180deg); }

/* ── the filter fold: the presets, the fields, the total ── */
.act__bar { gap: 8px 10px; }
.act__field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.act__field .input { width: auto; min-width: 0; }
.act__field select.input { padding-right: 24px; }
.act__source { width: 130px !important; }
.act__bar .filterbar__count { white-space: nowrap; }

/* ── the lines: time · picture · text · links, dashed rules between, raised on hover ── */
.act__rows { min-width: 0; }
.act__row { display: grid; grid-template-columns: 60px 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 18px; border-bottom: 1px dashed var(--line-2); min-width: 0; }
.act__row:hover { background: var(--panel-2); }
.act__rows > .act__row:last-child { border-bottom: 0; }
.act__time { display: flex; flex-direction: column; gap: 3px; font: 12px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.act__date { font-size: 10.5px; color: var(--ink-3); opacity: .8; }
/* the picture: always a filled rounded square, 34 px; the level's dot at its bottom-right corner */
.act__pic { position: relative; width: 34px; height: 34px; flex: none; display: block; }
.act__pic .src, .act__tile, .act__img { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); }
.act__tile { display: grid; place-items: center; color: var(--ink-3); }
.act__tile .mlogo { width: 20px; height: 20px; border-radius: 5px; vertical-align: 0; display: block; }
.act__img { display: block; object-fit: cover; }
/* a picture that does not arrive: app.js marks the image is-missing (src dropped), the tile stays filled and the
   picture glyph beside it shows in its place */
.act__pic .thumb.is-missing { background: var(--panel-2); opacity: 1; }
.act__glyph { display: none; position: absolute; inset: 0; }
.act__pic .thumb.is-missing + .act__glyph { display: grid; }
.act__initials { font: 600 11px/1 var(--mono); color: var(--ink-2); letter-spacing: .02em; }
.act__dot { position: absolute; right: -3px; bottom: -3px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel); background: var(--neutral); }
.act__row--mute .act__dot { background: var(--mute); } .act__row--info .act__dot { background: var(--info); } .act__row--ok .act__dot { background: var(--ok); }
.act__row--warn .act__dot { background: var(--warn); } .act__row--bad .act__dot { background: var(--bad); }
.act__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; color: var(--ink); }
.act__sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act__refs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.act__ref { font: 500 12px/1 var(--mono); height: 28px; }

/* ── the foot: the retention note, the background jobs folded under it ── */
.act__foot { flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.act__note { flex: 1 1 320px; min-width: 0; }
.act__jobs { flex: 0 1 auto; min-width: 0; }
.act__jobs[open] { flex-basis: 100%; }
.act__jobs > summary.act__jobs-head { gap: 7px; height: 24px; padding: 0 2px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.act__jobs-meta { display: inline-flex; gap: 6px; font-weight: 400; }
.act__jobwrap { margin: 10px -18px -12px; border-top: 1px solid var(--line); background: var(--panel); }
.act__jobtable td, .act__jobtable th { white-space: nowrap; }
.act__joberr { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }

/* ── a phone: the tabs wrap, the tools take their own row, the links go under the text, nothing overflows ── */
@media (max-width: 760px) {
  .act__head { padding: 0 10px; }
  .act__tabs .ftab { height: 42px; padding: 0 8px; }
  .act__tools { flex-basis: 100%; margin-left: 0; padding: 0 0 10px; }
  .act__search { flex: 1 1 120px; width: auto; }
  .act__bar { padding: 10px 12px; }
  .act__bar .selchips { max-width: 100%; }
  .act__bar .filterbar__count { margin-left: 0; flex-basis: 100%; }
  .act__row { grid-template-columns: 52px 34px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .act__time { font-size: 11px; }
  .act__text { -webkit-line-clamp: 3; }
  .act__refs { grid-column: 3; justify-content: flex-start; }
  .act__foot { padding: 10px 12px; }
  .act__jobwrap { margin: 10px -12px -10px; }
}