/* ============================================================
   HELIOCASTLE — MOCKUP — graph
   Used by a card with class "mock mock-graph".
   ============================================================ */

/* ---------- mock: monitoring dashboard ---------- */
.mock-graph { background: radial-gradient(80% 70% at 40% 18%, #0d1116, #06080b 78%); }
.graph-win {
  position: absolute;
  top: 14%; left: 9%; right: 9%; bottom: 16%;
  background: #0d0f14;
  border: 1px solid rgb(var(--ink-rgb) / 0.08);
  border-radius: 6px;
  padding: 5%;
  box-shadow: 0 26px 55px rgb(var(--shadow-rgb) / calc(0.65 * var(--shadow-a)));
}
.graph-gauges { display: flex; gap: 8px; margin-bottom: 12px; }
.graph-gauges i {
  flex: 1; height: 22px; border-radius: 3px;
  background: rgb(var(--ink-rgb) / 0.06);
  border: 1px solid rgb(var(--ink-rgb) / 0.05);
  position: relative;
  overflow: hidden;
}
.graph-gauges i::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 60%;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / 0.6), rgb(var(--accent-rgb) / 0.15));
  animation: gauge-move 3.5s ease-in-out infinite;
}
.graph-gauges i:nth-child(2)::after { animation-delay: .5s; width: 40%; }
.graph-gauges i:nth-child(3)::after { animation-delay: 1s; width: 75%; }
@keyframes gauge-move {
  0%, 100% { transform: scaleX(0.7); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
}
.graph-chart { width: 100%; height: 46px; margin-bottom: 12px; color: var(--gold); }
.graph-rows i {
  display: block; height: 4px; border-radius: 2px;
  background: rgb(var(--ink-rgb) / 0.08);
  margin-bottom: 7px;
}
.graph-rows i:nth-child(2) { width: 78%; }
.graph-rows i:nth-child(3) { width: 58%; }