/* vrc.dj  Tag editor activity banner + modal
   (partials/tag_activity_banner.php, partials/tag_activity_modal.php).
   Shown on /tags and in the Tag Queue studio; split out of the old
   tag-editor.css when the Settings tab moved to /tags/queue. */

/* One owner for "what colour is tag activity": the /tags banner's neutral
   variant and the details modal both read this. A slate derived from
   --text-muted, so it flips with the theme and never turns accent-purple. */
:root {
    --tag-activity-color: color-mix(in srgb, var(--text-muted) 80%, var(--border));
}

/* -------------------------------------------------------------------------
   Editor Activity banner + modal
   ------------------------------------------------------------------------- */

.te-activity-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 260px) auto;
    align-items: center;
    column-gap: 1.25rem;
    margin: 1rem 0 1.1rem;
    padding: .7rem 1.15rem .75rem;
    background: color-mix(in srgb, var(--bg-card) 62%, transparent);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    /* Bottom-only: negative spread keeps the blur inside the box everywhere
       except below, so the banner never sits in a halo of its own shadow. */
    box-shadow: 0 14px 26px -16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: visible;
    --te-act-color: var(--accent);
    cursor: pointer;
    transition: border-color .2s var(--ease, ease), transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.te-activity-banner::before,
.te-activity-banner::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}
.te-activity-banner::before {
    inset: 0;
    background: radial-gradient(circle at 82% 30%, color-mix(in srgb, var(--te-act-color) 26%, transparent), transparent 56%);
    opacity: .7;
    transition: opacity .2s var(--ease, ease);
}
.te-activity-banner::after {
    inset: 0;
    background:
        radial-gradient(circle at 6% 50%, color-mix(in srgb, var(--te-act-color) 18%, transparent), transparent 38%),
        radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--te-act-color) 14%, transparent), transparent 32%),
        linear-gradient(120deg, color-mix(in srgb, var(--te-act-color) 8%, transparent), transparent 38%, transparent 58%, color-mix(in srgb, var(--te-act-color) 5%, transparent));
}
.te-activity-banner > * { position: relative; z-index: 1; }
.te-activity-banner:hover,
.te-activity-banner:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--te-act-color) 30%, var(--border));
    box-shadow: 0 18px 32px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
    outline: none;
}
.te-activity-banner:hover::before,
.te-activity-banner:focus-visible::before { opacity: 1; }
.te-activity-banner--neutral {
    --te-act-color: var(--tag-activity-color);
    margin-top: 1rem;
}
.te-act-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Identity: the tagline over the title */
.te-act-zone--identity { gap: .3rem; }
.te-act-eyebrow {
    margin: 0;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--te-act-color) 70%, var(--text-muted));
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.te-act-title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    /* Was 1.05, which made the line box shorter than the glyphs. Combined with the
       `overflow: hidden` that .te-act-title-text needs for its ellipsis, that clipped
       descenders - the "g" in "Tag Queue" lost its tail. 1.25 clears the descender
       for the weights this font ships. */
    line-height: 1.25;
    letter-spacing: -.01em;
    min-width: 0;
}
.te-act-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border-radius: 9px;
    background: color-mix(in srgb, var(--te-act-color) 18%, transparent);
    color: var(--te-act-color);
    font-size: .95rem;
}
.te-act-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* The clip box is this element's content box, so it needs its own descender
       room even with the taller line-height above. */
    padding-bottom: .06em;
}
.te-activity-banner--neutral .te-act-eyebrow { color: var(--text-muted); }
.te-activity-banner--neutral .te-act-title-icon {
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-secondary);
}

/* Tiny window picker - notched into the top-right border (inspired by .ltc-show-all) */
.te-act-window-picker {
    position: absolute;
    top: 0;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 2;
}
.te-act-window-trigger {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .12rem .42rem;
    background: var(--bg-base);
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--text-muted);
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    opacity: .55;
    transition: opacity .15s, color .15s, border-color .15s;
}
.te-activity-banner:hover .te-act-window-trigger,
.te-activity-banner:focus-within .te-act-window-trigger,
.te-act-window-trigger:focus-visible,
.te-act-window-picker.is-open .te-act-window-trigger {
    opacity: 1;
}
.te-act-window-trigger:hover {
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.te-act-window-caret { font-size: .55rem; opacity: .7; }
.te-act-window-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    padding: .25rem;
    /* Fully opaque, not 82% + blur: whatever sits under the menu showed
       through at 82%, including hover highlights, which read as those being
       pressed while you were only picking a window. */
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    min-width: 90px;
    z-index: var(--z-dropdown, 30);
}
.te-act-window-picker.is-open .te-act-window-menu { display: flex; flex-direction: column; gap: 2px; }
/* Lift the whole picker while the menu is open, so the menu paints over what
   sits below it (the /tags control bar docks right under this banner).
   The menu's own z-index cannot do this: .te-act-window-picker has a transform,
   which creates a stacking context and traps every z-index inside it. What
   actually competes is the PICKER inside the banner - and the BANNER on the
   page, because its backdrop-filter (and its hover transform) make it a
   stacking context too, so everything in it paints under the /tags bar
   (z-index --z-dropdown). The banner goes one above the bar while the menu is
   open. Scoped to .is-open so the closed trigger keeps its original
   layering. */
.te-act-window-picker.is-open { z-index: 5; }
.te-activity-banner:has(.te-act-window-picker.is-open) { z-index: calc(var(--z-dropdown) + 1); }
.te-act-window-opt {
    display: block;
    width: 100%;
    padding: .25rem .55rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.te-act-window-opt:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
.te-act-window-opt.is-active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }

/* The rhythm */
.te-act-spark-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
    min-width: 0;
}
.te-act-spark-title {
    font-size: .66rem;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.te-act-spark-total {
    font-size: .76rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* One gap for every bars-per-day strip (this, the modal chart and its ticks):
   3px while it fits, narrowing as the window grows so the gaps never take more
   than ~90px in all. A fixed 3px left a 120-bar chart on a phone with no bar
   at all. --n is the bar count, set inline where the bars are drawn. */
.te-act-spark,
.te-actm-chart,
.te-actm-ticks {
    --te-act-gap: min(3px, calc(90px / var(--n, 30)));
}
.te-act-spark {
    display: flex;
    align-items: flex-end;
    gap: var(--te-act-gap);
    height: 26px;
}
.te-act-spark-bar {
    flex: 1;
    min-height: 2px;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--accent) 35%, transparent),
        color-mix(in srgb, var(--accent) 85%, transparent));
    border-radius: 2px 2px 0 0;
    transition: opacity .15s;
}
.te-act-spark-bar:hover { opacity: .85; }
.te-act-spark-bar.is-empty {
    background: color-mix(in srgb, var(--border) 30%, transparent);
}

/* The whole banner opens the activity details; this says so */
.te-act-expand-hint {
    font-size: .7rem;
    color: var(--text-muted);
    opacity: .35;
    transition: opacity .2s;
    pointer-events: none;
}
.te-activity-banner:hover .te-act-expand-hint,
.te-activity-banner:focus-visible .te-act-expand-hint { opacity: .8; }

@media (max-width: 576px) {
    .te-activity-banner {
        grid-template-columns: minmax(0, 1fr) minmax(110px, 42%);
        column-gap: .9rem;
        padding: .65rem .9rem .7rem;
    }
    .te-act-title { font-size: 1.1rem; }
    .te-act-title-icon { width: 1.5rem; height: 1.5rem; font-size: .85rem; }
    /* The count says enough at this width */
    .te-act-spark-title { display: none; }
    .te-act-spark-head { justify-content: flex-end; }
    .te-act-spark { height: 22px; }
    .te-act-expand-hint { display: none; }
    .te-act-window-picker { right: .75rem; }
}

/* ============================================================
   Neutral variant (used on /tags - no accent colour)
   ============================================================ */
.te-activity-banner--neutral:hover { border-color: var(--border-bright); box-shadow: 0 18px 32px -18px rgba(0,0,0,.5); }
.te-activity-banner--neutral .te-act-spark-bar {
    background: linear-gradient(to top,
        color-mix(in srgb, var(--text-muted) 25%, transparent),
        color-mix(in srgb, var(--text-muted) 60%, transparent));
}
.te-activity-banner--neutral .te-act-window-trigger:hover { color: var(--text); }
.te-activity-banner--neutral .te-act-window-opt.is-active { color: var(--text); background: color-mix(in srgb, var(--text-muted) 18%, transparent); }
.te-activity-banner--neutral .te-act-expand-hint { color: var(--text-muted); }

/* =========================================================================
   Activity modal (.te-actm-*)
   Rides on the shared .vrcdj-modal-content skin for the glass, border and
   top glow; the header, stat strip, chart, editors and feed are its own.
   Everything reads theme tokens, so light mode needs no second copy: where a
   colour must be "brighter than the base" it mixes toward --text, which is
   light on dark and dark on light.
   ========================================================================= */
.te-actm {
    --vm-color: var(--tag-activity-color);
    /* Brighter-than-base for the headline number, the peak bar, "Today". */
    --te-actm-bright: color-mix(in srgb, var(--vm-color) 45%, var(--text));
    /* The two action kinds. Edited is the ordinary case and stays grey;
       created is the event worth a colour. */
    --act-edited:    var(--text-dim);
    --act-created:   var(--accent-2);
    /* Podium ranks - filled badges, not tinted text (the old text tint was
       invisible on both themes). Dark text on all three. */
    --medal-gold:   #f2c14e;
    --medal-silver: #c3ccd6;
    --medal-bronze: #d08a4a;
    --medal-ink:    #1f1a10;
}

/* -- Header: icon, title + sub, window control, close -------------------- */
.te-actm-hd {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.3rem 1.5rem 0;
}
.te-actm-hd-ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--vm-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--vm-color) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--te-actm-bright);
}
.te-actm-hd-text { min-width: 0; }
.te-actm-title {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--vm-text);
    line-height: 1.2;
}
.te-actm-sub {
    margin: .15rem 0 0;
    font-size: .76rem;
    color: var(--vm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Segmented window control - the /tags bar's view switcher, same recipe
   (.tag-bar-view.is-on): elevated plate, hairline, small shadow. */
.te-actm-seg {
    margin-left: auto;
    display: inline-flex;
    flex: none;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.te-actm-seg-btn {
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .22rem .7rem;
    min-width: 44px;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.te-actm-seg-btn:hover { color: var(--text); background: var(--link-hover-bg); }
.te-actm-seg-btn.is-on {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.te-actm-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.te-actm-close { flex: none; margin: 0; }

.te-actm-body { padding: 1.1rem 1.5rem 1.35rem; }

/* -- Stat strip: numbers with hairlines between, no tiles ---------------- */
.te-actm-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 1.25rem;
    overflow-x: auto;
}
.te-actm-stat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-right: 1.4rem;
    margin-right: 1.4rem;
    border-right: 1px solid var(--border);
    flex: none;
}
.te-actm-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.te-actm-stat b {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--vm-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.te-actm-stat.is-hero b { font-size: 2.1rem; color: var(--te-actm-bright); }
.te-actm-stat small {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.te-actm-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    margin-right: .35rem;
    vertical-align: 1px;
    background: var(--act-edited);
}
.te-actm-dot--created   { background: var(--act-created); }

/* -- Two columns: rhythm + editors | touched feed ------------------------ */
.te-actm-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 0 1.6rem;
    align-items: start;
}
.te-actm-main, .te-actm-feed { min-width: 0; }
.te-actm-blk-h {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .6rem;
}
.te-actm-blk-h h3 {
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.te-actm-blk-h--editors { margin-top: 1.5rem; }
.te-actm-blk-r {
    margin-left: auto;
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.te-actm-blk-r b { color: var(--text-soft); font-weight: 600; }

/* -- Rhythm chart: bars on a baseline, ticks under, peak + today marked -- */
.te-actm-chart {
    position: relative;
    height: 120px;
    /* room above the tallest bar for its count label */
    margin-top: 18px;
    display: grid;
    /* column count (and --n) set inline by JS: one per day of the window */
    gap: var(--te-act-gap);
    align-items: end;
    border-bottom: 1px solid var(--border-bright);
}
.te-actm-chart::before {
    /* half-way guide, so a bar's height has something to be read against */
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px dashed var(--border);
    pointer-events: none;
}
.te-actm-bar {
    position: relative;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--vm-color) 45%, transparent),
        color-mix(in srgb, var(--vm-color) 90%, transparent));
    transition: opacity .15s;
}
.te-actm-bar:hover { opacity: .8; }
.te-actm-bar.is-empty { height: 2px; background: color-mix(in srgb, var(--border) 60%, transparent); }
.te-actm-bar.is-peak { background: linear-gradient(to top, var(--vm-color), var(--te-actm-bright)); }
.te-actm-bar.is-today { outline: 1px solid var(--te-actm-bright); outline-offset: 1px; }
.te-actm-bar-lbl {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    font-size: .68rem;
    font-weight: 700;
    color: var(--te-actm-bright);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.te-actm-ticks {
    display: grid;
    gap: var(--te-act-gap);
    margin-top: .35rem;
    font-size: .66rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}
.te-actm-ticks span { white-space: nowrap; overflow: visible; }
/* The last column is one day wide, so "Today" cannot fit in it. rtl makes an
   overflowing word spill to the LEFT, over the empty tick cells before it,
   instead of past the chart's right edge (where it widened the modal body on
   phones and grew a horizontal scrollbar). */
.te-actm-ticks .is-today { color: var(--te-actm-bright); font-weight: 600; direction: rtl; }

/* -- Editors: ranked rows, medal badge, breakdown line, total + mix bar -- */
.te-actm-legend {
    margin-left: auto;
    display: flex;
    gap: .85rem;
    font-size: .68rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.te-actm-legend .te-actm-dot { width: 8px; height: 8px; margin-right: .3rem; }
.te-actm-lb { display: flex; flex-direction: column; }
.te-actm-lb-row {
    display: grid;
    grid-template-columns: 28px 32px minmax(0, 1fr) auto 96px;
    gap: .75rem;
    align-items: center;
    padding: .5rem .6rem;
    min-height: 44px;
    border-radius: 10px;
}
.te-actm-lb-row.is-me {
    background: color-mix(in srgb, var(--vm-color) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--vm-color);
}
.te-actm-lb-rank {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.te-actm-lb-row--rank-1 .te-actm-lb-rank { background: var(--medal-gold);   color: var(--medal-ink); }
.te-actm-lb-row--rank-2 .te-actm-lb-rank { background: var(--medal-silver); color: var(--medal-ink); }
.te-actm-lb-row--rank-3 .te-actm-lb-rank { background: var(--medal-bronze); color: var(--medal-ink); }
.te-act-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--vm-color) 35%, var(--bg-elevated));
}
.te-act-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .02em;
}
.te-actm-lb-name { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.te-actm-lb-name b {
    font-size: .84rem;
    font-weight: 600;
    color: var(--vm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.te-actm-lb-name span {
    font-size: .72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.te-actm-you {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--vm-color) 28%, transparent);
    color: var(--te-actm-bright);
    vertical-align: 1px;
}
.te-actm-lb-total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vm-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.te-actm-mix {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border) 80%, transparent);
}
.te-actm-mix i { display: block; height: 100%; background: var(--act-edited); }
.te-actm-mix i.is-created   { background: var(--act-created); }

/* -- Touched feed: day groups, one row per tag ---------------------------- */
.te-actm-feed-list {
    position: relative;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    padding-bottom: 40px;
    /* last rows fade out under the privacy line; the padding above keeps the
       final row readable once scrolled to the end */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.te-actm-day {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: .9rem 0 .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.te-actm-day:first-child { margin-top: 0; }
.te-actm-day small {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.te-actm-day::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.te-actm-fr {
    display: grid;
    grid-template-columns: 40px 10px minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
    min-height: 30px;
    padding: 0 .4rem;
    border-radius: 8px;
    color: var(--vm-text);
    text-decoration: none;
    transition: background .12s;
}
.te-actm-fr:hover,
.te-actm-fr:focus-within { background: var(--bg-card-hover); color: var(--vm-text); }
.te-actm-fr--actor { grid-template-columns: 40px 10px minmax(0, 1fr) auto 20px; }
.te-actm-fr-tag { color: inherit; text-decoration: none; min-width: 0; }
.te-actm-fr-tag:hover { color: var(--vm-text); }
/* Editors' second link: the queue's History view for this tag. Shown on the
   hovered or focused row (always, where there is no hover), over the verb. */
.te-actm-fr-hist {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    opacity: 0;
    transition: opacity .12s;
}
.te-actm-fr { position: relative; }
.te-actm-fr:hover .te-actm-fr-hist,
.te-actm-fr:focus-within .te-actm-fr-hist { opacity: 1; }
@media (hover: none) { .te-actm-fr-hist { opacity: 1; } }
.te-actm-fr-time {
    font-size: .72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.te-actm-fr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot, var(--tag-color-fallback));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot, var(--tag-color-fallback)) 25%, transparent);
}
.te-actm-fr-tag {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.te-actm-fr-verb { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.te-actm-fr-verb.is-created   { color: var(--act-created); }
.te-actm-fr-actor {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .52rem;
    font-weight: 700;
    color: var(--text);
    background: color-mix(in srgb, var(--vm-color) 35%, var(--bg-elevated));
}

/* -- Privacy line: quiet, at the foot of the feed ------------------------ */
.te-actm-priv {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
    font-size: .72rem;
    color: var(--text-muted);
}
.te-actm-priv i { color: var(--te-actm-bright); }
.te-actm-priv > span { display: none; }
#tagActivityModal[data-can-attribution="0"] .te-actm-priv-anon,
#tagActivityModal[data-can-attribution="1"] .te-actm-priv-attr { display: inline; }

/* -- States: skeleton on first open, dimmed on window change, empty, error */
.te-actm-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-muted) 10%, transparent),
        color-mix(in srgb, var(--text-muted) 20%, transparent),
        color-mix(in srgb, var(--text-muted) 10%, transparent));
    background-size: 200% 100%;
    animation: te-actm-shimmer 1.4s linear infinite;
}
@keyframes te-actm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.te-actm-skel--stat { width: 84px; height: 40px; margin-right: 2.8rem; }
.te-actm-skel--stat.is-hero { width: 120px; height: 48px; }
.te-actm-skel--chart { grid-column: 1 / -1; align-self: stretch; height: 100%; border-radius: 6px 6px 0 0; }
.te-actm-skel--row { height: 44px; margin-bottom: 4px; border-radius: 10px; }
.te-actm-skel--line { height: 22px; margin-bottom: 8px; }
.te-actm-body[data-state="reloading"] .te-actm-stats,
.te-actm-body[data-state="reloading"] .te-actm-cols { opacity: .45; transition: opacity .15s; }
.te-actm-empty,
.te-actm-error {
    padding: .9rem .6rem;
    font-size: .8rem;
    color: var(--text-muted);
}
.te-actm-error { color: var(--color-danger); }
:root[data-motion="reduce"] .te-actm-skel { animation: none; }

/* -- Narrower dialogs ----------------------------------------------------- */
@media (max-width: 1199.98px) {
    .te-actm-cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 1.2rem; }
    .te-actm-lb-row { grid-template-columns: 28px 32px minmax(0, 1fr) auto 72px; }
}
@media (max-width: 991.98px) {
    .te-actm-cols { grid-template-columns: minmax(0, 1fr); }
    .te-actm-feed { margin-top: 1.5rem; }
    .te-actm-feed-list { max-height: none; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
    .te-actm-sub { display: none; }
}
@media (max-width: 575.98px) {
    .te-actm-hd { flex-wrap: wrap; padding: 1rem 1rem 0; gap: .6rem; }
    .te-actm-hd-text { flex: 1; }
    .te-actm-seg { order: 10; width: 100%; margin-left: 0; }
    .te-actm-seg-btn { flex: 1; min-height: 32px; }
    .te-actm-body { padding: .9rem 1rem 1.1rem; }
    /* Wrapped, never scrolled: the hero takes its own row with no side
       spacing (100% + padding + margin is what overflowed the strip). */
    .te-actm-stats { flex-wrap: wrap; gap: .75rem 0; overflow: visible; }
    .te-actm-stat { padding-right: .9rem; margin-right: .9rem; }
    .te-actm-stat.is-hero { flex-basis: 100%; border-right: 0; padding-right: 0; margin-right: 0; }
    .te-actm-stat b { font-size: 1.25rem; }
    .te-actm-chart { height: 84px; }
    .te-actm-lb-row { grid-template-columns: 24px 30px minmax(0, 1fr) auto; }
    .te-actm-mix, .te-actm-legend { display: none; }
}