/* engineering-personas.css — shared across engineering-department, evolution,
 * feedback-loop, and leaderboard surfaces. Provides persona-card chrome,
 * glow/pulse animations, animated progress bars, and risk-band colour tokens.
 *
 * Loaded after tokens.css so it inherits theme variables.
 */

/* ── tokens (overridable via theme; defaults fall through to dark) ────── */
:root {
  --persona-card-bg: rgba(20, 24, 34, .82);
  --persona-card-border: rgba(255,255,255,.08);
  --persona-card-shadow: 0 4px 18px rgba(0,0,0,.35);
  --persona-glow-amber: #f5b65b;
  --persona-glow-silver: #d6dee8;
  --persona-glow-bronze: #b08d57;
  --persona-glow-cool:   #3a8ee6;
  --persona-glow-warm:   #d05a3a;
  --evo-bar-bg: rgba(255,255,255,.06);
  --evo-bar-fill: linear-gradient(90deg, #3a8ee6 0%, #7c3aed 50%, #f5b65b 100%);
  --feedback-pass: #4ade80;
  --feedback-fail: #ef4444;
  --feedback-warn: #f5b65b;
}

/* ── Persona card grid ───────────────────────────────────────────────── */
.eng-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.eng-persona-card {
  position: relative;
  background: var(--persona-card-bg);
  border: 1px solid var(--persona-card-border);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: var(--persona-card-shadow);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: default;
}
.eng-persona-card::before {
  /* persona-coloured rim glow */
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--persona-color, rgba(255,255,255,.08)),
              0 0 22px -6px var(--persona-color, rgba(255,255,255,.08));
  opacity: .35;
  transition: opacity .3s ease;
}
.eng-persona-card:hover {
  transform: translateY(-2px);
  border-color: var(--persona-color, rgba(255,255,255,.18));
}
.eng-persona-card:hover::before { opacity: .85; }
.eng-persona-card.head {
  /* Hero-of-Alexandria gold rim */
  background: linear-gradient(160deg, rgba(176,141,87,.10), var(--persona-card-bg) 60%);
}
.eng-persona-card.head::before {
  box-shadow: 0 0 0 2px var(--persona-glow-amber),
              0 0 28px -4px var(--persona-glow-amber);
  opacity: .9;
}

.eng-persona-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.eng-persona-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background:var(--bg-card);
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 0 12px -2px var(--persona-color, rgba(255,255,255,.2));
}
.eng-persona-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  line-height: 1.2;
}
.eng-persona-codename {
  font-size: 11px;
  color: var(--eng-dim, rgba(255,255,255,.55));
  letter-spacing: .8px;
  text-transform: uppercase;
}
.eng-persona-tier-pill {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background:var(--bg-card);
  color: var(--persona-color, rgba(255,255,255,.7));
  border: 1px solid var(--persona-color, rgba(255,255,255,.08));
}

.eng-persona-style {
  font-size: 11.5px;
  color: var(--eng-dim, rgba(255,255,255,.6));
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.eng-persona-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.eng-persona-stat {
  background:var(--bg-card);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
}
.eng-persona-stat .num {
  font-size: 14px; font-weight: 700;
  color: var(--persona-color, var(--eng-text, #fff));
  font-feature-settings: "tnum";
}
.eng-persona-stat .lbl {
  font-size: 9px;
  letter-spacing: .6px;
  color: var(--eng-dim, rgba(255,255,255,.5));
  text-transform: uppercase;
}

.eng-persona-rivals {
  font-size: 10.5px;
  color: var(--eng-dim, rgba(255,255,255,.55));
}
.eng-persona-rivals .rival {
  color: var(--feedback-fail);
  font-weight: 600;
}
.eng-persona-rivals .ally {
  color: var(--feedback-pass);
  font-weight: 600;
}

.eng-persona-voice {
  font-size: 10px;
  color: var(--eng-dim);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.eng-persona-voice::before {
  content: "🔊";
  font-size: 11px;
}

/* ── Top-3 podium glows (overlay any .eng-persona-card with .top1/2/3) ── */
.eng-persona-card.top1 { --persona-glow: var(--persona-glow-amber); }
.eng-persona-card.top2 { --persona-glow: var(--persona-glow-silver); }
.eng-persona-card.top3 { --persona-glow: var(--persona-glow-bronze); }
.eng-persona-card.top1::after,
.eng-persona-card.top2::after,
.eng-persona-card.top3::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 16px;
  border: 2px solid var(--persona-glow);
  filter: drop-shadow(0 0 12px var(--persona-glow));
  pointer-events: none;
  animation: persona-pulse 3.2s ease-in-out infinite;
}
@keyframes persona-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}

/* ── Animated progress bars (Evolution HUD + Feedback Loop) ─────────── */
.evo-bar-wrap {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  gap: 10px;
  align-items: center;
  margin: 6px 0;
  font-size: 12px;
}
.evo-bar-label {
  color: var(--eng-text, #fff);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evo-bar-track {
  height: 8px;
  background: var(--evo-bar-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.evo-bar-fill {
  height: 100%;
  background: var(--evo-bar-fill);
  border-radius: 4px;
  transform-origin: left;
  animation: evo-bar-slide 1.2s cubic-bezier(.2,.8,.2,1) both;
  box-shadow: 0 0 8px -2px var(--persona-glow-cool);
}
.evo-bar-fill.warn { background: linear-gradient(90deg, #f5b65b, #d05a3a); box-shadow: 0 0 10px -2px var(--persona-glow-warm); }
.evo-bar-fill.pass { background: linear-gradient(90deg, #4ade80, #3a8ee6); }
.evo-bar-num {
  text-align: right;
  font-feature-settings: "tnum";
  font-weight: 700;
  color: var(--eng-text, #fff);
}
@keyframes evo-bar-slide {
  from { transform: scaleX(0); opacity: .4; }
  to   { transform: scaleX(1); opacity: 1;  }
}

/* ── HUD-style activity feed (Evolution + Feedback) ─────────────────── */
.hud-feed {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}
.hud-feed-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 8px;
  background:var(--bg-card);
  border-left: 3px solid var(--persona-color, var(--persona-glow-cool));
  animation: hud-feed-in .35s ease both;
}
.hud-feed-row .ts { color: var(--eng-dim); font-feature-settings: "tnum"; }
.hud-feed-row .badge {
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--persona-glow-cool);
  font-weight: 700;
}
.hud-feed-row.pass .badge { color: var(--feedback-pass); }
.hud-feed-row.fail .badge { color: var(--feedback-fail); }
.hud-feed-row.warn .badge { color: var(--feedback-warn); }
@keyframes hud-feed-in {
  from { transform: translateX(-6px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Risk-band pills (used by Evolution HUD circuit-breaker tile) ───── */
.band-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 700;
}
.band-pill.low      { background: rgba(74,222,128,.15);  color: #4ade80; }
.band-pill.medium   { background: rgba(245,182,91,.18);  color: #f5b65b; }
.band-pill.high     { background: rgba(208,90,58,.18);   color: #d05a3a; }
.band-pill.critical { background: rgba(239,68,68,.20);   color: #ef4444; animation: band-pulse 1.6s infinite; }
@keyframes band-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ── Coordination live-agent-graph node tweaks ───────────────────── */
.coord-graph-label {
  /* Belt-and-suspenders: even if the JS truncation misses, CSS keeps the
   * label visually contained inside its lane band. SVG <text> doesn't
   * wrap, so this is mostly a fallback for fonts where the truncation
   * char width estimate is off. */
  font-feature-settings: "tnum";
  letter-spacing: -0.2px;
  pointer-events: none;
  user-select: none;
}
.coord-graph-node {
  cursor: pointer;
  transition: r 0.18s ease, opacity 0.18s ease;
}
.coord-graph-node:hover {
  r: 11;
  opacity: 1;
}
#eng-graph-host {
  /* Make sure the SVG canvas always has room and never overflows its card */
  min-height: 380px;
  contain: layout paint;
}
@media (max-width: 1100px) {
  #eng-graph-host { min-height: 320px; }
}

/* ── Coordination panel grid ── stack mission-ops above graph on phones ── */
@media (max-width: 880px) {
  /* The Coordination card uses an inline grid-template-columns: 1fr 1fr.
   * Override on narrow viewports so the iframe sits above the live graph
   * instead of squishing both into 50% widths. */
  #p-missions .eng-card > div[style*="grid-template-columns:1fr 1fr"],
  #p-missions .eng-card > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  #p-missions .eng-card iframe {
    height: 480px !important;
  }
}

/* ── Mobile responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
  .eng-persona-grid { grid-template-columns: 1fr; gap: 10px; }
  .eng-persona-stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .eng-persona-stat { padding: 4px 6px; }
  .eng-persona-stat .num { font-size: 12px; }
  .eng-persona-stat .lbl { font-size: 8.5px; }
  .evo-bar-wrap { grid-template-columns: 90px 1fr 48px; font-size: 11px; }
  .coord-graph-label { font-size: 8px !important; }
  #eng-graph-host { min-height: 280px; }
}