/* Customer-facing Live SEO Brain. Keep this surface green-branded and scoped
   to its own namespace so the admin constellation cannot leak into the portal. */
.cxp-livebrain {
  --cxp-livebrain-green: #007A3D;
  --cxp-livebrain-fill: #00A651;
  --cxp-livebrain-ink: var(--foreground, #344054);
  --cxp-livebrain-muted: var(--muted-foreground, #667085);
  --cxp-livebrain-border: var(--border, #e1e7ef);
  --cxp-livebrain-card: var(--card, #fff);
  width: 100%;
  min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  border: 1px solid var(--cxp-livebrain-border);
  border-radius: 1.25rem;
  background: var(--cxp-livebrain-card);
  box-shadow: 0 10px 28px rgba(23, 32, 51, .06);
  color: var(--cxp-livebrain-ink);
  overflow: hidden;
  box-sizing: border-box;
}
.cxp-livebrain *, .cxp-livebrain *::before, .cxp-livebrain *::after { box-sizing: border-box; }

.cxp-livebrain__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.cxp-livebrain__eyebrow { margin:0 0 .25rem; color:var(--cxp-livebrain-green); font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.cxp-livebrain__title { margin:0; color:var(--cxp-livebrain-ink); font-size:clamp(1.15rem, 2vw, 1.45rem); font-weight:750; letter-spacing:-.02em; }
.cxp-livebrain__intro { max-width:38rem; margin:.35rem 0 0; color:var(--cxp-livebrain-muted); font-size:.82rem; line-height:1.5; }
.cxp-livebrain__count { flex:none; padding:.38rem .65rem; border:1px solid color-mix(in srgb, var(--cxp-livebrain-fill) 26%, var(--cxp-livebrain-border)); border-radius:999px; color:var(--cxp-livebrain-green); font-size:.75rem; font-weight:750; white-space:nowrap; }
.cxp-livebrain__layout { display:grid; grid-template-columns:minmax(0, 2.25fr) minmax(17rem, .75fr); gap:1rem; align-items:stretch; }
.cxp-livebrain__stage { position:relative; min-width:0; aspect-ratio:1000 / 900; border:1px solid color-mix(in srgb, var(--cxp-livebrain-fill) 16%, var(--cxp-livebrain-border)); border-radius:1rem; background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cxp-livebrain-fill) 10%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--cxp-livebrain-fill) 4%, var(--cxp-livebrain-card)), var(--cxp-livebrain-card)); overflow:hidden; }
.cxp-livebrain__stage::before { content:""; position:absolute; inset:12%; border:1px dashed color-mix(in srgb, var(--cxp-livebrain-fill) 17%, transparent); border-radius:50%; pointer-events:none; }
.cxp-livebrain__connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cxp-livebrain__connections line { stroke:color-mix(in srgb, var(--cxp-livebrain-line) 36%, #9aa8b7); stroke-width:1.35; stroke-dasharray:3 8; opacity:.52; }
.cxp-livebrain__nodes { position:absolute; inset:0; }
.cxp-livebrain__node { position:absolute; left:var(--cxp-livebrain-x); top:var(--cxp-livebrain-y); z-index:2; display:flex; width:6rem; transform:translate(-50%, -50%); flex-direction:column; align-items:center; text-align:center; }
.cxp-livebrain__node-mark { position:relative; display:grid; width:3.1rem; height:3.1rem; place-items:center; border:2px solid var(--cxp-livebrain-agent); border-radius:50%; background:color-mix(in srgb, var(--cxp-livebrain-agent) 12%, var(--cxp-livebrain-card)); box-shadow:0 5px 12px color-mix(in srgb, var(--cxp-livebrain-agent) 20%, transparent); color:var(--cxp-livebrain-agent); }
/* CYT-955. Was a 2-letter code (WH/RO/PQ/...) printed inside every mark -
   confirmed live as the exact "isolated letters/abbreviations" Adir kept
   reporting (5th time). The admin reference page he pointed at never puts a
   text code inside a status mark; it uses a plain coloured dot or icon and
   spells everything else out in words. This mark already sits right above
   the specialist's full name and status (node-copy below), so a dot loses
   no information the letters carried - it's the same signal without the
   cryptic text. */
.cxp-livebrain__node-dot { display:block; width:1rem; height:1rem; border-radius:50%; background:var(--cxp-livebrain-agent); box-shadow:0 0 0 4px color-mix(in srgb, var(--cxp-livebrain-agent) 16%, transparent); }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__node-dot { width:.8rem; height:.8rem; }
.cxp-livebrain__node-copy { position:absolute; top:3.65rem; left:50%; z-index:4; min-width:0; width:8.3rem; margin-top:0; transform:translateX(-50%); }
.cxp-livebrain__node-copy h3 { display:-webkit-box; min-height:1.65rem; margin:0; overflow:hidden; color:var(--cxp-livebrain-ink); font-size:.75rem; font-weight:750; line-height:1.2; text-align:center; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cxp-livebrain__state { display:inline-flex; align-items:center; justify-content:center; gap:.28rem; min-height:1.2rem; margin:.16rem 0 0; padding:.16rem .35rem; border:1px solid color-mix(in srgb, var(--cxp-livebrain-agent) 24%, var(--cxp-livebrain-border)); border-radius:999px; background:color-mix(in srgb, var(--cxp-livebrain-agent) 5%, var(--cxp-livebrain-card)); color:var(--cxp-livebrain-muted); font-size:.75rem; font-weight:650; line-height:1.05; white-space:nowrap; }
.cxp-livebrain__state-led { width:.42rem; height:.42rem; flex:none; border:1px solid color-mix(in srgb, var(--cxp-livebrain-agent) 70%, #fff); border-radius:50%; background:var(--cxp-livebrain-agent); box-shadow:0 0 0 2px color-mix(in srgb, var(--cxp-livebrain-agent) 13%, transparent); }
.cxp-livebrain__node.is-running .cxp-livebrain__node-mark { box-shadow:0 0 0 5px color-mix(in srgb, var(--cxp-livebrain-agent) 11%, transparent), 0 0 22px color-mix(in srgb, var(--cxp-livebrain-agent) 35%, transparent); }

/* These thresholds are based on the stage itself, because the activity rail
   keeps the stage narrower at common laptop widths. JS sets the mode after
   measuring that real stage and reflows again when the rail changes size. */
.cxp-livebrain__stage[data-cxp-livebrain-layout="compact"] .cxp-livebrain__node-copy { width:8.2rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="compact"] .cxp-livebrain__node-copy h3 { font-size:.75rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="compact"] .cxp-livebrain__state { font-size:.75rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="dense"] .cxp-livebrain__node-copy { width:7.4rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="dense"] .cxp-livebrain__node-copy h3 { font-size:.75rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="dense"] .cxp-livebrain__state { font-size:.75rem; }

/* A radial ring is not legible once the real stage is under 760px wide.
   Switch the stage itself to the same readable specialist cards used on
   phones, even when the viewport is wider because a rail is present. */
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] { display:flex; aspect-ratio:auto; overflow:hidden; padding:.85rem; background:var(--cxp-livebrain-card); flex-direction:column; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"]::before,
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__connections { display:none; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__core { position:relative; left:auto; top:auto; width:100%; height:auto; min-height:6.4rem; order:1; transform:none; margin-bottom:.8rem; border-radius:1rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__nodes { position:static; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); order:2; gap:.65rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__node { position:relative; left:auto; top:auto; width:auto; min-height:5.65rem; transform:none; padding:.65rem .35rem; border:1px solid var(--cxp-livebrain-border); border-radius:.8rem; background:var(--cxp-livebrain-card); }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__node-mark { width:2.35rem; height:2.35rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__node-copy { position:static; width:100%; margin-top:.3rem; transform:none; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__node-copy h3 { min-height:1.65rem; font-size:.75rem; }
.cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__state { min-height:1.6rem; max-width:100%; font-size:.75rem; white-space:normal; }

/* The ring uses two staggered orbits on desktop. Names and state pills are one
   measured label group, so the JS placer can keep the full live signal clear
   of every mark, neighbour, and stage edge. */
.cxp-livebrain__core { position:absolute; left:50%; top:50%; z-index:3; display:flex; width:9.8rem; height:9.8rem; transform:translate(-50%, -50%); flex-direction:column; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--cxp-livebrain-fill) 58%, #fff); border-radius:50%; background:color-mix(in srgb, var(--cxp-livebrain-green) 91%, #0c2519); box-shadow:0 0 0 8px color-mix(in srgb, var(--cxp-livebrain-fill) 9%, transparent), 0 0 28px color-mix(in srgb, var(--cxp-livebrain-fill) 28%, transparent); color:#fff; text-align:center; }
.cxp-livebrain__core-kicker { font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; opacity:1; }
.cxp-livebrain__core-value { margin:.2rem 0 .05rem; font-size:2.25rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.cxp-livebrain__core-note { max-width:7.4rem; font-size:.75rem; line-height:1.15; opacity:1; }
.cxp-livebrain__activity { min-width:0; padding:1rem; border:1px solid var(--cxp-livebrain-border); border-radius:1rem; background:color-mix(in srgb, var(--cxp-livebrain-card) 88%, var(--muted, #f2f4f7)); }
.cxp-livebrain__activity-heading { display:flex; align-items:center; gap:.55rem; padding-bottom:.85rem; border-bottom:1px solid var(--cxp-livebrain-border); }
.cxp-livebrain__activity-heading h2 { margin:0; color:var(--cxp-livebrain-ink); font-size:.9rem; font-weight:800; }
.cxp-livebrain__activity-heading p { margin:.15rem 0 0; color:var(--cxp-livebrain-muted); font-size:.75rem; }
.cxp-livebrain__activity-led { width:.55rem; height:.55rem; flex:none; border-radius:50%; background:var(--cxp-livebrain-fill); box-shadow:0 0 0 3px color-mix(in srgb, var(--cxp-livebrain-fill) 16%, transparent); }
.cxp-livebrain__activity-freshness { margin-left:auto; color:var(--cxp-livebrain-green); font-size:.75rem; font-weight:750; white-space:nowrap; }
.cxp-livebrain__activity-list { display:flex; max-height:36rem; flex-direction:column; gap:.55rem; overflow-y:auto; padding:.85rem .15rem .1rem 0; }
.cxp-livebrain__activity-card { position:relative; padding:.65rem .7rem .68rem .78rem; border:1px solid var(--cxp-livebrain-border); border-left:3px solid var(--cxp-livebrain-activity-color); border-radius:.7rem; background:var(--cxp-livebrain-card); }
.cxp-livebrain__activity-card-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.cxp-livebrain__activity-agent { display:flex; min-width:0; align-items:center; gap:.35rem; overflow:hidden; color:var(--cxp-livebrain-ink); font-size:.75rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.cxp-livebrain__activity-dot { width:.4rem; height:.4rem; flex:none; border-radius:50%; background:var(--cxp-livebrain-activity-color); }
.cxp-livebrain__activity-status { flex:none; color:var(--cxp-livebrain-muted); font-size:.75rem; font-weight:650; }
.cxp-livebrain__activity-card time { flex:none; color:var(--cxp-livebrain-muted); font-size:.75rem; }
.cxp-livebrain__activity-card h3 { display:-webkit-box; margin:.38rem 0 0; overflow:hidden; color:var(--cxp-livebrain-ink); font-size:.75rem; font-weight:700; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.cxp-livebrain__activity-card p { display:-webkit-box; margin:.22rem 0 0; overflow:hidden; color:var(--cxp-livebrain-muted); font-size:.75rem; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cxp-livebrain__activity-empty { margin:0; padding:1.25rem .5rem; color:var(--cxp-livebrain-muted); font-size:.75rem; line-height:1.45; text-align:center; }
.cxp-livebrain__sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* At common laptop widths the rail stacks below the constellation. This gives
   the stage its full content width before JS chooses compact/dense/list mode. */
@media (max-width: 1499px) {
  .cxp-livebrain__layout { grid-template-columns:1fr; }
  .cxp-livebrain__activity-list { max-height:22rem; }
}

@media (max-width: 680px) {
  .cxp-livebrain { padding:.9rem; }
  .cxp-livebrain__heading { display:block; }
  .cxp-livebrain__count { display:inline-block; margin-top:.7rem; }
  .cxp-livebrain__layout { display:flex; flex-direction:column; }
  .cxp-livebrain__activity { order:1; }
  .cxp-livebrain__stage { order:2; display:flex; aspect-ratio:auto; overflow:hidden; padding:.85rem; background:var(--cxp-livebrain-card); flex-direction:column; }
  .cxp-livebrain__stage::before, .cxp-livebrain__connections { display:none; }
  .cxp-livebrain__core { position:relative; left:auto; top:auto; display:flex; width:100%; height:auto; min-height:6.4rem; order:1; transform:none; margin-bottom:.8rem; border-radius:1rem; }
  .cxp-livebrain__nodes { position:static; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); order:2; gap:.65rem; }
  .cxp-livebrain__node { position:relative; left:auto; top:auto; width:auto; min-height:5.65rem; transform:none; padding:.65rem .35rem; border:1px solid var(--cxp-livebrain-border); border-radius:.8rem; background:var(--cxp-livebrain-card); }
  .cxp-livebrain__node-mark { width:2.35rem; height:2.35rem; }
  .cxp-livebrain__node-dot { width:.8rem; height:.8rem; }
  .cxp-livebrain__node-copy { position:static; width:100%; margin-top:.3rem; transform:none; }
  .cxp-livebrain__node-copy h3 { min-height:1.65rem; font-size:.75rem; }
  .cxp-livebrain__state { min-height:1.6rem; max-width:100%; font-size:.75rem; white-space:normal; }
  .cxp-livebrain__activity-freshness { font-size:.75rem; }
  .cxp-livebrain__activity { padding:.8rem; }
}

@media (max-width: 390px) {
  .cxp-livebrain__nodes { grid-template-columns:1fr; }
  /* The measured-width list mode is more specific than the generic phone
     fallback above. Keep two readable cards across on a 390px viewport. */
  .cxp-livebrain__stage[data-cxp-livebrain-layout="list"] .cxp-livebrain__nodes { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cxp-livebrain__node, .cxp-livebrain__activity-card { animation:none !important; transition:none !important; }
}