/* ═══ ACTIVITY 📡 — gallery / runs / published ═══
   Three tabs behind one nav slot. Built to be read one-handed on a phone: the
   rows are a thumb, two lines and a status, and nothing needs a second column
   to make sense. Desktop just gets more room for the same shapes. */

.act-head { margin-bottom: 10px; }

/* ── the tab strip ───────────────────────────────────────────────────────── */
.act-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px;
  position: sticky; top: 0; z-index: 3;
  background: var(--paper); padding: 6px 0;
}
.act-tab {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 6px;
  border: 2.5px solid var(--ink-line); border-radius: 12px;
  background: var(--paper-2); cursor: pointer;
  font-family: var(--f-display); font-size: 14px; letter-spacing: 0.04em;
  box-shadow: 2px 2px 0 var(--panel-shadow);
  /* 32px minimum tap target on phones — see the note in app.css. */
  min-height: 40px;
}
.act-tab.is-on {
  background: var(--riso-yellow);
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--panel-shadow);
}
.act-tab-ico { width: 1.1em; height: 1.1em; }
/* Under ~380px the three labels stop fitting beside their marks. The mark is
   the weaker signal of the two, so that is what goes. */
@media (max-width: 380px) {
  .act-tab-ico { display: none; }
  .act-tab { font-size: 13px; }
}

/* ── rows, shared by Runs and Published ──────────────────────────────────── */
.act-list { display: flex; flex-direction: column; gap: 10px; }
.act-entry {
  border: 2.5px solid var(--ink-line); border-radius: var(--radius);
  background: var(--paper-2); box-shadow: 3px 3px 0 var(--panel-shadow);
  overflow: hidden;
}
.act-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; text-decoration: none; color: inherit;
  width: 100%; text-align: left; background: none; border: 0;
}
.act-row.is-open { cursor: pointer; }
.act-thumb {
  position: relative; flex: 0 0 62px; width: 62px; height: 62px;
  border: 2px solid var(--ink-line); border-radius: 10px;
  overflow: hidden; background: var(--paper-sunk);
}
.act-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.act-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); border: 2px solid var(--ink-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; padding-left: 2px;
}
.act-meta { min-width: 0; }
.act-title {
  font-family: var(--f-head); font-weight: 700; font-size: 14px;
  /* Two lines then ellipsis: a long manga premise would otherwise push the
     status chip off a narrow screen entirely. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.act-sub { margin-top: 2px; }
.act-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.act-stamp { width: 22px; height: 22px; opacity: 0.85; }
.act-chevron { font-size: 22px; color: var(--ink-soft); }

/* The clip, played where you found it rather than on another page. */
.act-row-body:not(:empty) { padding: 0 10px 10px; }
.act-video { width: 100%; max-height: 62vh; border: 2px solid var(--ink-line); border-radius: 10px; display: block; }

.act-actions { padding: 0 10px 9px; gap: 8px; flex-wrap: wrap; }
.act-publish { margin-bottom: 12px; }
.act-empty { padding: 22px 16px; }

/* The embedded gallery brings its own filter row and grid; it only needs the
   screen title and lede stripped, which renderGrid's compact mode does. */
.act-gallery .gal-filters { margin-top: 0; }

@media (min-width: 1024px) {
  .act-tabs { max-width: 520px; }
  .act-thumb { flex-basis: 78px; width: 78px; height: 78px; }
  .act-title { font-size: 15px; }
}