/* Activity page content. Every rule is scoped under .act. */

.act{
  --bg:#06080e; --card:#0d111b; --bg2:#070a12; --line:#1e2637;
  --fg:#e8ecf5; --dim:#8b93a7; --accent:#f5a623; --peri:#4a72ff;
  --up:#23b26d; --down:#ef5b67;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.act *{box-sizing:border-box;margin:0;padding:0}
.act{background:var(--bg);color:var(--fg);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.act .wrap{width:min(1100px,100%);margin:0 auto;padding:18px 16px 90px}

/* head */
.act .hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.act .hd h1{font-size:clamp(24px,5vw,32px);letter-spacing:-.02em;margin-bottom:4px}
.act .hd p{color:var(--dim);font-size:13.5px;max-width:56ch}
.act .live{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:7px 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);color:var(--accent);
  font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.act .live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:act-pulse 2s infinite}
@keyframes act-pulse{50%{opacity:.25}}

/* stats: two up on a phone, four on a desk */
.act .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:720px){.act .stats{grid-template-columns:repeat(4,1fr)}}
.act .stat{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.act .stat span{display:block;color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.act .stat b{display:block;margin-top:6px;font-size:21px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* list */
.act .shell{background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.act .shead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.act .shead b{font-size:14px}
.act .shead span{color:var(--dim);font-size:12px}
.act .abtn{min-height:40px;padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:transparent;
  color:var(--dim);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:color .16s,border-color .16s,transform .16s}
.act .abtn:hover{color:var(--fg);border-color:var(--accent);transform:translateY(-1px)}
.act .filters{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.act .cnt{margin-left:5px;font-weight:800;opacity:.65;font-variant-numeric:tabular-nums}
.act .filters .abtn.on .cnt{opacity:1}
.act .filters .abtn.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

.act .rows{padding:6px}
.act .row{width:100%;display:grid;gap:12px;align-items:center;border:0;background:transparent;color:inherit;
  text-align:left;padding:12px;border-radius:11px;cursor:pointer;min-height:64px;
  grid-template-columns:38px minmax(0,1fr) auto;
  animation:act-in .28s cubic-bezier(.22,1,.36,1) both;transition:background .15s}
@media(min-width:760px){.act .row{grid-template-columns:38px minmax(0,1.5fr) minmax(0,1fr) 104px 74px}}
.act .row:hover{background:rgba(255,255,255,.04)}
@keyframes act-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.act .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;
  border:1px solid var(--line);color:var(--peri);background:color-mix(in srgb,var(--peri) 12%,transparent)}
.act .ic.done{color:var(--up);background:color-mix(in srgb,var(--up) 12%,transparent)}
.act .ic.fail{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
.act .main b,.act .rt b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act .main span,.act .rt span{display:block;color:var(--dim);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act .rt{display:none}
@media(min-width:760px){.act .rt{display:block}}
.act .st{justify-self:start;font-size:10.5px;font-weight:800;padding:5px 9px;border-radius:999px;white-space:nowrap;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.act .st.done{color:var(--up);background:color-mix(in srgb,var(--up) 13%,transparent)}
.act .st.fail{color:var(--down);background:color-mix(in srgb,var(--down) 13%,transparent)}
.act .tm{color:var(--dim);font:11px var(--mono);text-align:right;display:none}
@media(min-width:760px){.act .tm{display:block}}
.act .meta{display:flex;gap:8px;align-items:center;justify-self:end}

.act .empty{padding:56px 20px;text-align:center;color:var(--dim);font-size:13.5px}
.act .empty b{display:block;color:var(--fg);font-size:16px;margin-bottom:6px}
.act .skel{height:64px;border-radius:11px;margin:6px;background:linear-gradient(90deg,var(--line) 25%,var(--bg2) 50%,var(--line) 75%);background-size:200% 100%;animation:act-sh 1.3s linear infinite}
@keyframes act-sh{to{background-position:-200% 0}}

/* detail sheet: a bottom sheet on a phone, a dialog on a desk */
.act .amodal{position:absolute;inset:0;z-index:100;display:none;background:rgba(2,5,11,.72);backdrop-filter:blur(6px)}
.act .amodal.on{display:grid;align-items:end}
@media(min-width:720px){.act .amodal.on{place-items:center;padding:22px}}
.act .dlg{width:100%;max-height:86vh;overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:18px 18px 0 0;padding:18px;animation:act-up .26s cubic-bezier(.22,1,.36,1)}
@media(min-width:720px){.act .dlg{width:min(640px,100%);border-radius:18px}}
@keyframes act-up{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
.act .dhd{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.act .dhd h2{font-size:18px;letter-spacing:-.01em}
.act .dhd p{color:var(--dim);font-size:12px;margin-top:3px}
.act .x{min-width:44px;min-height:44px;border:0;background:transparent;color:var(--dim);font-size:24px;cursor:pointer;border-radius:10px}
.act .x:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.act .kvs{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.act .kvs{grid-template-columns:1fr 1fr}}
.act .kv{padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.act .kv span{display:block;color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.act .kv b{display:block;margin-top:4px;font-size:13px;word-break:break-word;font-variant-numeric:tabular-nums}
.act .note{margin-top:12px;color:var(--dim);font-size:11.5px}
@media(prefers-reduced-motion:reduce){.act .row,.act .dlg,.act .skel,.act .live i{animation:none}.act .abtn,.act .row{transition:none}}


/* the row logo is the token it moved, with its network on the corner (os-core tokenMark), no tinted tile behind it */
.act .ic, .act .ic.done, .act .ic.fail { background: transparent; border: 0; border-radius: 0; color: inherit; width: 38px; height: 38px; }