/* ==========================================================================
   Xpress AI Co-Worker™ — Individual Co-Worker profile pages
   (coworker-*.html, generated by tools/build-coworkers.js). The page sets
   --c to the Co-Worker's accent colour; brand gradient is used for CTAs and
   progress indicators.
   ========================================================================== */
:root { --brand-grad: linear-gradient(110deg, #ef401d 0%, #f66f48 55%, #ffb18f 100%); }

/* hero avatar */
.cw-avatar {
  position: relative;
  border-radius: 32px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c) 70%, transparent);
}
.cw-avatar::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}

/* manual vs autonomous comparison */
.cw-compare-manual {
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.07), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(244, 63, 94, 0.25);
}
.cw-compare-auto {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, rgba(15, 23, 42, 0.9)), rgba(15, 23, 42, 0.92));
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c) 70%, transparent);
}
.cw-compare-auto::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 24px 24px 0 0;
  background: var(--brand-grad);
}
.cw-vs {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--brand-grad);
  color: #1c0701;
  font: 800 14px/56px 'Space Grotesk', sans-serif;
  text-align: center;
  box-shadow: 0 0 0 8px #090d16, 0 12px 30px -8px rgba(239, 64, 29, 0.7);
}

/* how-it-works steps */
.cw-steps { position: relative; }
.cw-rail { background: rgba(255, 255, 255, 0.07); }
.cw-rail > span { display: block; height: 100%; background: var(--brand-grad); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.reveal.active .cw-rail > span { transform: scaleX(1); }
.cw-step-num {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 1.2rem/1 'Space Grotesk', sans-serif;
  color: #fff;
  background: #0b1120;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 0 6px #090d16;
  position: relative;
  z-index: 1;
}
.cw-step:first-child .cw-step-num { background: var(--brand-grad); color: #1c0701; border-color: transparent; }

/* integration stack tiles */
.cw-tool {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cw-tool .cw-tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cw-tool .int-letter { min-width: 28px; height: 28px; font-size: 11px; }

/* approval simulator buttons */
.cw-act { transition: transform 0.2s, background 0.2s; }
.cw-act:hover { transform: translateY(-1px); }
.cw-act-approve { background: var(--brand-grad); color: #1c0701; }
.cw-act[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* other Co-Workers strip */
.cw-mate { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s; }
.cw-mate:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }

/* Data-X runs in electric violet (robot #8b5cf6); its labels use neon purple on dark sections */
body[data-coworker="data-x"] .tint-text:not(:where(.theme-light *)) { color: #a855f7; }