/* ============================================================
   CYCLE 6 — GOALS THAT WATCH THE DATA
   Auto-tracking badges · graduation overlay · pinned grad card
   ============================================================ */

/* ---- AUTO badge on bound goal cards ---- */
.c6-auto-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px;
  color: var(--accent, #00e5ff);
  border: 1px solid rgba(0, 229, 255, 0.35); border-radius: 20px;
  padding: 2px 8px; background: rgba(0, 229, 255, 0.07);
}
.goal-item.c6-done { opacity: 0.75; }
.c6-bind-hint {
  font-size: 11px; color: var(--text-faint, #6b7688);
  line-height: 1.5; margin-top: 4px;
}

/* ---- "What's next?" modal card ---- */
.c6-next-card {
  border: 1px solid rgba(0, 229, 255, 0.25); border-radius: 10px;
  padding: 16px 18px; background: rgba(0, 229, 255, 0.05);
}
.c6-next-eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 2px; color: var(--accent, #00e5ff); }
.c6-next-title { font-size: 17px; font-weight: 700; margin-top: 6px; color: var(--text); }
.c6-next-metric { font-size: 11.5px; color: var(--text-dim, #93a0b4); margin-top: 4px; }
.c6-next-why { font-size: 12.5px; line-height: 1.6; color: var(--text-dim, #93a0b4); margin: 10px 0 0; }

/* ---- Graduation celebration overlay ---- */
.c6-celebrate {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
  background: rgba(2, 4, 8, 0.82); backdrop-filter: blur(6px);
  animation: c6-fade 0.25s ease;
  overflow: hidden;
}
.c6-celebrate-card {
  position: relative; z-index: 2; text-align: center;
  border: 1px solid rgba(0, 229, 255, 0.4); border-radius: 14px;
  background: rgba(7, 11, 18, 0.92);
  padding: 38px 46px; max-width: 460px;
  box-shadow: 0 0 60px rgba(0, 229, 255, 0.18);
  animation: c6-pulse 2.2s ease-in-out infinite;
}
.c6-grad-cap { font-size: 52px; line-height: 1; }
.c6-grad-word {
  font-family: var(--font-display, "Orbitron", sans-serif);
  font-size: 26px; font-weight: 800; letter-spacing: 6px;
  color: var(--accent, #00e5ff); margin-top: 12px;
  text-shadow: 0 0 22px rgba(0, 229, 255, 0.55);
}
.c6-grad-goal { font-size: 16px; font-weight: 600; color: var(--text, #e8eef7); margin-top: 10px; }
.c6-grad-sub { font-size: 12px; color: var(--text-dim, #93a0b4); margin: 8px 0 20px; }

/* CSS-only confetti — bits spawned by goal-system.js with inline left/delay/duration */
.c6-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c6-bit {
  position: absolute; top: -24px; width: 8px; height: 15px; border-radius: 2px;
  opacity: 0.9; animation: c6-fall 3.4s linear infinite;
}
@keyframes c6-fall {
  0%   { transform: translateY(-24px) rotate(0deg) rotateY(0deg); }
  100% { transform: translateY(110vh) rotate(660deg) rotateY(540deg); }
}
@keyframes c6-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(0, 229, 255, 0.14); }
  50%      { box-shadow: 0 0 80px rgba(0, 229, 255, 0.32); }
}
@keyframes c6-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Pinned GRADUATED card on Command Center ---- */
.c6-grad-pin {
  border: 1px solid rgba(124, 255, 178, 0.35); border-radius: 12px;
  background: linear-gradient(90deg, rgba(124, 255, 178, 0.08), rgba(0, 229, 255, 0.05));
  padding: 10px 14px; margin-bottom: 14px; cursor: pointer;
}
.c6-grad-pin:hover { border-color: rgba(124, 255, 178, 0.6); }
.c6-grad-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-width: 0; }
.c6-grad-ico { font-size: 17px; flex-shrink: 0; }
.c6-grad-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 2px;
  color: #7cffb2; flex-shrink: 0;
}
.c6-grad-t {
  font-size: 13px; font-weight: 600; color: var(--text, #e8eef7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c6-grad-d { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint, #6b7688); margin-left: auto; flex-shrink: 0; }