/* ══════════════════════════════════════════════════════════════════════════
   VP Control · Author profile · RECENT ACTIVITY FEED  (vp-tlx)
   Injected by VPCP_Timeline::render_feed() between the <!-- VPCP_TIMELINE -->
   markers on a path-profile author page.

   Self-contained on purpose: the component must look right on EVERY author
   profile, whichever about-page plugin renders the section around it, so it
   never leans on the page bundle's .pf-* rules.

   Design law applied: white text on every solid/coloured control (§1.1) ·
   inline SVG icons sized in the markup, icon LEFT + label RIGHT (§1.4, §4.1) ·
   the ≤768 AND ≤430 ladder (§2.1) · the filter chip rows are real swipe rails
   on mobile (§2.2) · Elementor's magenta button:hover killed in all 5 states
   (§1.3) · tabular-nums on every number (§2.3) · newest-first (§6.4).
   ══════════════════════════════════════════════════════════════════════════ */

.vp-tlx{
  --tlx-green:#16a34a;
  --tlx-green-d:#15803d;
  --tlx-green-dd:#0a1f14;
  --tlx-gold:#ca8a04;
  --tlx-gold-d:#a16207;
  --tlx-blue:#0284c7;
  --tlx-blue-d:#0369a1;
  --tlx-rose:#dc2626;
  --tlx-rose-d:#b91c1c;
  --tlx-ink:#0f172a;
  --tlx-body:#334155;
  --tlx-mute:#64748b;
  --tlx-line:rgba(15,23,42,.10);
  --tlx-line-2:rgba(15,23,42,.16);
  --tlx-dot:var(--tlx-green);

  position:relative;
  display:block;
  width:100%;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* The host .pf-timeline owns a vertical spine + 34px indent meant for the old
   flat list. The feed carries its own spine, so the host's is switched off.
   :has() covers the first paint; the JS-added class is the belt-and-braces. */
.pf-timeline:has(> .vp-tlx),
.pf-timeline.vp-tlx-host{ padding-left:0 !important; }
.pf-timeline:has(> .vp-tlx)::before,
.pf-timeline.vp-tlx-host::before{ display:none !important; }

/* ─────────────────────────────  FILTER BAR  ───────────────────────────── */

.vp-tlx-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,auto);
  gap:12px;
  align-items:end;
  padding:14px 16px;
  margin:0 0 18px;
  background:linear-gradient(180deg,#ffffff,#f7fbf6);
  border:1.5px solid var(--tlx-line-2);
  border-radius:16px;
  box-shadow:0 6px 18px -12px rgba(10,31,20,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
.vp-tlx-group{ min-width:0; }
.vp-tlx-glabel{
  display:block;
  margin:0 0 7px 2px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tlx-mute);
}

.vp-tlx-rail{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-width:0;
}
.vp-tlx-seg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  min-width:0;
}

/* ─────────────────────────────  CHIPS  ─────────────────────────────
   Elementor / Astra / Hello ship a global button:hover that repaints any
   custom <button> magenta. Every state is bound here, with the double
   selector specificity bump + !important (§1.3). */

.vp-tlx button.vp-tlx-chip,
.vp-tlx .vp-tlx-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto;
  margin:0 !important;
  padding:8px 12px !important;
  border:1.5px solid var(--tlx-line-2) !important;
  border-radius:99px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  color:var(--tlx-ink) !important;
  font-family:inherit !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-shadow:none !important;
  white-space:nowrap !important;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(10,31,20,.05) !important;
  transition:background-color .16s, border-color .16s, color .16s, transform .16s;
}
.vp-tlx button.vp-tlx-chip svg,
.vp-tlx .vp-tlx-chip svg{ width:12px; height:12px; flex:0 0 auto; }
.vp-tlx .vp-tlx-chip-l{ min-width:0; }
.vp-tlx .vp-tlx-chip-n{
  display:inline-block;
  padding:1px 6px;
  border-radius:99px;
  background:rgba(15,23,42,.07);
  color:var(--tlx-mute);
  font-size:11px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.vp-tlx button.vp-tlx-chip:hover,
.vp-tlx .vp-tlx-chip:hover{
  background:#f1f8f2 !important;
  background-color:#f1f8f2 !important;
  background-image:none !important;
  border-color:rgba(22,163,74,.42) !important;
  color:var(--tlx-green-dd) !important;
  transform:translateY(-1px);
  box-shadow:0 6px 14px -9px rgba(22,163,74,.55) !important;
}
.vp-tlx button.vp-tlx-chip:focus-visible,
.vp-tlx .vp-tlx-chip:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(22,163,74,.28) !important;
}
.vp-tlx button.vp-tlx-chip:active,
.vp-tlx .vp-tlx-chip:active{ transform:scale(.97); }

/* ACTIVE — solid green, WHITE label (never dark ink on a saturated fill) */
.vp-tlx button.vp-tlx-chip.is-on,
.vp-tlx .vp-tlx-chip.is-on,
.vp-tlx button.vp-tlx-chip.is-on:hover,
.vp-tlx .vp-tlx-chip.is-on:hover,
.vp-tlx button.vp-tlx-chip[aria-pressed="true"],
.vp-tlx .vp-tlx-chip[aria-pressed="true"]{
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  background-color:#15803d !important;
  border-color:#15803d !important;
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
  box-shadow:0 6px 16px -9px rgba(21,128,61,.7), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.vp-tlx .vp-tlx-chip.is-on .vp-tlx-chip-n{
  background:rgba(255,255,255,.22);
  color:#fff;
}

/* ─────────────────────────────  STATUS LINE  ───────────────────────────── */

.vp-tlx-status{
  margin:0 0 16px 2px !important;
  font-size:13px;
  font-weight:600;
  color:var(--tlx-mute);
  font-variant-numeric:tabular-nums;
}
.vp-tlx-status b{ color:var(--tlx-green-d); font-weight:900; }
.vp-tlx-empty{
  margin:6px 0 0 !important;
  padding:16px 18px;
  border:1.5px dashed var(--tlx-line-2);
  border-radius:14px;
  background:#fbfdfa;
  color:var(--tlx-body);
  font-size:14px;
  font-weight:600;
}

/* ─────────────────────────────  THE SPINE + MONTH BANDS  ───────────────── */

.vp-tlx-feed{
  position:relative;
  padding-left:32px;
  transition:opacity .18s;
}
.vp-tlx-feed::before{
  content:'';
  position:absolute;
  left:9px; top:8px; bottom:8px;
  width:2px;
  background:linear-gradient(180deg,#22c55e,#16a34a 22%,rgba(22,163,74,.22) 78%,transparent);
  border-radius:99px;
}
.vp-tlx.is-busy .vp-tlx-feed{ opacity:.45; }

.vp-tlx-band{ margin:0 0 22px; }
.vp-tlx-band:last-child{ margin-bottom:0; }

.vp-tlx-band-h{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 11px;
  padding:0;
}
.vp-tlx-band-dot{
  position:absolute;
  left:-29px; top:50%;
  transform:translateY(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:var(--tlx-green);
  border:3px solid #fafcf6;
  box-shadow:0 0 0 2px var(--tlx-green);
}
.vp-tlx-band-m{
  font-size:15px;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--tlx-green-dd);
}
.vp-tlx-band-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:2px 8px;
  border-radius:99px;
  background:rgba(22,163,74,.11);
  border:1px solid rgba(22,163,74,.22);
  color:var(--tlx-green-d);
  font-size:11px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
/* hairline that carries the eye across the row */
.vp-tlx-band-h::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  min-width:12px;
  background:linear-gradient(90deg,var(--tlx-line-2),transparent);
}

/* ─────────────────────────────  THE 3-COLUMN GRID  ─────────────────────── */

.vp-tlx-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

.vp-tlx-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  padding:17px 16px 15px;
  background:linear-gradient(180deg,#ffffff,#fcfefb);
  border:1.5px solid var(--tlx-line);
  border-radius:14px;
  box-shadow:0 3px 12px rgba(10,31,20,.05), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.vp-tlx-card:hover{
  transform:translateY(-2px);
  border-color:rgba(22,163,74,.34);
  box-shadow:0 12px 24px -14px rgba(22,163,74,.45);
}
/* the node strip — the card's own tick on the timeline */
.vp-tlx-node{
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:linear-gradient(90deg,var(--tlx-dot),color-mix(in oklab,var(--tlx-dot) 35%,transparent));
  z-index:2;
}
.vp-tlx-card.v-gold{ --tlx-dot:var(--tlx-gold); }
.vp-tlx-card.v-blue{ --tlx-dot:var(--tlx-blue); }
.vp-tlx-card.v-rose{ --tlx-dot:var(--tlx-rose); }

.vp-tlx-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.vp-tlx-kind{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  padding:3px 9px;
  border-radius:99px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--tlx-green-d);
  background:rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.22);
}
.vp-tlx-kind svg{ width:11px; height:11px; flex:0 0 auto; }
.vp-tlx-card.v-gold .vp-tlx-kind{ color:var(--tlx-gold-d); background:rgba(202,138,4,.10); border-color:rgba(202,138,4,.24); }
.vp-tlx-card.v-blue .vp-tlx-kind{ color:var(--tlx-blue-d); background:rgba(2,132,199,.10); border-color:rgba(2,132,199,.24); }
.vp-tlx-card.v-rose .vp-tlx-kind{ color:var(--tlx-rose-d); background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.24); }

.vp-tlx-date{
  margin-left:auto;
  font-size:11.5px;
  font-weight:800;
  color:#94a3b8;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.vp-tlx-text{
  margin:0 !important;
  font-size:13.5px;
  line-height:1.5;
  font-weight:500;
  color:var(--tlx-body);
  overflow-wrap:anywhere;
}
.vp-tlx-text a{
  color:var(--tlx-green-d);
  font-weight:800;
  text-decoration:none;
  border-bottom:1.5px solid rgba(22,163,74,.35);
}
.vp-tlx-text a:hover{ color:var(--tlx-green-dd); border-color:var(--tlx-green-dd); }

/* ─────────────────────────────  SHOW MORE  ─────────────────────────────── */

.vp-tlx-foot{
  display:flex;
  justify-content:center;
  margin:20px 0 0;
}
.vp-tlx-foot[hidden]{ display:none !important; }

.vp-tlx button.vp-tlx-more,
.vp-tlx .vp-tlx-more{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  margin:0 !important;
  padding:13px 26px !important;
  border:0 !important;
  border-radius:99px !important;
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  background-color:#15803d !important;
  background-image:linear-gradient(135deg,#16a34a,#15803d) !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  text-shadow:0 1px 1px rgba(0,0,0,.18) !important;
  cursor:pointer;
  box-shadow:0 12px 26px -14px rgba(21,128,61,.85), inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition:transform .16s, box-shadow .16s, filter .16s;
}
.vp-tlx button.vp-tlx-more svg,
.vp-tlx .vp-tlx-more svg{ width:14px; height:14px; flex:0 0 auto; }
.vp-tlx button.vp-tlx-more:hover,
.vp-tlx .vp-tlx-more:hover{
  background:linear-gradient(135deg,#15803d,#0f6a32) !important;
  background-color:#0f6a32 !important;
  background-image:linear-gradient(135deg,#15803d,#0f6a32) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 16px 30px -14px rgba(21,128,61,.9), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.vp-tlx button.vp-tlx-more:focus,
.vp-tlx .vp-tlx-more:focus,
.vp-tlx button.vp-tlx-more:active,
.vp-tlx .vp-tlx-more:active{
  background:linear-gradient(135deg,#15803d,#0f6a32) !important;
  background-color:#0f6a32 !important;
  background-image:linear-gradient(135deg,#15803d,#0f6a32) !important;
  color:#fff !important;
  outline:none;
}
.vp-tlx button.vp-tlx-more:active,
.vp-tlx .vp-tlx-more:active{ transform:scale(.98); }
.vp-tlx button.vp-tlx-more:focus-visible,
.vp-tlx .vp-tlx-more:focus-visible{ box-shadow:0 0 0 3px rgba(22,163,74,.35) !important; }
.vp-tlx button.vp-tlx-more[disabled],
.vp-tlx .vp-tlx-more[disabled]{ opacity:.6; cursor:default; transform:none; }
.vp-tlx.is-busy .vp-tlx-more svg{ animation:vp-tlx-spin .9s linear infinite; }
@keyframes vp-tlx-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .vp-tlx *,
  .vp-tlx *::before{ transition:none !important; animation:none !important; }
}

/* ═══════════  STATIC PROFILES — a hand-written timeline in the page  ═══════
   The news desk keeps its career / editorial log in the Elementor widget, not
   in the timeline table (own kind labels, date RANGES). That copy is real and
   stays exactly as authored — only the layout is brought in line with the feed:
   same spine, same card chrome, same 3-column grid. No filter bar, no pager:
   there is nothing to filter and nothing to page, and dead controls are worse
   than none. VPCP_Timeline::mark_static_timeline() adds the class server-side. */

.pf-timeline.vp-tlx-static{
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding-left:32px !important;
}
.pf-timeline.vp-tlx-static::before{
  display:block !important;
  content:'';
  position:absolute;
  left:9px !important; top:8px !important; bottom:8px !important;
  width:2px !important;
  background:linear-gradient(180deg,#22c55e,#16a34a 22%,rgba(22,163,74,.22) 78%,transparent) !important;
  border-radius:99px !important;
}
/* the single node at the head of the rail — the feed's month dot, once */
.pf-timeline.vp-tlx-static::after{
  content:'';
  position:absolute;
  left:3px; top:15px;
  width:14px; height:14px;
  border-radius:50%;
  background:#16a34a;
  border:3px solid #fafcf6;
  box-shadow:0 0 0 2px #16a34a;
}
.pf-timeline.vp-tlx-static .pf-tl-item{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  margin:0 !important;
  padding:17px 16px 15px !important;
  background:linear-gradient(180deg,#ffffff,#fcfefb) !important;
  border:1.5px solid rgba(15,23,42,.10) !important;
  border-radius:14px !important;
  box-shadow:0 3px 12px rgba(10,31,20,.05), inset 0 1px 0 rgba(255,255,255,.9) !important;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.pf-timeline.vp-tlx-static .pf-tl-item:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(22,163,74,.34) !important;
  box-shadow:0 12px 24px -14px rgba(22,163,74,.45) !important;
}
/* the side dot becomes the card's own top node strip, in its variant colour */
.pf-timeline.vp-tlx-static .pf-tl-item::before{
  left:0 !important; right:0 !important; top:0 !important;
  width:auto !important; height:3px !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  background:linear-gradient(90deg,var(--pf-tl-dot,#16a34a),color-mix(in oklab,var(--pf-tl-dot,#16a34a) 35%,transparent)) !important;
  z-index:2;
}
.pf-timeline.vp-tlx-static .pf-tl-date{ margin-left:auto !important; font-variant-numeric:tabular-nums; }
.pf-timeline.vp-tlx-static .pf-tl-text{ overflow-wrap:anywhere; }

/* ══════════════════════════════  TABLET  ≤1024  ══════════════════════════ */
@media (max-width:1024px){
  .vp-tlx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pf-timeline.vp-tlx-static{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vp-tlx-bar{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .vp-tlx-group-order{ grid-column:1 / -1; }
  .vp-tlx-seg{ grid-template-columns:1fr 1fr; max-width:360px; }
}

/* ══════════════════════════════  ≤768  ═══════════════════════════════════
   One full-width column (a dated log is a list, not a card row), and the two
   filter chip groups become real horizontal swipe rails. */
@media (max-width:768px){
  .vp-tlx-grid{ grid-template-columns:minmax(0,1fr) !important; gap:10px !important; }
  .vp-tlx-grid > *{ min-width:0 !important; width:100% !important; max-width:100% !important; }

  .pf-timeline.vp-tlx-static{
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    padding-left:26px !important;
  }
  .pf-timeline.vp-tlx-static > *{ min-width:0 !important; width:100% !important; max-width:100% !important; }
  .pf-timeline.vp-tlx-static::before{ left:8px !important; }
  .pf-timeline.vp-tlx-static::after{ left:2px; top:14px; width:12px; height:12px; }
  .pf-timeline.vp-tlx-static .pf-tl-item{ padding:15px 14px 13px !important; }

  .vp-tlx-bar{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    padding:12px 12px !important;
    border-radius:14px !important;
  }
  .vp-tlx-group-order{ grid-column:auto !important; }

  .vp-tlx-rail{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding:12px !important;
    gap:7px !important;
    padding:7px 12px !important;
    margin:0 -12px !important;
    scrollbar-width:none !important;
    mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%) !important;
  }
  .vp-tlx-rail::-webkit-scrollbar{ display:none !important; }
  .vp-tlx-rail .vp-tlx-chip{
    flex:0 0 auto !important;
    min-width:108px !important;
    justify-content:center !important;
    scroll-snap-align:start !important;
    white-space:nowrap !important;
  }
  .vp-tlx-seg .vp-tlx-chip{ justify-content:center !important; min-width:0 !important; }

  .vp-tlx-feed{ padding-left:26px !important; }
  .vp-tlx-feed::before{ left:8px !important; }
  .vp-tlx-band-dot{ left:-24px !important; width:12px !important; height:12px !important; }
  .vp-tlx-card{ padding:15px 14px 13px !important; }
  .vp-tlx-text{ font-size:13px !important; }
  .vp-tlx-foot{ margin-top:16px !important; }
  .vp-tlx button.vp-tlx-more,
  .vp-tlx .vp-tlx-more{ width:100% !important; justify-content:center !important; }
}

/* ══════════════════════════════  ≤430  (phone compact)  ════════════════ */
@media (max-width:430px){
  .vp-tlx-bar{ padding:11px 10px !important; gap:10px !important; }
  .vp-tlx-rail{ padding:7px 10px !important; margin:0 -10px !important; scroll-padding:10px !important; }
  .vp-tlx-rail .vp-tlx-chip{ min-width:100px !important; }
  .vp-tlx button.vp-tlx-chip,
  .vp-tlx .vp-tlx-chip{ padding:8px 11px !important; font-size:12px !important; }
  .vp-tlx-glabel{ font-size:9.5px; }
  .vp-tlx-status{ font-size:12.5px; margin-bottom:13px !important; }

  .vp-tlx-feed{ padding-left:22px !important; }
  .vp-tlx-feed::before{ left:6px !important; }
  .vp-tlx-band-dot{ left:-21px !important; }
  .pf-timeline.vp-tlx-static{ padding-left:22px !important; }
  .pf-timeline.vp-tlx-static::before{ left:6px !important; }
  .pf-timeline.vp-tlx-static::after{ left:0; top:13px; }
  .pf-timeline.vp-tlx-static .pf-tl-item{ padding:14px 13px 12px !important; border-radius:12px !important; }
  .vp-tlx-band{ margin-bottom:18px !important; }
  .vp-tlx-band-m{ font-size:14px !important; }
  .vp-tlx-card{ padding:14px 13px 12px !important; border-radius:12px !important; }
  .vp-tlx-top{ gap:8px !important; }
  .vp-tlx-date{ margin-left:auto !important; font-size:11px !important; }
  .vp-tlx button.vp-tlx-more,
  .vp-tlx .vp-tlx-more{ padding:12px 18px !important; font-size:13.5px !important; }
}