/* ============================================================
   TaskLogix360 — Live Operations Feed section
   De-iframed from embeds/wix-embed-live-ops.html · 2026-07-09
   Judgment calls:
   - :root token block removed (tokens.css). Two variables differ
     from / are absent in tokens.css and ARE used, so they're
     redefined locally on .tlx-live-ops:
       --shadow-lg (not in tokens.css; used by .card)
       --mono (JetBrains Mono webfont dropped 2026-07-14 to cut a
         render-blocking font on markets.html; uses system mono now)
     --green-200:#9CCFA6 was declared in the embed but never
     referenced (the badge border hard-codes rgba(156,207,166,.32));
     dropped, NOT added to tokens.css.
   - html/body rules removed; body font/color and the embed's own
     .section rules (position:relative, background:transparent,
     container-type/name, padding) moved onto .tlx-live-ops. body
     color was #111827 (not --navy-deep); kept verbatim for fidelity.
     body overflow:hidden (iframe-era) dropped — .card and .feed clip
     their own overflow.
   - Universal reset removed (base.css).
   - EVERY selector scoped under .tlx-live-ops, including inside
     @container and @media blocks: generic class names (.card,
     .header, .footer, .feed, .event, .counter…) would collide with
     other section stylesheets loaded on the same page.
   - Container queries kept: .tlx-live-ops is the tlxlive container
     the embed's @container rules measure.
   - @keyframes pulse RENAMED tlxLivePulse: hero.css already defines
     a site-wide `pulse` with a DIFFERENT 0% frame (alpha .5 vs this
     embed's .55). Usage in .live-dot updated to match.
   - Non-token literal colors transferred verbatim (#111827 ink,
     header gradient #0A4071→#08365D, feed gradient #FCFCFD, badge
     rgba(255,255,255,.08)/rgba(156,207,166,.32), icon slate ground
     #F1F3F5, sparkline gradient stops #1E9A44) — fidelity over the
     token rule for migrated CSS.
   - NOTE: base.css's prefers-reduced-motion global (.01ms!important
     on all animations/transitions) also applies here; it flattens
     this section's own reduced-motion .event 200ms opacity fade to
     near-instant. Fragment rules kept verbatim regardless.
   ============================================================ */

.tlx-live-ops{
  /* local tokens (differ from / absent in tokens.css) */
  --shadow-lg:0 24px 60px -24px rgba(8,54,93,.28), 0 8px 24px -12px rgba(8,54,93,.16);
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* JetBrains Mono dropped 2026-07-14 (self-hosted-font pass) */
  /* embed .section + body rules */
  position:relative;background:transparent;
  container-type:inline-size;container-name:tlxlive;
  padding:16px 12px;
  font-family:var(--font);color:#111827;
}
.tlx-live-ops .card{
  position:relative;
  max-width:580px;margin:0 auto;
  background:#fff;border-radius:18px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(8,54,93,.06);
  overflow:hidden;
  isolation:isolate;
}
.tlx-live-ops .card::before{
  /* subtle top accent stripe */
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--navy) 0%, var(--green) 100%);
  z-index:2;
}

/* ========== Header ========== */
.tlx-live-ops .header{
  position:relative;
  background:linear-gradient(180deg,#0A4071 0%, #08365D 100%);
  color:#fff;
  padding:16px 20px;
  display:flex;align-items:center;gap:12px;
}
.tlx-live-ops .header::after{
  /* faint texture */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 80% 0%, rgba(30,154,68,.10) 0%, transparent 60%);
  pointer-events:none;
}

.tlx-live-ops .live-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px 4px 8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(156,207,166,.32);
  border-radius:999px;
  font-size:13.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;
  color:#D9F2DF;
  position:relative;z-index:1;
}
.tlx-live-ops .live-dot{
  position:relative;display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(30,154,68,.6);
  animation:tlxLivePulse 1.8s var(--ease) infinite;
}
@keyframes tlxLivePulse{
  0%   {box-shadow:0 0 0 0 rgba(30,154,68,.55)}
  70%  {box-shadow:0 0 0 9px rgba(30,154,68,0)}
  100% {box-shadow:0 0 0 0 rgba(30,154,68,0)}
}

.tlx-live-ops .header-title{
  display:flex;flex-direction:column;gap:1px;
  position:relative;z-index:1;
}
.tlx-live-ops .header-eb{
  font-size:13.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.55);
}
.tlx-live-ops .header-name{
  font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-0.005em;
}

.tlx-live-ops .header-spacer{flex:1}

.tlx-live-ops .header-clock{
  font-family:var(--mono);
  font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.55);
  position:relative;z-index:1;
  letter-spacing:.02em;
}

/* ========== Feed ========== */
.tlx-live-ops .feed{
  position:relative;
  height:320px;   /* exactly 4 slots × 80px */
  background:linear-gradient(180deg, #fff 0%, #FCFCFD 100%);
  overflow:hidden;
}
.tlx-live-ops .feed::before, .tlx-live-ops .feed::after{
  content:"";position:absolute;left:0;right:0;height:20px;
  pointer-events:none;z-index:3;
}
.tlx-live-ops .feed::before{top:0;background:linear-gradient(180deg,rgba(255,255,255,.85),transparent)}
.tlx-live-ops .feed::after{bottom:0;background:linear-gradient(0deg,rgba(255,255,255,.85),transparent)}

.tlx-live-ops .event{
  position:absolute;left:0;right:0;
  height:80px;
  top:calc(var(--slot, 0) * 80px);
  display:flex;align-items:center;gap:16px;
  padding:0 20px;
  border-bottom:1px solid var(--border-soft);
  opacity:1;
  transition:top 460ms var(--ease), opacity 320ms ease;
  will-change:top, opacity;
}
.tlx-live-ops .event.is-entering{opacity:0}
.tlx-live-ops .event.is-exiting{opacity:0}

.tlx-live-ops .evt-icon{
  flex-shrink:0;
  width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy-50);color:var(--navy);
  position:relative;
}
.tlx-live-ops .evt-icon svg{width:20px;height:20px;display:block}
.tlx-live-ops .evt-icon[data-color="green"]{background:var(--green-50);color:var(--green)}
.tlx-live-ops .evt-icon[data-color="slate"]{background:#F1F3F5;color:var(--slate)}
.tlx-live-ops .evt-icon[data-color="navy"] {background:var(--navy-50);color:var(--navy)}

.tlx-live-ops .evt-body{flex:1;min-width:0}
.tlx-live-ops .evt-primary{
  font-size:13.5px;font-weight:700;color:var(--navy-deep);
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tlx-live-ops .evt-secondary{
  margin-top:2px;font-size:13.5px;color:var(--slate);
  line-height:1.4;
  /* was nowrap+ellipsis; at the 13.5px floor "Fiber splice -> Mendez Subcontract"
     needs 226px against 194px at 390 and lost its second half. Two lines is
     better than half a sentence for an event feed. */
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}

.tlx-live-ops .evt-meta{
  flex-shrink:0;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
.tlx-live-ops .evt-tag{
  font-family:var(--mono);
  font-size:13.5px;font-weight:700;color:var(--navy);
  background:var(--navy-50);
  padding:2px 8px;border-radius:5px;
  letter-spacing:.02em;
}
.tlx-live-ops .evt-time{
  font-size:13.5px;font-weight:500;color:var(--slate-dim);
  letter-spacing:.01em;
}

/* ========== Footer ========== */
.tlx-live-ops .footer{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;
  background:var(--surface);
  border-top:1px solid var(--border);
  position:relative;
}

.tlx-live-ops .counter{
  display:flex;align-items:center;gap:12px;
  flex:1;min-width:0;
}
.tlx-live-ops .counter-arrow{
  flex-shrink:0;
  width:28px;height:28px;border-radius:8px;
  background:var(--green-50);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
}
.tlx-live-ops .counter-arrow svg{width:16px;height:16px}
.tlx-live-ops .counter-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.tlx-live-ops .counter-value{
  font-family:var(--mono);
  font-size:18px;font-weight:700;color:var(--navy-deep);
  line-height:1;
  letter-spacing:-.01em;
  display:inline-flex;align-items:baseline;gap:8px;
}
.tlx-live-ops .counter-value .label{
  font-family:"Inter",sans-serif;
  font-size:13.5px;font-weight:600;color:var(--slate);
  letter-spacing:0;
}
.tlx-live-ops .counter-sub{
  font-size:13.5px;font-weight:500;color:var(--slate-light);
  letter-spacing:.02em;text-transform:uppercase;
}

/* Sparkline */
.tlx-live-ops .sparkline{
  flex-shrink:0;
  width:88px;height:32px;
  opacity:.85;
}
.tlx-live-ops .sparkline path.line{
  fill:none;stroke:var(--green);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.tlx-live-ops .sparkline path.fill{
  fill:url(#sparkfill);stroke:none;opacity:.6;
}
.tlx-live-ops .sparkline .dot{
  fill:#fff;stroke:var(--green);stroke-width:1.6;
}
.tlx-live-ops .sparkline .dot-glow{
  fill:var(--green);opacity:.15;
}

/* ========== Container query: narrow widths ========== */
@container tlxlive (max-width: 460px){
  .tlx-live-ops .header{padding:12px 16px;gap:12px}
  .tlx-live-ops .header-clock{display:none}
  .tlx-live-ops .feed{height:280px}
  .tlx-live-ops .event{height:72px;padding:0 16px;gap:12px}
  .tlx-live-ops .evt-icon{width:32px;height:32px;border-radius:9px}
  .tlx-live-ops .evt-icon svg{width:16px;height:16px}
  .tlx-live-ops .evt-primary{font-size:13.5px}
  .tlx-live-ops .evt-secondary{font-size:13.5px}
  .tlx-live-ops .evt-tag{font-size:13.5px;padding:2px 8px}
  .tlx-live-ops .evt-time{font-size:13.5px}
  .tlx-live-ops .footer{padding:12px 16px;gap:12px}
  .tlx-live-ops .sparkline{width:72px;height:28px}
  .tlx-live-ops .counter-value{font-size:16px}
  /* shorter slot calc */
  .tlx-live-ops .event{top:calc(var(--slot, 0) * 70px)}
}

@container tlxlive (max-width: 360px){
  .tlx-live-ops .evt-tag{display:none}
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce){
  .tlx-live-ops .live-dot{animation:none}
  .tlx-live-ops .event{transition:opacity 200ms ease}
}