/* ============================================================
   SOCIAL GEAR → Tech Ecosystem add-on styles
   Humans as participants within a technology ecosystem.
   Only loaded by "Social Gear → Tech Ecosystem.html".
   ============================================================ */

/* ---------- hero participant icons (humans as nodes) ---------- */
.hp-eco-ico {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  border: 1px solid oklch(0.72 0.18 45 / 0.45);
  background: oklch(0.72 0.18 45 / 0.10);
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
  position: relative;
}
.hp-card--core .hp-eco-ico { background-color: var(--acc); border-color: var(--acc); }
.hp-eco-ico[data-eco="creator"]  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7933c' stroke-width='1.6'><circle cx='12' cy='8' r='3.4'/><path d='M5 20c0-3.6 3.1-5.6 7-5.6s7 2 7 5.6'/></svg>"); }
.hp-eco-ico[data-eco="marketer"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7933c' stroke-width='1.6'><circle cx='12' cy='8' r='3.4'/><path d='M5 20c0-3.6 3.1-5.6 7-5.6s7 2 7 5.6'/><path d='M16 4l3 1-1 3' stroke-linecap='round'/></svg>"); }
.hp-eco-ico[data-eco="consumer"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7933c' stroke-width='1.6'><circle cx='8' cy='8' r='3'/><circle cx='17' cy='9' r='2.4'/><path d='M2 19c0-3 2.4-4.8 6-4.8s6 1.8 6 4.8'/><path d='M14.5 18.5c.4-2 2-3.2 4.2-3.2 1.6 0 2.9.7 3.3 2.2'/></svg>"); }
.hp-eco-ico[data-eco="core"]     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1712' stroke-width='1.8'><circle cx='12' cy='12' r='3'/><path d='M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2' stroke-linecap='round'/></svg>"); }
.hp-card--core { border-color: oklch(0.72 0.18 45 / 0.5); background: oklch(0.72 0.18 45 / 0.07); }

/* ============================================================
   CONNECTED ECOSYSTEM SECTION
   ============================================================ */
.eco { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--bg-0), oklch(0.17 0.014 50), var(--bg-0)); }
.eco-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: oklch(0.165 0.013 52 / 0.6); }
#eco-net { display: block; width: 100%; height: 560px; cursor: crosshair; }
.eco-legend { position: absolute; left: 18px; top: 16px; display: flex; flex-direction: column; gap: 7px; }
.eco-legend__row { font-family: var(--f-mono); font-size: 0.66rem; color: var(--tx-mid); letter-spacing: 0.04em; display: flex; align-items: center; gap: 9px; }
.eco-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.eco-sw--human { background: oklch(0.78 0.16 70); }
.eco-sw--chan { background: oklch(0.72 0.18 25); }
.eco-sw--core { background: var(--acc); }
.eco-hint { position: absolute; right: 18px; bottom: 16px; font-family: var(--f-mono); font-size: 0.66rem; color: var(--tx-dim); letter-spacing: 0.06em; }

.eco-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.eco-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; transition: border-color 0.3s, transform 0.3s; }
.eco-tile:hover { border-color: var(--acc); transform: translateY(-3px); }
.eco-tile__k { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); display: block; margin-bottom: 10px; }
.eco-tile p { font-size: 0.92rem; color: var(--tx-mid); margin: 0; }
@media (max-width: 820px) { #eco-net { height: 420px; } .eco-tiles { grid-template-columns: 1fr; } .eco-legend { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px; padding: 14px 16px 0; } .eco-hint { display: none; } }
@media (max-width: 520px) { #eco-net { height: 360px; } }

/* ============================================================
   INTELLIGENCE LAYER (dashboards / graphs)
   ============================================================ */
.intel { position: relative; }
.intel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.intel-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; transition: border-color 0.3s; display: flex; flex-direction: column; }
.intel-card:hover { border-color: oklch(0.72 0.18 45 / 0.5); }
.intel-card--wide { grid-column: span 2; }
.intel-card__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.intel-card__k { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }
.intel-card__d { font-size: 0.92rem; color: var(--tx-mid); margin: 0 0 18px; max-width: 60ch; }
.intel-canvas { display: block; width: 100%; height: 240px; }

/* AI recommendations list */
.rec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.rec { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; transition: 0.2s; }
.rec:hover { border-color: var(--acc); transform: translateX(2px); }
.rec__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: oklch(0.72 0.18 45 / 0.14); border: 1px solid oklch(0.72 0.18 45 / 0.4); color: var(--acc); font-size: 0.9rem; }
.rec__t { font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; color: var(--tx-hi); }
.rec__m { font-family: var(--f-mono); font-size: 0.64rem; color: var(--tx-dim); }
.rec__act { font-family: var(--f-mono); font-size: 0.66rem; color: var(--acc-ink); background: var(--acc); border-radius: 999px; padding: 5px 12px; }

/* audience bars */
.aud-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.aud-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.aud-row__l { font-family: var(--f-mono); font-size: 0.7rem; color: var(--tx-mid); letter-spacing: 0.04em; }
.aud-bars .mk-bar { height: 8px; }
.aud-bars .mk-bar i { width: 0; transition: width 0.9s var(--ease); }

/* cross-channel activation rail */
.flow-rail { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.flow-src { text-align: center; font-family: var(--f-mono); font-size: 0.66rem; color: var(--tx-dim); line-height: 1.5; }
.flow-src b { font-family: var(--f-display); font-size: 1rem; color: var(--tx-hi); }
.flow-src__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 16px var(--acc-glow); margin-bottom: 6px; }
.flow-arrows { display: flex; flex-direction: column; gap: 9px; }
.flow-line { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--acc), oklch(0.72 0.18 25)); background-size: 200% 100%; opacity: 0.4; animation: flowpulse 2.6s linear infinite; }
.flow-line:nth-child(2){ animation-delay: 0.3s; } .flow-line:nth-child(3){ animation-delay: 0.6s; } .flow-line:nth-child(4){ animation-delay: 0.9s; }
@keyframes flowpulse { 0%{ background-position: 200% 0; opacity: 0.25; } 50%{ opacity: 0.9; } 100%{ background-position: -200% 0; opacity: 0.25; } }
.flow-targets { display: flex; flex-direction: column; gap: 9px; }
.flow-chip { font-family: var(--f-mono); font-size: 0.72rem; color: var(--tx-hi); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; text-align: center; transition: 0.25s; }
.flow-chip.lit { border-color: var(--acc); background: oklch(0.72 0.18 45 / 0.12); }
@media (prefers-reduced-motion: reduce) { .flow-line { animation: none; opacity: 0.6; } }
@media (max-width: 820px) { .intel-grid { grid-template-columns: 1fr; } .intel-card--wide { grid-column: auto; } }